Skip to content

G
groupPurchase-miniapp
Commit 7b0e8b71 authored by 陈宗胤（贵阳日报）'s avatar 陈宗胤（贵阳日报）
Browse files
Options

1

parent 88382beb
Hide whitespace changes
Inline Side-by-side
Showing with 5203 additions and 0 deletions
src/Components/assistingAgriculture/index/DepartureDate.vue 0 → 100644
View file @ 7b0e8b71
<template>
<view class="sort" :style="{ width: width }">
<ul class="ul">
<li
v-for="(item, index) in items"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index)"
>
{{ item }}
</li>
</ul>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
const selectedItem = ref(null);
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const selectItem = (selectItem) => {
selectedItem.value = selectItem;
};
</script>
<style lang="scss" scoped>
.sort {
position: absolute;
top: 100%;
// width: 100%;
// min-height: 212rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto;
z-index: 99;
display: flex;
padding-bottom: 20rpx;
box-sizing: border-box;
.ul {
padding-left: 60rpx;
li {
list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx;
}
.active {
color: #fa5151;
}
}
}
</style>
src/Components/assistingAgriculture/index/ScenicSpots.vue 0 → 100644
View file @ 7b0e8b71
<template>
<view class="sort" :style="{ width: width }">
<ul class="ul">
<li
v-for="(item, index) in items"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index)"
>
{{ item }}
</li>
</ul>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
const selectedItem = ref(null);
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const selectItem = (selectItem) => {
selectedItem.value = selectItem;
};
</script>
<style lang="scss" scoped>
.sort {
position: absolute;
top: 100%;
// width: 100%;
// min-height: 212rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto;
z-index: 99;
display: flex;
padding-bottom: 20rpx;
box-sizing: border-box;
.ul {
padding-left: 60rpx;
li {
list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx;
}
.active {
color: #fa5151;
}
}
}
</style>
src/Components/assistingAgriculture/index/Screen.vue 0 → 100644
View file @ 7b0e8b71
<template>
<view class="sort" :style="{ width: width }">
<ul class="ul">
<li
v-for="(item, index) in items"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index)"
>
{{ item }}
</li>
</ul>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
const selectedItem = ref(null);
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const selectItem = (selectItem) => {
selectedItem.value = selectItem;
};
</script>
<style lang="scss" scoped>
.sort {
position: absolute;
top: 100%;
// width: 100%;
// min-height: 212rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto;
z-index: 99;
display: flex;
padding-bottom: 20rpx;
box-sizing: border-box;
.ul {
padding-left: 60rpx;
li {
list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx;
}
.active {
color: #fa5151;
}
}
}
</style>
src/Components/assistingAgriculture/index/Search.vue 0 → 100644
View file @ 7b0e8b71
<template>
<view class="search">
<img class="icon" :src="iconSrc" @tap="back" />
<!-- <wd-icon name="thin-arrow-left" class="icon" @tap="back"></wd-icon>-->
<slot></slot>
<view class="searchBox">
<image
class="magnifyingGlass"
src="../../static/assets/magnifyingGlass.png"
mode="aspectFit|aspectFill|widthFix"
/>
<input
type="text"
:value="test"
class="text"
:placeholder="placeholderText"
placeholder-style="font-size:16rpx;"
/>
</view>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
iconSrc: {
type: String,
default: '',
},
placeholderText: {
type: String,
default: '',
},
});
// 返回上一级
function back() {
xma.navigateBack({
delta: 1,
});
}
</script>
<style lang="scss" scoped>
.search {
position: absolute;
width: 710rpx;
height: 80rpx;
// background: rgba(255, 255, 255, 0.8);
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 0.8;
margin: 0 auto;
display: flex;
align-items: center;
padding-left: 20rpx;
padding-top: 75rpx;
box-sizing: border-box;
.arrow {
width: 15rpx;
height: 24rpx;
}
.searchBox {
opacity: 1;
width: 400rpx;
height: 56rpx;
background: #f4f4f4;
border-radius: 28rpx 28rpx 28rpx 28rpx;
display: flex;
align-items: center;
padding-left: 20rpx;
margin-left: 20rpx;
.magnifyingGlass {
width: 26rpx;
height: 26rpx;
}
.text {
margin-left: 10rpx;
font-size: 24rpx;
}
}
}
</style>
src/Components/assistingAgriculture/index/Sort.vue 0 → 100644
View file @ 7b0e8b71
<template>
<view class="sort" :style="{ width: width }">
<ul class="ul">
<li
v-for="(item, index) in items"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index)"
>
{{ item }}
</li>
</ul>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
const selectedItem = ref(null);
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const selectItem = (selectItem) => {
selectedItem.value = selectItem;
};
</script>
<style lang="scss" scoped>
.sort {
position: absolute;
top: 100%;
// width: 100%;
// min-height: 212rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto;
z-index: 99;
display: flex;
padding-bottom: 20rpx;
box-sizing: border-box;
.ul {
padding-left: 60rpx;
li {
list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx;
}
.active {
color: #fa5151;
}
}
}
</style>
src/pages.json
View file @ 7b0e8b71
...@@ -126,6 +126,98 @@ ...@@ -126,6 +126,98 @@
"style": { "style": {
"navigationBarTitleText": "售后详情" "navigationBarTitleText": "售后详情"
} }
},
{
"path": "pages/assistingAgriculture/index/index",
"style": {
"navigationBarTitleText": "小程序平台"
}
},
{
"path": "pages/assistingAgriculture/index/building",
"style": {
"navigationBarTitleText": "筑农严选",
"navigationBarBackgroundColor": "#ffffff"
}
},
{
"path": "pages/assistingAgriculture/shop/index",
"style": {
"navigationBarTitleText": "商店首页",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
},
{
"path": "pages/assistingAgriculture/index/presale",
"style": {
"navigationBarTitleText": "预售"
}
},
{
"path": "pages/assistingAgriculture/detail/detail",
"style": {
"navigationBarTitleText": "详情页"
}
},
{
"path": "pages/assistingAgriculture/commentList/index",
"style": {
"navigationBarTitleText": "评价列表"
}
},
{
"path": "pages/assistingAgriculture/album/index",
"style": {
"navigationBarTitleText": "用户相册",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
},
{
"path": "pages/assistingAgriculture/cart/cart",
"style": {
"navigationBarTitleText": "购物车",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
},
{
"path": "pages/assistingAgriculture/cart/ConfirmOrder",
"style": {
"navigationBarTitleText": "确认订单",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
},
{
"path": "pages/assistingAgriculture/RuralTravel/RuralTravel",
"style": {
"navigationBarTitleText": "乡村旅居"
}
},
{
"path": "pages/assistingAgriculture/reviewDetails/reviewDetails",
"style": {
"navigationBarTitleText": "点评详情",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
},
{
"path": "pages/assistingAgriculture/reviewDetails/scenicSpotDetails",
"style": {
"navigationBarTitleText": "景点详情",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
},
{
"path": "pages/assistingAgriculture/RouteDetails/RouteDetails",
"style": {
"navigationBarTitleText": "线路详情"
}
} }
], ],
"globalStyle": { "globalStyle": {
......
src/pages/assistingAgriculture/RouteDetails/RouteDetails.vue 0 → 100644
View file @ 7b0e8b71
<template>
<div class="route-details">
<scroll-view class="container" scroll-y>
<!-- 乱播 -->
<div class="banner">
<wd-swiper
:list="swiperList"
autoplay
:indicator="{ type: 'fraction' }"
indicatorPosition="bottom-right"
></wd-swiper>
</div>
<div style="padding: 0 20rpx">
<!-- 价格 -->
<div class="price-info">
<div class="price flex-align-center">
<p class="t1">¥299.00起</p>
<p class="t2">月销2K+份</p>
</div>
<div class="name">红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游</div>
<div class="tags flex-align-center">
<p>无购物</p>
<p>无自费</p>
</div>
</div>
<!-- 保障 -->
<div class="guarantee">
<div>
<p class="label">预定</p>
<div class="flex-between list">
<div>
<wd-icon name="check-circle"></wd-icon>
立即确认
</div>
<div>
<wd-icon name="info-circle"></wd-icon>
有条件退
</div>
<div>
<wd-icon name="check-circle"></wd-icon>
23:00前可订明日
</div>
</div>
</div>
<div>
<p class="label">保障</p>
<div>7*12服务保障 . 承诺不加价</div>
</div>
</div>
<!-- 评论 -->
<div class="comment-wrap">
<div class="comment">
<div class="top flex-between">
<div class="title flex-align-center">
<p class="t1">点评</p>
<img src="/src/static/comment/emoji.png" />
<p class="t2">
4.9
<span>/5分</span>
</p>
</div>
<div class="link">查看全部(526) ></div>
</div>
<div class="tags">
<p>景色优美 （153）</p>
<p>物超所值（44）</p>
<p>线路合理（44）</p>
</div>
<div class="user">
<div class="user-name flex-align-center">
<img src="/src/static/comment/2.png" />
<p>不爱吃鱼的小猫咪</p>
</div>
<div class="content">这里是评价文案这里是评价文案这里是评价文案这里是评价文案</div>
</div>
</div>
<div class="album">
<div class="top flex-between">
<div class="title">用户相册</div>
<div class="link">查看全部(526) ></div>
</div>
<div class="img-list">
<wd-img
v-for="v in 5"
:key="v"
:src="`/src/static/comment/${v}.png`"
enable-preview
/>
</div>
</div>
</div>
<p class="choose-package-text">选择套餐·日期</p>
<!-- 套餐 -->
<div class="package-wrap">
<p class="title">选择套餐</p>
<div class="package-list">
<div class="package-item" v-for="v in 2" :key="v">
<div class="price flex-between">
<p class="name">套餐1</p>
<p>¥299.00起</p>
</div>
<div class="content">
<div>
<p>团</p>
<p>最多团25人团</p>
</div>
<div>
<p>车</p>
<p>大巴2+1坐席(不包返)</p>
</div>
<div>
<p>景</p>
<p>4个景点</p>
</div>
<div>
<p>吃</p>
<p>含1个午餐</p>
</div>
</div>
</div>
</div>
<div class="selected">
<p>已选</p>
<p class="t1">
2+1豪华大巴 + 红枫湖 + 青岩古镇 + 云漫湖+云顶高坡 + 单程票 + 成人门票 + 午餐 + 晚餐 +
导游服务
</p>
<p>贵阳触发</p>
</div>
</div>
<!-- 日期 -->
<div class="date-wrap">
<div class="date-title">选择日期</div>
<div class="date-list flex-between">
<div class="list">
<div class="item" v-for="v in 4" :key="v">
<p class="week">星期一</p>
<p class="date">02-30</p>
<p class="price">¥299.00</p>
</div>
</div>
<div class="more">更多></div>
</div>
</div>
</div>
</scroll-view>
<div class="footer">123</div>
</div>
</template>
<script setup>
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',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
]);
</script>
<style lang="scss" scoped>
uni-page-body {
height: 100%;
background-color: #eaf9f1;
}
.route-details {
height: 100%;
display: flex;
flex-direction: column;
.container {
flex-grow: 1;
height: 69px;
.banner {
:deep(.wd-swiper) {
width: 375px;
height: 220px;
uni-swiper {
width: 100%;
height: 100%;
}
}
}
.price-info {
background-color: #fff;
border-radius: 8px;
padding: 10px;
margin-top: 10px;
.price {
.t1 {
color: #fa5151;
font-size: 18px;
}
.t2 {
margin-left: 10px;
font-size: 12px;
color: #767676;
}
}
.name {
font-size: 14px;
color: #3d3d3d;
margin: 10px 0 15px;
font-weight: 500;
}
.tags {
gap: 10px;
p {
padding: 5px;
font-size: 8px;
font-weight: 500;
color: #3d3d3d;
border: 1px solid #d8d8d8;
border-radius: 150px;
}
}
}
.guarantee {
background: linear-gradient(180deg, #feeeee 0%, #ffffff 100%);
padding: 10px;
border-radius: 8px;
margin-top: 5px;
& > div {
display: flex;
font-size: 11px;
line-height: 18px;
font-weight: 500;
color: #767676;
&:first-child {
margin-bottom: 10px;
}
.label {
color: #ff494e;
margin-right: 25px;
}
.list {
gap: 15px;
.wd-icon {
color: #ff494e;
margin-right: 2px;
font-size: 14px;
}
}
}
}
.comment-wrap {
padding: 10px;
margin-top: 5px;
border-radius: 8px;
background: #fff;
.comment {
.title {
gap: 10px;
.t1 {
font-size: 14px;
font-weight: 500;
color: #3d3d3d;
}
.t2 {
font-size: 12px;
color: #0974f5;
span {
font-size: 8px;
color: #abaaaa;
}
}
img {
width: 12px;
height: 12px;
}
}
.top {
.link {
font-size: 12px;
font-weight: 500;
color: #0974f5;
}
}
.tags {
margin-top: 10px;
display: flex;
gap: 20px;
p {
border-radius: 150px;
padding: 5px 8px;
color: #3d3d3d;
font-size: 8px;
font-weight: 500;
line-height: 8px;
background: rgba(9, 116, 245, 0.1);
}
}
.user {
margin-top: 10px;
font-size: 14px;
font-weight: 500;
color: #3d3d3d;
line-height: normal;
.user-name {
img {
border-radius: 4px;
width: 24px;
height: 24px;
margin-right: 8px;
}
}
}
.content {
margin-top: 5px;
}
}
.album {
margin-top: 22px;
.top {
.title {
font-size: 14px;
color: #3d3d3d;
}
.link {
font-size: 12px;
color: #0974f5;
}
}
.img-list {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
.wd-img {
aspect-ratio: 1;
}
}
}
}
.choose-package-text {
font-size: 14px;
font-weight: 500;
line-height: 14px;
color: #fa5151;
margin-top: 20px;
}
.package-wrap {
margin-top: 10px;
padding: 10px;
border: 8px;
background-color: #fff;
.title {
color: #3d3d3d;
font-size: 14px;
font-weight: 500;
line-height: 14px;
}
.package-list {
margin-top: 10px;
display: grid;
gap: 20px;
grid-template-columns: 1fr 1fr;
.package-item {
border-radius: 8px;
opacity: 1;
padding: 10px;
background: linear-gradient(180deg, #feeeee 0%, #ffffff 100%);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
.price {
font-size: 12px;
font-weight: bold;
line-height: 14px;
color: #fa5151;
.name {
color: #3d3d3d;
}
}
.content {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
div {
display: flex;
gap: 20px;
font-size: 11px;
font-weight: 500;
line-height: 14px;
color: #3d3d3d;
}
}
}
}
.selected {
margin-top: 10px;
color: #767676;
font-size: 11px;
line-height: normal;
.t1 {
padding: 10px;
}
}
}
.date-wrap {
margin-top: 5px;
padding: 10px;
border-radius: 8px;
background-color: #fff;
.date-title {
color: #3d3d3d;
font-size: 14px;
font-weight: 500;
line-height: 14px;
}
.date-list {
.list {
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-right: 6px;
.item {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6px 0;
background: #f6f7f7;
border-radius: 8px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
}
}
}
}
}
</style>
src/pages/assistingAgriculture/RuralTravel/RuralTravel.vue 0 → 100644
View file @ 7b0e8b71
<template>
<view>
<view class="container">
<view class="top">
<Search
background="rgba(255, 255, 255, 0.8)"
backIcon="black"
iconSrc="/static/assets/left.png"
placeholderText="请输入要搜索的关键词"
></Search>
</view>
<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="icons"
></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="icons"
></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="icons"
></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="icons"
></wd-icon>
</view>
</view>
<Sort v-show="rotate" />
<DepartureDate v-show="rotate2" />
<ScenicSpots v-show="rotate3" />
<Screen v-show="rotate4" />
</view>
<view class="list-card">
<view
class="card-detail"
v-for="(item, index) in cardList"
:key="index"
@tap="toRouteDetails"
>
<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 Search from '../../components/index/Search.vue';
import Sort from '../../components/index/Sort.vue';
import DepartureDate from '../../components/index/DepartureDate.vue';
import ScenicSpots from '../../components/index/ScenicSpots.vue';
import Screen from '../../components/index/Screen.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;
}
};
function toRouteDetails() {
// TODO: 跳转到线路详情
xma.navigateTo({
url: '/pages/RouteDetails/RouteDetails',
});
}
</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;
}
.icons {
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;
}
::v-deep .search {
margin-top: 60rpx;
}
::v-deep .icon {
width: 56rpx;
height: 56rpx;
}
</style>
src/pages/assistingAgriculture/album/card.vue 0 → 100644
View file @ 7b0e8b71
<template>
<div class="card">
<div class="img-wrap">
<wd-img v-for="v in 3" :key="v" :src="`/src/static/comment/${v}.png`" enable-preview />
</div>
<div class="text">
跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...
</div>
<div class="user-info flex-between">
<div class="info flex-align-center">
<img src="/src/static/comment/1.png" alt="" />
<p>不爱吃鱼的不爱吃鱼的不爱吃鱼的不爱吃鱼的不爱吃鱼的</p>
</div>
<div class="like">
<wd-icon name="thumb-up"></wd-icon>
12
</div>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.card {
border-radius: 8px;
padding: 10px;
background-color: #fff;
.img-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
.wd-img {
aspect-ratio: 1;
&:first-child {
grid-column: 1/3;
}
}
}
.text {
margin: 10px 0;
font-size: 14px;
font-weight: 500;
line-height: normal;
color: #3d3d3d;
display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
-webkit-box-orient: vertical; /* 垂直排列 */
-webkit-line-clamp: 2; /* 限制显示两行 */
line-clamp: 2;
overflow: hidden; /* 隐藏超出范围的内容 */
text-overflow: ellipsis; /* 使用省略号 */
}
.user-info {
.info {
flex: 1;
img {
width: 24px;
height: 24px;
border-radius: 50%;
}
p {
margin-left: 5px;
margin-right: 10px;
width: 10px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.like {
font-size: 12px;
color: #767676;
.wd-icon {
font-size: 15px;
}
}
}
}
</style>
src/pages/assistingAgriculture/album/index.vue 0 → 100644
View file @ 7b0e8b71
<template>
<div class="album">
<scroll-view class="content" scroll-y>
<div class="filter-box">
<div class="active">全部</div>
<div v-for="(v, i) in filterList" :key="i">{{ v.text }}({{ v.value }})</div>
</div>
<div class="card-wrap">
<card v-for="v in 13" :key="v" />
</div>
</scroll-view>
<div class="back">
<button>返回预订</button>
</div>
</div>
</template>
<script setup>
import card from './card.vue';
const filterList = [
{
text: '家人',
value: 183,
},
{
text: '们',
value: 5,
},
{
text: '谁',
value: 5,
},
{
text: '懂啊',
value: 514,
},
{
text: '其他',
value: 514,
},
{
text: '其他',
value: 514,
},
{
text: '其他',
value: 514,
},
{
text: '其他',
value: 514,
},
{
text: '其他',
value: 514,
},
{
text: '其他',
value: 514,
},
];
</script>
<style lang="scss" scoped>
uni-page-body {
height: 100%;
}
.album {
height: 100%;
display: flex;
flex-direction: column;
background-color: #f3f3f3;
.content {
padding: 10px 5px;
box-sizing: border-box;
flex-grow: 1;
height: 69px;
.filter-box {
display: flex;
background-color: #fff;
padding: 10px;
gap: 10px;
flex-wrap: wrap;
div {
padding: 8px;
color: #3d3d3d;
font-size: 8px;
border-radius: 8px;
background-color: #eeeeee;
}
.active {
color: #fa5151;
background: rgba(250, 81, 81, 0.2);
}
}
.card-wrap {
margin-top: 5px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
}
}
.back {
background-color: #fff;
padding: 20px 0 34px;
box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.12);
button {
width: 345px;
height: 44px;
border-radius: 34px;
background-color: #fa5151;
font-size: 16px;
font-weight: 500;
color: #ffffff;
}
}
</style>
src/pages/assistingAgriculture/cart/ConfirmOrder.vue 0 → 100644
View file @ 7b0e8b71
<template>
<view class="confirm-order">
<view class="information-view">
<view class="order-typers">
<view class="home-delivery-service">送货上门</view>
<view class="hypotenuse-view"></view>
</view>
<view class="location">
<img class="location-pic" src="/src/static/assets/location.png" alt="" />
<view class="location-text">贵州省贵阳市南明区花果园中环广场3号楼 1718</view>
<img class="location-icon" src="/src/static/assets/right-arrow.png" alt="" />
<view class="customer-information">
<view class="customer-name">张三</view>
<view class="customer-phone">187****5632</view>
</view>
</view>
<view class="estimated-time-view">
<text class="send-time">立即送出</text>
<view class="estimated-time">大约13:45送达</view>
<view class="estimated-icon"></view>
<img class="estimated-icon" src="/src/static/assets/right-arrow.png" alt="" />
</view>
</view>
<view class="commordity-information-view">
<view class="trade-name">杨家黄焖鸡</view>
<view class="commordity-content">
<view class="commordity-details">
<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>
<text class="price">28.8</text>
<text class="conmmodity-amount">x1</text>
</view>
<view class="label">约1000克</view>
</view>
<view class="commordity-details">
<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>
<text class="price">28.8</text>
<text class="conmmodity-amount">x1</text>
</view>
<view class="label">约1000克</view>
</view>
</view>
<view class="optional-view">
<view class="discount-coupon-view">
<view class="discount-coupon">卷</view>
<view class="discount-coupon-text">商家优惠券</view>
<view class="discount-coupon-price">￥0</view>
<img class="discount-coupon-icon" src="/src/static/assets/right-arrow.png" alt="" />
</view>
</view>
<view class="freight-view">
<text>运费</text>
<view class="freight-price">￥0</view>
</view>
<view class="remark-view">
<text>备注</text>
<view class="remark">
<textarea
class="content"
placeholder="请输入你的问题"
maxlength="200"
v-model="textInputs"
></textarea>
<view class="current-word">{{ inputLength }}/{{ wordMax }}</view>
</view>
</view>
<view class="total-prices-view">
<view class="discounts">已优惠￥0 &ensp;小计</view>
<view class="total-prices">￥86.4</view>
</view>
</view>
<view class="submit-order-view">
<view class="total-view">
<view class="total">合计:</view>
<view class="total-price-symbol">￥</view>
<view class="total-price">86.4</view>
</view>
<view class="total-discounts">总共优惠&ensp;￥0.00</view>
</view>
<button class="submit-button">提交订单</button>
</view>
</template>
<script setup>
import { ref, computed } from 'vue';
const wordMax = ref(200);
const textInputs = ref('');
const inputLength = computed(() => {
return textInputs.value.length;
});
</script>
<style lang="scss" scoped>
page {
width: 750rpx;
background: #f3f3f3;
}
.confirm-order {
width: 750rpx;
padding: 20rpx;
}
.information-view {
width: 710rpx;
height: 365rpx;
border-radius: 16rpx;
// display: flex;
overflow: hidden;
background: #ffffff;
}
.order-typers {
width: 710rpx;
height: 82rpx;
}
.home-delivery-service {
width: 355rpx;
height: 82rpx;
background: #ffffff;
font-size: 32rpx;
line-height: 82rpx;
text-align: center;
color: #333333;
}
.hypotenuse-view {
width: 355rpx;
height: 82rpx;
background: #ffebeb;
// position: static;
margin-left: 365rpx;
margin-top: -82rpx;
transform: skew(15deg, -0deg);
}
.location {
width: 695rpx;
height: 166rpx;
margin-left: 15rpx;
padding-top: 20rpx;
display: flex;
}
.location-pic {
width: 35rpx;
height: 35rpx;
}
.location-text {
width: 595rpx;
height: 64rpx;
font-size: 32rpx;
line-height: 32rpx;
color: #333333;
}
.location-icon {
width: 32rpx;
height: 32rpx;
margin-left: 25rpx;
margin-top: 5rpx;
}
.customer-information {
width: 400rpx;
height: 60rpx;
margin-top: 70rpx;
margin-left: -650rpx;
display: flex;
}
.customer-name {
width: 56rpx;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
color: #999999;
margin-top: 14rpx;
}
.customer-phone {
width: 250rpx;
height: 28rpx;
font-size: 24rpx;
line-height: 28rpx;
color: #999999;
margin-top: 14rpx;
margin-left: 19rpx;
}
.estimated-time-view {
width: 710rpx;
height: 150rpx;
margin-left: 15rpx;
display: flex;
}
.send-time {
font-size: 28rpx;
line-height: 28rpx;
color: #333333;
margin-top: 30rpx;
}
.estimated-time {
width: 178rpx;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
margin-left: 353rpx;
margin-top: 30rpx;
color: #f12a2a;
}
.estimated-icon {
width: 32rpx;
height: 32rpx;
margin-left: -10rpx;
margin-top: 25rpx;
}
.commordity-information-view {
width: 691rpx;
height: auto;
border-radius: 16rpx;
padding-left: 19rpx;
padding-top: 23rpx;
padding-bottom: 40rpx;
margin-top: 26rpx;
background: #ffffff;
}
.trade-name {
width: 140rpx;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
color: #333333;
}
.commordity-content {
width: 691rpx;
height: auto;
border-top: 1px solid #f2f2f2;
margin-top: 19rpx;
}
.commordity-details {
width: 691rpx;
height: 128rpx;
margin-top: 20rpx;
display: flex;
}
.commodity-picture {
width: 129rpx;
height: 128rpx;
border-radius: 8rpx;
border: 1px solid #f6f6f6;
}
.commodity-name {
width: 407rpx;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
color: #333333;
margin-left: 21rpx;
}
.price-information {
width: 88rpx;
height: 66rpx;
font-size: 32rpx;
line-height: 32rpx;
color: #f12a2a;
margin-left: 38rpx;
display: flex;
}
.price-symbol {
font-weight: 400;
font-size: 24rpx;
}
.price {
font-weight: 400;
font-size: 32rpx;
}
.conmmodity-amount {
font-size: 24rpx;
margin-top: 40rpx;
margin-left: -20rpx;
color: #999999;
}
.label {
width: 125rpx;
height: 40rpx;
border-radius: 8rpx;
background: #f2f2f2;
font-size: 24rpx;
line-height: 40rpx;
text-align: center;
color: #333333;
margin-left: -535rpx;
margin-top: 52rpx;
}
.discount-coupon-view {
width: 691rpx;
height: 24rpx;
margin-top: 62rpx;
display: flex;
}
.discount-coupon {
width: 24rpx;
height: 24rpx;
border-radius: 5rpx;
background: #fc2828;
font-size: 16rpx;
line-height: 24rpx;
text-align: center;
color: #ffffff;
}
.discount-coupon-text {
width: 120rpx;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
margin-left: 10rpx;
}
.discount-coupon-price {
width: 38rpx;
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
margin-left: 450rpx;
}
.discount-coupon-icon {
width: 32rpx;
height: 32rpx;
margin-left: 10rpx;
margin-top: -5rpx;
}
.freight-view {
width: 691rpx;
height: 24rpx;
margin-top: 31rpx;
display: flex;
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
}
.freight-price {
margin-left: 590rpx;
}
.remark-view {
width: 691rpx;
height: 24rpx;
margin-top: 31rpx;
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
}
.remark {
width: 674rpx;
height: 243rpx;
border-radius: 12rpx;
background: #fafafa;
font-size: 24rpx;
line-height: 24rpx;
color: #999999;
margin-top: 20rpx;
}
.content {
width: 640rpx;
height: 180rpx;
font-size: 24rpx;
font-weight: 500;
color: #77818f;
top: 23rpx;
margin-left: 22rpx;
}
.current-word {
width: 120rpx;
height: 50rpx;
line-height: 50rpx;
font-size: 28rpx;
color: gray;
margin-top: 12rpx;
margin-left: 540rpx;
}
.total-prices-view {
width: 691rpx;
height: 32rpx;
margin-top: 310rpx;
display: flex;
line-height: 32rpx;
text-align: center;
}
.discounts {
font-weight: 400;
font-size: 28rpx;
color: #333333;
margin-left: 356rpx;
}
.total-prices {
font-weight: 400;
font-size: 32rpx;
}
.submit-order-view {
width: 750rpx;
height: 131rpx;
padding-left: 18rpx;
padding-top: 21rpx;
margin-top: 15%;
background: #ffffff;
margin-left: -20rpx;
}
.total-view {
width: 142rpx;
height: 32rpx;
line-height: 32rpx;
text-align: center;
display: flex;
}
.total {
font-weight: 400;
font-size: 24rpx;
color: #333333;
}
.total-price-symbol {
font-weight: 400;
font-size: 24rpx;
color: #f12a2a;
}
.total-price {
font-weight: 400;
font-size: 32rpx;
color: #f12a2a;
}
.total-discounts {
width: 200rpx;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
color: #999999;
margin-top: 15rpx;
}
.submit-button {
width: 188rpx;
height: 75rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, #f73f3f 1%, #ec1a1a 98%);
font-size: 28rpx;
line-height: 75rpx;
text-align: center;
color: #ffffff;
margin-left: 520rpx;
margin-top: -120rpx;
}
</style>
src/pages/assistingAgriculture/cart/cart(old).vue 0 → 100644
View file @ 7b0e8b71
<template>
<view class="shopping">
<view class="order-form">
<view class="order-form-view">
<view class="trade-information">
<view class="trade-checkbox"></view>
<view class="store">店铺</view>
<view class="trade-name">杨家黄焖鸡</view>
</view>
<view class="commodity-information">
<view class="commodity-checkbox"></view>
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
<view class="label">约1000克</view>
<view class="price-information">
<text class="price-symbol">￥</text>
<text class="price-integer">28</text>
<text class="price-decimals">.8</text>
</view>
<view class="quantity-commodity">
<view class="anniu-jian">-</view>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view>
<view class="order-form-view">
<view class="trade-information">
<view class="trade-checkbox"></view>
<view class="store">店铺</view>
<view class="trade-name">杨家黄焖鸡</view>
</view>
<view class="commodity-information">
<view class="commodity-checkbox"></view>
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
<view class="label">约1000克</view>
<view class="price-information">
<text class="price-symbol">￥</text>
<text class="price-integer">28</text>
<text class="price-decimals">.8</text>
</view>
<view class="quantity-commodity">
<view class="anniu-jian">-</view>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view>
<view class="commodity-information">
<view class="commodity-checkbox"></view>
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
<view class="label">约1000克</view>
<view class="price-information">
<text class="price-symbol">￥</text>
<text class="price-integer">28</text>
<text class="price-decimals">.8</text>
</view>
<view class="quantity-commodity">
<view class="anniu-jian">-</view>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view>
</view>
<wd-icon name="check-circle-filled" size="22px" style="color: red"></wd-icon>
<view class="final-statement">
<view class="final-statement-checkbox"></view>
<text class="check-all">全选</text>
<view class="total">
合计：
<text class="total-price-symbol">￥</text>
<text class="total-price-integer">28</text>
<text class="total-price-decimals">.8</text>
</view>
<view class="final-price-button">去结算(28.8)</view>
</view>
</template>
<script setup>
const list = [
{
shopName: '杨家黄焖鸡',
type: '店铺',
isChecked: false,
children: [
{
name: '黄焖鸡',
price: '28.8',
count: 1,
tag: '约1000克',
isChecked: false,
},
],
},
];
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
height: 100%;
}
.shopping {
width: 710rpx;
height: auto;
// overflow: hidden;
}
.order-form {
width: 750rpx;
height: auto;
border-radius: 16rpx;
padding: 20rpx;
}
.order-form-view {
width: 710rpx;
height: auto;
overflow: hidden;
border-radius: 16rpx;
margin-top: 20rpx;
background: #ffffff;
}
.trade-information {
margin-left: 20rpx;
display: flex;
}
.trade-checkbox {
width: 32rpx;
height: 32rpx;
margin-top: 30rpx;
border-radius: 50%;
}
.store {
width: 91rpx;
height: 27rpx;
border-radius: 8rpx;
font-size: 20rpx;
background: #f12a2a;
text-align: center;
line-height: 27rpx;
margin-left: 22rpx;
margin-top: 33rpx;
color: #ffffff;
}
.trade-name {
width: 280rpx;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
margin-top: 32rpx;
margin-left: 11rpx;
color: #333333;
}
.xunhuan-view {
width: 710rpx;
border-radius: 16rpx;
margin-top: 20rpx;
margin-left: 20rpx;
background: #ffffff;
}
.commodity-information {
width: 670rpx;
height: auto;
overflow: hidden;
display: flex;
border-radius: 16rpx;
padding: 20rpx;
margin-top: -23rpx;
background: #ffffff;
}
.commodity-checkbox {
width: 32rpx;
height: 32rpx;
margin-top: 84rpx;
border-radius: 50%;
background-color: #eb1818;
}
.commodity-picture {
width: 170rpx;
height: 170rpx;
border-radius: 12rpx;
margin-left: 22rpx;
margin-top: 19rpx;
}
.commodity-name {
width: 397rpx;
height: 28rpx;
font-size: 26rpx;
line-height: 28rpx;
color: #333333;
margin-left: 23rpx;
margin-top: 31rpx;
}
.label {
width: 125rpx;
height: 40rpx;
border-radius: 8rpx;
background: #f2f2f2;
font-size: 24rpx;
line-height: 40rpx;
text-align: center;
color: #333333;
margin-left: -400rpx;
margin-top: 81rpx;
}
.price-information {
width: 88rpx;
height: 36rpx;
font-size: 32rpx;
line-height: 32rpx;
color: #f12a2a;
margin-left: -130rpx;
margin-top: 156rpx;
}
.price-symbol {
font-weight: 400;
font-size: 24rpx;
}
.price-integer {
font-weight: 400;
font-size: 36rpx;
}
.price-decimals {
font-weight: 400;
font-size: 24rpx;
}
.quantity-commodity {
display: flex;
width: 134rpx;
height: 45rpx;
border-radius: 23rpx;
background: #ffffff;
box-sizing: border-box;
border: 1px solid #999999;
margin-top: 153rpx;
margin-left: 213rpx;
}
.anniu-jian {
width: 42rpx;
height: 45rpx;
line-height: 37rpx;
text-align: center;
font-size: 24rpx;
border-radius: 23rpx 0rpx 0rpx 23rpx;
}
.anniu-shuliang {
width: 50rpx;
height: 45rpx;
line-height: 45rpx;
text-align: center;
font-size: 24rpx;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
}
.anniu-jia {
width: 42rpx;
height: 45rpx;
line-height: 37rpx;
text-align: center;
font-size: 24rpx;
border-radius: 0rpx 23rpx 23rpx 0rpx;
}
.final-statement {
width: 750rpx;
height: 92rpx;
margin-top: 100rpx;
display: flex;
background: #fbfbfb;
}
.final-statement-checkbox {
width: 32rpx;
height: 32rpx;
margin-top: 28rpx;
margin-left: 23rpx;
border-radius: 50%;
background-color: #eb1818;
}
.wd-checkbox__shape {
width: var(--wot-checkbox-size, 44rpx) !important;
height: var(--wot-checkbox-size, 44rpx) !important;
}
.check-all {
width: 48rpx;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
margin-top: 34rpx;
margin-left: 21rpx;
}
.total {
width: 184rpx;
height: 36rpx;
font-weight: 400;
font-size: 28rpx;
margin-left: 20rpx;
margin-top: 25rpx;
color: #333333;
display: flex;
}
.total-price-symbol {
font-weight: 400;
font-size: 28rpx;
margin-left: -20rpx;
color: #f12a2a;
}
.total-price-integer {
font-weight: 400;
font-size: 36rpx;
margin-top: -6rpx;
color: #f12a2a;
}
.total-price-decimals {
font-weight: 400;
font-size: 24rpx;
margin-top: 6rpx;
color: #f12a2a;
}
.final-price-button {
width: 192rpx;
height: 74rpx;
border-radius: 37rpx;
line-height: 74rpx;
text-align: center;
margin-top: 9rpx;
margin-left: 210rpx;
background: linear-gradient(90deg, #f74040 0%, #eb1818 100%);
font-size: 28rpx;
color: #ffffff;
}
</style>
src/pages/assistingAgriculture/cart/cart.vue 0 → 100644
View file @ 7b0e8b71
<template>
<div class="cart-wrap">
<div class="shop" v-for="(shop, i) in list" :key="i">
<div class="flex-align-center shop-info">
<div
class="check"
:class="{ 'is-checked': shop.isChecked }"
@click="changeShopChecked(shop)"
>
<wd-icon v-if="shop.isChecked" name="check1"></wd-icon>
</div>
<div class="type">{{ shop.type }}</div>
<div class="shop-name">{{ shop.shopName }}</div>
</div>
<div class="commodity-list">
<div class="commodity-item flex-align-center" v-for="(item, j) in shop.children" :key="j">
<div
class="check"
:class="{ 'is-checked': item.isChecked }"
@click="changeCommodityChecked(item, shop)"
>
<wd-icon v-if="item.isChecked" name="check1"></wd-icon>
</div>
<img :src="item.img" alt="" />
<div class="commodity-info">
<div class="name">{{ item.name }}</div>
<div class="tag">{{ item.tag }}</div>
<div class="flex-between">
<div class="price">
<span>￥</span>
{{ item.price }}
</div>
<wd-input-number v-model="item.count" />
</div>
</div>
</div>
</div>
</div>
<div class="total flex-between">
<div class="left flex-align-center">
<div class="flex-align-center check-box">
<div class="check" :class="{ 'is-checked': checkedAll }" @click="changeCheckedAll()">
<wd-icon v-if="checkedAll" name="check1"></wd-icon>
</div>
全选
</div>
<div class="price">
合计:
<span>￥{{ totalPrice }}</span>
</div>
</div>
<div class="submit" @tap="toSettle">去结算({{ totalPrice }})</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
// 计算是否全选
const checkedAll = computed(() => {
return list.value.every((item) => item.isChecked);
});
const totalPrice = computed(() => {
let total = 0;
list.value.forEach((item) => {
item.children.forEach((c) => {
if (c.isChecked) {
total += c.price;
}
});
});
return total || 0;
});
const list = ref([
{
shopName: '杨家黄焖鸡',
type: '店铺',
isChecked: true,
children: [
{
img: '/src/static/assets/fruit.png',
name: '招牌黄焖鸡+米饭（土豆+生菜）',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
],
},
{
shopName: '杨家黄焖鸡',
type: '店铺',
isChecked: false,
children: [
{
img: '/src/static/assets/fruit.png',
name: '招牌黄焖鸡+米饭（土豆+生菜）',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
{
img: '/src/static/assets/fruit.png',
name: '招牌黄焖鸡+米饭（土豆+生菜）',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
{
img: '/src/static/assets/fruit.png',
name: '招牌黄焖鸡+米饭（土豆+生菜）',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
],
},
]);
// 店铺
const changeShopChecked = (s) => {
s.isChecked = !s.isChecked;
s.children.forEach((v) => {
v.isChecked = s.isChecked;
});
};
// 商品 店铺
const changeCommodityChecked = (c, s) => {
c.isChecked = !c.isChecked;
s.isChecked = s.children.every((v) => v.isChecked);
};
// 全选
const changeCheckedAll = () => {
const temp = checkedAll.value;
list.value.forEach((v) => {
v.isChecked = temp;
changeShopChecked(v);
});
};
function toSettle() {
// TODO: 跳转到结算页面
xma.navigateTo({
url: '/pages/cart/ConfirmOrder',
});
}
</script>
<style lang="scss" scoped>
uni-page-body {
height: 100%;
}
.cart-wrap {
height: 100%;
background-color: #f6f6f6;
position: relative;
padding: 20rpx;
padding-bottom: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
.check {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
box-sizing: border-box;
border: 1px solid #707070;
display: flex;
align-items: center;
justify-content: center;
&.is-checked {
border-color: #f12a2a;
background: #f12a2a;
color: #fff;
}
.wd-icon {
font-size: 25rpx;
}
}
.shop {
background-color: #fff;
padding: 32rpx 20rpx;
margin-bottom: 20rpx;
.shop-info {
.type {
padding: 3rpx 6rpx;
font-size: 20rpx;
background-color: #f12a2a;
color: #fff;
border-radius: 4rpx;
margin: 0 6rpx 0 18rpx;
}
.shop-name {
color: #333333;
font-size: 28rpx;
}
}
.commodity-list {
margin-top: 28rpx;
display: flex;
flex-direction: column;
gap: 40rpx;
.commodity-item {
color: #333333;
img {
width: 170rpx;
height: 170rpx;
border-radius: 12rpx;
margin: 0 23rpx 0 18rpx;
}
.commodity-info {
.name {
font-size: 28rpx;
font-weight: normal;
line-height: 28rpx;
margin-top: 12rpx;
}
.tag {
margin-top: 22rpx;
padding: 8rpx 10rpx;
font-size: 24rpx;
font-weight: normal;
line-height: 24rpx;
}
.price {
color: #f12a2a;
font-size: 36rpx;
span {
font-size: 24rpx;
}
}
}
}
}
}
.total {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 92rpx;
background-color: #fff;
padding: 0 15rpx 0 23rpx;
box-sizing: border-box;
.left {
.check-box {
font-size: 24rpx;
font-weight: normal;
line-height: 24rpx;
color: #333333;
.check {
margin-right: 17rpx;
}
}
.price {
font-size: 28rpx;
margin-left: 20rpx;
color: #333333;
span {
color: #f12a2a;
}
}
}
.submit {
padding: 23rpx 30rpx;
background: linear-gradient(90deg, #f74040 0%, #eb1818 100%);
font-size: 28rpx;
font-weight: normal;
line-height: 28rpx;
letter-spacing: 0em;
border-radius: 37rpx;
color: #ffffff;
}
}
}
</style>
src/pages/assistingAgriculture/commentList/card.vue 0 → 100644
View file @ 7b0e8b71
<template>
<div class="card">
<div class="card-top">
<div class="avatar flex-align-center">
<img src="/static/comment/1.png" alt="" />
<div class="name">
<p>不爱吃鱼的小猫咪</p>
<div class="flex-align-center">
<img src="/src/static/comment/emoji.png" alt="" />
5.0分 好评
</div>
</div>
</div>
<div class="info">2024-08-03发表于贵州 ｜ 朋友出游 ｜ 2024-07-22出发</div>
</div>
<div class="card-content">
<div class="text-wrap" :style="showMore ? 'max-height:none;' : ''">
跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游
<div class="more" v-if="!showMore" @click="showMore = true">全文</div>
</div>
<div class="img-wrap">
<wd-img
v-for="v in Math.floor(Math.random() * 6 + 1)"
:key="v"
:src="`/src/static/comment/${v}.png`"
enable-preview
/>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showMore = ref(false);
</script>
<style lang="scss" scoped>
.card {
background-color: #fff;
border-radius: 16rpx;
padding: 20rpx;
.card-top {
padding-bottom: 20rpx;
border-bottom: 2rpx solid #f3f3f3;
.avatar {
& > img {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
margin-right: 16rpx;
}
.name {
p {
font-size: 28rpx;
color: #3d3d3d;
}
div {
margin-top: 18rpx;
font-size: 16rpx;
background: rgba(253, 223, 109, 0.1686);
line-height: 24rpx;
color: #e1961d;
width: 116rpx;
border-radius: 200rpx;
padding-left: 32rpx;
box-sizing: border-box;
position: relative;
img {
height: 24rpx;
position: absolute;
left: 0;
width: 24rpx;
}
}
}
}
.info {
color: #abaaaa;
font-size: 22rpx;
margin-top: 20rpx;
}
}
.card-content {
.text-wrap {
margin: 12rpx 0 20rpx;
font-size: 28rpx;
line-height: normal;
color: #3d3d3d;
overflow: hidden;
max-height: 150rpx;
position: relative;
.more {
position: absolute;
bottom: 0;
right: 0;
line-height: 1.2em;
background-color: #fff;
color: #0974f5;
}
}
.img-wrap {
display: grid;
gap: 10rpx;
grid-template-columns: repeat(3, 1fr);
.wd-img {
aspect-ratio: 1;
}
}
}
}
</style>
src/pages/assistingAgriculture/commentList/index.vue 0 → 100644
View file @ 7b0e8b71
<template>
<div class="comment-list">
<div class="top-bar flex-align-center">
<wd-icon name="thin-arrow-left"></wd-icon>
<wd-search hide-cancel placeholder="点评关键词/特色" placeholder-left />
</div>
<scroll-view class="content" :scroll-y="true">
<div class="filter-box">
<div class="score-sort flex-between">
<div class="score">
<span class="num">6.9</span>
<span class="t1">超棒</span>
<span class="t2">527条</span>
<wd-icon name="check-outline" class="t1"></wd-icon>
</div>
<div class="sort">
<span class="active">推荐排序</span>
｜
<span>重新点评</span>
</div>
</div>
<div class="type flex-between">
<p class="active">全部</p>
<p v-for="(v, i) in commentTypeList" :key="i">{{ v.text }}({{ v.value }})</p>
</div>
<div class="tags" :style="{ 'max-height': showMoreTag ? '600px' : '90rpx' }">
<div class="item" v-for="(v, i) in tagList" :key="i">{{ v.text }}({{ v.value }})</div>
<div class="more" @click="showMoreTag = !showMoreTag">
更多
<wd-icon name="arrow-down" :class="{ rotate: showMoreTag }"></wd-icon>
</div>
</div>
</div>
<div class="card-list">
<card v-for="v in 10" :key="v" />
</div>
</scroll-view>
<div class="back">
<button>返回预订</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import card from './card.vue';
const commentTypeList = [
{
text: '图/视频',
value: 183,
},
{
text: '追评',
value: 5,
},
{
text: '中差评',
value: 5,
},
{
text: '好评',
value: 514,
},
];
const tagList = [
{
text: '餐食棒',
value: 44,
},
{
text: '导游负责耐心',
value: 44,
},
{
text: '车辆条件好',
value: 514,
},
{
text: '餐食棒',
value: 44,
},
{
text: '餐食棒',
value: 44,
},
{
text: '导游负责耐心',
value: 44,
},
{
text: '行程安排合理',
value: 5,
},
{
text: '车辆条件好',
value: 514,
},
{
text: '行程安排合理',
value: 5,
},
{
text: '导游负责耐心',
value: 44,
},
{
text: '行程安排合理',
value: 5,
},
{
text: '车辆条件好',
value: 514,
},
];
const showMoreTag = ref(false);
</script>
<style lang="scss" scoped>
uni-page-body {
height: 100%;
}
.comment-list {
height: 100%;
background-color: #f3f3f3;
display: flex;
flex-direction: column;
.top-bar {
padding: 16rpx 40rpx;
font-size: 28rpx;
background: #fff;
.wd-search {
width: 492rpx;
height: 56rpx;
padding: 0;
margin-left: 20rpx;
}
}
.content {
height: 132rpx;
padding: 10rpx 20rpx;
box-sizing: border-box;
flex-grow: 1;
.filter-box {
border-radius: 16rpx;
padding: 20rpx;
background-color: #fff;
.score-sort {
margin-bottom: 20rpx;
.score {
color: #0974f5;
font-weight: bold;
.num {
font-size: 48rpx;
margin-right: 12rpx;
}
.t2 {
font-size: 24rpx;
color: #abaaaa;
}
.wd-icon {
margin-left: 12rpx;
}
}
.sort {
font-size: 24rpx;
color: #abaaaa;
&.active {
color: #0974f5;
}
}
}
.type {
font-size: 22rpx;
color: #767676;
.active {
color: #3d3d3d;
font-size: 24rpx;
font-weight: bold;
position: relative;
&::after {
content: '';
display: block;
position: absolute;
width: calc(80%);
height: 4rpx;
bottom: -12rpx;
left: 50%;
background-color: #fa5151;
transform: translateX(-50%);
}
}
}
.tags {
margin-top: 32rpx;
display: flex;
flex-wrap: wrap;
gap: 10rpx;
position: relative;
max-height: 80rpx;
overflow: hidden;
transition: all 0.3s;
.item {
padding: 10rpx 16rpx;
color: #3d3d3d;
font-size: 16rpx;
background-color: #eeeeee;
border-radius: 300rpx;
}
.more {
padding: 10rpx 0;
padding-left: 40rpx;
font-size: 24rpx;
font-weight: 500;
line-height: 28rpx;
color: #0974f5;
background-color: #fff;
position: absolute;
background: linear-gradient(90deg, #ffffff22 0%, #fff 20%);
bottom: 0;
right: 0;
.rotate {
transition: all 0.3s;
transform: rotateZ(180deg);
}
}
}
}
.card-list {
margin-top: 10rpx;
.card {
margin-bottom: 10rpx;
}
}
}
.back {
background-color: #fff;
padding: 40rpx 0 68rpx;
box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(0, 0, 0, 0.12);
button {
width: 690rpx;
height: 88rpx;
border-radius: 68rpx;
background-color: #fa5151;
font-size: 32rpx;
font-weight: 500;
color: #ffffff;
}
}
}
</style>
src/pages/assistingAgriculture/detail/detail.vue 0 → 100644
View file @ 7b0e8b71
<template>
<view class="container">
<!-- 顶部搜索框-->
<view class="top">
<view class="top">
<Search
background="rgba(255, 255, 255, 0.8)"
backIcon="black"
iconSrc="/static/assets/blackLeft.png"
placeholderText="请输入要搜索的内容"
></Search>
</view>
</view>
<!-- 图片-->
<view class="nav">
<img class="main-img" src="/static/detail/img2.png" style="width: 750rpx; height: 668rpx" />
<view class="pre-icon">
<img
class="left-icon"
src="/static/detail/img4.png"
style="width: 248rpx; height: 100rpx; position: relative"
/>
<img
class="right-icon"
src="/static/detail/img3.png"
style="width: 546rpx; height: 62rpx"
/>
</view>
<view class="pre-text">
<text class="left-text">预售</text>
<text class="right-text">预计9月15日发货</text>
</view>
</view>
<!--详情-->
<view class="detail">
<view class="detail-title">筑农散养虫子土鸡(未下蛋小母鸡)1.5kg</view>
<view class="detail-int">
这是商品简介这是商品简介这是商品简介这是商品简介这是商品 简介这是商品简介这是商品简介
</view>
<view>
<img class="share-img" src="/static/detail/share.png" />
<text class="share-text" @click="share">分享</text>
</view>
</view>
<view class="evaluate">
<view class="evaluate-num">
<text class="env">评价（0）</text>
<text class="num">好评率（100%）</text>
<wd-icon name="arrow-right" size="32rpx" style="margin-top: 2rpx"></wd-icon>
</view>
</view>
<!-- 详情图-->
<view class="detail-info">
<text class="info-title">详情</text>
<img class="info-img" src="/static/detail/detail-img.png" />
<img class="info-img" src="/static/detail/detail-img.png" />
</view>
<!-- 底部-->
<view class="detail-bottom">
<view class="sort">
<view class="bottom" style="display: flex; flex-direction: row">
<view class="borderClass" @tap="toStore">
<img src="/static/detail/img7.png" style="width: 40rpx; height: 40rpx" />
<view class="sort-text">店铺</view>
</view>
<view class="borderClass">
<img src="/static/detail/img8.png" style="width: 40rpx; height: 40rpx" />
<view class="sort-text">客服</view>
</view>
<view class="borderClass" @tap="toCart">
<wd-badge modelValue="4">
<img src="/static/detail/car.png" style="width: 40rpx; height: 40rpx" />
</wd-badge>
<view class="sort-text">购物车</view>
</view>
</view>
<!-- <view class="sort">-->
<!-- <view class="bottom" style="display: flex; flex-direction: row">-->
<!-- <view class="borderClass" v-for="(item, index) in storeList" :key="index">-->
<!-- <img :src="item.img" style="width: 40rpx; height: 40rpx" />-->
<!-- <view class="sort-text">{{ item.text }}</view>-->
<!-- </view>-->
<!-- </view>-->
<view class="btn">
<wd-button type="warning" size="small" style="margin-right: 10rpx">加入购物车</wd-button>
<wd-button type="error" size="small">立即购买</wd-button>
</view>
</view>
</view>
</view>
</template>
<script setup>
import Search from '../../components/index/Search.vue';
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
// 图片
const swiperList = ref([
'../../static/detail/img2.png',
'../../static/detail/img2.png',
'../../static/detail/img2.png',
]);
// 底部
const storeList = ref([
{ img: '/static/detail/img7.png', text: '店铺' },
{ img: '/static/detail/img8.png', text: '客服' },
{ img: '/static/detail/img6.png', text: '购物车' },
]);
// 进入页面回到顶部
onShow(() => {
uni.pageScrollTo({
scrollTop: 0,
duration: 300,
});
});
const share = () => {
alert('分享功能已触发！');
};
function toStore() {
// TODO: 跳转到筑农严选
xma.navigateTo({
url: '/pages/shop/index',
});
}
function toCart() {
// TODO: 跳转到购物车
xma.navigateTo({
url: '/pages/cart/cart',
});
}
</script>
<style lang="scss" scoped>
.container {
position: relative;
left: 0rpx;
top: -45rpx;
opacity: 1;
}
.top {
width: 750rpx;
height: 128rpx;
margin-top: 40rpx;
background: #ffffff;
}
.nav {
width: 750rpx;
}
.pre-icon {
display: flex;
margin-top: -108rpx;
}
.right-icon {
margin-left: -20px;
margin-top: 19px;
}
.left-text {
position: relative;
width: 80rpx;
height: 48rpx;
font-family: Source Han Sans;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #ffffff;
margin-left: 80rpx;
margin-top: -70rpx;
display: block;
}
.right-text {
left: -60rpx;
position: relative;
width: 300rpx;
height: 48rpx;
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: normal;
line-height: 28rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #ffffff;
float: right;
margin-top: -30rpx;
}
.detail {
width: 750rpx;
height: 178rpx;
border-radius: 16rpx;
background: #ffffff;
position: relative;
top: 10px;
}
.detail-title {
width: 277 * 2rpx;
height: 32rpx;
font-family: Source Han Sans;
font-size: 32rpx;
font-weight: 500;
line-height: 32rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
padding-top: 20rpx;
padding-left: 20rpx;
}
.detail-int {
width: 336 * 2rpx;
height: 64rpx;
font-family: Source Han Sans;
font-size: 24rpx;
font-weight: normal;
line-height: 32rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #abaaaa;
padding-top: 10rpx;
padding-left: 20rpx;
}
.share-img {
float: right;
margin-right: 80rpx;
width: 28rpx;
height: 28rpx;
}
.share-text {
float: right;
width: 44rpx;
height: 22rpx;
font-family: Source Han Sans;
font-size: 22rpx;
font-weight: bold;
line-height: 22rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
margin-right: -80rpx;
margin-top: 2rpx;
}
.evaluate {
width: 750rpx;
height: 88rpx;
border-radius: 16rpx;
background: #ffffff;
margin-top: 30rpx;
}
.evaluate {
display: flex;
align-items: center;
justify-content: space-between;
}
.evaluate-num {
flex-direction: column;
align-items: center;
}
.env {
width: 148rpx;
height: 32rpx;
font-family: Source Han Sans;
font-size: 32rpx;
font-weight: 500;
line-height: 32rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
margin-left: 20rpx;
}
.num {
width: 200rpx;
height: 32rpx;
font-family: Source Han Sans;
font-size: 24rpx;
font-weight: normal;
line-height: 32rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
margin-left: 340rpx;
}
.wd-icon {
position: relative;
top: 4rpx;
}
.detail-info {
width: 750rpx;
height: 1168px;
border-radius: 16rpx;
background: #ffffff;
margin-top: 20rpx;
position: relative;
z-index: 9;
}
.info-title {
width: 64rpx;
height: 32rpx;
font-family: Source Han Sans;
font-size: 32rpx;
font-weight: bold;
line-height: 32rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
position: relative;
top: 20rpx;
left: 20rpx;
}
.info-img {
width: 710rpx;
height: 1168rpx;
border-radius: 16rpx;
position: relative;
margin-top: 40rpx;
margin-left: 20rpx;
}
.detail-bottom {
width: 750rpx;
height: 216rpx;
border-radius: 16rpx 16px 0rpx 0rpx;
background: #ffffff;
box-shadow: 0rpx -8rpx 20rpx 0rpx rgba(0, 0, 0, 0.12);
z-index: 10;
position: fixed;
top: 88%;
}
.sort {
width: 750rpx;
height: 186rpx;
}
.borderClass {
width: 96rpx;
height: 96rpx;
margin-top: 40rpx;
margin-left: 40rpx;
}
.sort-text {
font-size: 22rpx;
font-weight: 500;
line-height: 24rpx;
text-align: center;
letter-spacing: 0em;
color: #3d3d3d;
width: 176rpx;
margin-left: -70rpx;
}
.btn {
margin-top: -90rpx;
margin-left: 400rpx;
}
::v-deep.icon {
width: 56rpx;
height: 56rpx;
}
</style>
src/pages/assistingAgriculture/index/building.vue 0 → 100644
View file @ 7b0e8b71
<template>
<view class="container">
<!-- 顶部搜索框-->
<view class="top">
<Search
background="rgba(255, 255, 255, 0.8)"
backIcon="black"
iconSrc="/static/assets/blackLeft.png"
placeholderText="请输入要搜索的内容"
></Search>
</view>
<!-- 轮播图-->
<view class="nav">
<wd-swiper
customImageClass="main-img"
:list="swiperList"
autoplay
v-model:current="current"
@click="handleClick"
@change="onChange"
height="188"
mode="aspectFit"
></wd-swiper>
<view class="nav-img">
<img
class="culture"
src="/static/assets/culture.png"
style="width: 366rpx; height: 362rpx"
/>
<view class="right-img">
<img
class="delicacy"
src="/static/assets/delicacy.png"
style="height: 176rpx; margin-left: 8rpx"
/>
<img
@tap="toPresale"
class="fresh"
src="/static/assets/fresh.png"
style="height: 176rpx; margin-left: 8rpx"
/>
</view>
</view>
</view>
<!-- 好货热卖-->
<view class="hot-sale">
<view class="top-title">
<text class="left-title">好货热卖</text>
<text class="right-title">更多</text>
</view>
<wd-icon
name="arrow-right"
size="25rpx"
color="#ABAAAA"
style="position: relative; float: right; top: -42rpx"
></wd-icon>
<img
@tap="toDetail"
class="rice"
src="/static/assets/rice.png"
style="width: 670rpx; height: 236rpx"
/>
<img
@tap="toDetail"
class="potato"
src="/static/assets/potato.png"
style="width: 650rpx; height: 236rpx; margin-left: 20rpx; margin-top: -20rpx"
/>
</view>
<!-- tabs-->
<scroll-view class="tabs" show-scrollbar="false" scroll-x :scroll-with-animation="true">
<text
@tap="choice(index, item.categoryId)"
v-for="(item, index) in tabsData"
:key="index"
class="text"
:class="light === index ? 'light' : ''"
>
{{ item.text }}
</text>
</scroll-view>
<!-- 列表-->
<view class="tabs-list">
<img
class="fruit-img"
src="/static/assets/fruit4.png"
style="width: 670rpx; height: 236rpx"
/>
<view class="sort-list">
<view class="sort-img" v-for="(item, index) in detailList" :key="index">
<img @tap="toDetail" :src="item.img" style="width: 330rpx; height: 330rpx" />
<view class="detail-title">{{ item.text }}</view>
<view class="price-page">
<text class="price">￥{{ item.price }}</text>
</view>
<img class="presale" src="/static/assets/car.png" style="width: 40rpx; height: 40rpx" />
</view>
</view>
</view>
<!-- 购物车悬浮按钮 -->
<view class="cart-floating" @tap="toCart">
<wd-badge modelValue="4">
<img class="shop-car" src="/static/presale/cart.png" style="width: 40rpx; height: 40rpx" />
</wd-badge>
</view>
</view>
</template>
<script setup>
import Search from '../../components/index/Search.vue';
const current = ref(0);
const light = ref(0);
// 轮播图
const swiperList = ref([
'../../static/assets/village.png',
'../../static/assets/village.png',
'../../static/assets/village.png',
]);
// 分类列表数据
const tabsData = ref([
{ img: '/static/assets/mainPicture.png', text: '水果生鲜' },
{ img: '/static/assets/presale.png', text: '米面粮油' },
{ img: '/static/assets/mainPicture.png', text: '农家干货' },
{ img: '/static/assets/mainPicture.png', text: '鲜货预售' },
{ img: '/static/assets/mainPicture.png', text: '水果生鲜' },
{ img: '/static/assets/mainPicture.png', text: '米面粮油' },
{ img: '/static/assets/mainPicture.png', text: '农家干货' },
{ img: '/static/assets/mainPicture.png', text: '鲜货预售' },
]);
const detailList = ref([
{ img: '/static/assets/fruit.png', price: '2555', text: '这是草莓这是草莓' },
{ img: '/static/assets/fruit1.png', price: '2555', text: '这是草莓这是草莓' },
{ img: '/static/assets/fruit2.png', price: '2555', text: '麻辣鱼豆腐' },
{ img: '/static/assets/fruit3.png', price: '2555', text: '麻辣鱼豆腐' },
]);
const choice = (index) => {
light.value = index;
};
function handleClick(e) {
console.log(e);
}
function onChange(e) {
console.log(e);
}
function toPresale() {
// TODO: 跳转到预售
xma.navigateTo({
url: '/pages/index/presale',
});
}
function toDetail() {
// TODO: 跳转到详情页
xma.navigateTo({
url: '/pages/detail/detail',
});
}
function toCart() {
// TODO: 跳转到购物车
xma.navigateTo({
url: '/pages/cart/cart',
});
}
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
}
.container {
position: relative;
left: 0rpx;
top: -45rpx;
opacity: 1;
}
.top {
width: 750rpx;
height: 128rpx;
margin-top: 40rpx;
background: #ffffff;
}
.nav {
width: 710rpx;
margin-left: 18rpx;
margin-top: 15rpx;
}
.nav-img {
width: 710rpx;
display: flex;
position: relative;
top: 12rpx;
}
.hot-sale {
width: 710rpx;
height: 532rpx;
border-radius: 16rpx;
background: #ffffff;
margin: 20rpx;
}
.top-title {
top: 5px;
position: relative;
margin: 25rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.left-title {
font-family: Source Han Sans;
font-size: 15px;
font-weight: bold;
line-height: 15px;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
}
.right-title {
font-family: Source Han Sans;
font-size: 9px;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #abaaaa;
}
.tabs {
white-space: nowrap;
height: 60rpx;
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
background-color: transparent;
.text {
font-size: 24rpx;
color: #d8d8d8;
margin: 0 20rpx;
font-weight: bold;
display: inline-block;
}
.text:nth-child(1) {
margin-left: 40rpx;
}
.light {
background: #2fb641;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
position: relative;
&::after {
content: '';
width: 40rpx;
height: 12rpx;
background: url('../../static/assets/selected.png') no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: -16rpx;
left: 50%;
transform: translate(-50%);
}
}
}
.tabs-list {
margin-left: 10px;
width: 712rpx;
height: 1172rpx;
border-radius: 8px;
background: #ffffff;
}
.fruit-img {
margin-left: 10px;
margin-top: 10px;
}
.son-img {
display: flex;
align-content: space-between;
flex-wrap: wrap;
}
.row {
display: flex;
flex-basis: 100%;
justify-content: space-between;
}
.sort-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.sort-img {
width: 330rpx;
height: 330rpx;
margin-bottom: 80rpx;
}
.detail-title {
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: 500;
line-height: 28rpx;
letter-spacing: 0em;
margin-left: 48rpx;
margin-top: -20rpx;
color: #3d3d3d;
width: 190rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.price-page {
width: 96rpx;
height: 28rpx;
margin-top: 20rpx;
font-size: 24rpx;
font-weight: 500;
color: #abaaaa;
margin-left: 40rpx;
}
.price {
font-size: 24rpx;
font-weight: 500;
line-height: 28rpx;
color: #fa5151;
}
.presale {
border-radius: 2px;
font-size: 16rpx;
line-height: 16rpx;
text-align: center;
line-height: 24rpx;
margin-left: 240rpx;
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;
}
.shop-car {
margin-left: 20rpx;
margin-top: 20rpx;
}
::v-deep .wd-badge__content.is-fixed {
margin-top: 20rpx;
}
::v-deep.icon {
width: 56rpx;
height: 56rpx;
}
</style>
src/pages/assistingAgriculture/index/index.vue 0 → 100644
View file @ 7b0e8b71
<template>
<view>
<view class="container">
<Search
background="rgba(255, 255, 255, 0.8)"
backIcon="black"
iconSrc="/static/assets/return.png"
placeholderText="请输入要搜索的内容"
></Search>
<view>
<img class="img1" src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" />
<img class="img2" src="/static/assets/bottom.png" style="width: 750rpx; height: 32rpx" />
<img class="img3" src="/static/assets/right.png" style="width: 288rpx; height: 124rpx" />
</view>
<view class="sort">
<view style="display: flex; flex-direction: row">
<view class="borderClass" @tap="toBuilding">
<img src="/static/assets/buildingAgriculture.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">筑农严选</view>
</view>
<view class="borderClass">
<img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">认养农业</view>
</view>
<view class="borderClass" @tap="toRuralTravel">
<img src="/static/assets/rural.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">乡村旅居</view>
</view>
<view class="borderClass">
<img src="/static/assets/buildingAgriculture.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">特色农庄</view>
</view>
</view>
<!-- <view style="display: flex; flex-direction: row">-->
<!-- <view-->
<!-- class="borderClass"-->
<!-- @tap="toBuilding"-->
<!-- v-for="(item, index) in sortList"-->
<!-- :key="index"-->
<!-- >-->
<!-- <img :src="item.img" style="width: 96rpx; height: 96rpx" />-->
<!-- <view class="sort-text">{{ item.text }}</view>-->
<!-- </view>-->
<!-- </view>-->
</view>
<view class="product-page">
<view>
<view class="page-title">特色美食</view>
<img src="/static/assets/mainPicture.png" class="main-img" />
<view style="display: flex; flex-direction: row">
<view class="detail-border">
<img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
<view class="detail-title">干辣椒炒肉</view>
<view class="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view>
<view class="detail-border">
<img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
<view class="detail-title">贵阳辣子鸡</view>
<view class="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view>
<view class="detail-border">
<img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
<view class="detail-title">麻辣鱼豆腐</view>
<view class="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view>
</view>
</view>
</view>
<view class="product-page" @tap="toDetail">
<view>
<view class="page-title">农货预售</view>
<img src="/static/assets/img4.png" class="main-img" />
<view style="display: flex; flex-direction: row">
<view class="detail-border">
<img src="/static/assets/img1.png" style="width: 216rpx; height: 176rpx" />
<view class="detail-title">这是农村种的土豆</view>
<view class="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view>
<view class="detail-border">
<img src="/static/assets/img2.png" style="width: 216rpx; height: 176rpx" />
<view class="detail-title">这是农村玉米</view>
<view class="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view>
<view class="detail-border">
<img src="/static/assets/img3.png" style="width: 216rpx; height: 176rpx" />
<view class="detail-title">这是农村中的猕猴桃</view>
<view class="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view>
</view>
</view>
</view>
<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" />
<view style="display: flex; flex-direction: row">
<view class="detail-border" v-for="(item, index) in detailList" :key="index">
<img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
<view class="detail-title">{{ item.text }}</view>
<view class="jiage-page">
<text class="jiage">￥{{ item.price }}</text>
/份
</view>
<view class="yushou">预售</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import Search from '../../components/index/Search.vue';
const list = ref([
// { img: '/static/assets/mainPicture.png', text: '特色美食' },
// { img: '/static/assets/presale.png', text: '农货预售' },
{ img: '/static/assets/mainPicture.png', text: '乡村非遗' },
{ img: '/static/assets/mainPicture.png', text: '认养农业' },
{ img: '/static/assets/mainPicture.png', text: '乡村旅居' },
{ img: '/static/assets/mainPicture.png', text: '特色农庄' },
]);
const detailList = ref([
{ img: '/static/assets/detailedMapOne.png', price: '25', text: '干辣椒炒肉干辣椒炒肉' },
{ img: '/static/assets/detailedMapTwo.png', price: '25', text: '贵阳辣子鸡' },
{ img: '/static/assets/detailedMapThree.png', price: '25', text: '麻辣鱼豆腐' },
]);
const sortList = ref([
{ img: '/static/assets/buildingAgriculture.png', price: '25', text: '筑农严选' },
{ img: '/static/assets/adoption.png', price: '25', text: '认养农业' },
{ img: '/static/assets/rural.png', price: '25', text: '乡村旅居' },
{ img: '/static/assets/buildingAgriculture.png', price: '25', text: '特色农庄' },
]);
function toBuilding() {
// TODO: 跳转到筑农严选
xma.navigateTo({
url: '/pages/index/building',
});
}
function toRuralTravel() {
// TODO: 跳转到乡村旅居
xma.navigateTo({
url: '/pages/RuralTravel/RuralTravel',
});
}
// 跳转详情页
function toDetail() {
// TODO: 跳转到详情页
xma.navigateTo({
url: '/pages/detail/detail',
});
}
</script>
<style lang="scss" scoped>
page {
background-color: #f3f3f3;
}
.container {
position: relative;
left: 0rpx;
top: 0rpx;
width: 750rpx;
height: 440rpx;
opacity: 1;
}
.img1 {
display: flex;
}
.img2 {
display: flex;
margin-top: -31rpx;
}
.img3 {
display: flex;
margin-top: -120rpx;
margin-left: 462rpx;
}
.bottom-image {
position: relative;
top: -40rpx;
width: 750rpx;
height: 32rpx;
opacity: 1;
}
.right-image {
top: -192rpx;
float: right;
position: relative;
}
.sort {
width: 750rpx;
height: 186rpx;
background: linear-gradient(180deg, #82ce8b -39%, #ffffff 36%);
}
.borderClass {
width: 96rpx;
height: 96rpx;
margin-left: 75rpx;
margin-top: 22rpx;
}
.sort-text {
font-size: 24rpx;
font-weight: 500;
line-height: 24rpx;
text-align: center;
letter-spacing: 0em;
color: #3d3d3d;
}
.product-page {
width: 710rpx;
height: 742rpx;
border-radius: 16rpx;
margin-left: 20rpx;
margin-top: 10rpx;
background-color: #ffffff;
}
.page-title {
width: 112rpx;
height: 28rpx;
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: 500;
line-height: 28rpx;
text-align: center;
letter-spacing: 0em;
position: absolute;
margin-top: 20rpx;
margin-left: 20rpx;
color: #3d3d3d;
}
.main-img {
width: 670rpx;
height: 362rpx;
border-radius: 16rpx;
margin-top: 68rpx;
margin-left: 20rpx;
}
.detail-border {
width: 216rpx;
height: 262rpx;
margin-left: 20rpx;
margin-top: 20rpx;
border-radius: 16px;
}
.detail-title {
font-family: Source Han Sans;
font-size: 24rpx;
font-weight: 500;
line-height: 28rpx;
letter-spacing: 0em;
margin-left: 30rpx;
color: #3d3d3d;
width: 190rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jiage-page {
width: 96rpx;
height: 28rpx;
margin-top: 20rpx;
font-size: 24rpx;
font-weight: 500;
color: #abaaaa;
}
.jiage {
font-size: 24rpx;
font-weight: 500;
line-height: 28rpx;
color: #fa5151;
}
.yushou {
width: 48rpx;
height: 24rpx;
border-radius: 2px;
font-size: 16rpx;
line-height: 16rpx;
background: #fcdbdb;
text-align: center;
line-height: 24rpx;
margin-left: 120rpx;
margin-top: -23rpx;
color: #fa5151;
}
::v-deep .icon {
width: 40rpx;
height: 40rpx;
margin-left: 40rpx;
}
</style>
src/pages/assistingAgriculture/index/presale.vue 0 → 100644
View file @ 7b0e8b71
<template>
<view class="container">
<view class="top">
<Search
background="rgba(255, 255, 255, 0.8)"
backIcon="black"
iconSrc="/static/assets/left.png"
placeholderText="输入商品名称"
></Search>
</view>
<view class="nav">
<wd-swiper
class="main-img"
:list="swiperList"
autoplay
v-model:current="current"
@click="handleClick"
@change="onChange"
height="188"
></wd-swiper>
</view>
<view class="sort">
<view style="display: flex; flex-direction: row">
<view class="borderClass" @tap="toPresale" v-for="(item, index) in sortList" :key="index">
<img :src="item.img" style="width: 48rpx; height: 48rpx" />
<view class="sort-text">{{ item.text }}</view>
</view>
</view>
</view>
<view>
<view>
<scroll-view class="tabs" show-scrollbar="false" scroll-x :scroll-with-animation="true">
<text
@tap="choice(index, item.categoryId)"
v-for="(item, index) in tabsData"
:key="index"
class="text"
:class="light === index ? 'light' : ''"
>
{{ item.text }}
</text>
</scroll-view>
</view>
<view class="tab-list" v-for="(item, index) in buyList" :key="index">
<img class="buy-list" :src="item.img" style="width: 670rpx; height: 670rpx" />
<view>
<text class="retail-price">零售价：￥{{ item.price }}/盒</text>
<text class="presale-price">预售价：￥{{ item.price }}/盒</text>
</view>
<view>
<img
class="buy-img"
src="/static/presale/img6.png"
style="
position: sticky;
width: 284rpx;
height: 128rpx;
float: right;
margin-top: -98rpx;
margin-right: 30rpx;
"
/>
</view>
</view>
</view>
<view class="waterfall">
<view class="wt-left wt-list">
<view
class="wt-item"
v-for="(good, index) in LeftList"
:key="index"
@click="ToDetail(good.id)"
>
<view class="item-img">
<image :src="good.image" mode="widthFix"></image>
<image
class="presale-img"
src="/static/presale/presale.png"
style="
width: 132rpx;
height: 64rpx;
z-index: 10;
margin-left: 18rpx;
top: -70rpx;
left: -14rpx;
"
/>
<image
class="preview-img"
src="/static/presale/preview.png"
style="width: 264rpx; height: 40rpx; z-index: 9; top: -70rpx"
/>
<text class="pre-text">预计9月15日发货</text>
</view>
<!-- 介绍部分 -->
<view class="introduce-section">
<text class="title">{{ good.name }}</text>
<view class="tags-box">
<text class="good-detail">{{ good.detail }}</text>
<text class="introduction">{{ good.introduction }}</text>
<text class="good-price">￥{{ good.price }}</text>
</view>
</view>
</view>
</view>
<view class="vt-right wt-list">
<view
class="wt-item"
v-for="(good, index) in RightList"
:key="index"
@click="ToDetail(good.id)"
>
<view class="item-img">
<image :src="good.image" mode="widthFix"></image>
<image
class="presale-img"
src="/static/presale/presale.png"
style="width: 132rpx; height: 64rpx; z-index: 10; top: -70rpx"
/>
<image
class="preview-img"
src="/static/presale/preview.png"
style="width: 264rpx; height: 40rpx; z-index: 9; top: -66rpx"
/>
<text class="pre-text">预计9月15日发货</text>
</view>
<!-- 介绍部分 -->
<view class="introduce-section">
<text class="title">{{ good.name }}</text>
<view class="tags-box">
<text class="good-detail">{{ good.detail }}</text>
<text class="introduction">{{ good.introduction }}</text>
<text class="good-price">￥{{ good.price }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 购物车悬浮按钮 -->
<view class="cart-floating" @tap="toCart">
<wd-badge modelValue="4">
<img class="shop-car" src="/static/presale/cart.png" style="width: 40rpx; height: 40rpx" />
</wd-badge>
</view>
</template>
<script setup>
import Search from '../../components/index/Search.vue';
import { ref } from 'vue';
const current = ref(0);
const light = ref(0);
const sortList = ref([
{ 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: '预选蔬菜' },
{ img: '/static/presale/img5.png', price: '25', text: '心选水果' },
]);
const swiperList = ref([
'../../static/presale/img.png',
'../../static/presale/img.png',
'../../static/presale/img.png',
]);
const tabsData = ref([
{ img: '/static/assets/mainPicture.png', text: '全部' },
{ img: '/static/assets/presale.png', text: '分类1' },
{ img: '/static/assets/presale.png', text: '分类2' },
{ img: '/static/assets/presale.png', text: '分类3' },
{ img: '/static/assets/presale.png', text: '分类4' },
{ img: '/static/assets/presale.png', text: '分类5' },
{ img: '/static/assets/presale.png', text: '分类6' },
{ img: '/static/assets/presale.png', text: '分类7' },
{ img: '/static/assets/presale.png', text: '分类8' },
]);
const buyList = ref([
{ img: '/static/presale/buy.png', price: '29.9', text: '应季好物' },
{ img: '/static/presale/buy.png', price: '29.9', text: '猪肉蛋禽' },
{ img: '/static/presale/buy.png', price: '29.9', text: '米面粮油' },
]);
const shopList = ref([
{ img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
{ img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
{ img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
{ img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
{ img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
{ img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
]);
// 声明需要的数据
const data = reactive({
leftList: [], // 左边列图片
rightList: [], // 右边列图片
leftHeight: 0, // 左边列高度
rightHeight: 0, // 右边列高度
columnWidth: 0, // 列宽度
});
// 总商品数据列表
const goodList = ref([
{
id: 1,
name: '这是一个商品',
image: '/static/presale/buy.png',
introduction: '商品简介商品简介',
price: 69.9,
},
{
id: 2,
name: '商品二',
image: '/static/presale/img7.png',
introduction: '商品简介商品简介',
price: 69.9,
},
{
id: 3,
name: '商品三',
image: '/static/assets/fruit.png',
introduction: '商品简介商品简介',
price: 69.9,
},
{
id: 4,
name: '商品四',
image: '/static/presale/buy.png',
introduction: '商品简介商品简介',
price: 69.9,
},
{
id: 5,
name: '商品五',
image: '/static/presale/buy.png',
introduction: '商品简介商品简介',
price: 69.9,
},
]);
// 左侧数据列表
const LeftList = ref([]);
// 右侧数据列表
const RightList = ref([]);
// 将商品信息列表分为左侧右侧两个部分
for (let i = 0; i < goodList.value.length; i++) {
if (i % 2 === 0) {
LeftList.value.push(goodList.value[i]);
} else {
RightList.value.push(goodList.value[i]);
}
}
// 点击商品 跳转详情
function ToDetail(id) {
console.log('点击了商品', id);
}
function handleClick(e) {
console.log(e);
}
function onChange(e) {
console.log(e);
}
const choice = (index) => {
light.value = index;
};
function toCart() {
// TODO: 跳转到筑农严选
xma.navigateTo({
url: '/pages/cart/cart',
});
}
function toDetail() {
// TODO: 跳转到筑农严选
xma.navigateTo({
url: '/pages/detail/detail',
});
}
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
}
.container {
.top {
width: 100%;
height: 440rpx;
background: linear-gradient(180deg, #71c456 0%, rgba(243, 243, 243, 0) 100%);
border-radius: 0rpx 0rpx 0rpx 0rpx;
overflow: hidden;
}
}
.nav {
width: 710rpx;
margin-left: 18rpx;
margin-top: -300rpx;
}
.nav-img {
width: 710rpx;
display: flex;
position: relative;
top: 12rpx;
}
.sort {
width: 750rpx;
height: 186rpx;
}
.borderClass {
width: 96rpx;
height: 96rpx;
margin-left: 50rpx;
margin-top: 22rpx;
}
.sort-text {
font-size: 22rpx;
font-weight: 500;
line-height: 24rpx;
text-align: center;
letter-spacing: 0em;
color: #3d3d3d;
width: 176rpx;
margin-left: -60rpx;
}
.tabs {
width: 750rpx;
height: 76rpx;
margin-top: -64rpx;
margin-left: 20rpx;
border-radius: 8px 8px 0px 0px;
background: #ffffff;
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
background-color: transparent;
}
.tabs {
white-space: nowrap;
height: 60rpx;
.text {
font-size: 24rpx;
color: #d8d8d8;
margin: 0 20rpx;
font-weight: bold;
display: inline-block;
}
.text:nth-child(1) {
margin-left: 40rpx;
}
.light {
background: #50d071;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
position: relative;
//&::after {
// content: '';
// width: 20rpx;
// height: 12rpx;
// background: #e6ffe3;
// background-size: 100% 100%;
// position: absolute;
// bottom: -16rpx;
// left: 50%;
// transform: translate(-50%);
//}
}
}
.tab-list {
width: 710rpx;
height: 730rpx;
margin-top: -64rpx;
margin-left: 20rpx;
border-radius: 0px 0px 8px 8px;
background: #ffffff;
margin-top: 6rpx;
}
.buy-list {
margin-top: 30rpx;
margin-left: 20rpx;
}
.retail-price {
height: 28rpx;
display: block;
margin-top: -120rpx;
margin-left: 60rpx;
font-family: Source Han Sans;
font-size: 24rpx;
font-weight: normal;
line-height: 28rpx;
letter-spacing: 0em;
text-decoration: line-through;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #b3b3b3;
}
.presale-price {
left: 20rpx;
display: block;
margin-left: 60rpx;
font-size: 30rpx;
font-weight: bold;
color: #ffffff;
position: relative;
z-index: 9;
}
.waterfall {
display: flex;
flex-direction: row;
width: 710rpx;
justify-content: center;
overflow: hidden;
margin-top: 10rpx;
margin-left: 30rpx;
}
.wt-list {
width: 360rpx;
display: flex;
flex-direction: column;
margin-right: 10rpx;
}
.wt-item {
border-radius: 8px 8px 8px 8px;
margin-bottom: 15rpx;
background-color: #ffffff;
}
.item-img image {
width: 100%;
}
/* 商品介绍 */
.introduce-section {
background: #ffffff;
padding: 20rpx 30rpx;
border-radius: 0 0 08px 8px;
margin-top: -20rpx;
height: 110rpx;
}
.introduce-section .title {
font-size: 32rpx;
color: #303133;
height: 50rpx;
line-height: 50rpx;
}
.introduce-section .tags-box {
display: flex;
align-items: center;
height: 30rpx;
font-size: 24rpx;
color: #909399;
}
.good-price {
position: relative;
margin-top: 70rpx;
margin-left: -200rpx;
color: #fa5151;
font-size: 28rpx;
}
.preview-img {
margin-left: 100rpx;
display: block;
margin-top: -48rpx;
position: relative;
z-index: 10;
}
.pre-text {
float: right;
margin-top: -36rpx;
font-size: 11px;
font-weight: normal;
line-height: 14px;
color: #ffffff;
position: relative;
left: -60rpx;
z-index: 999;
top: -60rpx;
}
.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;
}
.shop-car {
margin-left: 20rpx;
margin-top: 20rpx;
}
::v-deep .wd-badge__content.is-fixed {
margin-top: 20rpx;
}
::v-deep.icon {
width: 56rpx;
height: 56rpx;
}
</style>
src/pages/assistingAgriculture/reviewDetails/reviewDetails.vue 0 → 100644
View file @ 7b0e8b71
<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>
src/pages/assistingAgriculture/reviewDetails/scenicSpotDetails.vue 0 → 100644
View file @ 7b0e8b71
<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>
src/pages/assistingAgriculture/shop/commodityItem.vue 0 → 100644
View file @ 7b0e8b71
<template>
<div class="item">
<div class="image-wrap" :class="{ border: isPreSale }">
<img src="/src/static/shop/chicken.png" alt="" />
<div class="count-down-wrop">
距离结束:
<wd-count-down :time="6068060" />
</div>
<div class="type">预售</div>
<img src="/src/static/shop/commodityBorder.png" alt="" />
</div>
<div class="commodity-info">
<div class="name">这是产品名称</div>
<div class="wrap">
<div class="describe">描述</div>
<div class="date">预计8月31日发货</div>
</div>
<div class="price">
<span style="font-size: 22rpx">￥</span>
135
<span class="unit">/只</span>
</div>
</div>
<div class="add-shopping-cart">
<img src="/src/static/shop/add.png" alt="" />
</div>
</div>
</template>
<script setup>
const isPreSale = true;
</script>
<style lang="scss" scoped>
.item {
display: flex;
position: relative;
.image-wrap {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
position: relative;
&.border {
border: 2rpx solid #fcdbdb;
box-sizing: border-box;
border-radius: 16rpx;
}
.count-down-wrop {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
font-size: 16rpx;
color: #fa5151;
z-index: 1;
height: 24rpx;
width: 100%;
.wd-count-down {
font-size: 16rpx;
color: #fa5151;
}
}
.type {
position: absolute;
bottom: 4rpx;
right: 10rpx;
font-size: 18rpx;
color: #fff;
z-index: 1;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.commodity-info {
display: flex;
flex-direction: column;
color: #3d3d3d;
padding-bottom: 20rpx;
box-sizing: border-box;
.name {
font-size: 24rpx;
}
.wrap {
flex: 1;
}
.describe {
color: #abaaaa;
font-size: 22rpx;
}
.date {
color: #fa5151;
font-size: 22rpx;
}
.price {
color: #fa5151;
font-size: 36rpx;
span {
font-size: 22rpx;
}
.unit {
color: #3d3d3d;
}
}
}
.add-shopping-cart {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 16rpx;
right: 0;
img {
width: 52rpx;
height: 52rpx;
}
}
}
</style>
src/pages/assistingAgriculture/shop/index.vue 0 → 100644
View file @ 7b0e8b71
<template>
<div class="page">
<div class="banner">
<img src="/static/shop/banner.png" alt="" />
</div>
<div class="commodity-wrap">
<div class="top-bar">
<div class="header">分类</div>
<div class="search">
<wd-search hide-cancel placeholder="请输入要搜索的内容" />
</div>
</div>
<div class="content">
<div class="nav">
<p
v-for="(v, i) in navList"
:key="i"
@click="acitveNav = v.id"
:class="{ active: acitveNav == v.id }"
>
{{ v.name }}
</p>
</div>
<div class="list">
<div class="list-top">
<div class="subclass">
<div v-for="v in 10" :key="v">鸡</div>
</div>
<div class="filter" @click="activeFilter = true" v-if="!activeFilter">
筛选
<img src="/static/shop/filter.png" alt="" />
</div>
<div class="sort" v-else>
<Sort>销量</Sort>
<Sort>交割</Sort>
</div>
</div>
<div class="commodity-list">
<CommodityItem v-for="v in 50" :key="v" />
</div>
</div>
</div>
</div>
<!-- 购物车悬浮按钮 -->
<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>
<script setup>
import { ref } from 'vue';
import CommodityItem from './commodityItem.vue';
import Sort from './sort.vue';
const navList = ref([
{
id: 1,
name: '鲜货家禽',
},
{
id: 2,
name: '鲜货家禽',
},
{
id: 3,
name: '鲜货家禽',
},
{
id: 4,
name: '鲜货家禽',
},
{
id: 5,
name: '鲜货家禽',
},
]);
const acitveNav = ref(1);
const activeFilter = ref(false);
function toCart() {
// TODO: 跳转到购物车
xma.navigateTo({
url: '/pages/cart/cart',
});
}
</script>
<style lang="scss" scoped>
uni-page-body {
height: 100%;
}
.page {
height: 100%;
background-color: #f6f6f6;
padding: 20rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.banner {
width: 710rpx;
height: 236rpx;
margin-bottom: 20rpx;
img {
width: 100%;
height: 100%;
}
}
.commodity-wrap {
height: 40rpx;
flex-grow: 1;
background-color: #fff;
border-radius: 16rpx 16rpx 0rpx 0rpx;
display: flex;
flex-direction: column;
padding-bottom: 100rpx;
.top-bar {
display: flex;
height: 88rpx;
border-bottom: 2rpx solid #f6f6f6;
.header {
font-family: Source Han Sans;
font-size: 32rpx;
font-weight: 500;
line-height: 88rpx;
color: #3d3d3d;
width: 180rpx;
border-right: 2rpx solid #f6f6f6;
text-align: center;
}
.search {
flex: 1;
padding: 16rpx 36rpx;
.wd-search {
padding: 0;
}
}
}
.content {
display: flex;
flex: 1;
.nav {
width: 180rpx;
border-right: 2rpx solid #f6f6f6;
background-color: #f1f1f1;
p {
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: #abaaaa;
&.active {
background-color: #fff;
color: #3d3d3d;
}
}
}
.list {
flex: 1;
color: #3d3d3d;
display: flex;
flex-direction: column;
.list-top {
display: flex;
padding: 24rpx 0;
box-sizing: border-box;
.subclass {
display: flex;
width: 40rpx;
padding: 0 20rpx;
flex-grow: 1;
gap: 64rpx;
overflow-x: scroll;
font-size: 24rpx;
}
.filter {
width: 78rpx;
font-size: 22rpx;
padding: 0 4rpx;
display: flex;
align-items: center;
justify-content: center;
img {
height: 19rpx;
width: 16rpx;
}
}
.sort {
width: 194rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
box-sizing: border-box;
}
}
.commodity-list {
padding: 0 20rpx;
overflow-y: scroll;
height: 200rpx;
flex-grow: 1;
.item {
margin-bottom: 20rpx;
}
}
}
}
}
.shopping-cart {
position: fixed;
bottom: 10rpx;
background-color: #fff;
right: 0;
width: 730rpx;
height: 98rpx;
border-radius: 16rpx 0rpx 0rpx 0rpx;
display: flex;
justify-content: flex-end;
align-items: center;
& > img {
width: 24rpx;
height: 20rpx;
margin-right: 70rpx;
}
div {
margin-right: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 22rpx;
color: #3d3d3d;
img {
margin-bottom: 10rpx;
width: 40rpx;
height: 38rpx;
}
}
}
.cart-floating {
position: fixed;
text-align: center;
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>
src/pages/assistingAgriculture/shop/sort.vue 0 → 100644
View file @ 7b0e8b71
<template>
<div class="sort-wrap" @click="test">
<slot name="default"></slot>
<div class="arrow" :class="{ rotate: isHighToLow }">
<img src="/src/static/shop/arrowGreen.png" alt="" />
<img src="/src/static/shop/arrow.png" alt="" />
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const isHighToLow = ref(false);
const test = () => {
isHighToLow.value = !isHighToLow.value;
};
</script>
<style lang="scss" scoped>
.sort-wrap {
display: flex;
font-size: 22rpx;
color: #343434;
.arrow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rpx;
margin-left: 4rpx;
img {
width: 10.5rpx;
height: 6rpx;
}
&.rotate {
transform: rotateZ(180deg);
}
}
}
</style>
src/styles/flex.scss 0 → 100644
View file @ 7b0e8b71
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-align-center {
display: flex;
align-items: center;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
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