1

parent 88382beb
<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>
<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>
<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>
<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>
<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>
...@@ -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": {
......
This diff is collapsed.
This diff is collapsed.
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
This diff is collapsed.
<template>
<!-- 点评详情页面 -->
<view class="review-details-pages">
<view class="swiper-list">
<wd-swiper
:list="swiperList"
direction="horizontal"
indicatorPosition="right"
autoplay
height="456rpx"
v-model:current="current"
@click="handleClick"
@change="onChange"
>
<template #indicator="{ current, total }">
<view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">
{{ current + 1 }}/{{ total }}
</view>
</template>
</wd-swiper>
</view>
<view class="revuew-content">
<view class="user-info">
<view class="info-content">
<image src="@/static/reviewDetails/avatar.png" mode="aspectFill"></image>
<view class="text-box">
<text class="user-name">不爱吃鱼的小猫咪</text>
<text class="fb-time">2024-08-03</text>
</view>
</view>
<view>
<text class="score">4.9</text>
<text class="score-unit">/5分</text>
</view>
</view>
<text style="margin-top: 12rpx; font-size: 14 * 2rpx; color: #3d3d3d">
跟团游行程紧凑有序,充分利用了时间,让游客能够在有限的时间内充分游览黄果树的主要景点,如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情,对景区有深入的了解,能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答问题。
跟团游行程紧凑有序,充分利用了时间,让游客能够在有限的时间内充分游览黄果树的主要景点,如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情,对景区有深入的了解,能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答问题。
</text>
</view>
<view class="scenic-spot">
<image src="@/static/reviewDetails/fj.png" mode="aspectFill"></image>
<view class="scenic-area-details">
<text class="scenic-name">红枫湖+青岩古镇+云漫湖</text>
<text class="scenic-type">自然风景</text>
<view class="tag-list">
<text class="tag">无购物</text>
<text class="tag">无购物</text>
</view>
</view>
<wd-icon class="icon" color="#ABAAAA" name="arrow-right" size="22px"></wd-icon>
</view>
<view class="dz-btn">
<wd-icon color="#767676" name="thumb-up" size="22px"></wd-icon>
<text>12</text>
</view>
</view>
</template>
<script setup>
const current = ref(0);
onMounted(() => {
xma.getSystemInfo({
success: function (res) {
console.log(res, '11111111');
},
});
});
const swiperList = ref([
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
]);
function handleClick(e) {}
function onChange(e) {
console.log(e);
}
</script>
<style lang="scss" scoped>
page {
background: #ffffff;
}
.review-details-pages {
display: flex;
flex-direction: column;
align-items: center;
width: 750rpx;
.swiper-list {
width: 375 * 2rpx;
height: 228 * 2rpx;
:deep(.wd-swiper__track) {
border-radius: 0;
}
.custom-indicator {
padding: 0 12rpx;
height: 48rpx;
line-height: 48rpx;
border-radius: 45%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-size: 24rpx;
}
}
.revuew-content {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
padding: 40rpx 20rpx;
box-sizing: border-box;
.user-info {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.info-content {
display: flex;
align-items: center;
image {
width: 36 * 2rpx;
height: 36 * 2rpx;
border-radius: 50%;
}
.text-box {
display: flex;
flex-direction: column;
margin-left: 20rpx;
.user-name {
font-size: 14 * 2rpx;
color: #3d3d3d;
}
.fb-time {
font-size: 11 * 2rpx;
/* 小文本 */
color: #abaaaa;
margin-top: 10rpx;
}
}
.score {
font-size: 14 * 2rpx;
/* 4.9 */
color: #0974f5;
}
.score-unit {
font-size: 12 * 2rpx;
color: #abaaaa;
}
}
}
}
.scenic-spot {
width: 355 * 2rpx;
box-sizing: border-box;
padding: 20rpx 36rpx 20rpx 10rpx;
background: #f3f3f3;
border-radius: 8 * 2rpx;
display: flex;
align-items: center;
image {
width: 102 * 2rpx;
height: 72 * 2rpx;
border-radius: 4 * 2rpx;
}
.scenic-area-details {
display: flex;
flex-direction: column;
margin-left: 20rpx;
.cenic-name {
font-size: 14 * 2rpx;
color: #3d3d3d;
}
.scenic-type {
font-size: 12 * 2rpx;
/* 菜头标题文本 */
color: #3d3d3d;
}
.tag-list {
display: flex;
flex-wrap: wrap;
.tag {
box-sizing: border-box;
padding: 10rpx 16rpx;
border-radius: 30rpx;
border: 2rpx solid #d8d8d8;
color: #3d3d3d;
font-size: 16rpx;
margin-top: 10rpx;
margin-left: 20rpx;
}
}
}
.icon {
margin-left: auto;
}
}
.dz-btn {
display: flex;
align-items: center;
box-sizing: border-box;
padding: 28rpx 100rpx;
border: 2rpx solid #abaaaa;
margin-top: 46rpx;
border-radius: 68rpx;
text {
color: #767676;
font-size: 28rpx;
margin-left: 10rpx;
}
}
}
</style>
<template>
<!-- 点评详情页面 -->
<view class="review-details-pages">
<view class="list">
<view class="item" v-for="i in 10" :key="i">
<image mode="aspectFill" src="@/static/reviewDetails/fj.png"></image>
<view class="info-box">
<text>红枫湖景区</text>
<text>自然风景</text>
<text class="t-2">4.5分</text>
<text class="t-2">门票费用已包含</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
onMounted(() => {});
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
}
.review-details-pages {
display: flex;
flex-direction: column;
align-items: center;
width: 750rpx;
.list {
width: 355 * 2rpx;
.item {
margin-top: 10rpx;
box-sizing: border-box;
padding: 20rpx;
display: flex;
background: #fff;
border-radius: 16rpx;
align-items: center;
image {
width: 102 * 2rpx;
height: 72 * 2rpx;
border-radius: 8rpx;
}
.info-box {
display: flex;
flex-direction: column;
margin-left: 40rpx;
text {
font-size: 12 * 2rpx;
margin-top: 8rpx;
/* 菜头标题文本 */
color: #3d3d3d;
}
.t-2 {
font-size: 12 * 2rpx;
color: rgba(9, 116, 245, 1);
}
}
}
}
}
</style>
<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>
<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>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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