Commit e9af9364 authored by 刘玉宏's avatar 刘玉宏
parents 13c474c9 a22d39c0
<template> <template>
<view class="sort" :style="{ width: width }"> <view class="sort" :style="{ width: width }">
<view class="date">出发日期</view>
<ul class="ul"> <ul class="ul">
<li <li
v-for="(item, index) in items" v-for="(item, index) in items"
...@@ -30,6 +31,8 @@ const selectItem = (selectItem) => { ...@@ -30,6 +31,8 @@ const selectItem = (selectItem) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.sort { .sort {
width: 710rpx;
height: 192rpx;
position: absolute; position: absolute;
top: 100%; top: 100%;
// width: 100%; // width: 100%;
...@@ -39,19 +42,47 @@ const selectItem = (selectItem) => { ...@@ -39,19 +42,47 @@ const selectItem = (selectItem) => {
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14); box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto; margin: 0 auto;
z-index: 99; z-index: 99;
display: flex; // display: flex;
padding-bottom: 20rpx; padding-bottom: 20rpx;
box-sizing: border-box; box-sizing: border-box;
overflow: auto;
.date {
width: 96rpx;
height: 28rpx;
font-family: Source Han Sans;
font-size: 24rpx;
font-weight: normal;
line-height: 28rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #fa5151;
margin-left: 44rpx;
margin-top: 20rpx;
}
.ul { .ul {
padding-left: 60rpx; padding-left: 20rpx;
display: flex;
flex-flow: wrap;
li { li {
width: 154rpx;
height: 20rpx;
border-radius: 8rpx;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 6rpx 26rpx;
margin-left: 20rpx;
background: #f3f3f3;
font-size: 24rpx;
line-height: 20rpx;
text-align: center;
list-style-type: none; list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx; margin-top: 20rpx;
} }
.active { .active {
color: #fa5151; color: #fa5151;
background: #feeeee;
} }
} }
} }
......
<template> <template>
<view class="sort" :style="{ width: width }"> <view class="sort" :style="{ width: width }">
<view class="date">景点</view>
<ul class="ul"> <ul class="ul">
<li <li
v-for="(item, index) in items" v-for="(item, index) in items"
...@@ -15,7 +16,19 @@ ...@@ -15,7 +16,19 @@
<script setup> <script setup>
import { defineProps } from 'vue'; import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']); const items = reactive([
'智能排序',
'距离优先',
'好评优先',
'销量优先',
'低价优先',
'低价优先',
'距离优先',
'好评优先',
'销量优先',
'低价优先',
'距离优先',
]);
const selectedItem = ref(null); const selectedItem = ref(null);
const props = defineProps({ const props = defineProps({
width: { width: {
...@@ -30,6 +43,8 @@ const selectItem = (selectItem) => { ...@@ -30,6 +43,8 @@ const selectItem = (selectItem) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.sort { .sort {
width: 710rpx;
height: 192rpx;
position: absolute; position: absolute;
top: 100%; top: 100%;
// width: 100%; // width: 100%;
...@@ -39,19 +54,47 @@ const selectItem = (selectItem) => { ...@@ -39,19 +54,47 @@ const selectItem = (selectItem) => {
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14); box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto; margin: 0 auto;
z-index: 99; z-index: 99;
display: flex; // display: flex;
padding-bottom: 20rpx; padding-bottom: 20rpx;
box-sizing: border-box; box-sizing: border-box;
overflow: auto;
.date {
width: 96rpx;
height: 28rpx;
font-family: Source Han Sans;
font-size: 24rpx;
font-weight: normal;
line-height: 28rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #fa5151;
margin-left: 44rpx;
margin-top: 20rpx;
}
.ul { .ul {
padding-left: 60rpx; padding-left: 20rpx;
display: flex;
flex-flow: wrap;
li { li {
width: 154rpx;
height: 20rpx;
border-radius: 8rpx;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 6rpx 26rpx;
margin-left: 20rpx;
background: #f3f3f3;
font-size: 24rpx;
line-height: 20rpx;
text-align: center;
list-style-type: none; list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx; margin-top: 20rpx;
} }
.active { .active {
color: #fa5151; color: #fa5151;
background: #feeeee;
} }
} }
} }
......
<template> <template>
<view class="sort" :style="{ width: width }"> <view class="sort" :style="{ width: width }">
<view class="date">筛选</view>
<ul class="ul"> <ul class="ul">
<li <li
v-for="(item, index) in items" v-for="(item, index) in items"
...@@ -15,7 +16,19 @@ ...@@ -15,7 +16,19 @@
<script setup> <script setup>
import { defineProps } from 'vue'; import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']); const items = reactive([
'智能排序',
'距离优先',
'好评优先',
'销量优先',
'低价优先',
'低价优先',
'距离优先',
'好评优先',
'销量优先',
'低价优先',
'距离优先',
]);
const selectedItem = ref(null); const selectedItem = ref(null);
const props = defineProps({ const props = defineProps({
width: { width: {
...@@ -30,6 +43,8 @@ const selectItem = (selectItem) => { ...@@ -30,6 +43,8 @@ const selectItem = (selectItem) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.sort { .sort {
width: 710rpx;
height: 192rpx;
position: absolute; position: absolute;
top: 100%; top: 100%;
// width: 100%; // width: 100%;
...@@ -39,19 +54,47 @@ const selectItem = (selectItem) => { ...@@ -39,19 +54,47 @@ const selectItem = (selectItem) => {
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14); box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto; margin: 0 auto;
z-index: 99; z-index: 99;
display: flex; // display: flex;
padding-bottom: 20rpx; padding-bottom: 20rpx;
box-sizing: border-box; box-sizing: border-box;
overflow: auto;
.date {
width: 96rpx;
height: 28rpx;
font-family: Source Han Sans;
font-size: 24rpx;
font-weight: normal;
line-height: 28rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #fa5151;
margin-left: 44rpx;
margin-top: 20rpx;
}
.ul { .ul {
padding-left: 60rpx; padding-left: 20rpx;
display: flex;
flex-flow: wrap;
li { li {
width: 154rpx;
height: 20rpx;
border-radius: 8rpx;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 6rpx 26rpx;
margin-left: 20rpx;
background: #f3f3f3;
font-size: 24rpx;
line-height: 20rpx;
text-align: center;
list-style-type: none; list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx; margin-top: 20rpx;
} }
.active { .active {
color: #fa5151; color: #fa5151;
background: #feeeee;
} }
} }
} }
......
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
<text class="three-text">销量{{ item.monthSoldNum }}</text> <text class="three-text">销量{{ item.monthSoldNum }}</text>
<text class="four-text">1.2km</text> <text class="four-text">1.2km</text>
</view> </view>
<view class="threeBox"> <view class="threeBox" v-if="item.evaluationVos.length === 0">
<image class="img2" :src="item.evaluationVos[0]?.avatar" mode="aspectFill" /> <image class="img2" :src="item.evaluationVos[0].avatar" mode="aspectFill" />
<text class="one-text">{{ item.evaluationVos[0]?.evaluation }}</text> <text class="one-text">{{ item.evaluationVos[0].evaluation }}</text>
</view> </view>
<view class="labelBox"> <view class="labelBox" v-if="item.labels">
<view v-for="(item, index) in item.labels" :key="index">{{ item }}</view> <view v-for="(item, index) in item.labels" :key="index">{{ item }}</view>
</view> </view>
<view class="groupPurchasePrice" v-for="(item, index) in item.simpleProds" :key="index"> <view class="groupPurchasePrice" v-for="(item, index) in item.simpleProds" :key="index">
...@@ -144,6 +144,8 @@ const toShop = (id) => { ...@@ -144,6 +144,8 @@ const toShop = (id) => {
margin-bottom: 20rpx; margin-bottom: 20rpx;
.img { .img {
width: 32rpx; width: 32rpx;
height: 32rpx;
flex-shrink: 0;
} }
.one-text { .one-text {
font-size: 28rpx; font-size: 28rpx;
...@@ -171,6 +173,9 @@ const toShop = (id) => { ...@@ -171,6 +173,9 @@ const toShop = (id) => {
margin-left: 4rpx; margin-left: 4rpx;
font-size: 22rpx; font-size: 22rpx;
color: #3d3d3d; color: #3d3d3d;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }
......
import { request } from '../../utils/request';
// 获取指定类型轮播图
export function getSortList(data) {
return request({
url: `/sgyrdd/category/znList`,
method: 'GET',
data,
});
}
// 筑农严选首页-分类预售商品列表
export function getPresaleCategory(data) {
return request({
url: `/sgyrdd/znprod/getPresaleCategoryProd`,
method: 'GET',
data,
});
}
// 预售板块轮播图
export function getPresaleList(data) {
return request({
url: `/sgyrdd/carousel/presaleList`,
method: 'GET',
data,
});
}
// 筑农严选分类
export function getStrictSelection(data) {
return request({
url: `/sgyrdd/category/getZnyx`,
method: 'GET',
data,
});
}
// 筑农预售分类
export function getBuindingSort(data) {
return request({
url: `/sgyrdd/category/presaleList`,
method: 'GET',
data,
});
}
<template> <template>
<div class="route-details"> <div class="route-details">
<scroll-view class="container" scroll-y> <scroll-view class="container" scroll-y>
<img class="back-img" src="/static/assistingAgriculture/assets/left.png" @tap="back" />
<!-- 轮播 --> <!-- 轮播 -->
<div class="banner"> <div class="banner">
<!-- --> <!-- -->
<wd-swiper <wd-swiper
:autoplay="false" :autoplay="1"
:list="swiperList" :list="swiperList"
:indicator="{ type: 'fraction' }" :indicator="{ type: 'fraction' }"
indicatorPosition="bottom-right" indicatorPosition="bottom-right"
...@@ -60,7 +61,7 @@ ...@@ -60,7 +61,7 @@
<span>/5分</span> <span>/5分</span>
</p> </p>
</div> </div>
<div class="link">查看全部(526) ></div> <div class="link" @click="toCommentDetail">查看全部(526) ></div>
</div> </div>
<div class="tags"> <div class="tags">
<p>景色优美 (153)</p> <p>景色优美 (153)</p>
...@@ -78,7 +79,7 @@ ...@@ -78,7 +79,7 @@
<div class="album"> <div class="album">
<div class="top flex-between"> <div class="top flex-between">
<div class="title">用户相册</div> <div class="title">用户相册</div>
<div class="link">查看全部(526) ></div> <div class="link" @click="toAlbum">查看全部(526) ></div>
</div> </div>
<div class="img-list"> <div class="img-list">
<wd-img <wd-img
...@@ -195,7 +196,7 @@ ...@@ -195,7 +196,7 @@
<img class="icon" src="/static/assistingAgriculture/routeDetails/position.png" /> <img class="icon" src="/static/assistingAgriculture/routeDetails/position.png" />
<span class="t2">贵阳市南明区维也纳酒店(花果园店)</span> <span class="t2">贵阳市南明区维也纳酒店(花果园店)</span>
</p> </p>
<p> <p class="t3">
早上统一集合发车,(具体出发时间以导游通知为准)为便于通知游客车时间、上车地点、导游和车牌号,请游客在出行前一天随时保持手机畅通。 早上统一集合发车,(具体出发时间以导游通知为准)为便于通知游客车时间、上车地点、导游和车牌号,请游客在出行前一天随时保持手机畅通。
</p> </p>
</timeLine> </timeLine>
...@@ -268,6 +269,26 @@ const swiperList = ref([ ...@@ -268,6 +269,26 @@ const swiperList = ref([
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg', 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg', 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
]); ]);
// 返回上一级
function back() {
xma.navigateBack({
delta: 1,
});
}
// 跳转详情页
function toCommentDetail() {
// TODO: 跳转到评论详情页
xma.navigateTo({
url: '/pages/assistingAgriculture/commentList/index',
});
}
// 跳转用户相册
function toAlbum() {
// TODO: 跳转到评论详情页
xma.navigateTo({
url: '/pages/assistingAgriculture/album/index',
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
uni-page-body { uni-page-body {
...@@ -677,4 +698,12 @@ uni-page-body { ...@@ -677,4 +698,12 @@ uni-page-body {
} }
} }
} }
.back-img {
width: 56rpx;
height: 56rpx;
position: absolute;
z-index: 999;
margin-top: 40rpx;
margin-left: 40rpx;
}
</style> </style>
...@@ -23,9 +23,9 @@ const props = defineProps({ ...@@ -23,9 +23,9 @@ const props = defineProps({
.time-line { .time-line {
display: flex; display: flex;
.date { .date {
flex: 0 0 60px; flex: 0 0 120rpx;
text-align: center; text-align: center;
margin-right: 10px; margin-right: 20rpx;
color: #767676; color: #767676;
position: relative; position: relative;
&::after { &::after {
...@@ -33,26 +33,26 @@ const props = defineProps({ ...@@ -33,26 +33,26 @@ const props = defineProps({
display: block; display: block;
height: 100%; height: 100%;
width: 0; width: 0;
border-right: 1px dashed #767676; border-right: 2rpx dashed #767676;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 0; top: 0;
transform: translateX(-1px); transform: translateX(-2rpx);
} }
span { span {
z-index: 1; z-index: 1;
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: 5px; padding: 10rpx;
background-color: #fff; background-color: #fff;
} }
} }
.content-wrap { .content-wrap {
flex: 1; flex: 1;
padding: 5px 0 25px; padding: 10rpx 0 50rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 12rpx;
} }
} }
</style> </style>
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
<!-- </view>--> <!-- </view>-->
<view class="btn"> <view class="btn">
<wd-button type="warning" size="small" style="margin-right: 10rpx">加入购物车</wd-button> <wd-button type="warning" size="small" style="margin-right: 10rpx">加入购物车</wd-button>
<wd-button type="error" size="small">立即购买</wd-button> <wd-button type="error" size="small" @tap="toSettle">立即购买</wd-button>
</view> </view>
</view> </view>
</view> </view>
...@@ -142,9 +142,18 @@ function toCart() { ...@@ -142,9 +142,18 @@ function toCart() {
url: '/pages/assistingAgriculture/cart/cart', url: '/pages/assistingAgriculture/cart/cart',
}); });
} }
function toSettle() {
// TODO: 跳转到结算页面
xma.navigateTo({
url: '/pages/assistingAgriculture/cart/ConfirmOrder',
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
page {
background-color: #f3f3f3;
}
.container { .container {
position: relative; position: relative;
left: 0rpx; left: 0rpx;
...@@ -306,12 +315,13 @@ function toCart() { ...@@ -306,12 +315,13 @@ function toCart() {
} }
.detail-info { .detail-info {
width: 750rpx; width: 750rpx;
height: 1168px;
border-radius: 16rpx; border-radius: 16rpx;
background: #ffffff; background: #ffffff;
margin-top: 20rpx; margin-top: 20rpx;
position: relative; position: relative;
z-index: 9; z-index: 9;
top: -8rpx;
padding-bottom: 120rpx;
} }
.info-title { .info-title {
width: 64rpx; width: 64rpx;
...@@ -330,7 +340,6 @@ function toCart() { ...@@ -330,7 +340,6 @@ function toCart() {
} }
.info-img { .info-img {
width: 710rpx; width: 710rpx;
height: 1168rpx;
border-radius: 16rpx; border-radius: 16rpx;
position: relative; position: relative;
margin-top: 40rpx; margin-top: 40rpx;
......
...@@ -26,146 +26,25 @@ ...@@ -26,146 +26,25 @@
</view> </view>
<view class="sort"> <view class="sort">
<view style="display: flex; flex-direction: row"> <view style="display: flex; flex-direction: row">
<view class="borderClass" @tap="toBuilding"> <view
<img class="borderClass"
src="/static/assistingAgriculture/assets/buildingAgriculture.png" @click="toBuilding(index)"
style="width: 96rpx; height: 96rpx" v-for="(item, index) in sortList"
/> :key="index"
<view class="sort-text">筑农严选</view> >
</view> <img :src="item.icon" style="width: 96rpx; height: 96rpx" />
<view class="borderClass"> <view class="sort-text">{{ item.categoryName }}</view>
<img
src="/static/assistingAgriculture/assets/adoption.png"
style="width: 96rpx; height: 96rpx"
/>
<view class="sort-text">认养农业</view>
</view>
<view class="borderClass" @tap="toRuralTravel">
<img
src="/static/assistingAgriculture/assets/rural.png"
style="width: 96rpx; height: 96rpx"
/>
<view class="sort-text">乡村旅居</view>
</view>
<view class="borderClass">
<img
src="/static/assistingAgriculture/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/assistingAgriculture/assets/mainPicture.png" class="main-img" />
<view style="display: flex; flex-direction: row">
<view class="detail-border">
<img
src="/static/assistingAgriculture/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/assistingAgriculture/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/assistingAgriculture/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/assistingAgriculture/assets/img4.png" class="main-img" />
<view style="display: flex; flex-direction: row">
<view class="detail-border">
<img
src="/static/assistingAgriculture/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/assistingAgriculture/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/assistingAgriculture/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>
</view> </view>
<view class="product-page" v-for="(item, index) in list" :key="index"> <view class="product-page" v-for="(item, index) in list" :key="index">
<view> <view>
<view class="page-title">{{ item.text }}</view> <view class="page-title">{{ item.categoryName }}</view>
<img :src="item.img" class="main-img" /> <img :src="item.img" class="main-img" />
<view style="display: flex; flex-direction: row"> <view style="display: flex; flex-direction: row">
<view class="detail-border" v-for="(item, index) in detailList" :key="index"> <view class="detail-border" v-for="(item, index) in item.commodityList" :key="index">
<img <img :src="item.commodityImg" style="width: 216rpx; height: 176rpx" />
src="/static/assistingAgriculture/assets/detailedMapOne.png" <view class="detail-title">{{ item.prodName }}</view>
style="width: 216rpx; height: 176rpx"
/>
<view class="detail-title">{{ item.text }}</view>
<view class="jiage-page"> <view class="jiage-page">
<text class="jiage">{{ item.price }}</text> <text class="jiage">{{ item.price }}</text>
/份 /份
...@@ -181,15 +60,13 @@ ...@@ -181,15 +60,13 @@
<script setup lang="ts"> <script setup lang="ts">
import Search from '../../../components/assistingAgriculture/index/Search.vue'; import Search from '../../../components/assistingAgriculture/index/Search.vue';
import {
const list = ref([ getPresaleCategory,
// { img: '/static/assistingAgriculture/assets/mainPicture.png', text: '特色美食' }, getSortList,
// { img: '/static/assistingAgriculture/assets/presale.png', text: '农货预售' }, getStrictSelection,
{ img: '/static/assistingAgriculture/assets/mainPicture.png', text: '乡村非遗' }, } from '../../../api/assistingAgriculture/building';
{ img: '/static/assistingAgriculture/assets/mainPicture.png', text: '认养农业' }, import { onMounted } from 'vue';
{ img: '/static/assistingAgriculture/assets/mainPicture.png', text: '乡村旅居' }, const list = ref([]);
{ img: '/static/assistingAgriculture/assets/mainPicture.png', text: '特色农庄' },
]);
const detailList = ref([ const detailList = ref([
{ {
img: '/static/assistingAgriculture/assets/detailedMapOne.png', img: '/static/assistingAgriculture/assets/detailedMapOne.png',
...@@ -207,31 +84,54 @@ const detailList = ref([ ...@@ -207,31 +84,54 @@ const detailList = ref([
text: '麻辣鱼豆腐', text: '麻辣鱼豆腐',
}, },
]); ]);
const sortList = ref([ const sortList = ref([]);
{ onMounted(async () => {
img: '/static/assistingAgriculture/assets/buildingAgriculture.png', getList();
price: '25', getPresaleCategoryList();
text: '筑农严选', getStrictSelectionList();
}, });
{ img: '/static/assistingAgriculture/assets/adoption.png', price: '25', text: '认养农业' }, // 获取筑农专区分类;
{ img: '/static/assistingAgriculture/assets/rural.png', price: '25', text: '乡村旅居' }, const getList = () => {
{ getSortList().then((res) => {
img: '/static/assistingAgriculture/assets/buildingAgriculture.png', res.data.forEach((item) => {
price: '25', item.icon = import.meta.env.VITE_APP_IMG_URL + item.pic;
text: '特色农庄', });
}, sortList.value = res.data.splice(0, 4);
]); });
function toBuilding() { };
// 筑农严选首页-分类预售商品列表
const getPresaleCategoryList = () => {
getPresaleCategory().then((res) => {
res.data.forEach((item) => {
item.img = import.meta.env.VITE_APP_IMG_URL + item.pic;
item.commodityList = item.prodSimples;
item.commodityList.forEach((item) => {
item.commodityImg = import.meta.env.VITE_APP_IMG_URL + item.pic;
console.log(item.commodityImg, 111);
});
});
list.value = res.data;
});
};
// 筑农严选分类
const getStrictSelectionList = () => {
getStrictSelection().then((res) => {
console.log(res, 333);
});
};
function toBuilding(index) {
if (index === 0) {
// TODO: 跳转到筑农严选 // TODO: 跳转到筑农严选
xma.navigateTo({ xma.navigateTo({
url: '/pages/assistingAgriculture/index/building', url: '/pages/assistingAgriculture/index/building',
}); });
} } else if (index === 2) {
function toRuralTravel() {
// TODO: 跳转到乡村旅居 // TODO: 跳转到乡村旅居
xma.navigateTo({ xma.navigateTo({
url: '/pages/assistingAgriculture/RuralTravel/RuralTravel', url: '/pages/assistingAgriculture/RuralTravel/RuralTravel',
}); });
}
console.log(index, 121);
} }
// 跳转详情页 // 跳转详情页
function toDetail() { function toDetail() {
...@@ -347,7 +247,6 @@ page { ...@@ -347,7 +247,6 @@ page {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.jiage-page { .jiage-page {
width: 96rpx;
height: 28rpx; height: 28rpx;
margin-top: 20rpx; margin-top: 20rpx;
font-size: 24rpx; font-size: 24rpx;
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</text> </text>
</scroll-view> </scroll-view>
</view> </view>
<view class="tab-list" v-for="(item, index) in buyList" :key="index"> <view class="tab-list" v-for="(item, index) in buyList" :key="index" @tap="toDetail">
<img class="buy-list" :src="item.img" style="width: 670rpx; height: 670rpx" /> <img class="buy-list" :src="item.img" style="width: 670rpx; height: 670rpx" />
<view> <view>
<text class="retail-price">零售价:¥{{ item.price }}/盒</text> <text class="retail-price">零售价:¥{{ item.price }}/盒</text>
...@@ -65,12 +65,7 @@ ...@@ -65,12 +65,7 @@
</view> </view>
<view class="waterfall"> <view class="waterfall">
<view class="wt-left wt-list"> <view class="wt-left wt-list">
<view <view class="wt-item" v-for="(good, index) in LeftList" :key="index" @tap="toDetail">
class="wt-item"
v-for="(good, index) in LeftList"
:key="index"
@click="ToDetail(good.id)"
>
<view class="item-img"> <view class="item-img">
<image :src="good.image" mode="widthFix"></image> <image :src="good.image" mode="widthFix"></image>
<image <image
...@@ -105,12 +100,7 @@ ...@@ -105,12 +100,7 @@
</view> </view>
<view class="vt-right wt-list"> <view class="vt-right wt-list">
<view <view class="wt-item" v-for="(good, index) in RightList" :key="index" @tap="toDetail">
class="wt-item"
v-for="(good, index) in RightList"
:key="index"
@click="ToDetail(good.id)"
>
<view class="item-img"> <view class="item-img">
<image :src="good.image" mode="widthFix"></image> <image :src="good.image" mode="widthFix"></image>
<image <image
...@@ -152,7 +142,12 @@ ...@@ -152,7 +142,12 @@
<script setup> <script setup>
import Search from '../../../components/assistingAgriculture/index/Search.vue'; import Search from '../../../components/assistingAgriculture/index/Search.vue';
import { ref } from 'vue'; import { ref, onMounted } from 'vue';
import {
getBuindingSort,
getPresaleList,
getStrictSelection,
} from '../../../api/assistingAgriculture/building';
const current = ref(0); const current = ref(0);
const light = ref(0); const light = ref(0);
const sortList = ref([ const sortList = ref([
...@@ -238,6 +233,22 @@ const goodList = ref([ ...@@ -238,6 +233,22 @@ const goodList = ref([
price: 69.9, price: 69.9,
}, },
]); ]);
onMounted(async () => {
getPresale();
getBuindingSortList();
});
// 预售板块轮播图
const getPresale = () => {
getPresaleList({ place: 3 }).then((res) => {
console.log(res, 111);
});
};
// 筑农预售分类
const getBuindingSortList = () => {
getBuindingSort({ level: 3 }).then((res) => {
console.log(res, 222);
});
};
// 左侧数据列表 // 左侧数据列表
const LeftList = ref([]); const LeftList = ref([]);
// 右侧数据列表 // 右侧数据列表
......
...@@ -138,7 +138,7 @@ onLoad((option) => { ...@@ -138,7 +138,7 @@ onLoad((option) => {
const { parentId, pic, categoryName } = option; const { parentId, pic, categoryName } = option;
categoryNames.value = categoryName; categoryNames.value = categoryName;
categoryId.value = parentId; categoryId.value = parentId;
params.value.categoryId = [parentId]; params.value.categoryIds = [parentId];
pics.value = pic; pics.value = pic;
query(parentId); query(parentId);
prodSpecialFn(); prodSpecialFn();
......
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
@change="onChange" @change="onChange"
customClass="guiyang" customClass="guiyang"
height="68" height="68"
imageMode="scaleToFill" imageMode="aspectFill"
></wd-swiper> ></wd-swiper>
<!-- 附近人气美食 --> <!-- 附近人气美食 -->
<view class="nearby"> <view class="nearby">
...@@ -144,6 +144,24 @@ ...@@ -144,6 +144,24 @@
> >
没有更多啦~ 没有更多啦~
</view> </view>
<!-- 悬浮按钮 -->
<wd-fab
type="error"
position="right-bottom"
direction="left"
:draggable="true"
inactiveIcon="a-controlplatform"
>
<view class="custom-button" @click="go('/pages/ticket/ticket')">
<image class="fab-icon" src="@/static/index/coupon.png"></image>
<text class="fab-text">优惠券</text>
</view>
<view class="custom-button" @click="go('/pages/order/order')">
<image class="fab-icon" src="@/static/index/order.png"></image>
<text class="fab-text">订单</text>
</view>
</wd-fab>
</view> </view>
</template> </template>
...@@ -474,6 +492,13 @@ onReachBottom(() => { ...@@ -474,6 +492,13 @@ onReachBottom(() => {
} }
show.value = true; show.value = true;
}); });
// 前往个人中心
const go = (url) => {
xma.navigateTo({
url,
});
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -632,13 +657,13 @@ page { ...@@ -632,13 +657,13 @@ page {
} }
.nearby { .nearby {
width: 710rpx; width: 710rpx;
height: 380rpx; max-height: 380rpx;
border-radius: 16rpx; border-radius: 16rpx;
background: #ffffff; background: #ffffff;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
padding-top: 20rpx; padding: 20rpx 0;
.nearby-top { .nearby-top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -804,5 +829,26 @@ page { ...@@ -804,5 +829,26 @@ page {
} }
} }
} }
.custom-button {
min-width: auto;
box-sizing: border-box;
gap: 10rpx;
margin: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.fab-icon {
width: 64rpx;
height: 64rpx;
}
.fab-text {
font-size: 20rpx;
color: #333;
}
}
} }
</style> </style>
...@@ -141,18 +141,18 @@ ...@@ -141,18 +141,18 @@
<view class="bz"> <view class="bz">
<text class="yh-name">保障:</text> <text class="yh-name">保障:</text>
<view class="icon-box"> <view class="icon-box">
<i class="iconfont icon icon-rs-countdown" /> <image src="@/static/shop/icon-1.png" class="m-r"></image>
过期退 过期退
</view> </view>
<view style="margin-left: 64rpx" class="icon-box"> <view style="margin-left: 64rpx" class="icon-box">
<i class="iconfont icon icon-ic_business_refund24px" /> <image src="@/static/shop/icon-2.png" class="m-r"></image>
随时退 随时退
</view> </view>
<view style="margin-left: 64rpx" class="icon-box"> <view style="margin-left: 64rpx" class="icon-box">
<i class="iconfont icon icon-naozhong" /> <image src="@/static/shop/icon-3.png" class="m-r"></image>
随时用 随时用
</view> </view>
<i @click="alert" class="iconfont jg icon-jinggao" /> <image style="margin-left: auto" @click="alert" src="@/static/shop/icon-4.png"></image>
</view> </view>
<view class="xz"> <view class="xz">
<text class="yh-name">限制:</text> <text class="yh-name">限制:</text>
...@@ -255,6 +255,7 @@ ...@@ -255,6 +255,7 @@
<script setup> <script setup>
import { getProdDetail, getCollect, getCouponShopList, receiveCoupon } from '@/api/packageDetail'; import { getProdDetail, getCollect, getCouponShopList, receiveCoupon } from '@/api/packageDetail';
import { getStoreInformation } from '@/api/shop'; import { getStoreInformation } from '@/api/shop';
import { getDistance } from '@/utils/common';
const prodInfo = ref({}); const prodInfo = ref({});
const prodRlue = ref({}); const prodRlue = ref({});
const myProdId = ref(''); const myProdId = ref('');
...@@ -263,7 +264,7 @@ const showRlue = ref(true); ...@@ -263,7 +264,7 @@ const showRlue = ref(true);
const imgUrl = import.meta.env.VITE_APP_IMG_URL; const imgUrl = import.meta.env.VITE_APP_IMG_URL;
const shopInfo = ref({}); const shopInfo = ref({});
const show = ref(false); const show = ref(false);
const currentLatitudeAndLongitude = ref({}); const shopLocation = ref({});
const shopId = ref(''); const shopId = ref('');
const showpopup = ref(false); const showpopup = ref(false);
const prodSkusInfo = ref({}); const prodSkusInfo = ref({});
...@@ -273,17 +274,21 @@ onLoad((options) => { ...@@ -273,17 +274,21 @@ onLoad((options) => {
const { prodId } = options; const { prodId } = options;
myProdId.value = prodId; myProdId.value = prodId;
getProdDetailFn(prodId).then((shopId) => { getProdDetailFn(prodId).then((shopId) => {
getStoreInformationFn(shopId); getStoreInformationFn(shopId).then((shopInfo) => {
getCouponShopListFn(prodId, shopId);
});
});
onShow(() => {
// 获取位置 // 获取位置
getLocationFn(); getLocationFn();
});
getCouponShopListFn(prodId, shopId);
});
}); });
function alert() { function alert() {
if (productCoupons.value.length > 0) { if (productCoupons.value.length > 0) {
show.value = true; show.value = true;
} else {
xma.showToast({
title: '暂无优惠券',
icon: 'error',
});
} }
} }
/** /**
...@@ -391,8 +396,9 @@ function getLocationFn() { ...@@ -391,8 +396,9 @@ function getLocationFn() {
xma.getLocation({ xma.getLocation({
type: 'wgs84', type: 'wgs84',
success: function (res) { success: function (res) {
const myLatitude = currentLatitudeAndLongitude.value.latitude; const myLatitude = shopLocation.value.latitude;
const myLongitude = currentLatitudeAndLongitude.value.longitude; const myLongitude = shopLocation.value.longitude;
console.log('myLongitude', myLatitude, myLongitude);
const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1); const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1);
shopInfo.value.distance = distance; shopInfo.value.distance = distance;
}, },
...@@ -425,9 +431,11 @@ const getStoreInformationFn = (id) => { ...@@ -425,9 +431,11 @@ const getStoreInformationFn = (id) => {
getStoreInformation(id).then((res) => { getStoreInformation(id).then((res) => {
if (res.code === 0) { if (res.code === 0) {
shopInfo.value = res.data.shop; shopInfo.value = res.data.shop;
if (res.data.shop.labels) {
shopInfo.value.tagList = res.data.shop.labels.split(','); shopInfo.value.tagList = res.data.shop.labels.split(',');
currentLatitudeAndLongitude.value.latitude = res.data.shop.location.lat; }
currentLatitudeAndLongitude.value.longitude = res.data.shop.location.lon; shopLocation.value.latitude = res.data.shop.location.lat;
shopLocation.value.longitude = res.data.shop.location.lon;
resolve(); resolve();
} }
}); });
...@@ -850,24 +858,19 @@ page { ...@@ -850,24 +858,19 @@ page {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 22rpx 0 32rpx 0; margin: 22rpx 0 32rpx 0;
image {
width: 14 * 2rpx;
height: 14 * 2rpx;
}
.icon-box { .icon-box {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 11 * 2rpx; font-size: 11 * 2rpx;
color: #abaaaa; color: #abaaaa;
.icon { .m-r {
font-size: 38rpx; margin-right: 10rpx;
font-weight: bold;
font-weight: 300;
color: #fa5151;
} }
} }
.jg {
font-size: 46rpx;
font-weight: bold;
margin-left: auto;
color: #abaaaa;
}
} }
.xz { .xz {
font-size: 10 * 2rpx; font-size: 10 * 2rpx;
......
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
</view> </view>
<view class="score-icon"> <view class="score-icon">
<wd-rate <wd-rate
custom-class="icon-statr"
color="#fff" color="#fff"
readonly readonly
v-model="shopInfo.grade" v-model="shopInfo.grade"
...@@ -128,9 +129,10 @@ ...@@ -128,9 +129,10 @@
<text class="goods-title multi-line">{{ item.prodName }}</text> <text class="goods-title multi-line">{{ item.prodName }}</text>
<text class="yh-fl multi-line">{{ item.brief }}</text> <text class="yh-fl multi-line">{{ item.brief }}</text>
<text class="yh-time multi-line">{{ item.rule }}</text> <text class="yh-time multi-line">{{ item.rule }}</text>
<view class="tag-list"> <view class="tag-list" v-if="item.labelNames.length > 0">
<view class="tag">{{ item.labelNames }}</view> <view v-for="(lab, i) in item.labelNames" :key="i">
<!-- <view class="tag">随时退</view> --> <text v-if="lab" class="tag" style="border-radius: 6rpx">{{ lab }}</text>
</view>
</view> </view>
<view class="price"> <view class="price">
<text class="num0">到手</text> <text class="num0">到手</text>
...@@ -180,6 +182,7 @@ ...@@ -180,6 +182,7 @@
<view class="u-pf"> <view class="u-pf">
<text>{{ item.descriptionMatches }}</text> <text>{{ item.descriptionMatches }}</text>
<wd-rate <wd-rate
custom-class="icon-statr"
color="#fff" color="#fff"
readonly readonly
v-model="item.descriptionMatches" v-model="item.descriptionMatches"
...@@ -557,6 +560,9 @@ const groupBuyListFn = (shopId) => { ...@@ -557,6 +560,9 @@ const groupBuyListFn = (shopId) => {
if (res.code === 0) { if (res.code === 0) {
listOfGroupBuyingProducts.value = res.data.map((item) => { listOfGroupBuyingProducts.value = res.data.map((item) => {
item.pic = imgUrl + item.pic; item.pic = imgUrl + item.pic;
item.labelNames = item.labelNames.split(',').filter((lab) => {
return lab !== '';
});
return item; return item;
}); });
} }
...@@ -736,6 +742,11 @@ page { ...@@ -736,6 +742,11 @@ page {
width: 375 * 2rpx; width: 375 * 2rpx;
margin: 0 auto; margin: 0 auto;
.icon-statr {
:deep(.wd-icon-star-on) {
display: block !important;
}
}
.search { .search {
width: 710rpx; width: 710rpx;
height: 80rpx; height: 80rpx;
...@@ -887,6 +898,11 @@ page { ...@@ -887,6 +898,11 @@ page {
margin-left: 8rpx; margin-left: 8rpx;
} }
} }
.icon-statr {
:v-deep(.wd-rate__item-star--active) {
overflow: visible !important;
}
}
} }
.shop-business-hours { .shop-business-hours {
texe { texe {
...@@ -1106,7 +1122,7 @@ page { ...@@ -1106,7 +1122,7 @@ page {
background: #fcdbdb; background: #fcdbdb;
padding: 2rpx 8rpx; padding: 2rpx 8rpx;
box-sizing: border-box; box-sizing: border-box;
font-size: 8 * 2rpx; font-size: 12 * 2rpx;
color: #fa5151; color: #fa5151;
margin-right: 8rpx; margin-right: 8rpx;
} }
...@@ -1206,6 +1222,11 @@ page { ...@@ -1206,6 +1222,11 @@ page {
.u-pf { .u-pf {
display: flex; display: flex;
align-items: center; align-items: center;
.icon-statr {
:v-deep(.wd-rate__item-star--active) {
overflow: visible !important;
}
}
text { text {
color: #fa5151; color: #fa5151;
font-weight: 700; font-weight: 700;
......
...@@ -16,3 +16,20 @@ export function timeConversion(diffInMilliseconds) { ...@@ -16,3 +16,20 @@ export function timeConversion(diffInMilliseconds) {
return `${days}${hours}小时${minutes}分钟`; return `${days}${hours}小时${minutes}分钟`;
} }
} }
export function getLocation() {
return new Promise((resolve, reject) => {
xma.getLocation({
type: 'wgs84',
isHighAccuracy: true,
success: function (res) {
// 经纬度
console.log('res.latitude, res.longitude', res.latitude, res.longitude);
resolve({ lat: res.latitude, lon: res.longitude });
},
fail: function (err) {
return err;
},
});
});
}
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