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