jiazhipeng
1 month ago
2 changed files with 293 additions and 0 deletions
@ -0,0 +1,287 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
||||
|
|
||||
|
<view class="main-container"> |
||||
|
|
||||
|
<view class="coupon-box"> |
||||
|
<view class="rule" @click="goRule(5)"> |
||||
|
活动规则<uni-icons type="right" size="12"></uni-icons> |
||||
|
</view> |
||||
|
<!-- <view class="coupon-tip">消费券领取后3天内未使用自动失效<br>失效后可再次领取</view> --> |
||||
|
<view class="flex-between" style="flex-wrap: wrap;margin-top: 20rpx;"> |
||||
|
<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" |
||||
|
src="https://static.ticket.sz-trip.com/uploads/20250909/76159d9ddffcf7b53daf4fa5ebd1180f.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).toFixed(2)}}</view> |
||||
|
<view class="btn">立即购买</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="view-more" v-if="list.length>0&&viewNum<=5" @click="viewNum=999"> |
||||
|
查看更多<image src="https://static.ticket.sz-trip.com/uploads/20250909/848e3a18b3ad3227fa4b2952890b91ef.png"></image> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20250909/55c100f9650df6cbd4a4e5a18c8201de.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: 5, |
||||
|
headImg: '', |
||||
|
couponList: [ |
||||
|
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250909/df85ecc7576c496c6f0c1b8f0187f354.png"}, |
||||
|
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250909/edc18f90c11f8ac6b0b6219015055994.png"}, |
||||
|
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250909/3f0b4898b5dbb53665fc2cb7771959f7.png"}, |
||||
|
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20250909/177508729382abf7eac929b952e9de1e.png"}, |
||||
|
], |
||||
|
isReceive: true, |
||||
|
|
||||
|
showGoTop: false, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
|
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getHeadImg(2395) |
||||
|
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: 102, |
||||
|
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 |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
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; |
||||
|
padding-bottom: 27rpx; |
||||
|
background-image: url("https://static.ticket.sz-trip.com/uploads/20250909/0b246a12035de1bc119b6a0bb8ee96db.png"); |
||||
|
background-size: 100% 100%; |
||||
|
// background-repeat: repeat-y; |
||||
|
} |
||||
|
|
||||
|
.topImg { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.main-container{ |
||||
|
width: 100%; |
||||
|
margin-top: -330rpx; |
||||
|
padding: 0 26rpx 60rpx; |
||||
|
.adv-image{ |
||||
|
margin: 26rpx 0 36rpx; |
||||
|
width: 100%; |
||||
|
height: 258.67rpx; |
||||
|
} |
||||
|
} |
||||
|
.coupon-box{ |
||||
|
width: 100%; |
||||
|
|
||||
|
.rule{ |
||||
|
text-align: right; |
||||
|
font-weight: 400; |
||||
|
font-size: 24rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.coupon-img{ |
||||
|
width: 340.85rpx; |
||||
|
height: 143.16rpx; |
||||
|
margin-bottom: 18rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.row-product{ |
||||
|
width: 100%; |
||||
|
height: 213.33rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 21rpx; |
||||
|
padding: 22rpx 22rpx 14rpx 19rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 22rpx; |
||||
|
.img{ |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.content{ |
||||
|
width: 100rpx; |
||||
|
height: 100%; |
||||
|
flex: 1; |
||||
|
justify-content: space-between; |
||||
|
padding: 0rpx 0 0rpx 22rpx; |
||||
|
} |
||||
|
.price{ |
||||
|
font-weight: 400; |
||||
|
font-size: 32rpx; |
||||
|
color: #FE2E18; |
||||
|
&::before{ |
||||
|
content: "￥"; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
// &::after{ |
||||
|
// content: "起"; |
||||
|
// font-size: 24rpx; |
||||
|
// } |
||||
|
} |
||||
|
.btn{ |
||||
|
width: 123rpx; |
||||
|
height: 48rpx; |
||||
|
background: #FE4A29; |
||||
|
border-radius: 7rpx 7rpx 7rpx 7rpx; |
||||
|
font-weight: 400; |
||||
|
font-size: 24rpx; |
||||
|
color: #FFFFFF; |
||||
|
|
||||
|
line-height: 48rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
.title{ |
||||
|
font-weight: 400; |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.tags{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
overflow: hidden; |
||||
|
.tag{ |
||||
|
font-weight: 400; |
||||
|
font-size: 20rpx; |
||||
|
color: #FFA100; |
||||
|
height: 33rpx; |
||||
|
// line-height: 33rpx; |
||||
|
padding: 0rpx 8rpx; |
||||
|
border-radius: 3rpx; |
||||
|
border: 1rpx solid #FFA100; |
||||
|
margin-right: 10rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
.view-more{ |
||||
|
font-weight: 400; |
||||
|
font-size: 24rpx; |
||||
|
color: #8C8C8C; |
||||
|
text-align: center; |
||||
|
margin: 27rpx auto 0; |
||||
|
image{ |
||||
|
width: 18.67rpx; |
||||
|
height: 18.67rpx; |
||||
|
margin-left: 8rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.bottom-img{ |
||||
|
width: 149.33rpx; |
||||
|
height: 64rpx; |
||||
|
margin: 27rpx auto 0; |
||||
|
display: block; |
||||
|
} |
||||
|
.back-img{ |
||||
|
position: fixed; |
||||
|
width: 66rpx; |
||||
|
height: 66rpx; |
||||
|
bottom: 66rpx; |
||||
|
right: 26rpx; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue