jiazhipeng
3 weeks ago
2 changed files with 523 additions and 0 deletions
@ -0,0 +1,517 @@ |
|||||
|
<template> |
||||
|
<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta> |
||||
|
<view class="bg" v-if="headImg"> |
||||
|
<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(6)"></view> |
||||
|
<view class="coupon-box-between"> |
||||
|
<image :class="['coupon-img']" v-for="(item,i) in couponList" :key="i" |
||||
|
src="https://static.ticket.sz-trip.com/uploads/20250923/c8c424bcc49f084ba754c69e4934349b.png" |
||||
|
@click="getCoupon(item)" mode="heightFix"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="type-container"> |
||||
|
<view class="type-item" @click="typeIndex=i" v-for="(item,i) in typeList" :key="i"> |
||||
|
<image :class="['type-item',typeIndex==i?'active':'']" v-show="typeIndex==i" :src="item.imgs" mode="widthFix"></image> |
||||
|
<image :class="['type-item',typeIndex==i?'active':'']" v-show="typeIndex!=i" :src="item.img" mode="widthFix"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="prod-container"> |
||||
|
<image @click="showJudgeImg()" class="judge-btn" mode="widthFix" v-if="typeIndex==0" src="https://static.ticket.sz-trip.com/uploads/20250926/44091fc646c20b76a826cebd9820a50f.png"></image> |
||||
|
|
||||
|
<view class="prod-top" :style="{'background-image':`url(${typeList[typeIndex].bgImg})`}"> |
||||
|
<view class="xie-type" v-if="typeIndex==0"> |
||||
|
<view class="xie-type-item" @click="xieTypeIndex=0"> |
||||
|
<image v-show="xieTypeIndex==1" mode="heightFix" src="https://static.ticket.sz-trip.com/uploads/20250926/12e47551b09f9779cbca31e7502d2459.png"></image> |
||||
|
<image v-show="xieTypeIndex==0" mode="heightFix" src="https://static.ticket.sz-trip.com/uploads/20250926/0bf77d1ae17523c54be54012799ef71a.png"></image> |
||||
|
</view> |
||||
|
<view class="xie-type-item" @click="xieTypeIndex=1"> |
||||
|
<image v-show="xieTypeIndex==0" mode="heightFix" src="https://static.ticket.sz-trip.com/uploads/20250926/a326d712879371258fab73d6fb52da70.png"></image> |
||||
|
<image v-show="xieTypeIndex==1" mode="heightFix" src="https://static.ticket.sz-trip.com/uploads/20250926/b544167679d48b610189e505fa18b94d.png"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="prod-box flex-between" v-if="typeIndex!=2"> |
||||
|
<view v-if="typeIndex==0" style="width: 100%;height: 10rpx;"></view> |
||||
|
<template v-if="typeIndex==0&&xieTypeIndex==1"> |
||||
|
<view class="column-product" @click="gotoDetailByType(item)" :key="index" |
||||
|
v-for="(item,index) in xieList.list.slice(0,xieList.viewNum)"> |
||||
|
<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="flex-between"> |
||||
|
<view class="price">{{item.price/100}}</view> |
||||
|
<view class="btn">立即抢购</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png" |
||||
|
v-if="xieList.list.length>0&&xieList.viewNum<=6" mode="heightFix" |
||||
|
@click="xieList.viewNum=999"></image> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<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-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> |
||||
|
<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png" |
||||
|
v-if="typeList[typeIndex].list.length>0&&typeList[typeIndex].viewNum<=6" mode="heightFix" |
||||
|
@click="typeList[typeIndex].viewNum=999"></image> |
||||
|
</template> |
||||
|
</view> |
||||
|
<view class="prod-box flex-between" v-else> |
||||
|
<view class="row-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-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="btn">查看详情</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png" |
||||
|
v-if="typeList[typeIndex].list.length>0&&typeList[typeIndex].viewNum<=6" mode="heightFix" |
||||
|
@click="typeList[typeIndex].viewNum=999"></image> |
||||
|
</view> |
||||
|
<view class="prod-bottom"></view> |
||||
|
</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/20250923/aa531e802bfde6499454f598f59c46e7.png"></image> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.6)" @change="changPopShow"> |
||||
|
<view class="judge-pop-img" @click="$refs.popup.close()"> |
||||
|
<image style="width: 100%;" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20250926/d7e9d88c26f855e3ff3e829446d541b6.png"></image> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
|
||||
|
<image class="bottom-bg" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20250923/8f51b25f72dc0472ba2a3ea2f22208f7.png"></image> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
headImg: '', |
||||
|
couponList: [ |
||||
|
{id: null,}, |
||||
|
{id: null,}, |
||||
|
], |
||||
|
isReceive: true, |
||||
|
typeIndex: 0, |
||||
|
xieTypeIndex:0, |
||||
|
xieList: {list: [], viewNum: 6,id: 113}, |
||||
|
typeList: [ |
||||
|
{ |
||||
|
id: 109,title: "品蟹鲜",viewNum:6, list: [], |
||||
|
img:"https://static.ticket.sz-trip.com/uploads/20250923/ef4b6d89375e1039eda49c249a839660.png", |
||||
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250926/3363f324779fb5cc012461403fb18601.png", |
||||
|
bgImg:"https://static.ticket.sz-trip.com/uploads/20250923/d4d12e09fc1d1dbfcde2b3737627299c.png", |
||||
|
}, |
||||
|
{ |
||||
|
id: 110,title: "享丰收",viewNum:6, list: [], |
||||
|
img:"https://static.ticket.sz-trip.com/uploads/20250923/3207f4860f5b82bc1214b4013851c421.png", |
||||
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250923/ca0912684689f3d35ada61909ad00a46.png", |
||||
|
bgImg:"https://static.ticket.sz-trip.com/uploads/20250923/3abb6f842c7dc47f0792cbb6bc7a0dda.png", |
||||
|
}, |
||||
|
{ |
||||
|
id: 111,title: "玩蟹路",viewNum:6, list: [], |
||||
|
img:"https://static.ticket.sz-trip.com/uploads/20250923/84ec930200a2a7421785fc146ea6d29a.png", |
||||
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250923/963148360925eaaf4c5dc9f5a3a9a641.png", |
||||
|
bgImg:"https://static.ticket.sz-trip.com/uploads/20250923/7dd6ead7144b2d4d1630a4fc3b4ca673.png", |
||||
|
}, |
||||
|
{ |
||||
|
id: 112,title: "趣农创",viewNum:6, list: [], |
||||
|
img:"https://static.ticket.sz-trip.com/uploads/20250923/83579afbd0abc81923e99b6baf096171.png", |
||||
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250923/db9bfba5a3bae232f0ce7377aa594893.png", |
||||
|
bgImg:"https://static.ticket.sz-trip.com/uploads/20250923/cff87d3ae281a5f022e97ac63d43cbbc.png", |
||||
|
}, |
||||
|
], |
||||
|
showGoTop: false, |
||||
|
popShow: false, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
|
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getHeadImg(2398) |
||||
|
this.getGoods() |
||||
|
}, |
||||
|
methods: { |
||||
|
changPopShow (e) { |
||||
|
this.popShow = e.show |
||||
|
}, |
||||
|
|
||||
|
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() { |
||||
|
|
||||
|
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) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
this.Post({ |
||||
|
tag_id: this.xieList.id, |
||||
|
offset: 0, |
||||
|
limit: 999, |
||||
|
},'/api/product/get_product_by_tag_subject').then(res => { |
||||
|
if (res.data.list.length < this.xieList.viewNum) { |
||||
|
this.xieList.viewNum = 999 |
||||
|
} |
||||
|
this.xieList.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) |
||||
|
}, |
||||
|
|
||||
|
showJudgeImg () { |
||||
|
this.$refs.popup.open() |
||||
|
}, |
||||
|
|
||||
|
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: 30rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.topImg { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.main-container{ |
||||
|
width: 100%; |
||||
|
margin-top: -820rpx; |
||||
|
padding: 0; |
||||
|
position: relative; |
||||
|
} |
||||
|
.coupon-box{ |
||||
|
width: 695rpx; |
||||
|
height: 250rpx; |
||||
|
background-image: url("https://static.ticket.sz-trip.com/uploads/20250923/c90baa723c8d353380464846a5fb49eb.png"); |
||||
|
background-size: 100% 100%; |
||||
|
position: relative; |
||||
|
margin: 0 auto; |
||||
|
|
||||
|
|
||||
|
.coupon-box-between{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 0 103rpx 40rpx 149rpx; |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.rule{ |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
.coupon-img{ |
||||
|
height: 49.33rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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{ |
||||
|
height: 23rpx; |
||||
|
margin: 24rpx auto 0; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.type-container{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
height: 88rpx; |
||||
|
overflow: visible; |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
padding: 0 10rpx; |
||||
|
.type-item{ |
||||
|
width: 177.5rpx; |
||||
|
image{ |
||||
|
width: 177.5rpx; |
||||
|
height: 84rpx; |
||||
|
} |
||||
|
image.active{ |
||||
|
height: 160rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.column-product{ |
||||
|
width: 314rpx; |
||||
|
height: 477.33rpx; |
||||
|
background: #FFFCF7; |
||||
|
border-radius: 13rpx 13rpx 13rpx 13rpx; |
||||
|
border: 2rpx solid #FFF3E2; |
||||
|
overflow: hidden; |
||||
|
margin-bottom: 16rpx; |
||||
|
.img{ |
||||
|
width: 314rpx; |
||||
|
height: 314rpx; |
||||
|
border-radius: 13rpx 13rpx 0rpx 0rpx; |
||||
|
} |
||||
|
.content{ |
||||
|
width: 100%; |
||||
|
flex: 1; |
||||
|
height: 150rpx; |
||||
|
justify-content: space-between; |
||||
|
padding: 4rpx 10rpx 10rpx; |
||||
|
} |
||||
|
.price{ |
||||
|
font-weight: bold; |
||||
|
font-size: 28rpx; |
||||
|
color: #FF0014; |
||||
|
&::before{ |
||||
|
content: "￥"; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
.btn{ |
||||
|
width: 140rpx; |
||||
|
height: 50rpx; |
||||
|
background: #FF7122; |
||||
|
border-radius: 30rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 27rpx; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 50rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
.prod-container{ |
||||
|
width: 710rpx; |
||||
|
margin: 0 auto; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.prod-box{ |
||||
|
width: 100%; |
||||
|
flex-wrap: wrap; |
||||
|
padding: 10rpx 26rpx 0; |
||||
|
background-image: url("https://static.ticket.sz-trip.com/uploads/20250923/2026d2f66d529c16ff28025041223720.png"); |
||||
|
background-size: 100% auto; |
||||
|
background-repeat: repeat-y; |
||||
|
position: relative; |
||||
|
} |
||||
|
.prod-top{ |
||||
|
background-size: 100% 100%; |
||||
|
height: 125rpx; |
||||
|
width: 100%; |
||||
|
padding: 20rpx 20rpx 0; |
||||
|
} |
||||
|
.prod-bottom{ |
||||
|
background-size: 100% 100%; |
||||
|
height: 78.5rpx; |
||||
|
width: 100%; |
||||
|
background-image: url("https://static.ticket.sz-trip.com/uploads/20250923/5247b16c052c625b1a44fd6faa57c509.png"); |
||||
|
} |
||||
|
|
||||
|
.bottom-img{ |
||||
|
width: 145.33rpx; |
||||
|
height: 63.33rpx; |
||||
|
margin: 40rpx auto 0; |
||||
|
display: block; |
||||
|
position: relative; |
||||
|
z-index: 3; |
||||
|
} |
||||
|
.back-img{ |
||||
|
position: fixed; |
||||
|
width: 94rpx; |
||||
|
height: 94rpx; |
||||
|
bottom: 66rpx; |
||||
|
right: 26rpx; |
||||
|
z-index: 5; |
||||
|
} |
||||
|
|
||||
|
.row-product{ |
||||
|
width: 100%; |
||||
|
height: 202.67rpx; |
||||
|
background: #FFFCF7; |
||||
|
border-radius: 13rpx 13rpx 13rpx 13rpx; |
||||
|
border: 2rpx solid #FFF3E2; |
||||
|
|
||||
|
padding: 20rpx; |
||||
|
display: flex; |
||||
|
margin-bottom: 20rpx; |
||||
|
.img{ |
||||
|
width: 161rpx; |
||||
|
height: 161rpx; |
||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.content{ |
||||
|
width: 100rpx; |
||||
|
flex: 1; |
||||
|
justify-content: space-between; |
||||
|
padding-left: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.btn{ |
||||
|
width: 140rpx; |
||||
|
height: 50rpx; |
||||
|
background: #FF7325; |
||||
|
border-radius: 25rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 27rpx; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 50rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
.bottom-bg{ |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.xie-type{ |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
padding: 0 86rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
background: white; |
||||
|
.xie-type-item{ |
||||
|
height: 74rpx; |
||||
|
image{ |
||||
|
width: 230rpx; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.judge-btn{ |
||||
|
position: absolute; |
||||
|
right: -20rpx; |
||||
|
width: 160rpx; |
||||
|
top: 88rpx; |
||||
|
z-index: 5; |
||||
|
} |
||||
|
.judge-pop-img{ |
||||
|
width: 710rpx; |
||||
|
margin: 0 auto; |
||||
|
padding: 250rpx 0; |
||||
|
height: 100vh; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue