Compare commits
5 Commits
d60d333944
...
6ec8d1ea2c
Author | SHA1 | Date |
---|---|---|
|
6ec8d1ea2c | 4 days ago |
|
be8293a420 | 7 days ago |
|
2176fc5757 | 7 days ago |
|
2aa6e1de73 | 7 days ago |
|
4cd8efa40f | 7 days ago |
13 changed files with 1748 additions and 45 deletions
@ -0,0 +1,455 @@ |
|||
<template> |
|||
<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta> |
|||
<view class="bg"> |
|||
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
|||
|
|||
<view class="main-container"> |
|||
<view class="coupon-box" v-for="(prize,prizeIndex) in prizeList" :key="prizeIndex" |
|||
:style="{'background-image':`url(${prize.backgroundImg})`}"> |
|||
<view class="flex-between" style="flex-wrap: wrap;" v-if="prize.isCoupon"> |
|||
<image :class="['coupon-img','coupon-img'+i]" v-for="(item,i) in couponList" :key="i" |
|||
:src="item.img" @click="getCoupon(item)" mode="widthFix"></image> |
|||
</view> |
|||
<view class="w-full" v-else @click="gotoPath(prize.path)"> |
|||
<image style="width: 100%;height: 262rpx;" :src="prize.img" mode="widthFix"></image> |
|||
</view> |
|||
|
|||
<view class="rule flex-center" v-if="prize.isCoupon" @click="showRule(item)"> |
|||
活动规则 |
|||
<image src="https://static.ticket.sz-trip.com/uploads/20251015/d63427138ebdec9e4a780736c0cece2c.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="type-container" :style="{'background-image':`url(${typeList[typeIndex].backgroundImg})`}"> |
|||
<view :class="['type-item','type-item'+i,typeIndex==i?'active':'']" @click="typeIndex=i" |
|||
v-for="(item,i) in typeList" :key="i">{{item.title}}</view> |
|||
</view> |
|||
<view class="product-container"> |
|||
<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 > |
|||
<text class="price">{{item.price/100}}</text> |
|||
<text class="old-price" v-if="item.market_price">{{item.market_price/100}}</text> |
|||
</view> |
|||
<view class="btn"> |
|||
<image style="width: 100%;height: 100%;border-radius: 50%;" mode="aspectFill" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/06d55a0ce76555ad9d65e8574af0b016.png"></image> |
|||
</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> |
|||
|
|||
<!-- <image style="width: 100%;" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/b75309eedd49e02b518d5eeeca19855e.png"></image> --> |
|||
|
|||
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20251015/cf1381e1c826b6cad95a8344c7125def.png"></image> |
|||
<image @click="returnTop" v-show="showGoTop" class="back-img" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/82d48498bdf14ded3061bec9defa5138.png"></image> |
|||
|
|||
</view> |
|||
|
|||
<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.6)" @change="changPopShow"> |
|||
<view class="flex-column flex-center"> |
|||
<image style="width: 636rpx;" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/bcfccc761d5f48589a92d83cf2ad89f5.png"></image> |
|||
|
|||
<image @click="$refs.popup.close()" style="width: 53rpx;height: 53rpx;margin-top: 40rpx;" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/d89694d06c3aa5e418aca43822d14042.png"></image> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
headImg: '', |
|||
|
|||
prizeList: [ |
|||
{ |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251015/1de2e7b5d2c81859da64a03c08a2abab.png", |
|||
isCoupon: true, |
|||
ruleImg: "https://static.ticket.sz-trip.com/uploads/20251015/bcfccc761d5f48589a92d83cf2ad89f5.png", |
|||
}, |
|||
{ |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251015/869d6ad6500513201a42b2f05d315281.png", |
|||
img: "https://static.ticket.sz-trip.com/uploads/20251015/94f1e10dc0f45347a243481d28044a52.png", |
|||
path: "/subPackages/activity/dzxConSeasonNH" |
|||
}, |
|||
{ |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251015/b57675474d037bfe3c141a73e22a1514.png", |
|||
img:"https://static.ticket.sz-trip.com/uploads/20251015/54710ff93860f871f533d6affcf4b7fc.png", |
|||
path: "/subPackages/activity/dzxConSeasonPrize" |
|||
}, |
|||
], |
|||
couponList: [ |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20251015/9b516a020e2783787f7a95156d1ae1f9.png"}, |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20251015/8321d506adeaeb4b84d5e2cbfb113870.png"}, |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20251015/26099ebefdf08e2b60c5ee41c22ffeb9.png"}, |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20251015/a300c6a3b39bdc8d4a8801bfde9efa9f.png"}, |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20251015/7c1c2b9b20a5ec9dc5693a2f34429d36.png"}, |
|||
], |
|||
isReceive: true, |
|||
typeIndex: 0, |
|||
typeList: [ |
|||
{ |
|||
id: 116,title: "正宗好蟹",viewNum:6, list: [], |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251016/cf772d70307dccb70fbc6221174144f9.png", |
|||
}, |
|||
{ |
|||
id: 117,title: "秋冬进补",viewNum:6, list: [], |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251016/6be24679dbfec9efc8703627c764aa3d.png", |
|||
}, |
|||
{ |
|||
id: 118,title: "时令甄选",viewNum:6, list: [], |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251016/c92d5c63f216b27ce77522e17e06f1d6.png", |
|||
}, |
|||
{ |
|||
id: 119,title: "苏韵文创",viewNum:6, list: [], |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251016/339be8cc94d8b21c192c5911fa73de70.png", |
|||
}, |
|||
], |
|||
showGoTop: false, |
|||
popShow: false, |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
}, |
|||
onReady() { |
|||
this.getHeadImg(2401) |
|||
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 |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
showRule (item) { |
|||
this.$refs.popup.open() |
|||
}, |
|||
|
|||
// 产品列表 |
|||
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) |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
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: 30rpx; |
|||
background-image: url("https://static.ticket.sz-trip.com/uploads/20251015/306f4e5db6cc77c111c73f78acecad18.png"); |
|||
background-size: 100% auto; |
|||
background-repeat: repeat-y; /* 竖向重复 */ |
|||
background-position: bottom; /* 从底部开始显示 */ |
|||
} |
|||
|
|||
.topImg { |
|||
width: 100%; |
|||
} |
|||
.main-container{ |
|||
width: 100%; |
|||
margin-top: -1610rpx; |
|||
padding: 0 17rpx 60rpx; |
|||
} |
|||
.coupon-box{ |
|||
width: 100%; |
|||
position: relative; |
|||
padding: 95rpx 12rpx 3rpx; |
|||
background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
margin-bottom: 30rpx; |
|||
.rule{ |
|||
width: 165rpx; |
|||
height: 49rpx; |
|||
background: #63C083; |
|||
border-radius: 35rpx 35rpx 35rpx 35rpx; |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
color: #FFFFFF; |
|||
position: absolute; |
|||
top: 12rpx; |
|||
right: 0; |
|||
image{ |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
margin-left: 5rpx; |
|||
margin-top: 1rpx; |
|||
} |
|||
} |
|||
|
|||
.coupon-img{ |
|||
width: 160rpx; |
|||
height: 190rpx; |
|||
margin-bottom: 15rpx; |
|||
} |
|||
.coupon-img4{ |
|||
width: 100%; |
|||
height: 196.67rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.row-product{ |
|||
width: 100%; |
|||
height: 240rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(177,177,177,0.25); |
|||
border-radius: 20rpx 20rpx 20rpx 20rpx; |
|||
border: 1rpx solid #F4F4F4; |
|||
padding: 20rpx 22rpx; |
|||
display: flex; |
|||
margin-bottom: 13rpx; |
|||
.img{ |
|||
width: 200rpx; |
|||
height: 100%; |
|||
border-radius: 20rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.content{ |
|||
width: 100rpx; |
|||
flex: 1; |
|||
justify-content: space-between; |
|||
padding: 0 0 0rpx 13rpx; |
|||
} |
|||
.price{ |
|||
font-weight: 500; |
|||
font-size: 39rpx; |
|||
color: #FF0000; |
|||
&::before{ |
|||
content: "¥"; |
|||
font-size: 27rpx; |
|||
} |
|||
// &::after{ |
|||
// content: "起"; |
|||
// font-size: 24rpx; |
|||
// } |
|||
} |
|||
.old-price{ |
|||
font-weight: 400; |
|||
font-size: 29rpx; |
|||
color: #B1B1B1; |
|||
text-decoration-line: line-through; |
|||
margin-left: 13rpx; |
|||
&::before{ |
|||
content: "¥"; |
|||
} |
|||
} |
|||
.btn{ |
|||
width: 53.33rpx; |
|||
height: 53.33rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
.title{ |
|||
font-weight: 400; |
|||
font-size: 31rpx; |
|||
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: 24rpx; |
|||
margin: 31rpx auto 0; |
|||
position: relative; |
|||
z-index: 2; |
|||
display: block; |
|||
} |
|||
|
|||
.type-container{ |
|||
display: flex; |
|||
// padding: 24rpx 34rpx 0; |
|||
height: 324rpx; |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
.type-item{ |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
text-align: left; |
|||
height: 80rpx; |
|||
// background-color: rgba(0,0,0,0.5); |
|||
opacity: 0; |
|||
flex: 1; |
|||
&.active{ |
|||
// font-weight: bold; |
|||
// font-size: 33rpx; |
|||
// color: #000000; |
|||
// text-shadow: |
|||
// -3px -3px 0 #fff, /* 左上白边 */ |
|||
// 3px -3px 0 #fff, /* 右上白边 */ |
|||
// -3px 3px 0 #fff, /* 左下白边 */ |
|||
// 3px 3px 0 #fff, /* 右下白边 */ |
|||
// 0px 3px 3px rgba(255,119,0,0.25); |
|||
// text-stroke: 3px #FFFFFF; |
|||
|
|||
} |
|||
} |
|||
// .type-item0{ |
|||
// width: 180rpx; |
|||
// } |
|||
// .type-item1{ |
|||
// width: 170rpx; |
|||
// } |
|||
// .type-item2{ |
|||
// width: 170rpx; |
|||
// } |
|||
} |
|||
|
|||
.product-container{ |
|||
margin-top: -210rpx; |
|||
padding:0 21rpx 34rpx 27rpx; |
|||
position: relative; |
|||
background: #FFFEFF; |
|||
border-radius: 0rpx 0rpx 35rpx 35rpx; |
|||
} |
|||
|
|||
.column-product{ |
|||
width: 340rpx; |
|||
height: 497rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 6rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 16rpx; |
|||
.img{ |
|||
width: 327rpx; |
|||
height: 327rpx; |
|||
border-radius: 13rpx 13rpx 0rpx 0rpx; |
|||
} |
|||
.content{ |
|||
width: 100%; |
|||
flex: 1; |
|||
height: 150rpx; |
|||
justify-content: space-between; |
|||
padding: 4rpx 10rpx; |
|||
} |
|||
.price{ |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
color: #E62525; |
|||
&::before{ |
|||
content: "¥"; |
|||
} |
|||
} |
|||
.btn{ |
|||
width: 100rpx; |
|||
height: 40rpx; |
|||
background: #FF9838; |
|||
border-radius: 20rpx; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #FFFFFF; |
|||
line-height: 40rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.bottom-img{ |
|||
width: 123.95rpx; |
|||
height: 103.06rpx; |
|||
margin: 74rpx auto 0; |
|||
display: block; |
|||
} |
|||
.back-img{ |
|||
position: fixed; |
|||
width: 66rpx; |
|||
height: 66rpx; |
|||
bottom: 66rpx; |
|||
right: 26rpx; |
|||
} |
|||
</style> |
@ -0,0 +1,310 @@ |
|||
<template> |
|||
<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta> |
|||
<view class="bg"> |
|||
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix" :show-menu-by-longpress="true"></image> |
|||
|
|||
<view class="rule-box"> |
|||
<view class="rule-btn" @click="showRule(1)">活动 细则</view> |
|||
<!-- <view class="rule-btn">操作 流程</view> --> |
|||
</view> |
|||
|
|||
<view class="main-container"> |
|||
<image class="title-image" src="https://static.ticket.sz-trip.com/uploads/20251015/472caac1ca249c1701dc1c58fa458be4.png"></image> |
|||
<view class="product-container flex-between" style="flex-wrap: wrap;"> |
|||
<view class="column-product" @click="gotoDetailByType(item)" :key="index" |
|||
v-for="(item,index) in list"> |
|||
<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 > |
|||
<text class="price">{{item.price/100}}</text> |
|||
<text class="old-price" v-if="item.market_price">{{item.market_price/100}}</text> |
|||
</view> |
|||
<view class="btn"> |
|||
<image style="width: 100%;height: 100%;border-radius: 50%;" mode="aspectFill" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/06d55a0ce76555ad9d65e8574af0b016.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png" |
|||
v-if="!finish" mode="heightFix" @click="getGoods()"></image> |
|||
</view> |
|||
|
|||
<!-- <image style="width: 100%;" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/b75309eedd49e02b518d5eeeca19855e.png"></image> --> |
|||
|
|||
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20251015/cf1381e1c826b6cad95a8344c7125def.png"></image> |
|||
<image @click="returnTop" v-show="showGoTop" class="back-img" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/82d48498bdf14ded3061bec9defa5138.png"></image> |
|||
|
|||
</view> |
|||
|
|||
<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.6)" @change="changPopShow"> |
|||
<view class="flex-column flex-center"> |
|||
<view class="pop-image"> |
|||
<view class="content"> |
|||
<image mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/d1cf83965be001dc35389648c8749570.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<image @click="$refs.popup.close()" style="width: 53rpx;height: 53rpx;margin-top: 40rpx;" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/d89694d06c3aa5e418aca43822d14042.png"></image> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
headImg: '', |
|||
finish:false, |
|||
list: [], |
|||
showGoTop: false, |
|||
popShow: false, |
|||
ruleImg: "", |
|||
|
|||
|
|||
typeList: [], |
|||
|
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
}, |
|||
onReady() { |
|||
this.getHeadImg(2402) |
|||
// this.getGoods() |
|||
this.productInit() |
|||
}, |
|||
methods: { |
|||
productInit () { |
|||
let _this = this |
|||
// 获取所有农产品子类目 pid_type 20 |
|||
this.Post({pid: 20},'/api/product/tag_list').then(res => { |
|||
let typeList = (res.data || []).map(v=>v.id) |
|||
Promise.all( |
|||
typeList.map(x=>_this.Post({pid:x},'/api/product/tag_list')) |
|||
).then(typeRes => { |
|||
typeRes.forEach(type => { |
|||
if (type.data.length>0) { |
|||
typeList = typeList.concat(type.data.map(x=>x.id)) |
|||
} |
|||
}) |
|||
this.typeList = typeList |
|||
this.getGoods() |
|||
}) |
|||
}) |
|||
|
|||
}, |
|||
|
|||
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 |
|||
}) |
|||
}); |
|||
}, |
|||
showRule (type) { |
|||
this.$refs.popup.open() |
|||
}, |
|||
|
|||
// 产品列表 |
|||
getGoods() { |
|||
this.Post({ |
|||
tag_id: this.typeList.join(","), |
|||
offset: this.list.length, |
|||
limit: 6, |
|||
order:"desc", |
|||
sort:"sales_number", |
|||
},'/api/product/get_product_by_tag').then(res => { |
|||
if (res.data.length < 6) { |
|||
this.finish = true |
|||
} |
|||
this.list = this.list.concat(res.data.list||[]) |
|||
}) |
|||
}, |
|||
|
|||
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; |
|||
background-image: url("https://static.ticket.sz-trip.com/uploads/20251015/306f4e5db6cc77c111c73f78acecad18.png"); |
|||
background-size: 100% auto; |
|||
background-repeat: repeat-y; /* 竖向重复 */ |
|||
background-position: bottom; /* 从底部开始显示 */ |
|||
position: relative; |
|||
} |
|||
|
|||
.topImg { |
|||
width: 100%; |
|||
} |
|||
|
|||
.rule-box{ |
|||
position: absolute; |
|||
right: 20rpx; |
|||
top: 220rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 150rpx; |
|||
width: 67rpx; |
|||
z-index: 20; |
|||
.rule-btn{ |
|||
width: 66.67rpx; |
|||
height: 66.67rpx; |
|||
background-size: 100% 100%; |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
padding: 0rpx 0rpx; |
|||
text-align: center; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-image: url("https://static.ticket.sz-trip.com/uploads/20251015/98e2184f7003a6d3ae3ae7246550260e.png"); |
|||
line-height: 1.2; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.main-container{ |
|||
width: 100%; |
|||
margin-top: -250rpx; |
|||
padding: 0 34rpx 60rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title-image{ |
|||
width: 316.67rpx; |
|||
height: 68.67rpx; |
|||
margin: 0 auto; |
|||
display: block; |
|||
} |
|||
|
|||
.view-more{ |
|||
height: 24rpx; |
|||
margin: 31rpx auto 0; |
|||
position: relative; |
|||
z-index: 2; |
|||
display: block; |
|||
} |
|||
|
|||
.product-container{ |
|||
padding:30rpx 0 0; |
|||
} |
|||
|
|||
.column-product{ |
|||
width: 333rpx; |
|||
height: 484rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(186,144,108,0.1); |
|||
border-radius: 27rpx 27rpx 27rpx 27rpx; |
|||
padding: 6rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 19rpx; |
|||
.img{ |
|||
width: 320rpx; |
|||
height: 320rpx; |
|||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
} |
|||
.title{ |
|||
font-weight: 400; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
.content{ |
|||
width: 100%; |
|||
flex: 1; |
|||
height: 150rpx; |
|||
justify-content: space-between; |
|||
padding: 0rpx 10rpx 10rpx; |
|||
} |
|||
.price{ |
|||
font-weight: 500; |
|||
font-size: 34rpx; |
|||
color: #FF0000; |
|||
&::before{ |
|||
content: "¥"; |
|||
font-size: 24rpx; |
|||
} |
|||
// &::after{ |
|||
// content: "起"; |
|||
// font-size: 24rpx; |
|||
// } |
|||
} |
|||
.old-price{ |
|||
font-weight: 400; |
|||
font-size: 25rpx; |
|||
color: #B1B1B1; |
|||
text-decoration-line: line-through; |
|||
margin-left: 10rpx; |
|||
&::before{ |
|||
content: "¥"; |
|||
} |
|||
} |
|||
.btn{ |
|||
width: 53.33rpx; |
|||
height: 53.33rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
.bottom-img{ |
|||
width: 123.95rpx; |
|||
height: 103.06rpx; |
|||
margin: 74rpx auto 0; |
|||
display: block; |
|||
} |
|||
.back-img{ |
|||
position: fixed; |
|||
width: 66rpx; |
|||
height: 66rpx; |
|||
bottom: 66rpx; |
|||
right: 26rpx; |
|||
} |
|||
|
|||
.pop-image{ |
|||
width: 636rpx; |
|||
height: 1262.11rpx; |
|||
background: url("https://static.ticket.sz-trip.com/uploads/20251015/dbe71e60d36a04a908651045d67f9582.png"); |
|||
background-size: 100% 100%; |
|||
padding: 223rpx 42rpx 30rpx; |
|||
.content{ |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
image{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
@ -0,0 +1,650 @@ |
|||
<template> |
|||
<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta> |
|||
<view class="bg"> |
|||
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix" :show-menu-by-longpress="true"></image> |
|||
<view v-else style="height: 1200rpx;"></view> |
|||
<view class="rule-box"> |
|||
<view class="rule-btn" @click="showRule(1)">活动 规则</view> |
|||
</view> |
|||
|
|||
<view class="main-container"> |
|||
<view class="zhuanpan"> |
|||
<view class="zhuanpanImg" :style="{ transform: `rotate(${rotateAngle}deg)` }"></view> |
|||
<image class="choujiang" src="https://static.ticket.sz-trip.com/uploads/20251015/a24d553d3d8707579ad74b9a7d8181d6.png" @click="getPrize"></image> |
|||
</view> |
|||
|
|||
|
|||
<view class="flex-between" style="margin-bottom: 27rpx;position: relative;"> |
|||
<button class="my-share" open-type="share">1</button> |
|||
<image style="width: 371.33rpx;height: 101.33rpx;" mode="heightFix" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/c5ca2c1e8a96b4340776ca6af92c6711.png"></image> |
|||
|
|||
<image @click="openMyPrize()" style="width: 288rpx;height: 101.33rpx;" mode="heightFix" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/1b04f59f632af0d7fcdb58a5c2eb39d5.png"></image> |
|||
</view> |
|||
|
|||
<image class="title-image" src="https://static.ticket.sz-trip.com/uploads/20251015/580622a02ffe192d428f0e90ca020e3f.png"></image> |
|||
<view class="product-container flex-between" style="flex-wrap: wrap;"> |
|||
<view class="column-product" @click="gotoDetailByType(item)" :key="index" |
|||
v-for="(item,index) in list"> |
|||
<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 > |
|||
<text class="price">{{item.price/100}}</text> |
|||
<text class="old-price" v-if="item.market_price">{{item.market_price/100}}</text> |
|||
</view> |
|||
<view class="btn"> |
|||
<image style="width: 100%;height: 100%;border-radius: 50%;" mode="aspectFill" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/06d55a0ce76555ad9d65e8574af0b016.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png" |
|||
v-if="!finish" mode="heightFix" @click="getGoods()"></image> |
|||
</view> |
|||
|
|||
<!-- <image style="width: 100%;" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/b75309eedd49e02b518d5eeeca19855e.png"></image> --> |
|||
|
|||
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20251015/cf1381e1c826b6cad95a8344c7125def.png"></image> |
|||
<image @click="returnTop" v-show="showGoTop" class="back-img" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/82d48498bdf14ded3061bec9defa5138.png"></image> |
|||
|
|||
</view> |
|||
|
|||
<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.6)" @change="changPopShow"> |
|||
<view class="flex-column flex-center"> |
|||
<image style="width: 636rpx;" mode="widthFix" :src="ruleImg"></image> |
|||
|
|||
<image @click="$refs.popup.close()" style="width: 53rpx;height: 53rpx;margin-top: 40rpx;" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/d89694d06c3aa5e418aca43822d14042.png"></image> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<uni-popup ref="prizePop" type="bottom" :safe-area="false" |
|||
mask-background-color="rgba(0,0,0,0.6)" |
|||
@change="changPopShow"> |
|||
<view class="my-prize"> |
|||
<view class="title-container"> |
|||
<image mode="heightFix" src="https://static.ticket.sz-trip.com/uploads/20251016/3a65b98b7014225ae635f39a1b5d9a96.png"></image> |
|||
<image @click="$refs.prizePop.close()" class="close" src="https://static.ticket.sz-trip.com/uploads/20251016/77d62de0d8a19c5a940506f49662e640.png"></image> |
|||
</view> |
|||
|
|||
<view class="prize-content"> |
|||
<view class="flex-center" v-if="prizeList.length<=0"> |
|||
<image class="no-data" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251016/4e54bd967090f9db540e8df28500ef0e.png"></image> |
|||
</view> |
|||
|
|||
<view v-else> |
|||
<view class="prize-item" v-for="(item,i) in prizeList" :key="i"> |
|||
<image class="prize-img" :src="item.head_img"></image> |
|||
<view class="flex-1 w-1rpx" style="height: 100%;"> |
|||
<view class="title">{{item.prize_name}}</view> |
|||
<view >抽奖时间:{{item.create_time}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view class="kefu" v-if="prizeList.length>0" @click="$refs.kfpopup.open()"> |
|||
<image src="https://static.ticket.sz-trip.com/uploads/20251016/f871b8870ffffcc5c6b02714caee8e11.png"></image> |
|||
<text style="padding-left: 5rpx;">联系客服</text> |
|||
</view> |
|||
|
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<uni-popup ref="kfpopup" type="bottom" :safe-area="false"> |
|||
<view class="kf-popup-content"> |
|||
<!-- 标题栏 --> |
|||
<view class="popup-header"> |
|||
<text class="title">联系我们</text> |
|||
<text class="close-icon" @click="$refs.kfpopup.close()">×</text> |
|||
</view> |
|||
|
|||
<!-- 内容区域 --> |
|||
<view class="popup-body"> |
|||
<!-- 电话咨询 --> |
|||
<view class="contact-item" @click="clickPhone('15370135755')"> |
|||
<view class="info"> |
|||
<text class="label">电话咨询</text> |
|||
<text class="detail">15370135755</text> |
|||
</view> |
|||
<view class="arrow"> |
|||
<image style="width: 100%;height: 100%;" mode="aspectFill" src="https://static.ticket.sz-trip.com/uploads/20250911/a58432ad47582207f9f03ac31a6e2d98.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 在线客服 --> |
|||
<button class="concat-btn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"> |
|||
<view class="contact-item"> |
|||
|
|||
<view class="info"> |
|||
<text class="label">在线客服</text> |
|||
<text class="detail">工作时间: 9:00-18:00</text> |
|||
</view> |
|||
<view class="arrow"> |
|||
<image style="width: 100%;height: 100%;" mode="aspectFill" src="https://static.ticket.sz-trip.com/uploads/20250911/11761e83954ecb845a8c9ea26e95c6e0.png"></image> |
|||
</view> |
|||
</view> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
|
|||
</uni-popup> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
headImg: '', |
|||
finish:false, |
|||
list: [], |
|||
typeList: [], |
|||
showGoTop: false, |
|||
popShow: false, |
|||
ruleImg: "", |
|||
|
|||
prizeId: 9, // 9 |
|||
prizeName: '', |
|||
rotateAngle: 0, |
|||
prizeList: [], |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
}, |
|||
onReady() { |
|||
this.getHeadImg(2403) |
|||
this.productInit() |
|||
}, |
|||
methods: { |
|||
productInit () { |
|||
let _this = this |
|||
let typeList = [650,651,647,649,653,654,656] |
|||
// 获取所有农产品子类目 pid_type 20 |
|||
Promise.all( |
|||
typeList.map(x=>_this.Post({pid:x},'/api/product/tag_list')) |
|||
).then(typeRes => { |
|||
typeRes.forEach(type => { |
|||
if (type.data.length>0) { |
|||
typeList = typeList.concat(type.data.map(x=>x.id)) |
|||
} |
|||
}) |
|||
this.typeList = typeList |
|||
this.getGoods() |
|||
}) |
|||
}, |
|||
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 |
|||
}) |
|||
}); |
|||
// 抽奖规则 |
|||
this.Post({id:2404},'/api/multimedia/detail').then(res => { |
|||
this.ruleImg = res.data.head_img |
|||
}); |
|||
}, |
|||
showRule (type) { |
|||
this.$refs.popup.open() |
|||
}, |
|||
|
|||
openMyPrize () { |
|||
this.Post({sweepstakes_id: this.prizeId, limit: 999,show_none:1},'/api/sweepstakes/sweepstakes_act/prizeLog') |
|||
.then(res => { |
|||
if(res.data) { |
|||
this.prizeList = res.data.data || [] |
|||
this.$refs.prizePop.open() |
|||
console.log(this.prizeList) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 抽奖 |
|||
getPrize: function() { |
|||
// 逆时针对应 |
|||
let prize = [ |
|||
{name: '五等奖',level: 5,deg:0}, |
|||
{name: '三等奖',level: 3,deg:60}, |
|||
{name: '二等奖',level: 2,deg:120}, |
|||
{name: '五等奖',level: 5,deg:180}, |
|||
{name: '一等奖',level: 1,deg:240}, |
|||
{name: '四等奖',level: 4,deg:300}, |
|||
] |
|||
|
|||
|
|||
this.Post({sweepstakes_id: this.prizeId},'/api/sweepstakes/sweepstakes_act/luckyDrawv2') |
|||
.then(res => { |
|||
if(res.data) { |
|||
let prizeData = prize.find(v=>v.level == res.data.level) |
|||
if (prizeData) { |
|||
this.rotateAngle = (720 + prizeData.deg)+ (this.rotateAngle-this.rotateAngle%720); |
|||
} |
|||
|
|||
setTimeout(() => { |
|||
uni.showModal({ |
|||
content:'恭喜您已中奖,具体请查看奖品。' |
|||
}) |
|||
},3000) |
|||
} |
|||
}) |
|||
|
|||
|
|||
}, |
|||
|
|||
// 产品列表 |
|||
getGoods() { |
|||
this.Post({ |
|||
tag_id: this.typeList.join(","), |
|||
offset: this.list.length, |
|||
limit: 6, |
|||
order:"desc", |
|||
sort:"sales_number", |
|||
},'/api/product/get_product_by_tag').then(res => { |
|||
if (res.data.length < 6) { |
|||
this.finish = true |
|||
} |
|||
this.list = this.list.concat(res.data.list||[]) |
|||
}) |
|||
}, |
|||
|
|||
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; |
|||
background-image: url("https://static.ticket.sz-trip.com/uploads/20251015/895dc12ffe394be03f4831ddcd280308.png"); |
|||
background-size: 100% auto; |
|||
background-repeat: repeat-y; /* 竖向重复 */ |
|||
background-position: bottom; /* 从底部开始显示 */ |
|||
position: relative; |
|||
} |
|||
|
|||
.topImg { |
|||
width: 100%; |
|||
} |
|||
|
|||
.rule-box{ |
|||
position: absolute; |
|||
right: 20rpx; |
|||
top: 410rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 150rpx; |
|||
width: 67rpx; |
|||
z-index: 20; |
|||
.rule-btn{ |
|||
width: 66.67rpx; |
|||
height: 66.67rpx; |
|||
background-size: 100% 100%; |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
padding: 0rpx 0rpx; |
|||
text-align: center; |
|||
background: linear-gradient( 180deg, #FF8B8D 0%, #FF544E 100%); |
|||
border-radius: 7rpx 7rpx 7rpx 7rpx; |
|||
border: 2rpx solid #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
line-height: 1.2; |
|||
} |
|||
} |
|||
|
|||
.my-share{ |
|||
position: absolute; |
|||
width: 360rpx; |
|||
left: 0; |
|||
top: 0; |
|||
opacity: 0; |
|||
} |
|||
.zhuanpan{ |
|||
width: 654rpx; |
|||
height: 654rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 0 auto 28rpx; |
|||
position: relative; |
|||
z-index: 2; |
|||
.zhuanpanImg{ |
|||
width: 654rpx; |
|||
height: 654rpx; |
|||
background-image: url('https://static.ticket.sz-trip.com/uploads/20251015/60b23c0c2faead4eb415592d88e6519c.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
transform-origin: center center; /* 设置旋转中心为元素中心 */ |
|||
transition-duration: 2s; |
|||
} |
|||
.choujiang{ |
|||
width: 240rpx; |
|||
height: 240rpx; |
|||
position: relative; |
|||
z-index: 99; |
|||
} |
|||
} |
|||
|
|||
|
|||
.main-container{ |
|||
width: 100%; |
|||
margin-top: -950rpx; |
|||
padding: 0 34rpx 60rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title-image{ |
|||
width: 316.67rpx; |
|||
height: 68.67rpx; |
|||
margin: 0 auto; |
|||
display: block; |
|||
} |
|||
|
|||
.view-more{ |
|||
height: 24rpx; |
|||
margin: 31rpx auto 0; |
|||
position: relative; |
|||
z-index: 2; |
|||
display: block; |
|||
} |
|||
|
|||
.product-container{ |
|||
padding:30rpx 0 0; |
|||
} |
|||
|
|||
.column-product{ |
|||
width: 333rpx; |
|||
height: 484rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(186,144,108,0.1); |
|||
border-radius: 27rpx 27rpx 27rpx 27rpx; |
|||
padding: 6rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 19rpx; |
|||
.img{ |
|||
width: 320rpx; |
|||
height: 320rpx; |
|||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
} |
|||
.title{ |
|||
font-weight: 400; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
.content{ |
|||
width: 100%; |
|||
flex: 1; |
|||
height: 150rpx; |
|||
justify-content: space-between; |
|||
padding: 0rpx 10rpx 10rpx; |
|||
} |
|||
.price{ |
|||
font-weight: 500; |
|||
font-size: 34rpx; |
|||
color: #FF0000; |
|||
&::before{ |
|||
content: "¥"; |
|||
font-size: 24rpx; |
|||
} |
|||
// &::after{ |
|||
// content: "起"; |
|||
// font-size: 24rpx; |
|||
// } |
|||
} |
|||
.old-price{ |
|||
font-weight: 400; |
|||
font-size: 25rpx; |
|||
color: #B1B1B1; |
|||
text-decoration-line: line-through; |
|||
margin-left: 10rpx; |
|||
&::before{ |
|||
content: "¥"; |
|||
} |
|||
} |
|||
.btn{ |
|||
width: 53.33rpx; |
|||
height: 53.33rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
.bottom-img{ |
|||
width: 123.95rpx; |
|||
height: 103.06rpx; |
|||
margin: 74rpx auto 0; |
|||
display: block; |
|||
} |
|||
.back-img{ |
|||
position: fixed; |
|||
width: 66rpx; |
|||
height: 66rpx; |
|||
bottom: 66rpx; |
|||
right: 26rpx; |
|||
} |
|||
|
|||
.pop-image{ |
|||
width: 636rpx; |
|||
height: 1262.11rpx; |
|||
background: url("https://static.ticket.sz-trip.com/uploads/20251015/dbe71e60d36a04a908651045d67f9582.png"); |
|||
background-size: 100% 100%; |
|||
padding: 223rpx 42rpx 30rpx; |
|||
.content{ |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
image{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.my-prize{ |
|||
border-radius: 61rpx 61rpx 0rpx 0rpx; |
|||
width: 100%; |
|||
min-height: 500rpx; |
|||
max-height: 1000rpx; |
|||
background: white; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.title-container{ |
|||
background: linear-gradient( 182deg, #FEF9DC 0%, #FFFFFF 100%); |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-shrink: 0; |
|||
image{ |
|||
width: 170rpx; |
|||
height: 111.33rpx; |
|||
} |
|||
.close{ |
|||
position: absolute; |
|||
right: 40rpx; |
|||
top: 34rpx; |
|||
width: 26.67rpx; |
|||
height: 26.67rpx; |
|||
} |
|||
} |
|||
|
|||
.prize-content{ |
|||
flex: 1; |
|||
height: 20rpx; |
|||
padding: 40rpx 31rpx 20rpx; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
.no-data{ |
|||
width: 394rpx; |
|||
height: 255.33rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.prize-item{ |
|||
display: flex; |
|||
align-items: center; |
|||
height: 167rpx; |
|||
background: #FFFCF1; |
|||
border-radius: 28rpx 28rpx 28rpx 28rpx; |
|||
border: 1rpx solid #FFEC8B; |
|||
width: 100%; |
|||
margin-bottom: 13rpx; |
|||
padding: 27rpx 29rpx; |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #747474; |
|||
.prize-img{ |
|||
width: 112rpx; |
|||
height: 112rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
.flex-1{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
padding-left: 20rpx; |
|||
} |
|||
.title{ |
|||
font-weight: 500; |
|||
font-size: 30rpx; |
|||
color: #333333; |
|||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.kefu{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
color: #333333; |
|||
padding-bottom: 30rpx; |
|||
image{ |
|||
width: 30.67rpx; |
|||
height: 30.67rpx; |
|||
} |
|||
} |
|||
} |
|||
/* 弹窗内容容器 */ |
|||
.kf-popup-content { |
|||
width: 100%; |
|||
background-color: #fff; |
|||
border-top-left-radius: 16px; |
|||
border-top-right-radius: 16px; |
|||
overflow: hidden; |
|||
.popup-header { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 16px; |
|||
position: relative; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
} |
|||
.title { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.close-icon { |
|||
position: absolute; |
|||
right: 16px; |
|||
font-size: 20px; |
|||
color: #999; |
|||
} |
|||
|
|||
/* 弹窗内容区 */ |
|||
.popup-body { |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
/* 联系项样式 */ |
|||
.contact-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 16px 20px; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
} |
|||
|
|||
|
|||
|
|||
.info { |
|||
flex: 1; |
|||
} |
|||
|
|||
.label { |
|||
font-size: 16px; |
|||
display: block; |
|||
margin-bottom: 4px; |
|||
} |
|||
|
|||
.detail { |
|||
font-size: 14px; |
|||
color: #666; |
|||
} |
|||
|
|||
.arrow { |
|||
width: 20px; |
|||
height: 20px; |
|||
color: #ccc; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
.concat-btn{ |
|||
/* 清除默认背景和边框 */ |
|||
background: none; |
|||
border: none; |
|||
padding: 0; |
|||
margin: 0; |
|||
|
|||
/* 清除默认圆角 */ |
|||
border-radius: 0; |
|||
|
|||
/* 清除默认文字样式 */ |
|||
color: inherit; |
|||
font-size: inherit; |
|||
line-height: inherit; |
|||
|
|||
/* 清除点击效果(灰色背景) */ |
|||
-webkit-tap-highlight-color: transparent; |
|||
text-align: left; |
|||
} |
|||
|
|||
|
|||
</style> |
@ -0,0 +1,119 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="popupBox"> |
|||
<view class="name">请输入卡密兑换</view> |
|||
<input type="text" v-model="password"> |
|||
<view class="btns" @click="submitPassword"> |
|||
立即兑换 |
|||
</view> |
|||
</view> |
|||
|
|||
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20251014/e935f1d616f992dc05c702ba763cece2.png"></image> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
password:'' |
|||
} |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
methods: { |
|||
submitPassword() { |
|||
console.log('提交的兑换码',this.password); |
|||
let that = this |
|||
that.password = that.password.trim() |
|||
if (that.password== '') { |
|||
uni.showToast({ |
|||
title: '请输入优惠券领取卡号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
that.Post({ |
|||
key: that.password |
|||
}, "/api/coupon/get_coupon").then((res) => { |
|||
console.log(res.code); |
|||
if (res.code == 200) { |
|||
uni.showToast({ |
|||
title: '兑换成功', |
|||
icon: 'none' |
|||
}) |
|||
} else{ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}); |
|||
that.password = '' |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
background: #EDF5DC; |
|||
position: relative; |
|||
padding-top: 94rpx; |
|||
} |
|||
.bottom-img{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
width: 591.33rpx; |
|||
height: 535.27rpx; |
|||
z-index: 1; |
|||
} |
|||
|
|||
|
|||
.popupBox { |
|||
height: 862rpx; |
|||
width: 708.67rpx; |
|||
background-image: url("https://static.ticket.sz-trip.com/uploads/20251014/24a49d4a15b1b9a1270253d7a68cfd9e.png"); |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
z-index: 2; |
|||
padding-top: 174rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.popupBox .name { |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #6A8A2D; |
|||
text-align: center; |
|||
margin-bottom: 59rpx; |
|||
} |
|||
|
|||
.popupBox input { |
|||
width: 433rpx; |
|||
height: 80rpx; |
|||
background: #F7F7F7; |
|||
border-radius: 13rpx; |
|||
border: 1px solid #CCCCCC; |
|||
margin: 0 auto; |
|||
text-align: center; |
|||
} |
|||
|
|||
.popupBox .btns { |
|||
width: 400rpx; |
|||
height: 80rpx; |
|||
background: #6A8A2D; |
|||
border-radius: 40rpx; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 80rpx; |
|||
margin: 264rpx auto 0; |
|||
} |
|||
|
|||
|
|||
</style> |
Loading…
Reference in new issue