You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
650 lines
16 KiB
650 lines
16 KiB
<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>
|