Commit 5eb5aa36 authored by 周俊涛(东信)'s avatar 周俊涛(东信)

Merge branch 'master' of…

parents 17766240 34914a27
......@@ -60,6 +60,37 @@
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
},
{
"path": "pages/cart/ConfirmOrder",
"style": {
"navigationBarTitleText": "确认订单",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
},
{
"path": "pages/RuralTravel/RuralTravel",
"style": {
"navigationBarTitleText": "乡村旅居"
}
},
{
"path": "pages/reviewDetails/reviewDetails",
"style": {
"navigationBarTitleText": "点评详情",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
},
{
"path": "pages/reviewDetails/scenicSpotDetails",
"style": {
"navigationBarTitleText": "景点详情",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
}
],
"globalStyle": {
......
<template>
<view>
<view class="container">
<OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
<view class="bac-img">
<img class="bac" src="/static/rural/bacImg.png" style="width: 750rpx; height: 440rpx" />
</view>
<!-- 热门-->
<view style="display: flex; flex-direction: row">
<view class="left-offer">
<text class="left-title">特价专区</text>
<img
class="special-icon"
src="/static/rural/specialOffer.png"
style="width: 29rpx; height: 25rpx"
/>
<img class="spe-img" src="/static/rural/img7.png" style="width: 306rpx; height: 204rpx" />
</view>
<view class="right-offer">
<text class="left-title">日游直播</text>
<img
class="special-icon"
src="/static/rural/dayTOur.png"
style="width: 32rpx; height: 32rpx"
/>
<img class="spe-img" src="/static/rural/img5.png" style="width: 306rpx; height: 204rpx" />
</view>
</view>
<view class="hot-way">
<view class="hot-title">热门路线</view>
<view class="title-des">/ 玩转当地超值体验</view>
<scroll-view
class="scroll-x"
show-scrollbar="false"
scroll-x
:scroll-with-animation="true"
@scroll="scroll"
>
<view class="foodCard" v-for="(item, index) in 5" :key="index">
<!-- <img-->
<!-- class="img-icon"-->
<!-- src="/static/rural/icon.png"-->
<!-- style="width: 118rpx; height: 32rpx"-->
<!-- />-->
<image class="test5" src="/static/rural/img4.png" mode="widthFix" />
</view>
</scroll-view>
<!-- 列表-->
<view class="bootom">
<view class="bootom-top">
<view class="option" @tap="locationFiltering(0)">
<text :class="{ rotate: rotate }">智能排序</text>
<wd-icon
:class="{ rotate: rotate }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
</view>
<view class="bootom-top">
<view class="option" @tap="locationFiltering(1)">
<text :class="{ rotate: rotate2 }">出发日期</text>
<wd-icon
:class="{ rotate: rotate2 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
</view>
<view class="bootom-top">
<view class="option" @tap="locationFiltering(2)">
<text :class="{ rotate: rotate3 }">景点</text>
<wd-icon
:class="{ rotate: rotate3 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
</view>
<view class="bootom-top">
<view class="option" @tap="locationFiltering(3)">
<text :class="{ rotate: rotate4 }">筛选</text>
<wd-icon
:class="{ rotate: rotate4 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
</view>
</view>
<view class="list-card">
<view class="card-detail" v-for="(item, index) in cardList" :key="index">
<img class="card-img" :src="item.img" style="width: 248rpx; height: 240rpx" />
<view class="detail-text">
<text class="detail-title">{{ item.title }}</text>
<text class="give">{{ item.give }}</text>
<view class="tag">
<wd-tag
bg-color="#EEEEEE"
round
v-for="(tag, tagIndex) in item.tag"
:key="tagIndex"
>
{{ tag }}
</wd-tag>
</view>
<view class="detail-score">
<text class="score">{{ item.score }}</text>
<text class="num">月销{{ item.num }}</text>
</view>
<view class="venue">
<text class="place">{{ item.place }}</text>
<text class="price">{{ item.price }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import OtherSearch from '../../components/index/OtherSearch.vue';
const rotate = ref(false);
const rotate2 = ref(false);
const rotate3 = ref(false);
const rotate4 = ref(false);
const cardList = ref([
{
img: '/static/rural/img2.png',
title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
give: '赠价值59元特产伴手礼一份',
tag: ['可定明日', '无购物', '含保险'],
score: '4.9',
num: '2000',
place: '云岩出发',
price: '299.00',
},
{
img: '/static/rural/img2.png',
title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
give: '赠价值59元特产伴手礼一份',
tag: ['可定明日', '无购物', '含保险'],
score: '4.9',
num: '2000',
place: '云岩出发',
price: '299.00',
},
{
img: '/static/rural/img2.png',
title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
give: '赠价值59元特产伴手礼一份',
tag: ['可定明日', '无购物', '含保险'],
score: '4.9',
num: '2000',
place: '云岩出发',
price: '299.00',
},
{
img: '/static/rural/img2.png',
title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
give: '赠价值59元特产伴手礼一份',
tag: ['可定明日', '无购物', '含保险'],
score: '4.9',
num: '2000',
place: '云岩出发',
price: '299.00',
},
]);
const locationFiltering = (index) => {
switch (index) {
case 0:
rotate.value = !rotate.value;
rotate2.value = false;
rotate3.value = false;
rotate4.value = false;
break;
case 1:
rotate2.value = !rotate2.value;
rotate.value = false;
rotate3.value = false;
rotate4.value = false;
break;
case 2:
rotate3.value = !rotate3.value;
rotate.value = false;
rotate2.value = false;
rotate4.value = false;
break;
case 3:
rotate4.value = !rotate4.value;
rotate.value = false;
rotate2.value = false;
rotate3.value = false;
break;
}
};
</script>
<style lang="scss" scoped>
page {
background-color: #eaf9f1;
}
.container {
position: relative;
left: 0rpx;
top: 0rpx;
width: 750rpx;
height: 440rpx;
}
.bac {
display: flex;
margin-top: -80rpx;
}
.left-offer {
width: 346rpx;
height: 292rpx;
border-radius: 16rpx;
background: linear-gradient(179deg, #f9e3b1 0%, #ffffff 28%);
margin-left: 20rpx;
margin-top: 20rpx;
}
.right-offer {
width: 346rpx;
height: 292rpx;
border-radius: 16rpx;
background: linear-gradient(175deg, #ffd5c4 1%, #ffffff 28%);
margin-left: 20rpx;
margin-top: 20rpx;
}
.left-title {
width: 128rpx;
height: 28rpx;
font-family: Source Han Sans;
font-size: 32rpx;
font-weight: 500;
line-height: 28rpx;
text-align: center;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
margin-left: 20rpx;
margin-top: 20rpx;
position: absolute;
}
.special-icon {
margin-left: 150rpx;
margin-top: 20rpx;
}
.spe-img {
margin-top: 14rpx;
margin-left: 20rpx;
}
.hot-way {
width: 710rpx;
border-radius: 16rpx;
background: #ffffff;
margin-top: 20rpx;
margin-left: 20rpx;
}
.scroll-x {
width: 100%;
border-radius: 0rpx 0rpx 0rpx 0rpx;
overflow: hidden;
padding-top: 26rpx;
white-space: nowrap;
width: 100%;
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
background-color: transparent;
.foodCard {
width: 270rpx;
height: 168rpx;
border-radius: 16rpx;
margin-left: 20rpx;
display: inline-block;
box-sizing: border-box;
overflow: hidden;
.test5 {
width: 100%;
}
}
}
.hot-title,
.title-des {
width: 336rpx;
height: 28rpx;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
font-weight: 400;
}
.hot-title {
font-size: 32rpx;
line-height: 28rpx;
letter-spacing: 0em;
color: #3d3d3d;
padding-top: 20rpx;
padding-left: 20rpx;
}
.title-des {
font-size: 22rpx;
color: #767676;
margin-top: -24rpx;
margin-left: 160rpx;
}
.bootom {
display: flex;
flex-direction: row;
justify-content: space-around;
border-radius: 6rpx;
background: #ffffff;
position: relative;
margin-top: 20rpx;
.bootom-top {
display: flex;
align-items: center;
padding: 0 20rpx;
justify-content: space-between;
.option {
text {
font-size: 24rpx;
color: #343434;
}
.red {
color: #fa5151;
}
.icon {
color: #d8d8d8;
transform: rotate(-180deg);
transition: all 0.3s linear;
}
.rotate {
transform: rotate(0deg);
transition: all 0.3s linear;
color: #fa5151;
}
}
.light {
color: #ff7c00;
background: #ffdcbb;
}
}
}
.list-card {
width: 710rpx;
}
.card-img {
margin-top: 20rpx;
margin-left: 40rpx;
}
.card-detail {
display: flex;
}
.detail-text {
margin-top: 20rpx;
margin-left: 20rpx;
display: flex;
flex-direction: column;
width: 380rpx;
}
.detail-title,
.give,
.score,
.num,
.place,
.price {
font-family: Source Han Sans;
line-height: normal;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
}
.detail-title {
font-size: 28rpx;
font-weight: 500;
letter-spacing: 0em;
color: #3d3d3d;
}
.give {
font-size: 22rpx;
font-weight: normal;
line-height: 30rpx;
color: #666666;
}
.tag .wd-tag {
margin-right: 10px;
margin-bottom: 5px;
}
.score,
.num,
.place {
font-size: 24rpx;
font-weight: 500;
line-height: 28rpx;
color: #0974f5;
}
.price {
font-size: 28rpx;
font-weight: bold;
line-height: 28rpx;
color: #fa5151;
}
.venue {
display: flex;
justify-content: space-between;
}
.score {
margin-right: 40rpx;
}
::v-deep .wd-tag__text {
font-size: 20rpx;
margin-top: 4rpx;
}
.tag {
margin-top: 10rpx;
width: 400rpx;
}
</style>
......@@ -25,7 +25,7 @@
<view class="trade-name">杨家黄焖鸡</view>
<view class="commordity-content">
<view class="commordity-details">
<img class="commodity-picture" src="/src/static/assets/shangpin.png" alt="" />
<img class="commodity-picture" src="/src/static/assets/img1.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭(土豆+生菜)</view>
<view class="price-information">
<text class="price-symbol"></text>
......@@ -35,7 +35,7 @@
<view class="label">约1000克</view>
</view>
<view class="commordity-details">
<img class="commodity-picture" src="/src/static/assets/shangpin.png" alt="" />
<img class="commodity-picture" src="/src/static/assets/img1.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭(土豆+生菜)</view>
<view class="price-information">
<text class="price-symbol"></text>
......@@ -392,12 +392,13 @@ page {
font-size: 32rpx;
}
.submit-order-view {
width: 710rpx;
width: 750rpx;
height: 131rpx;
padding-left: 18rpx;
padding-top: 21rpx;
margin-top: 15%;
background: #ffffff;
margin-left: -20rpx;
}
.total-view {
width: 142rpx;
......
......@@ -50,7 +50,7 @@
<span>{{ totalPrice }}</span>
</div>
</div>
<div class="submit">去结算({{ totalPrice }})</div>
<div class="submit" @tap="toSettle">去结算({{ totalPrice }})</div>
</div>
</div>
</template>
......@@ -140,6 +140,12 @@ const changeCheckedAll = () => {
changeShopChecked(v);
});
};
function toSettle() {
// TODO: 跳转到结算页面
xma.navigateTo({
url: '/pages/cart/ConfirmOrder',
});
}
</script>
<style lang="scss" scoped>
......
......@@ -91,6 +91,10 @@
</view>
</view>
</view>
<!-- 购物车悬浮按钮 -->
<view class="cart-floating">
<img class="cart" @tap="toCart" src="/static/presale/cart.png" />
</view>
</view>
</template>
......@@ -142,6 +146,12 @@ function toDetail() {
url: '/pages/detail/detail',
});
}
function toCart() {
// TODO: 跳转到购物车
xma.navigateTo({
url: '/pages/cart/cart',
});
}
</script>
<style lang="scss" scoped>
......@@ -319,4 +329,21 @@ page {
margin-top: -15px;
display: block;
}
.cart-floating {
position: fixed;
right: 20rpx;
bottom: 100rpx;
width: 80rpx;
height: 80rpx;
z-index: 99;
background-color: #ffffff;
border-radius: 50%;
}
.cart {
position: relative;
top: 20rpx;
left: 16rpx;
width: 48rpx;
height: 46rpx;
}
</style>
......@@ -17,7 +17,7 @@
<img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">认养农业</view>
</view>
<view class="borderClass">
<view class="borderClass" @tap="toRuralTravel">
<img src="/static/assets/rural.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">乡村旅居</view>
</view>
......@@ -108,7 +108,7 @@
</view>
</view>
</view>
<view class="product-page" @tap="toDetail" v-for="(item, index) in list" :key="index">
<view class="product-page" v-for="(item, index) in list" :key="index">
<view>
<view class="page-title">{{ item.text }}</view>
<img :src="item.img" class="main-img" />
......@@ -157,9 +157,15 @@ function toBuilding() {
url: '/pages/index/building',
});
}
function toRuralTravel() {
// TODO: 跳转到乡村旅居
xma.navigateTo({
url: '/pages/RuralTravel/RuralTravel',
});
}
// 跳转详情页
function toDetail() {
// TODO: 跳转到筑农严选
// TODO: 跳转到详情页
xma.navigateTo({
url: '/pages/detail/detail',
});
......
......@@ -135,7 +135,7 @@
</view>
<!-- 购物车悬浮按钮 -->
<view class="cart-floating">
<img @tap="toCart" src="/static/presale/cart.png" style="width: 48rpx; height: 46rpx" />
<img class="cart" @tap="toCart" src="/static/presale/cart.png" />
</view>
</template>
......@@ -145,7 +145,7 @@ import { ref } from 'vue';
const current = ref(0);
const light = ref(0);
const sortList = ref([
{ img: '/static/presale/img1.png', price: '25', text: '应季好物' },
{ img: '/static/presale/bacImg.png', price: '25', text: '应季好物' },
{ img: '/static/presale/img2.png', price: '25', text: '猪肉蛋禽' },
{ img: '/static/presale/img3.png', price: '25', text: '米面粮油' },
{ img: '/static/presale/img4.png', price: '25', text: '预选蔬菜' },
......@@ -481,5 +481,14 @@ page {
width: 80rpx;
height: 80rpx;
z-index: 99;
background-color: #ffffff;
border-radius: 50%;
}
.cart {
position: relative;
top: 20rpx;
left: 16rpx;
width: 48rpx;
height: 46rpx;
}
</style>
<template>
<!-- 点评详情页面 -->
<view class="review-details-pages">
<view class="swiper-list">
<wd-swiper
:list="swiperList"
direction="horizontal"
indicatorPosition="right"
autoplay
height="456rpx"
v-model:current="current"
@click="handleClick"
@change="onChange"
>
<template #indicator="{ current, total }">
<view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">
{{ current + 1 }}/{{ total }}
</view>
</template>
</wd-swiper>
</view>
<view class="revuew-content">
<view class="user-info">
<view class="info-content">
<image src="@/static/reviewDetails/avatar.png" mode="aspectFill"></image>
<view class="text-box">
<text class="user-name">不爱吃鱼的小猫咪</text>
<text class="fb-time">2024-08-03</text>
</view>
</view>
<view>
<text class="score">4.9</text>
<text class="score-unit">/5分</text>
</view>
</view>
<text style="margin-top: 12rpx; font-size: 14 * 2rpx; color: #3d3d3d">
跟团游行程紧凑有序,充分利用了时间,让游客能够在有限的时间内充分游览黄果树的主要景点,如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情,对景区有深入的了解,能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答问题。
跟团游行程紧凑有序,充分利用了时间,让游客能够在有限的时间内充分游览黄果树的主要景点,如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情,对景区有深入的了解,能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答问题。
</text>
</view>
<view class="scenic-spot">
<image src="@/static/reviewDetails/fj.png" mode="aspectFill"></image>
<view class="scenic-area-details">
<text class="scenic-name">红枫湖+青岩古镇+云漫湖</text>
<text class="scenic-type">自然风景</text>
<view class="tag-list">
<text class="tag">无购物</text>
<text class="tag">无购物</text>
</view>
</view>
<wd-icon class="icon" color="#ABAAAA" name="arrow-right" size="22px"></wd-icon>
</view>
<view class="dz-btn">
<wd-icon color="#767676" name="thumb-up" size="22px"></wd-icon>
<text>12</text>
</view>
</view>
</template>
<script setup>
const current = ref(0);
onMounted(() => {
xma.getSystemInfo({
success: function (res) {
console.log(res, '11111111');
},
});
});
const swiperList = ref([
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
]);
function handleClick(e) {}
function onChange(e) {
console.log(e);
}
</script>
<style lang="scss" scoped>
page {
background: #ffffff;
}
.review-details-pages {
display: flex;
flex-direction: column;
align-items: center;
width: 750rpx;
.swiper-list {
width: 375 * 2rpx;
height: 228 * 2rpx;
:deep(.wd-swiper__track) {
border-radius: 0;
}
.custom-indicator {
padding: 0 12rpx;
height: 48rpx;
line-height: 48rpx;
border-radius: 45%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-size: 24rpx;
}
}
.revuew-content {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
padding: 40rpx 20rpx;
box-sizing: border-box;
.user-info {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.info-content {
display: flex;
align-items: center;
image {
width: 36 * 2rpx;
height: 36 * 2rpx;
border-radius: 50%;
}
.text-box {
display: flex;
flex-direction: column;
margin-left: 20rpx;
.user-name {
font-size: 14 * 2rpx;
color: #3d3d3d;
}
.fb-time {
font-size: 11 * 2rpx;
/* 小文本 */
color: #abaaaa;
margin-top: 10rpx;
}
}
.score {
font-size: 14 * 2rpx;
/* 4.9 */
color: #0974f5;
}
.score-unit {
font-size: 12 * 2rpx;
color: #abaaaa;
}
}
}
}
.scenic-spot {
width: 355 * 2rpx;
box-sizing: border-box;
padding: 20rpx 36rpx 20rpx 10rpx;
background: #f3f3f3;
border-radius: 8 * 2rpx;
display: flex;
align-items: center;
image {
width: 102 * 2rpx;
height: 72 * 2rpx;
border-radius: 4 * 2rpx;
}
.scenic-area-details {
display: flex;
flex-direction: column;
margin-left: 20rpx;
.cenic-name {
font-size: 14 * 2rpx;
color: #3d3d3d;
}
.scenic-type {
font-size: 12 * 2rpx;
/* 菜头标题文本 */
color: #3d3d3d;
}
.tag-list {
display: flex;
flex-wrap: wrap;
.tag {
box-sizing: border-box;
padding: 10rpx 16rpx;
border-radius: 30rpx;
border: 2rpx solid #d8d8d8;
color: #3d3d3d;
font-size: 16rpx;
margin-top: 10rpx;
margin-left: 20rpx;
}
}
}
.icon {
margin-left: auto;
}
}
.dz-btn {
display: flex;
align-items: center;
box-sizing: border-box;
padding: 28rpx 100rpx;
border: 2rpx solid #abaaaa;
margin-top: 46rpx;
border-radius: 68rpx;
text {
color: #767676;
font-size: 28rpx;
margin-left: 10rpx;
}
}
}
</style>
<template>
<!-- 点评详情页面 -->
<view class="review-details-pages">
<view class="list">
<view class="item" v-for="i in 10" :key="i">
<image mode="aspectFill" src="@/static/reviewDetails/fj.png"></image>
<view class="info-box">
<text>红枫湖景区</text>
<text>自然风景</text>
<text class="t-2">4.5分</text>
<text class="t-2">门票费用已包含</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
onMounted(() => {});
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
}
.review-details-pages {
display: flex;
flex-direction: column;
align-items: center;
width: 750rpx;
.list {
width: 355 * 2rpx;
.item {
margin-top: 10rpx;
box-sizing: border-box;
padding: 20rpx;
display: flex;
background: #fff;
border-radius: 16rpx;
align-items: center;
image {
width: 102 * 2rpx;
height: 72 * 2rpx;
border-radius: 8rpx;
}
.info-box {
display: flex;
flex-direction: column;
margin-left: 40rpx;
text {
font-size: 12 * 2rpx;
margin-top: 8rpx;
/* 菜头标题文本 */
color: #3d3d3d;
}
.t-2 {
font-size: 12 * 2rpx;
color: rgba(9, 116, 245, 1);
}
}
}
}
}
</style>
......@@ -41,13 +41,17 @@
</div>
</div>
</div>
<div class="shopping-cart">
<div>
<img src="/src/static/shop/shoppingCart.png" alt="" />
购物车
</div>
<img src="/src/static/shop/doubleArrow.png" alt="" />
<!-- 购物车悬浮按钮 -->
<div class="cart-floating">
<img class="cart" @tap="toCart" src="/static/presale/cart.png" />
</div>
<!-- <div class="shopping-cart">-->
<!-- <div>-->
<!-- <img src="/src/static/shop/shoppingCart.png" alt="" />-->
<!-- 购物车-->
<!-- </div>-->
<!-- <img src="/src/static/shop/doubleArrow.png" alt="" />-->
<!-- </div>-->
</div>
</template>
......@@ -80,6 +84,12 @@ const navList = ref([
const acitveNav = ref(1);
const activeFilter = ref(false);
function toCart() {
// TODO: 跳转到购物车
xma.navigateTo({
url: '/pages/cart/cart',
});
}
</script>
<style lang="scss" scoped>
......@@ -236,4 +246,22 @@ uni-page-body {
}
}
}
.cart-floating {
position: fixed;
bottom: 10%;
width: 80rpx;
height: 80rpx;
z-index: 99;
background-color: #ffffff;
border-radius: 50%;
margin-left: 10px;
}
.cart {
position: relative;
top: 20rpx;
left: 16rpx;
width: 48rpx;
height: 46rpx;
}
</style>
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment