jiazhipeng
2 months ago
38 changed files with 2567 additions and 153 deletions
@ -0,0 +1,412 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
||||
|
|
||||
|
<view class="main-container"> |
||||
|
<image class="title-image" src="https://static.ticket.sz-trip.com/uploads/20250815/36ddcb32b78b28ee6f6991ae9af8c52f.png"></image> |
||||
|
<view class="coupon-box"> |
||||
|
<view class="rule" @click="goRule(1)">活动规则</view> |
||||
|
<view class="coupon-tip">消费券领取后3天内未使用自动失效<br>失效后可再次领取</view> |
||||
|
<view class="flex-between" style="flex-wrap: wrap;margin-top: 26rpx;"> |
||||
|
<image class="coupon-img" v-for="(item,i) in couponList" :key="i" |
||||
|
:src="item.img" @click="getCoupon(item)" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<image class="adv-image" mode="aspectFill" @click="gotoPath('/subPackages/activity/agriculturalProdNH')" |
||||
|
src="https://static.ticket.sz-trip.com/uploads/20250815/3786f50e9baa674b850df7383fa6ed88.png"></image> |
||||
|
|
||||
|
<image class="title-image" style="margin-bottom: 30rpx;" src="https://static.ticket.sz-trip.com/uploads/20250821/e45546af63bafab92ac2e8783d7b079c.png"></image> |
||||
|
|
||||
|
<view class="row-product" v-for="(item,index) in list.slice(0,viewNum)" |
||||
|
:key="index" @click="gotoDetailByType(item)"> |
||||
|
<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image> |
||||
|
<view class="content flex-column"> |
||||
|
<view class="title text-overflowRows">{{item.title}}</view> |
||||
|
<view class="tags" v-if="item.display_tags"> |
||||
|
<view class="tag" v-for="(tag,tagI) in item.display_tags.split(',')" :key="tagI">{{tag}}</view> |
||||
|
</view> |
||||
|
<view class="flex-between"> |
||||
|
<view class="price">{{item.price/100}}</view> |
||||
|
<view class="btn">立即购买</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="view-more" v-if="list.length>0&&viewNum<=3" @click="viewNum=999">查看更多</view> |
||||
|
|
||||
|
<view class="type-container"> |
||||
|
<view :class="['type-item',typeIndex==i?'active':'']" @click="typeIndex=i" |
||||
|
v-for="(item,i) in typeList" :key="i">{{item.title}}</view> |
||||
|
</view> |
||||
|
<view class="flex-between" style="flex-wrap: wrap;"> |
||||
|
<view class="column-product" @click="gotoDetailByType(item)" :key="index" |
||||
|
v-for="(item,index) in typeList[typeIndex].list.slice(0,typeList[typeIndex].viewNum)"> |
||||
|
<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image> |
||||
|
<view class="content flex-column"> |
||||
|
<view class="title text-overflow">{{item.title}}</view> |
||||
|
<view class="tags" v-if="item.display_tags"> |
||||
|
<view class="tag" v-for="(tag,tagI) in item.display_tags.split(',')" :key="tagI">{{tag}}</view> |
||||
|
</view> |
||||
|
<view class="flex-between"> |
||||
|
<view class="price">{{item.price/100}}</view> |
||||
|
<view class="btn">购买</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="view-more" v-if="typeList[typeIndex].list.length>0&&typeList[typeIndex].viewNum<=4" @click="typeList[typeIndex].viewNum=999">查看更多</view> |
||||
|
|
||||
|
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20250815/877b45bf01e0181fd489f0e1086c62fd.png"></image> |
||||
|
<image @click="returnTop" v-show="showGoTop" class="back-img" src="https://static.ticket.sz-trip.com/uploads/20250815/108583b6b888b0e5556393b140a7cb84.png"></image> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [], |
||||
|
viewNum: 3, |
||||
|
headImg: '', |
||||
|
couponList: [ |
||||
|
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250815/f41aea639d47410e6e2fb23fbc7061a4.png"}, |
||||
|
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250815/1373e0b00e33d21f951d992f01a54ca6.png"}, |
||||
|
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250815/0a0574f43a008c57a4ac13ad2695260a.png"}, |
||||
|
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250815/b37ab2354e27a715760c3c963a5da90f.png"}, |
||||
|
], |
||||
|
isReceive: true, |
||||
|
typeIndex: 0, |
||||
|
typeList: [ |
||||
|
{id: 96,title: "当季鲜享",viewNum:4, list: []}, |
||||
|
{id: 97,title: "风味特产",viewNum:4, list: []}, |
||||
|
{id: 98,title: "入秋养生",viewNum:4, list: []}, |
||||
|
{id: 99,title: "啡尝美味",viewNum:4, list: []}, |
||||
|
], |
||||
|
showGoTop: false, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
|
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getHeadImg(2384) |
||||
|
this.getGoods() |
||||
|
}, |
||||
|
methods: { |
||||
|
getHeadImg (id) { |
||||
|
this.Post({id},'/api/multimedia/detail').then(res => { |
||||
|
this.headImg = res.data.head_img |
||||
|
uni.setNavigationBarTitle({ |
||||
|
title:res.data.title |
||||
|
}) |
||||
|
if (res.data.company_name) { |
||||
|
res.data.company_name.split(',').forEach((item, index) => { |
||||
|
this.couponList[index].id = item |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
goRule (id) { |
||||
|
uni.navigateTo({ |
||||
|
url:"/subPackages/activity/commonRule?id="+id |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 产品列表 |
||||
|
getGoods() { |
||||
|
this.Post({ |
||||
|
tag_id: 95, |
||||
|
offset: 0, |
||||
|
limit: 999, |
||||
|
},'/api/product/get_product_by_tag_subject').then(res => { |
||||
|
if (res.data.length < this.viewNum) { |
||||
|
this.viewNum = 999 |
||||
|
} |
||||
|
this.list = res.data.list |
||||
|
}) |
||||
|
|
||||
|
for(let p of this.typeList) { |
||||
|
this.Post({ |
||||
|
tag_id: p.id, |
||||
|
offset: 0, |
||||
|
limit: 999, |
||||
|
},'/api/product/get_product_by_tag_subject').then(res => { |
||||
|
if (res.data.list.length < p.viewNum) { |
||||
|
p.viewNum = 999 |
||||
|
} |
||||
|
p.list = res.data.list |
||||
|
console.log(p) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
getCoupon(item) { |
||||
|
if (!this.isReceive) { |
||||
|
uni.showToast({ |
||||
|
title: "短时间内请勿重复点击！", |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
return; |
||||
|
} |
||||
|
this.isReceive = false |
||||
|
setTimeout(() => {this.isReceive = true}, 3000) |
||||
|
this.Post({ |
||||
|
ids: item.id, |
||||
|
is_all: 1, |
||||
|
},"/api/coupon/getNewCouponsByActivitiesIds").then(res => { |
||||
|
if (res) { |
||||
|
uni.showToast({ |
||||
|
title: res.data, |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
viewDetail(item) { |
||||
|
this.gotoDetailByType(item) |
||||
|
}, |
||||
|
returnTop(){ |
||||
|
uni.pageScrollTo({ |
||||
|
scrollTop: 0, |
||||
|
duration: 200, |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
onPageScroll(res) { |
||||
|
this.showGoTop = res.scrollTop > 200 ? true : false; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
width: 750rpx; |
||||
|
min-height: 100vh; |
||||
|
background: #E9F5EC; |
||||
|
padding-bottom: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.topImg { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.main-container{ |
||||
|
width: 100%; |
||||
|
margin-top: -10rpx; |
||||
|
padding: 0 26rpx 60rpx; |
||||
|
.title-image{ |
||||
|
width: 417.33rpx; |
||||
|
height: 66.67rpx; |
||||
|
margin: 0 auto; |
||||
|
display: block; |
||||
|
position: relative; |
||||
|
z-index: 10; |
||||
|
} |
||||
|
.adv-image{ |
||||
|
margin: 47rpx 0 57rpx; |
||||
|
width: 100%; |
||||
|
height: 200rpx; |
||||
|
} |
||||
|
} |
||||
|
.coupon-box{ |
||||
|
height: 529rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
border: 1px solid #629FAE; |
||||
|
position: relative; |
||||
|
padding: 60rpx 18rpx 0; |
||||
|
margin-top: -33rpx; |
||||
|
overflow: hidden; |
||||
|
.rule{ |
||||
|
width: 66rpx; |
||||
|
height: 64rpx; |
||||
|
background: #4C9BB4; |
||||
|
border-radius: 0rpx 2rpx 0rpx 13rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 21rpx; |
||||
|
color: #FFFFFF; |
||||
|
text-align: center; |
||||
|
padding:0 10rpx; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
.coupon-tip{ |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #F13E35; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.coupon-img{ |
||||
|
width: 323.33rpx; |
||||
|
height: 171.33rpx; |
||||
|
margin-bottom: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.row-product{ |
||||
|
width: 100%; |
||||
|
height: 227rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 8rpx; |
||||
|
padding: 6rpx; |
||||
|
display: flex; |
||||
|
margin-bottom: 22rpx; |
||||
|
.img{ |
||||
|
width: 213rpx; |
||||
|
height: 100%; |
||||
|
border-radius: 7rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.content{ |
||||
|
width: 100rpx; |
||||
|
flex: 1; |
||||
|
justify-content: space-between; |
||||
|
padding: 6rpx 0 6rpx 22rpx; |
||||
|
} |
||||
|
.price{ |
||||
|
font-weight: bold; |
||||
|
font-size: 40rpx; |
||||
|
color: #F13E35; |
||||
|
&::before{ |
||||
|
content: "￥"; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
&::after{ |
||||
|
content: "起"; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
.btn{ |
||||
|
width: 164rpx; |
||||
|
height: 50rpx; |
||||
|
background: #FF9838; |
||||
|
border-radius: 25rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 27rpx; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 50rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
.title{ |
||||
|
font-weight: bold; |
||||
|
font-size: 29rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.tags{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
overflow: hidden; |
||||
|
.tag{ |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
height: 38rpx; |
||||
|
line-height: 38rpx; |
||||
|
color: #4C9BB4; |
||||
|
padding: 0rpx 6rpx; |
||||
|
border-radius: 5rpx; |
||||
|
border: 1px solid #4C9BB4; |
||||
|
margin-right: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
.view-more{ |
||||
|
width: 227rpx; |
||||
|
height: 49rpx; |
||||
|
border-radius: 8rpx; |
||||
|
border: 1px solid #4C9BB4; |
||||
|
line-height: 49rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 25rpx; |
||||
|
color: #4C9BB4; |
||||
|
text-align: center; |
||||
|
margin: 40rpx auto 0; |
||||
|
} |
||||
|
|
||||
|
.type-container{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin: 52rpx 0 30rpx; |
||||
|
.type-item{ |
||||
|
width: 164rpx; |
||||
|
height: 66.67rpx; |
||||
|
text-align: center; |
||||
|
line-height: 66.67rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #4C9BB4; |
||||
|
background-image: url("https://static.ticket.sz-trip.com/uploads/20250815/e165c4614ae82351d8b96f4dd0ab947c.png"); |
||||
|
background-size: 100% 100%; |
||||
|
&.active{ |
||||
|
color: #FFFFFF; |
||||
|
background-image: url("https://static.ticket.sz-trip.com/uploads/20250815/dba0ff60f303c031420958d67fa36614.png"); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.column-product{ |
||||
|
width: 340rpx; |
||||
|
height: 497rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 6rpx; |
||||
|
overflow: hidden; |
||||
|
margin-bottom: 16rpx; |
||||
|
.img{ |
||||
|
width: 327rpx; |
||||
|
height: 327rpx; |
||||
|
border-radius: 13rpx 13rpx 0rpx 0rpx; |
||||
|
} |
||||
|
.content{ |
||||
|
width: 100%; |
||||
|
flex: 1; |
||||
|
height: 150rpx; |
||||
|
justify-content: space-between; |
||||
|
padding: 4rpx 10rpx; |
||||
|
} |
||||
|
.price{ |
||||
|
font-weight: bold; |
||||
|
font-size: 28rpx; |
||||
|
color: #E62525; |
||||
|
&::before{ |
||||
|
content: "￥"; |
||||
|
} |
||||
|
} |
||||
|
.btn{ |
||||
|
width: 100rpx; |
||||
|
height: 40rpx; |
||||
|
background: #FF9838; |
||||
|
border-radius: 20rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 27rpx; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 40rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottom-img{ |
||||
|
width: 174.67rpx; |
||||
|
height: 78rpx; |
||||
|
margin: 74rpx auto 0; |
||||
|
display: block; |
||||
|
} |
||||
|
.back-img{ |
||||
|
position: fixed; |
||||
|
width: 66rpx; |
||||
|
height: 66rpx; |
||||
|
bottom: 66rpx; |
||||
|
right: 26rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,148 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
||||
|
|
||||
|
<view class="main-container"> |
||||
|
<view class="common-box" style="padding-bottom: 82rpx;"> |
||||
|
<view class="title">客户领取路径</view> |
||||
|
<view style="text-align: center;margin: 34rpx 0 70rpx;">微信或农行掌银APP扫码领取优惠</view> |
||||
|
<image style="display:block;width: 266.67rpx;height: 266.67rpx;margin: 0 auto;" mode="aspectFill" |
||||
|
:src="codeImg" :show-menu-by-longpress="true"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="common-box" style="line-height: 40rpx;" v-html="formateRichText(ruleContent)"></view> |
||||
|
|
||||
|
<view class="common-box" style="padding-bottom: 120rpx;"> |
||||
|
<view class="title" style="margin-bottom: 50rpx;">活动流程</view> |
||||
|
<image style="width: 100%;" mode="widthFix" :src="ruleImg"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn" @click="goBack()">返回活动页</view> |
||||
|
|
||||
|
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20250815/877b45bf01e0181fd489f0e1086c62fd.png"></image> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
headImg: '', |
||||
|
codeImg: "", |
||||
|
ruleImg: "", |
||||
|
ruleContent: "", |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
|
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getHeadImg() |
||||
|
}, |
||||
|
methods: { |
||||
|
goBack () { |
||||
|
let pages = getCurrentPages() |
||||
|
let prePage = null |
||||
|
// 看上个页面 |
||||
|
if (pages.length>=2) { |
||||
|
prePage = pages[pages.length - 2]; |
||||
|
} else { |
||||
|
uni.redirectTo({ |
||||
|
url: "/subPackages/activity/agriculturalProd" |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
// 有问题 |
||||
|
if (prePage.$page.fullPath.indexOf('agriculturalProd')>=0) { |
||||
|
uni.navigateBack() |
||||
|
} else { |
||||
|
uni.redirectTo({ |
||||
|
url: "/subPackages/activity/agriculturalProd" |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
getHeadImg (id) { |
||||
|
this.Post({id:2385},'/api/multimedia/detail').then(res => { |
||||
|
this.headImg = res.data.head_img |
||||
|
uni.setNavigationBarTitle({ |
||||
|
title:res.data.title |
||||
|
}) |
||||
|
}); |
||||
|
this.Post({id:2386},'/api/multimedia/detail').then(res => { |
||||
|
this.codeImg = res.data.head_img |
||||
|
}); |
||||
|
this.Post({id:2387},'/api/multimedia/detail').then(res => { |
||||
|
this.ruleImg = res.data.head_img |
||||
|
}); |
||||
|
this.Post({id: 2},"/api/sweepstakes/sweepstakes_act/getActInfo").then(res => { |
||||
|
this.ruleContent = res.data.rule_desc |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
width: 750rpx; |
||||
|
min-height: 100vh; |
||||
|
background: #FCE1B6; |
||||
|
padding-bottom: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.topImg { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.main-container{ |
||||
|
width: 100%; |
||||
|
margin-top: -84rpx; |
||||
|
padding: 0 26rpx 60rpx; |
||||
|
position: relative; |
||||
|
z-index: 10; |
||||
|
|
||||
|
} |
||||
|
.btn{ |
||||
|
width: 227rpx; |
||||
|
height: 60rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 30rpx; |
||||
|
margin: 52rpx auto 0; |
||||
|
font-weight: 500; |
||||
|
font-size: 25rpx; |
||||
|
color: #333333; |
||||
|
text-align: center; |
||||
|
line-height: 60rpx; |
||||
|
} |
||||
|
.common-box{ |
||||
|
width: 100%; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(248,118,35,0.19); |
||||
|
border-radius: 20rpx; |
||||
|
padding: 38rpx 26rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 25rpx; |
||||
|
color: #333333; |
||||
|
margin-bottom: 22rpx; |
||||
|
.title{ |
||||
|
font-weight: bold; |
||||
|
font-size: 37rpx; |
||||
|
color: #4C9BB4; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
.bottom-img{ |
||||
|
width: 174.67rpx; |
||||
|
height: 78rpx; |
||||
|
margin: 74rpx auto 0; |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,46 @@ |
|||||
|
<template> |
||||
|
<view class="bg" > |
||||
|
<view class="content" v-html="formateRichText(rele_content)"></view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
rele_content: '', |
||||
|
headerTitle: '', |
||||
|
id: null |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.id = option.id; |
||||
|
this.Post({ |
||||
|
id: option.id |
||||
|
},"/api/sweepstakes/sweepstakes_act/getActInfo").then(res => { |
||||
|
this.rele_content = res.data.rule_desc |
||||
|
uni.setNavigationBarTitle({ |
||||
|
title:res.data.title |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
onReady() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
width: 750rpx; |
||||
|
min-height: 100vh; |
||||
|
padding-bottom: 60rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,218 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
||||
|
|
||||
|
<view class="main-container"> |
||||
|
<image class="title-image" src="https://static.ticket.sz-trip.com/uploads/20250822/a7ab5b85fcc1085c14f4a2ec23f0692f.png"></image> |
||||
|
|
||||
|
|
||||
|
<image class="adv-image" mode="aspectFill" @click="gotoPath('/subPackages/activity/agriculturalProdNH')" |
||||
|
src="https://static.ticket.sz-trip.com/uploads/20250822/2393a3923a07f2f1112ad0210f37021d.png"></image> |
||||
|
|
||||
|
<image class="title-image" style="margin-bottom: 38rpx;width: 100%;height: 3rpx;" |
||||
|
src="https://static.ticket.sz-trip.com/uploads/20250822/321e0c681ddbcc6853d6312eb69742c9.png"></image> |
||||
|
|
||||
|
<view class="row-product" v-for="(item,index) in list.slice(0,viewNum)" |
||||
|
:key="index" @click="gotoDetailByType(item)"> |
||||
|
<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image> |
||||
|
<view class="content flex-column"> |
||||
|
<view class="title text-overflowRows">{{item.title}}</view> |
||||
|
<view class="tags" v-if="item.display_tags"> |
||||
|
<view class="tag" v-for="(tag,tagI) in item.display_tags.split(',')" :key="tagI">{{tag}}</view> |
||||
|
</view> |
||||
|
<view class="flex-between"> |
||||
|
<view class="price">{{item.price/100}}</view> |
||||
|
<view class="btn">立即购买</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="view-more" v-if="list.length>0&&viewNum<=5" @click="viewNum=999">查看更多</view> |
||||
|
|
||||
|
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20250822/19236de541dc0d75e4e23be36ba98a45.png"></image> |
||||
|
<image @click="returnTop" v-show="showGoTop" class="back-img" src="https://static.ticket.sz-trip.com/uploads/20250822/ebc1045d4519507258b9aff74d004b36.png"></image> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [], |
||||
|
viewNum: 5, |
||||
|
headImg: '', |
||||
|
|
||||
|
showGoTop: false, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
|
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getHeadImg(2390) |
||||
|
this.getGoods() |
||||
|
}, |
||||
|
methods: { |
||||
|
getHeadImg (id) { |
||||
|
this.Post({id},'/api/multimedia/detail').then(res => { |
||||
|
this.headImg = res.data.head_img |
||||
|
uni.setNavigationBarTitle({ |
||||
|
title:res.data.title |
||||
|
}) |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 产品列表 |
||||
|
getGoods() { |
||||
|
this.Post({ |
||||
|
tag_id: 100, |
||||
|
offset: 0, |
||||
|
limit: 999, |
||||
|
},'/api/product/get_product_by_tag_subject').then(res => { |
||||
|
if (res.data.length < this.viewNum) { |
||||
|
this.viewNum = 999 |
||||
|
} |
||||
|
this.list = res.data.list |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
viewDetail(item) { |
||||
|
this.gotoDetailByType(item) |
||||
|
}, |
||||
|
returnTop(){ |
||||
|
uni.pageScrollTo({ |
||||
|
scrollTop: 0, |
||||
|
duration: 200, |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
onPageScroll(res) { |
||||
|
this.showGoTop = res.scrollTop > 200 ? true : false; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
width: 750rpx; |
||||
|
min-height: 100vh; |
||||
|
background: #FFE9CD; |
||||
|
padding-bottom: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.topImg { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.main-container{ |
||||
|
width: 100%; |
||||
|
padding: 0 26rpx; |
||||
|
.title-image{ |
||||
|
width: 494.67rpx; |
||||
|
height: 36rpx; |
||||
|
margin: 0 auto; |
||||
|
display: block; |
||||
|
} |
||||
|
.adv-image{ |
||||
|
margin: 31rpx 0 40rpx; |
||||
|
width: 100%; |
||||
|
height: 200rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.row-product{ |
||||
|
width: 100%; |
||||
|
height: 227rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 8rpx; |
||||
|
padding: 6rpx; |
||||
|
display: flex; |
||||
|
margin-bottom: 22rpx; |
||||
|
.img{ |
||||
|
width: 213rpx; |
||||
|
height: 100%; |
||||
|
border-radius: 7rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.content{ |
||||
|
width: 100rpx; |
||||
|
flex: 1; |
||||
|
justify-content: space-between; |
||||
|
padding: 6rpx 0 6rpx 22rpx; |
||||
|
} |
||||
|
.price{ |
||||
|
font-weight: bold; |
||||
|
font-size: 40rpx; |
||||
|
color: #F13E35; |
||||
|
&::before{ |
||||
|
content: "￥"; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
&::after{ |
||||
|
content: "起"; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
.btn{ |
||||
|
width: 164rpx; |
||||
|
height: 50rpx; |
||||
|
background: #FF9838; |
||||
|
border-radius: 25rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 27rpx; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 50rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
.title{ |
||||
|
font-weight: bold; |
||||
|
font-size: 29rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.tags{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
overflow: hidden; |
||||
|
.tag{ |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
height: 38rpx; |
||||
|
line-height: 38rpx; |
||||
|
color: #682809; |
||||
|
padding: 0rpx 6rpx; |
||||
|
border-radius: 5rpx; |
||||
|
border: 1px solid #682809; |
||||
|
margin-right: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
.view-more{ |
||||
|
// border: 1px solid #4C9BB4; |
||||
|
line-height: 53rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 25rpx; |
||||
|
color: #682809; |
||||
|
text-align: center; |
||||
|
margin: 32rpx auto 50rpx; |
||||
|
width: 253rpx; |
||||
|
height: 53rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 27rpx; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.bottom-img{ |
||||
|
width: 174.67rpx; |
||||
|
height: 78rpx; |
||||
|
margin: 74rpx auto 0; |
||||
|
display: block; |
||||
|
} |
||||
|
.back-img{ |
||||
|
position: fixed; |
||||
|
width: 66rpx; |
||||
|
height: 66rpx; |
||||
|
bottom: 66rpx; |
||||
|
right: 26rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,149 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="topImg relative"> |
||||
|
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="goodBox"> |
||||
|
<view @click="gotoDetailByType(item)" class="goodItem" v-for="(item,index) in list" :key="index"> |
||||
|
<image class="left-image" :src="showImg(item.headimg||'')" mode="aspectFill"></image> |
||||
|
<view class="contentBox flex-column flex-1 w-1rpx"> |
||||
|
<view class="title text-overflowRows">{{item.title}}</view> |
||||
|
<view class="subtitle text-overflow" v-if="item.display_tags" style="font-size: 24rpx;color: #6A8A27;"> |
||||
|
{{item.display_tags.split(',').join(" | ")}} |
||||
|
</view> |
||||
|
<view class="subtitle text-overflowRows">{{item.address}}</view> |
||||
|
|
||||
|
<view class="price price-money"> |
||||
|
{{item.price/100}} |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- <view class="finished-text" v-if="finished">没有更多数据了</view> --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default{ |
||||
|
data(){ |
||||
|
return { |
||||
|
headImg:null, |
||||
|
|
||||
|
list: [], |
||||
|
finished: false, |
||||
|
|
||||
|
type_id: 661,//景点分类id |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.finished = false |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getHeadImg(2383).then(res => {this.headImg = res}) |
||||
|
this.getList() |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
// 根据景点标签获取景点列表 |
||||
|
getList(){ |
||||
|
this.Post({tag_id: this.type_id,offset: this.list.length,limit: 10}, |
||||
|
'/api/product/get_product_by_tag').then(res => { |
||||
|
this.list = [...this.list, ...res.data.list]; |
||||
|
if (res.data.length < 10) { |
||||
|
this.finished = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
viewDetail (item) { |
||||
|
uni.navigateTo({ |
||||
|
url:'/subPackages/food/detail?id='+item.id |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
setTimeout(() => { |
||||
|
if (!this.finished) this.getList() |
||||
|
},1000) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
*{ |
||||
|
box-sizing: border-box; |
||||
|
font-family: PingFangSC; |
||||
|
} |
||||
|
.bg{ |
||||
|
min-height: 100vh; |
||||
|
background: #F9FCF3; |
||||
|
} |
||||
|
.topImg{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.goodBox{ |
||||
|
width: 100%; |
||||
|
z-index: 2; |
||||
|
padding: 26rpx; |
||||
|
|
||||
|
.goodItem{ |
||||
|
width: 100%; |
||||
|
height: 240rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
display: flex; |
||||
|
.left-image{ |
||||
|
width: 240rpx; |
||||
|
height: 100%; |
||||
|
border-radius: 20rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.contentBox{ |
||||
|
padding: 10rpx 20rpx 0; |
||||
|
height: 100%; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.title{ |
||||
|
width: 100%; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.subtitle{ |
||||
|
font-weight: 400; |
||||
|
font-size: 23rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.price{ |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
font-size: 33rpx; |
||||
|
color: #DC2525; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.price-money::before{ |
||||
|
content: '￥'; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
.price-money::after{ |
||||
|
content: '起'; |
||||
|
color: #999; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,145 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view style="position: relative;"> |
||||
|
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" |
||||
|
circular v-if="imgList.length>0" @change="handleSwiperChange" :current="currentIndex"> |
||||
|
<swiper-item v-for="(item, index) in imgList" :key="index"> |
||||
|
<view class="swiper-item"> |
||||
|
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<view class="swiper-pointer"> |
||||
|
<view :class="['poiner-item',currentIndex==i?'active':'']" v-for="(item,i) in imgList" :key="i"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="topBox"> |
||||
|
<view class="title text-overflowRows">{{detail.title}}</view> |
||||
|
<view class="name"> |
||||
|
<image :src="showImg(detail.avatar)"></image> |
||||
|
{{detail.nickname}} |
||||
|
</view> |
||||
|
<view class="content" style="padding-top: 52rpx;" v-html="formateRichText(detail.detail)"></view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
detail: {}, |
||||
|
imgList: [], |
||||
|
currentIndex: 0, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.getDetail(option.id) |
||||
|
}, |
||||
|
methods: { |
||||
|
handleSwiperChange(e) { |
||||
|
this.currentIndex = e.detail.current; |
||||
|
}, |
||||
|
getDetail(id) { |
||||
|
this.Post({id: id},'/api/travels/getDetail').then(res => { |
||||
|
this.detail = res.data; |
||||
|
if (res.data.img) { |
||||
|
this.imgList = res.data.img.split(',') || [] |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this.Post({id: id},"/api/travels/addView") |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
width: 750rpx; |
||||
|
min-height: 100vh; |
||||
|
background: #FFFFFF; |
||||
|
padding-bottom: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.swiper { |
||||
|
height: 750rpx; |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100%; |
||||
|
height: 750rpx; |
||||
|
|
||||
|
.item-img { |
||||
|
width: 750rpx; |
||||
|
height: 750rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.topBox { |
||||
|
width: 100%; |
||||
|
padding: 28rpx 32rpx; |
||||
|
background: #fff; |
||||
|
margin-top: -20rpx; |
||||
|
background: white; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
position: relative; |
||||
|
|
||||
|
.title { |
||||
|
font-weight: 500; |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.flex-between{ |
||||
|
padding: 28rpx 0; |
||||
|
border-bottom: 2rpx solid #F7F7F7; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #999999; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-top: 24rpx; |
||||
|
|
||||
|
|
||||
|
image { |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
border-radius: 50%; |
||||
|
margin-right: 12rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: 100%; |
||||
|
background: #FFFFFF; |
||||
|
padding-top: 20rpx; |
||||
|
} |
||||
|
.swiper-pointer{ |
||||
|
position: absolute; |
||||
|
right: 20rpx; |
||||
|
bottom: 40rpx; |
||||
|
display: flex; |
||||
|
|
||||
|
.poiner-item{ |
||||
|
width: 12rpx; |
||||
|
height: 12rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 50%; |
||||
|
opacity: 0.5; |
||||
|
margin-left: 15rpx; |
||||
|
} |
||||
|
.poiner-item.active{ |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,163 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
||||
|
|
||||
|
<view class="article-container"> |
||||
|
<view @click="viewDetail(item)" v-for="(item,index) in list" :key="index" class="item"> |
||||
|
<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image> |
||||
|
<view class="content flex-column"> |
||||
|
<view class="title text-overflowRows">{{item.title}}</view> |
||||
|
<view class="text-overflowRows" style="font-size: 24rpx;color: #848484;" v-if="item.page"> |
||||
|
地址：{{item.page}} |
||||
|
</view> |
||||
|
<view class="btn">详情介绍</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
titleObj: { |
||||
|
"gxnz":"共享农庄", |
||||
|
"whck":"网红村咖", |
||||
|
"yxdw":"乡村研学工坊", |
||||
|
}, |
||||
|
type: null, |
||||
|
imgId: null, |
||||
|
list: [], |
||||
|
finished: false, |
||||
|
headImg: '', |
||||
|
page_no: 1, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.type = option.type |
||||
|
this.imgId = option.imgId |
||||
|
if (!this.type) { |
||||
|
uni.showToast({ |
||||
|
title: '分类不存在', |
||||
|
icon: 'none', |
||||
|
}) |
||||
|
uni.navigateBack() |
||||
|
return |
||||
|
} |
||||
|
let title = this.titleObj[this.type] || '点位'; |
||||
|
uni.setNavigationBarTitle({ |
||||
|
title: title |
||||
|
}) |
||||
|
this.getArticleByType() |
||||
|
if (this.imgId) { |
||||
|
this.getHeadImg(this.imgId).then(res => {this.headImg = res}) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
// 游记攻略 |
||||
|
getArticleByType() { |
||||
|
this.Post({ |
||||
|
type_key: this.type, |
||||
|
offset: this.list.length, |
||||
|
page_no: this.page_no, |
||||
|
page_num: 10, |
||||
|
},'/api/travels/getList').then(res => { |
||||
|
if (res.data.rows.length >= 10) { |
||||
|
this.page_no++ |
||||
|
} else { |
||||
|
this.finished = true |
||||
|
} |
||||
|
this.list = [...this.list, ...res.data.rows] |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
viewDetail(item) { |
||||
|
if (item.url) { |
||||
|
uni.navigateTo({ |
||||
|
url:"/subPackages/webPage/webPage?url="+encodeURIComponent(item.url) |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
if (item.appId) { |
||||
|
uni.navigateToMiniProgram({ |
||||
|
appId:item.appId, |
||||
|
path:item.page |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
uni.navigateTo({ |
||||
|
url:'/subPackages/letter/detail?id='+item.id |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
//下拉触底事件 |
||||
|
onReachBottom() { |
||||
|
setTimeout(() => { |
||||
|
if (!this.finished) this.getArticleByType(); |
||||
|
}, 1000); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
width: 750rpx; |
||||
|
min-height: 100vh; |
||||
|
background: #F9FCF3; |
||||
|
padding-bottom: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.topImg { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.article-container{ |
||||
|
width: 100%; |
||||
|
border-radius: 24rpx ; |
||||
|
position: relative; |
||||
|
padding: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
width: 100%; |
||||
|
height: 240rpx; |
||||
|
margin-bottom:30rpx; |
||||
|
display: flex; |
||||
|
|
||||
|
.img { |
||||
|
width: 240rpx; |
||||
|
height: 240rpx; |
||||
|
border-radius: 24rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: 370rpx; |
||||
|
flex: 1; |
||||
|
height: 240rpx; |
||||
|
padding: 12rpx 0 0 24rpx; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.title { |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
.btn{ |
||||
|
width: 160rpx; |
||||
|
height: 53rpx; |
||||
|
line-height: 53rpx; |
||||
|
background: #6A8A27; |
||||
|
border-radius: 27rpx; |
||||
|
text-align: center; |
||||
|
font-weight: 400; |
||||
|
font-size: 27rpx; |
||||
|
color: #FFFFFF; |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,354 @@ |
|||||
|
<template> |
||||
|
<view class="bg" v-if="supplierInfo"> |
||||
|
<!-- 搜索 --> |
||||
|
<view class="search-header" :style="{'height': height+'px','padding-top':statusBarHeight+'px'}"> |
||||
|
<uni-icons type="left" size="20" @click="goBack" style="flex-shrink: 0;"></uni-icons> |
||||
|
<view class="input-model" > |
||||
|
<uni-icons style="height: 1.4rem;line-height: 1.4rem;" type="search" size="15" color="#ABAAAD" ></uni-icons> |
||||
|
<input class="input-text" v-model="searchText" placeholder="搜索"></text> |
||||
|
<view class="search-btn" @click="search()">搜索</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<div :style="{'height':height+'px','flex-shrink':0}"></div> |
||||
|
|
||||
|
<view class="price-box supplier-box"> |
||||
|
<image v-if="supplierInfo.headimg" class="supplier-image" :src="supplierInfo.headimg"></image> |
||||
|
<view class="supplier-content"> |
||||
|
<view class="text-overflowRows">{{supplierInfo.shop_name}}</view> |
||||
|
<view class="tags" v-if="supplierInfo.display_tags"> |
||||
|
<view class="tags-item" v-for="(item,i) in supplierInfo.display_tags.split(',')" :key="i"> |
||||
|
{{item}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 搜索 --> |
||||
|
<view class="data-container" style="height: 100rpx;flex: 1;"> |
||||
|
<view class="no-data-zhanwei" v-if="list.length<=0"> |
||||
|
<image src="https://static.ticket.sz-trip.com/uploads/20250618/0c2a469b4216f8cd570822b642d0a0fe.png"></image> |
||||
|
<view style="padding:50rpx 0 67rpx">暂无数据</view> |
||||
|
</view> |
||||
|
<scroll-view class="right-container no-scrollbar" :scroll-y="true" @scrolltolower="scrollLow()" v-else> |
||||
|
<view class="search-result" > |
||||
|
<view v-for="(item,i) in list" class="search-item" :key="i" @click="viewDetail(item)"> |
||||
|
<image :src="showImg(item.headimg)" mode="aspectFill"></image> |
||||
|
<view class="search-result-container"> |
||||
|
<view class="title text-overflowRows">{{item.title}}</view> |
||||
|
<view class="flex-between" style="padding-top: 20rpx;"> |
||||
|
<view class="price">{{item.price/100}}</view> |
||||
|
<view class="btn">购买</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view > |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
height: 0, |
||||
|
statusBarHeight: 0, |
||||
|
|
||||
|
id: null, |
||||
|
supplierInfo:null, |
||||
|
searchText: '', |
||||
|
list:[], |
||||
|
finished: false, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.id = options.id; |
||||
|
this.getSupplierInfo(); |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.initRectInfo() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
initRectInfo () { |
||||
|
const sysInfo = uni.getSystemInfoSync() |
||||
|
this.statusBarHeight = sysInfo.statusBarHeight |
||||
|
// 默认高度 |
||||
|
this.height = sysInfo.statusBarHeight + 40 |
||||
|
}, |
||||
|
getSupplierInfo () { |
||||
|
this.Post({supplier_id: this.id}, |
||||
|
'/api/supplier/get_supplier_detail').then(res => { |
||||
|
if (res.code != 1) { |
||||
|
uni.showToast({ |
||||
|
title: '店铺不存在', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
setTimeout(() => { |
||||
|
this.goBack() |
||||
|
}, 2000) |
||||
|
return |
||||
|
|
||||
|
} |
||||
|
this.supplierInfo = res.data; |
||||
|
this.search() |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
search () { |
||||
|
this.finished = false |
||||
|
this.list = [] |
||||
|
this.getList() |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 根据产品分类获取产品列表 |
||||
|
getList(){ |
||||
|
let param = {} |
||||
|
|
||||
|
this.Post({ |
||||
|
title: this.searchText.trim(), |
||||
|
supplier_id: this.id, |
||||
|
offset: this.list.length, |
||||
|
limit: 10, |
||||
|
},'/api/supplier/get_product_by_supplier_id').then(res => { |
||||
|
this.list = [...this.list, ...res.data.list]; |
||||
|
if (res.data.list.length < 10) { |
||||
|
this.finished = true |
||||
|
} |
||||
|
console.log(this.list) |
||||
|
}) |
||||
|
}, |
||||
|
scrollLow () { |
||||
|
if (!this.finished) { |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
viewDetail(item) { |
||||
|
// uni.navigateTo({ |
||||
|
// url: '/subPackages/techan/detail?id=' + item.id |
||||
|
// }) |
||||
|
this.gotoDetailByType(item) |
||||
|
}, |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
view { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.search-header{ |
||||
|
width: 100%; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-left: 10rpx; |
||||
|
padding-right: 120px; |
||||
|
background: #fff; |
||||
|
|
||||
|
.input-model{ |
||||
|
flex: 1; |
||||
|
width: 1rpx; |
||||
|
height: 64rpx; |
||||
|
background: #F2F4F7; |
||||
|
border-radius: 55rpx; |
||||
|
margin-left: 12rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-weight: 400; |
||||
|
font-size: 24rpx; |
||||
|
color: #999999; |
||||
|
padding-left: 24rpx; |
||||
|
} |
||||
|
.input-text{ |
||||
|
height:19px; |
||||
|
padding-left: 14rpx; |
||||
|
font-weight: 400; |
||||
|
font-size: 24rpx; |
||||
|
color: #030000; |
||||
|
} |
||||
|
.search-btn{ |
||||
|
font-weight: 500; |
||||
|
font-size: 29rpx; |
||||
|
color: #6A8A2D; |
||||
|
padding-left: 25rpx; |
||||
|
width: 85rpx; |
||||
|
height: 50%; |
||||
|
line-height: 1; |
||||
|
border-left: 1px solid #CCCCCC; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.bg { |
||||
|
height: 100vh; |
||||
|
padding-bottom: 26rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background: #F8FAFB; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.data-container{ |
||||
|
background: #F7F7F7; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.right-container{ |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
height: 1rpx; |
||||
|
.search-result{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
width: 100%; |
||||
|
flex: 1; |
||||
|
flex-shrink: 0; |
||||
|
padding:30rpx 26rpx 0; |
||||
|
.search-item{ |
||||
|
width: 335rpx; |
||||
|
height: 510rpx; |
||||
|
overflow: hidden; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
margin-bottom: 26rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
image{ |
||||
|
width: 335rpx; |
||||
|
height: 342rpx; |
||||
|
background: #87CD93; |
||||
|
border-radius: 13rpx 13rpx 0rpx 0rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.search-result-container{ |
||||
|
flex: 1; |
||||
|
padding:6rpx 12rpx 12rpx; |
||||
|
width: 100%; |
||||
|
height: 1rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.title{ |
||||
|
font-weight: 500; |
||||
|
font-size: 29rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.price{ |
||||
|
font-weight: 400; |
||||
|
font-size: 33rpx; |
||||
|
color: #C3282E; |
||||
|
} |
||||
|
.price:before{ |
||||
|
content: "￥"; |
||||
|
font-size: 23rpx; |
||||
|
} |
||||
|
.price:after{ |
||||
|
content: "起"; |
||||
|
font-size: 23rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
.btn{ |
||||
|
width: 107rpx; |
||||
|
height: 47rpx; |
||||
|
background: #6A8A2D; |
||||
|
border-radius: 11rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #FFFFFF; |
||||
|
text-align: center; |
||||
|
line-height: 47rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.placeholder-content{ |
||||
|
background: white; |
||||
|
position: relative; |
||||
|
.btn-cover{ |
||||
|
z-index: 200; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
width: 750rpx; |
||||
|
height: 148rpx; |
||||
|
background: #FFFFFF; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6,0,1,0.1); |
||||
|
.btn{ |
||||
|
width: 670rpx; |
||||
|
height: 78rpx; |
||||
|
text-align: center; |
||||
|
line-height: 78rpx; |
||||
|
background: #6A8A2D; |
||||
|
border-radius: 11rpx; |
||||
|
|
||||
|
font-size: 34rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.supplier-box{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 28rpx 23rpx; |
||||
|
width: 100%; |
||||
|
background: #ffffff; |
||||
|
flex-shrink: 0; |
||||
|
.supplier-image{ |
||||
|
width: 113.07rpx; |
||||
|
height: 113.07rpx; |
||||
|
border-radius: 50%; |
||||
|
flex-shrink: 0 ; |
||||
|
} |
||||
|
.supplier-content{ |
||||
|
flex: 1; |
||||
|
width: 1px; |
||||
|
padding: 0 50rpx 0 20rpx; |
||||
|
height: 113.07rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
color: #010101; |
||||
|
} |
||||
|
|
||||
|
.tags{ |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
.tags-item{ |
||||
|
padding: 4rpx 10rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #6A8A27; |
||||
|
border-radius: 5rpx 4rpx 4rpx 5rpx; |
||||
|
border: 1px solid #6A8A27; |
||||
|
margin-right: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,294 @@ |
|||||
|
<template> |
||||
|
<view class="bg" > |
||||
|
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
||||
|
|
||||
|
<!-- 搜索 --> |
||||
|
<view class="data-container" > |
||||
|
<view class="no-data-zhanwei" v-if="list.length<=0"> |
||||
|
<image src="https://static.ticket.sz-trip.com/uploads/20250618/0c2a469b4216f8cd570822b642d0a0fe.png"></image> |
||||
|
<view style="padding:50rpx 0 67rpx">暂无数据</view> |
||||
|
</view> |
||||
|
<scroll-view class="right-container no-scrollbar" :scroll-y="true" @scrolltolower="scrollLow()" v-else> |
||||
|
<view class="search-result" > |
||||
|
<view v-for="(item,i) in list" class="search-item" :key="i" @click="viewDetail(item)"> |
||||
|
<image :src="showImg(item.headimg)" mode="aspectFill"></image> |
||||
|
<view class="search-result-container"> |
||||
|
<view class="title text-overflowRows">{{item.title}}</view> |
||||
|
<view class="flex-between" style="padding-top: 20rpx;"> |
||||
|
<view class="price">{{item.price/100}}</view> |
||||
|
<view class="btn">购买</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view > |
||||
|
</view> |
||||
|
<view style="height: 60rpx;"></view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
list:[], |
||||
|
finished: false, |
||||
|
headImg: null, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getList() |
||||
|
this.getHeadImg(2381).then(res => {this.headImg = res}) |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
getList(){ |
||||
|
|
||||
|
this.Post({ |
||||
|
tag_id: 662, |
||||
|
offset: this.list.length, |
||||
|
limit: 10, |
||||
|
},'/api/product/get_product_by_tag').then(res => { |
||||
|
this.list = [...this.list, ...res.data.list]; |
||||
|
if (res.data.list.length < 10) { |
||||
|
this.finished = true |
||||
|
} |
||||
|
console.log(this.list) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
viewDetail(item) { |
||||
|
// uni.navigateTo({ |
||||
|
// url: '/subPackages/techan/detail?id=' + item.id |
||||
|
// }) |
||||
|
this.gotoDetailByType(item) |
||||
|
}, |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
setTimeout(()=>{ |
||||
|
if (!this.finished) { |
||||
|
this.getList() |
||||
|
} |
||||
|
},200) |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
view { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.search-header{ |
||||
|
width: 100%; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-left: 10rpx; |
||||
|
padding-right: 120px; |
||||
|
background: #fff; |
||||
|
|
||||
|
.input-model{ |
||||
|
flex: 1; |
||||
|
width: 1rpx; |
||||
|
height: 64rpx; |
||||
|
background: #F2F4F7; |
||||
|
border-radius: 55rpx; |
||||
|
margin-left: 12rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-weight: 400; |
||||
|
font-size: 24rpx; |
||||
|
color: #999999; |
||||
|
padding-left: 24rpx; |
||||
|
} |
||||
|
.input-text{ |
||||
|
height:19px; |
||||
|
padding-left: 14rpx; |
||||
|
font-weight: 400; |
||||
|
font-size: 24rpx; |
||||
|
color: #030000; |
||||
|
} |
||||
|
.search-btn{ |
||||
|
font-weight: 500; |
||||
|
font-size: 29rpx; |
||||
|
color: #6A8A2D; |
||||
|
padding-left: 25rpx; |
||||
|
width: 85rpx; |
||||
|
height: 50%; |
||||
|
line-height: 1; |
||||
|
border-left: 1px solid #CCCCCC; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
background: #F7F7F7; |
||||
|
} |
||||
|
.topImg{ |
||||
|
width: 100%; |
||||
|
// height: 440rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.data-container{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.right-container{ |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
height: 1rpx; |
||||
|
.search-result{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
width: 100%; |
||||
|
flex: 1; |
||||
|
flex-shrink: 0; |
||||
|
padding:30rpx 26rpx 0; |
||||
|
.search-item{ |
||||
|
width: 335rpx; |
||||
|
height: 510rpx; |
||||
|
overflow: hidden; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
margin-bottom: 26rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
image{ |
||||
|
width: 335rpx; |
||||
|
height: 342rpx; |
||||
|
background: #87CD93; |
||||
|
border-radius: 13rpx 13rpx 0rpx 0rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.search-result-container{ |
||||
|
flex: 1; |
||||
|
padding:6rpx 12rpx 12rpx; |
||||
|
width: 100%; |
||||
|
height: 1rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.title{ |
||||
|
font-weight: 500; |
||||
|
font-size: 29rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.price{ |
||||
|
font-weight: 400; |
||||
|
font-size: 33rpx; |
||||
|
color: #C3282E; |
||||
|
} |
||||
|
.price:before{ |
||||
|
content: "￥"; |
||||
|
font-size: 23rpx; |
||||
|
} |
||||
|
.price:after{ |
||||
|
content: "起"; |
||||
|
font-size: 23rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
.btn{ |
||||
|
width: 107rpx; |
||||
|
height: 47rpx; |
||||
|
background: #6A8A2D; |
||||
|
border-radius: 11rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #FFFFFF; |
||||
|
text-align: center; |
||||
|
line-height: 47rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.placeholder-content{ |
||||
|
background: white; |
||||
|
position: relative; |
||||
|
.btn-cover{ |
||||
|
z-index: 200; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
width: 750rpx; |
||||
|
height: 148rpx; |
||||
|
background: #FFFFFF; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6,0,1,0.1); |
||||
|
.btn{ |
||||
|
width: 670rpx; |
||||
|
height: 78rpx; |
||||
|
text-align: center; |
||||
|
line-height: 78rpx; |
||||
|
background: #6A8A2D; |
||||
|
border-radius: 11rpx; |
||||
|
|
||||
|
font-size: 34rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.supplier-box{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 28rpx 23rpx; |
||||
|
width: 100%; |
||||
|
background: #ffffff; |
||||
|
flex-shrink: 0; |
||||
|
.supplier-image{ |
||||
|
width: 113.07rpx; |
||||
|
height: 113.07rpx; |
||||
|
border-radius: 50%; |
||||
|
flex-shrink: 0 ; |
||||
|
} |
||||
|
.supplier-content{ |
||||
|
flex: 1; |
||||
|
width: 1px; |
||||
|
padding: 0 50rpx 0 20rpx; |
||||
|
height: 113.07rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
color: #010101; |
||||
|
} |
||||
|
|
||||
|
.tags{ |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
.tags-item{ |
||||
|
padding: 4rpx 10rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #6A8A27; |
||||
|
border-radius: 5rpx 4rpx 4rpx 5rpx; |
||||
|
border: 1px solid #6A8A27; |
||||
|
margin-right: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue