jiazhipeng
2 months ago
3 changed files with 272 additions and 1 deletions
@ -0,0 +1,265 @@ |
|||
<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/20250903/0962fc4e972a669f83e97a5a126b2f53.png"></image> |
|||
<view class="coupon-box"> |
|||
<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> |
|||
|
|||
|
|||
|
|||
<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 text-overflow" 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>4&&viewNum<=4" @click="viewNum=999">查看更多</view> |
|||
|
|||
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20250903/5b9a286d9f77a62fac2ffa54c77a9ff7.png"></image> |
|||
<image @click="returnTop" v-show="showGoTop" class="back-img" src="https://static.ticket.sz-trip.com/uploads/20250903/0654ba8242c922ca4008b80948e6c9e4.png"></image> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [], |
|||
viewNum: 4, |
|||
headImg: '', |
|||
couponList: [ |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250903/ecbb6d745d444fa838649e67b9901ac8.png"}, |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250903/0d0e31d8cc6b3eef8fa83016b9dd93dd.png"}, |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250903/7762e7eea2e005d8c16587f7065e6d3e.png"}, |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250903/fcd19b70b45f80509b0363ef72902974.png"}, |
|||
], |
|||
isReceive: true, |
|||
|
|||
showGoTop: false, |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
}, |
|||
onReady() { |
|||
this.getHeadImg(2393) |
|||
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 |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 产品列表 |
|||
getGoods() { |
|||
this.Post({ |
|||
tag_id: 101, |
|||
offset: 0, |
|||
limit: 999, |
|||
},'/api/product/get_product_by_tag_subject').then(res => { |
|||
this.list = res.data.list |
|||
}) |
|||
|
|||
}, |
|||
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: #319F56; |
|||
padding-bottom: 60rpx; |
|||
} |
|||
|
|||
.topImg { |
|||
width: 100%; |
|||
} |
|||
.main-container{ |
|||
width: 100%; |
|||
margin-top: -140rpx; |
|||
padding: 0 26rpx 60rpx; |
|||
position: relative; |
|||
z-index: 5; |
|||
.title-image{ |
|||
width: 100%; |
|||
height: 112rpx; |
|||
display: block; |
|||
} |
|||
} |
|||
.coupon-box{ |
|||
height: 466rpx; |
|||
background: #F4FFFE; |
|||
border-radius:0 0 25rpx 25rpx; |
|||
position: relative; |
|||
padding: 40rpx 26rpx 0; |
|||
overflow: hidden; |
|||
margin-bottom: 44rpx; |
|||
|
|||
.coupon-img{ |
|||
width: 311.33rpx; |
|||
height: 169.33rpx; |
|||
margin-bottom: 32rpx; |
|||
} |
|||
} |
|||
|
|||
.row-product{ |
|||
width: 100%; |
|||
height: 268rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 25rpx; |
|||
padding: 24rpx 26rpx; |
|||
display: flex; |
|||
margin-bottom: 32rpx; |
|||
.img{ |
|||
width: 220rpx; |
|||
height: 100%; |
|||
border-radius: 24rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.content{ |
|||
width: 100rpx; |
|||
flex: 1; |
|||
justify-content: space-between; |
|||
padding-left: 24rpx; |
|||
} |
|||
.price{ |
|||
font-weight: 500; |
|||
font-size: 40rpx; |
|||
color: #FF7700; |
|||
&::before{ |
|||
content: "￥"; |
|||
font-size: 28rpx; |
|||
} |
|||
&::after{ |
|||
content: "起"; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.btn{ |
|||
width: 160rpx; |
|||
height: 57rpx; |
|||
background: linear-gradient( 270deg, #319F56 0%, #9CED46 100%); |
|||
border-radius: 30rpx; |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
text-shadow: 0px 1px 3px #244705; |
|||
line-height: 57rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.title{ |
|||
font-weight: 600; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
} |
|||
.tags{ |
|||
width: 100%; |
|||
display: flex; |
|||
overflow: hidden; |
|||
.tag{ |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
height: 40rpx; |
|||
line-height: 38rpx; |
|||
color: #026EF6; |
|||
padding: 0rpx 10rpx; |
|||
border-radius: 20rpx; |
|||
border: 1px solid #026EF6; |
|||
margin-right: 20rpx; |
|||
} |
|||
} |
|||
.view-more{ |
|||
width: 262rpx; |
|||
height: 87rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 4rpx 11rpx 0rpx rgba(0,25,72,0.25); |
|||
border-radius: 16rpx; |
|||
line-height: 87rpx; |
|||
|
|||
font-weight: 600; |
|||
font-size: 35rpx; |
|||
color: #319F56; |
|||
text-align: center; |
|||
margin: 48rpx auto 0; |
|||
} |
|||
|
|||
|
|||
.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