Commit 64882a0c authored by 石建新(贵阳日报)'s avatar 石建新(贵阳日报)
parents 490c3174 abd34f0a
...@@ -5,4 +5,4 @@ VITE_APP_ENV = 'production' ...@@ -5,4 +5,4 @@ VITE_APP_ENV = 'production'
VITE_APP_BASE_URL = 'http://test.rhhzkj.com:8080' VITE_APP_BASE_URL = 'http://test.rhhzkj.com:8080'
# 照片url路径 # 照片url路径
VITE_APP_IMG_URL = 'https://file.rddyz.com' VITE_APP_IMG_URL = 'http://file.rhhzkj.com:8080'
\ No newline at end of file \ No newline at end of file
<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">
...@@ -171,6 +171,9 @@ const toShop = (id) => { ...@@ -171,6 +171,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="1"
:list="swiperList" :list="swiperList"
autoplay
:indicator="{ type: 'fraction' }" :indicator="{ type: 'fraction' }"
indicatorPosition="bottom-right" indicatorPosition="bottom-right"
></wd-swiper> ></wd-swiper>
</div> </div>
<div style="padding: 0 20rpx"> <div style="padding: 0 10rpx 20rpx">
<!-- 价格 --> <!-- 价格 -->
<div class="price-info"> <div class="price-info">
<div class="price flex-align-center"> <div class="price flex-align-center">
...@@ -59,7 +61,7 @@ ...@@ -59,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>
...@@ -77,7 +79,7 @@ ...@@ -77,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
...@@ -142,13 +144,124 @@ ...@@ -142,13 +144,124 @@
<div class="more">更多></div> <div class="more">更多></div>
</div> </div>
</div> </div>
<!-- 套餐总览 -->
<div class="overview">
<p class="title">套餐总览</p>
<div class="content">
<div class="item">
<div>
<img src="/src/static/assistingAgriculture/routeDetails/tuanduifuwu.png" alt="" />
<p>团队服务</p>
</div>
<ul>
<li>含导游</li>
</ul>
</div>
<div class="item">
<div>
<img src="/src/static/assistingAgriculture/routeDetails/jiaotong.png" alt="" />
<p>交通</p>
</div>
<ul>
<li>行中交通,约3小时交通工具:巴士</li>
<li>集合方式:集合点集合</li>
</ul>
</div>
<div class="item">
<div>
<img src="/src/static/assistingAgriculture/routeDetails/youwan.png" alt="" />
<p>游玩</p>
</div>
<ul>
<li>
4个景点,约7小时
<span>详情</span>
</li>
</ul>
</div>
<div class="item">
<div>
<img src="/src/static/assistingAgriculture/routeDetails/canshi.png" alt="" />
<p>餐食</p>
</div>
<ul>
<li>共1餐含1次午餐</li>
</ul>
</div>
</div>
<div class="time-line-wrap">
<timeLine date="7:00">
<p class="flex-align-center">
<span class="t1">集合点</span>
<img class="icon" src="/static/assistingAgriculture/routeDetails/position.png" />
<span class="t2">贵阳市南明区维也纳酒店(花果园店)</span>
</p>
<p class="t3">
早上统一集合发车,(具体出发时间以导游通知为准)为便于通知游客车时间、上车地点、导游和车牌号,请游客在出行前一天随时保持手机畅通。
</p>
</timeLine>
<timeLine date="7:30">
<p>
<span class="t1">交通</span>
<span class="t2">红枫湖</span>
</p>
<p>
<img class="icon" src="/static/assistingAgriculture/routeDetails/clock.png" />
<span class="t1">行驶时间:约55分钟</span>
</p>
</timeLine>
<timeLine date="8:30">
<p class="t1">活动景点</p>
<div class="introduce">
<img src="/static/assistingAgriculture/reviewDetails/fj.png" alt="" />
<div class="text-wrap flex-between">
<p class="t1">红枫湖景区</p>
<p class="t1">自然风景</p>
<p class="t1 t2">4.5分</p>
<p class="t1 t2">门票费用已包含</p>
</div>
</div>
<p class="t3">
红枫湖风景名胜区位于贵州省贵阳市清镇市城区以西,距市32公里。红枫湖横跨清镇市、安顺市平坝区,风景区总面积为200平方公里,水城面积达57.2平方公里,是贵州高原上最大的人工湖泊之一。1988年被国务院批准为国家级风景名胜区。
</p>
<p class="t1">
<img class="icon" src="/static/assistingAgriculture/routeDetails/clock.png" />
活动时间:约3小时
</p>
</timeLine>
<timeLine date="12:30">
<div class="t3">
午餐 中式(标:30元/成人,20元/儿童)
<p class="t1">用餐地点红枫湖风景区内特色餐厅</p>
</div>
<p class="t3">
我们已经经理为大家准备了可口的饭菜 团餐味道适合大众口味 唯以满足每一个人的喜好
肯定会排队等候,敬请理解 不用餐将无费用可退,感谢理解。
</p>
<p>
<img class="icon" src="/static/assistingAgriculture/routeDetails/clock.png" />
<span class="t1">用餐时间:约3小时</span>
</p>
</timeLine>
<timeLine date="18:30">
<p class="t1">活动景点</p>
</timeLine>
</div>
</div>
</div> </div>
</scroll-view> </scroll-view>
<div class="footer">123</div> <div class="footer flex-between">
<div class="like">
<wd-icon name="star"></wd-icon>
<p>收藏</p>
</div>
<button>立即预定</button>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import timeLine from './timeLine.vue';
const swiperList = ref([ const swiperList = ref([
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg', '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/capybara.jpg',
...@@ -156,6 +269,26 @@ const swiperList = ref([ ...@@ -156,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 {
...@@ -168,162 +301,163 @@ uni-page-body { ...@@ -168,162 +301,163 @@ uni-page-body {
flex-direction: column; flex-direction: column;
.container { .container {
flex-grow: 1; flex-grow: 1;
height: 69px; height: 138rpx;
.banner { .banner {
:deep(.wd-swiper) { :deep(.wd-swiper) {
width: 375px; width: 750rpx;
height: 220px; height: 440rpx;
uni-swiper { uni-swiper,
uni-image {
width: 100%; width: 100%;
height: 100%; height: 100% !important;
} }
} }
} }
.price-info { .price-info {
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 16rpx;
padding: 10px; padding: 20rpx;
margin-top: 10px; margin-top: 20rpx;
.price { .price {
.t1 { .t1 {
color: #fa5151; color: #fa5151;
font-size: 18px; font-size: 36rpx;
} }
.t2 { .t2 {
margin-left: 10px; margin-left: 20rpx;
font-size: 12px; font-size: 24rpx;
color: #767676; color: #767676;
} }
} }
.name { .name {
font-size: 14px; font-size: 28rpx;
color: #3d3d3d; color: #3d3d3d;
margin: 10px 0 15px; margin: 20rpx 0 30rpx;
font-weight: 500; font-weight: 500;
} }
.tags { .tags {
gap: 10px; gap: 20rpx;
p { p {
padding: 5px; padding: 10rpx;
font-size: 8px; font-size: 16rpx;
font-weight: 500; font-weight: 500;
color: #3d3d3d; color: #3d3d3d;
border: 1px solid #d8d8d8; border: 2rpx solid #d8d8d8;
border-radius: 150px; border-radius: 300rpx;
} }
} }
} }
.guarantee { .guarantee {
background: linear-gradient(180deg, #feeeee 0%, #ffffff 100%); background: linear-gradient(180deg, #feeeee 0%, #ffffff 100%);
padding: 10px; padding: 20rpx;
border-radius: 8px; border-radius: 16rpx;
margin-top: 5px; margin-top: 10rpx;
& > div { & > div {
display: flex; display: flex;
font-size: 11px; font-size: 22rpx;
line-height: 18px; line-height: 36rpx;
font-weight: 500; font-weight: 500;
color: #767676; color: #767676;
&:first-child { &:first-child {
margin-bottom: 10px; margin-bottom: 20rpx;
} }
.label { .label {
color: #ff494e; color: #ff494e;
margin-right: 25px; margin-right: 50rpx;
} }
.list { .list {
gap: 15px; gap: 30rpx;
.wd-icon { .wd-icon {
color: #ff494e; color: #ff494e;
margin-right: 2px; margin-right: 4rpx;
font-size: 14px; font-size: 28rpx;
} }
} }
} }
} }
.comment-wrap { .comment-wrap {
padding: 10px; padding: 20rpx;
margin-top: 5px; margin-top: 10rpx;
border-radius: 8px; border-radius: 16rpx;
background: #fff; background: #fff;
.comment { .comment {
.title { .title {
gap: 10px; gap: 20rpx;
.t1 { .t1 {
font-size: 14px; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: #3d3d3d; color: #3d3d3d;
} }
.t2 { .t2 {
font-size: 12px; font-size: 24rpx;
color: #0974f5; color: #0974f5;
span { span {
font-size: 8px; font-size: 16rpx;
color: #abaaaa; color: #abaaaa;
} }
} }
img { img {
width: 12px; width: 24rpx;
height: 12px; height: 24rpx;
} }
} }
.top { .top {
.link { .link {
font-size: 12px; font-size: 24rpx;
font-weight: 500; font-weight: 500;
color: #0974f5; color: #0974f5;
} }
} }
.tags { .tags {
margin-top: 10px; margin-top: 20rpx;
display: flex; display: flex;
gap: 20px; gap: 40rpx;
p { p {
border-radius: 150px; border-radius: 300rpx;
padding: 5px 8px; padding: 10rpx 16rpx;
color: #3d3d3d; color: #3d3d3d;
font-size: 8px; font-size: 16rpx;
font-weight: 500; font-weight: 500;
line-height: 8px; line-height: 16rpx;
background: rgba(9, 116, 245, 0.1); background: rgba(9, 116, 245, 0.1);
} }
} }
.user { .user {
margin-top: 10px; margin-top: 20rpx;
font-size: 14px; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: #3d3d3d; color: #3d3d3d;
line-height: normal; line-height: normal;
.user-name { .user-name {
img { img {
border-radius: 4px; border-radius: 8rpx;
width: 24px; width: 48rpx;
height: 24px; height: 48rpx;
margin-right: 8px; margin-right: 16rpx;
} }
} }
} }
.content { .content {
margin-top: 5px; margin-top: 10rpx;
} }
} }
.album { .album {
margin-top: 22px; margin-top: 44rpx;
.top { .top {
.title { .title {
font-size: 14px; font-size: 28rpx;
color: #3d3d3d; color: #3d3d3d;
} }
.link { .link {
font-size: 12px; font-size: 24rpx;
color: #0974f5; color: #0974f5;
} }
} }
.img-list { .img-list {
margin-top: 10px; margin-top: 20rpx;
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
gap: 5px; gap: 10rpx;
.wd-img { .wd-img {
aspect-ratio: 1; aspect-ratio: 1;
} }
...@@ -331,99 +465,245 @@ uni-page-body { ...@@ -331,99 +465,245 @@ uni-page-body {
} }
} }
.choose-package-text { .choose-package-text {
font-size: 14px; font-size: 28rpx;
font-weight: 500; font-weight: 500;
line-height: 14px; line-height: 28rpx;
color: #fa5151; color: #fa5151;
margin-top: 20px; margin-top: 40rpx;
} }
.package-wrap { .package-wrap {
margin-top: 10px; margin-top: 20rpx;
padding: 10px; padding: 20rpx;
border: 8px; border: 16rpx;
background-color: #fff; background-color: #fff;
.title { .title {
color: #3d3d3d; color: #3d3d3d;
font-size: 14px; font-size: 28rpx;
font-weight: 500; font-weight: 500;
line-height: 14px; line-height: 28rpx;
} }
.package-list { .package-list {
margin-top: 10px; margin-top: 20rpx;
display: grid; display: grid;
gap: 20px; gap: 40rpx;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
.package-item { .package-item {
border-radius: 8px; border-radius: 16rpx;
opacity: 1; opacity: 1;
padding: 10px; padding: 20rpx;
background: linear-gradient(180deg, #feeeee 0%, #ffffff 100%); background: linear-gradient(180deg, #feeeee 0%, #ffffff 100%);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
.price { .price {
font-size: 12px; font-size: 24rpx;
font-weight: bold; font-weight: bold;
line-height: 14px; line-height: 28rpx;
color: #fa5151; color: #fa5151;
.name { .name {
color: #3d3d3d; color: #3d3d3d;
} }
} }
.content { .content {
margin-top: 10px; margin-top: 20rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 20rpx;
div { div {
display: flex; display: flex;
gap: 20px; gap: 40rpx;
font-size: 11px; font-size: 22rpx;
font-weight: 500; font-weight: 500;
line-height: 14px; line-height: 28rpx;
color: #3d3d3d; color: #3d3d3d;
} }
} }
} }
} }
.selected { .selected {
margin-top: 10px; margin-top: 20rpx;
color: #767676; color: #767676;
font-size: 11px; font-size: 22rpx;
line-height: normal; line-height: normal;
.t1 { .t1 {
padding: 10px; padding: 20rpx;
} }
} }
} }
.date-wrap { .date-wrap {
margin-top: 5px; margin-top: 10rpx;
padding: 10px; padding: 20rpx;
border-radius: 8px; border-radius: 16rpx;
background-color: #fff; background-color: #fff;
.date-title { .date-title {
color: #3d3d3d; color: #3d3d3d;
font-size: 14px; font-size: 28rpx;
font-weight: 500; font-weight: 500;
line-height: 14px; line-height: 28rpx;
} }
.date-list { .date-list {
.list { .list {
flex: 1; flex: 1;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 6px; gap: 12rpx;
margin-right: 6px; margin-right: 12rpx;
.item { .item {
aspect-ratio: 1;
box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding: 6px 0; align-items: center;
padding: 12rpx 0;
background: #f6f7f7; background: #f6f7f7;
border-radius: 8px; border-radius: 16rpx;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
color: #3d3d3d;
font-size: 24rpx;
font-weight: 500;
.price {
color: #fa5151;
}
}
}
.more {
font-size: 24rpx;
}
}
}
.overview {
padding: 20rpx;
background-color: #fff;
border-radius: 16rpx;
margin-top: 10rpx;
.title {
font-size: 28rpx;
font-weight: 500;
line-height: 28rpx;
color: #3d3d3d;
}
.content {
margin-top: 20rpx;
display: flex;
flex-direction: column;
gap: 40rpx;
padding: 20rpx 0;
color: #3d3d3d;
background-color: #f3f3f3;
border-radius: 16rpx;
font-size: 24rpx;
.item {
display: flex;
align-items: center;
div {
flex: 0 0 192rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
img {
height: 40rpx;
width: 40rpx;
}
}
ul {
padding: 0;
} }
} }
} }
.time-line-wrap {
margin-top: 20rpx;
.time-line {
&:last-child {
/* :deep(.content-wrap) {
padding-bottom: 0;
padding-top: 20rpx;
} */
:deep(.date) {
&::after {
display: none;
}
}
}
}
.t1 {
font-size: 24rpx;
font-weight: 500;
line-height: 28rpx;
color: #3d3d3d;
margin-right: 16rpx;
}
.t2 {
font-size: 24rpx;
font-weight: normal;
line-height: normal;
color: rgba(9, 116, 245, 0.6);
}
.t3 {
font-size: 24rpx;
font-weight: normal;
line-height: normal;
color: #3d3d3d;
}
.icon {
height: 32rpx;
width: 32rpx;
vertical-align: middle;
}
.introduce {
display: flex;
padding: 20rpx 10rpx;
border-radius: 16rpx;
background: #f3f3f3;
img {
width: 204rpx;
height: 144rpx;
border-radius: 8rpx;
margin-right: 20rpx;
}
.text-wrap {
flex-direction: column;
align-items: flex-start;
}
}
}
}
}
.footer {
height: 196rpx;
border-radius: 16rpx 16rpx 0rpx 0rpx;
background: #ffffff;
padding: 20rpx 20rpx 0 42rpx;
align-items: flex-start;
.like {
display: flex;
flex-direction: column;
align-items: center;
font-size: 22rpx;
font-weight: normal;
line-height: 26rpx;
color: #3d3d3d;
.wd-icon {
font-size: 44rpx;
margin-bottom: 10rpx;
}
}
button {
margin: 0;
width: 240rpx;
height: 88rpx;
border-radius: 118rpx;
color: #fff;
background-color: #fa5151;
box-sizing: border-box;
} }
} }
} }
.back-img {
width: 56rpx;
height: 56rpx;
position: absolute;
z-index: 999;
margin-top: 40rpx;
margin-left: 40rpx;
}
</style> </style>
<template>
<div class="time-line">
<div class="date">
<span>{{ props.date }}</span>
</div>
<div class="content-wrap">
<slot></slot>
</div>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
date: {
type: String,
default: '7:00',
},
});
</script>
<style lang="scss" scoped>
.time-line {
display: flex;
.date {
flex: 0 0 120rpx;
text-align: center;
margin-right: 20rpx;
color: #767676;
position: relative;
&::after {
content: '';
display: block;
height: 100%;
width: 0;
border-right: 2rpx dashed #767676;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-2rpx);
}
span {
z-index: 1;
position: relative;
display: inline-block;
padding: 10rpx;
background-color: #fff;
}
}
.content-wrap {
flex: 1;
padding: 10rpx 0 50rpx;
display: flex;
flex-direction: column;
gap: 12rpx;
}
}
</style>
...@@ -26,46 +26,16 @@ ...@@ -26,46 +26,16 @@
</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> </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>
<view class="product-page"> <view class="product-page">
<view> <view>
...@@ -181,10 +151,15 @@ ...@@ -181,10 +151,15 @@
<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 {
getPresaleCategory,
getSortList,
getStrictSelection,
} from '../../../api/assistingAgriculture/building';
import { onMounted } from 'vue';
const list = ref([ const list = ref([
// { img: '/static/assistingAgriculture/assets/mainPicture.png', text: '特色美食' }, // // { img: '/static/assistingAgriculture/assets/mainPicture.png', text: '特色美食' },
// { img: '/static/assistingAgriculture/assets/presale.png', text: '农货预售' }, // // { img: '/static/assistingAgriculture/assets/presale.png', text: '农货预售' },
{ img: '/static/assistingAgriculture/assets/mainPicture.png', text: '乡村非遗' }, { img: '/static/assistingAgriculture/assets/mainPicture.png', text: '乡村非遗' },
{ img: '/static/assistingAgriculture/assets/mainPicture.png', text: '认养农业' }, { img: '/static/assistingAgriculture/assets/mainPicture.png', text: '认养农业' },
{ img: '/static/assistingAgriculture/assets/mainPicture.png', text: '乡村旅居' }, { img: '/static/assistingAgriculture/assets/mainPicture.png', text: '乡村旅居' },
...@@ -207,31 +182,49 @@ const detailList = ref([ ...@@ -207,31 +182,49 @@ 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', console.log(res, 111);
price: '25', res.data.forEach((item) => {
text: '特色农庄', item.icon = import.meta.env.VITE_APP_IMG_URL + item.icon;
}, item.pic = import.meta.env.VITE_APP_IMG_URL + item.pic;
]); });
function toBuilding() { sortList.value = res.data;
// TODO: 跳转到筑农严选 console.log(list.value, 111);
xma.navigateTo({
url: '/pages/assistingAgriculture/index/building',
}); });
} };
function toRuralTravel() { // 筑农严选首页-分类预售商品列表
// TODO: 跳转到乡村旅居 const getPresaleCategoryList = () => {
xma.navigateTo({ getPresaleCategory().then((res) => {
url: '/pages/assistingAgriculture/RuralTravel/RuralTravel', console.log(res, 222);
});
};
// 筑农严选分类
const getStrictSelectionList = () => {
getStrictSelection().then((res) => {
console.log(res, 333);
}); });
};
function toBuilding(index) {
if (index === 0) {
// TODO: 跳转到筑农严选
xma.navigateTo({
url: '/pages/assistingAgriculture/index/building',
});
} else if (index === 2) {
// TODO: 跳转到乡村旅居
xma.navigateTo({
url: '/pages/assistingAgriculture/RuralTravel/RuralTravel',
});
}
console.log(index, 121);
} }
// 跳转详情页 // 跳转详情页
function toDetail() { function toDetail() {
......
...@@ -152,7 +152,12 @@ ...@@ -152,7 +152,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 +243,22 @@ const goodList = ref([ ...@@ -238,6 +243,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([]);
// 右侧数据列表 // 右侧数据列表
......
...@@ -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">
...@@ -632,13 +632,13 @@ page { ...@@ -632,13 +632,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;
......
...@@ -119,6 +119,15 @@ ...@@ -119,6 +119,15 @@
</view> </view>
<Payment ref="PaymentRef" @payment="payNow"></Payment> <Payment ref="PaymentRef" @payment="payNow"></Payment>
</view> </view>
<!-- <wd-fab type="error" position="right-bottom" direction="left" :draggable="true">
<view class="custom-button">
<image class="fab-icon" src="@/static/index/coupon.png"></image>
</view>
<view class="custom-button">
<image class="fab-icon" src="@/static/index/order.png"></image>
</view>
</wd-fab> -->
</template> </template>
<script setup> <script setup>
...@@ -606,4 +615,18 @@ page { ...@@ -606,4 +615,18 @@ page {
} }
} }
} }
.custom-button {
min-width: auto;
box-sizing: border-box;
width: 64rpx;
height: 64rpx;
border-radius: 16px;
margin: 8rpx;
.fab-icon {
width: 64rpx;
height: 64rpx;
}
}
</style> </style>
...@@ -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;
},
});
});
}
...@@ -2281,6 +2281,32 @@ ...@@ -2281,6 +2281,32 @@
dependencies: dependencies:
"@types/istanbul-lib-report" "*" "@types/istanbul-lib-report" "*"
"@types/graceful-fs@^4.1.2":
version "4.1.9"
resolved "https://registry.npmmirror.com/@types/graceful-fs/-/graceful-fs-4.1.9.tgz"
integrity sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==
dependencies:
"@types/node" "*"
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
version "2.0.6"
resolved "https://registry.npmmirror.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz"
integrity sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==
"@types/istanbul-lib-report@*":
version "3.0.3"
resolved "https://registry.npmmirror.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz"
integrity sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==
dependencies:
"@types/istanbul-lib-coverage" "*"
"@types/istanbul-reports@^3.0.0":
version "3.0.4"
resolved "https://registry.npmmirror.com/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz"
integrity sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==
dependencies:
"@types/istanbul-lib-report" "*"
"@types/json-schema@*", "@types/json-schema@^7.0.12": "@types/json-schema@*", "@types/json-schema@^7.0.12":
"integrity" "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==" "integrity" "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
"resolved" "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz" "resolved" "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz"
...@@ -2303,6 +2329,11 @@ ...@@ -2303,6 +2329,11 @@
"resolved" "https://registry.npmmirror.com/@types/prettier/-/prettier-2.7.3.tgz" "resolved" "https://registry.npmmirror.com/@types/prettier/-/prettier-2.7.3.tgz"
"version" "2.7.3" "version" "2.7.3"
"@types/prettier@^2.1.5":
version "2.7.3"
resolved "https://registry.npmmirror.com/@types/prettier/-/prettier-2.7.3.tgz"
integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
"@types/semver@^7.5.0": "@types/semver@^7.5.0":
"integrity" "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==" "integrity" "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ=="
"resolved" "https://registry.npmmirror.com/@types/semver/-/semver-7.5.8.tgz" "resolved" "https://registry.npmmirror.com/@types/semver/-/semver-7.5.8.tgz"
...@@ -2325,6 +2356,23 @@ ...@@ -2325,6 +2356,23 @@
dependencies: dependencies:
"@types/yargs-parser" "*" "@types/yargs-parser" "*"
"@types/stack-utils@^2.0.0":
version "2.0.3"
resolved "https://registry.npmmirror.com/@types/stack-utils/-/stack-utils-2.0.3.tgz"
integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
"@types/yargs-parser@*":
version "21.0.3"
resolved "https://registry.npmmirror.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz"
integrity sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==
"@types/yargs@^16.0.0":
version "16.0.9"
resolved "https://registry.npmmirror.com/@types/yargs/-/yargs-16.0.9.tgz"
integrity sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==
dependencies:
"@types/yargs-parser" "*"
"@typescript-eslint/eslint-plugin@^6.15.0": "@typescript-eslint/eslint-plugin@^6.15.0":
"integrity" "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==" "integrity" "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA=="
"resolved" "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz" "resolved" "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz"
......
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