jiazhipeng
2 months ago
5 changed files with 235 additions and 10 deletions
@ -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> |
|||
Loading…
Reference in new issue