|
|
|
|
@ -6,16 +6,19 @@
|
|
|
|
|
|
|
|
|
|
<view class="content">
|
|
|
|
|
<view class="title">
|
|
|
|
|
<u-image style="display: flex;justify-content: center;" mode="heightFix" width="auto" height="220rpx" :src="require('@/static/title.png')"></u-image>
|
|
|
|
|
<u-image style="display: flex;justify-content: center;" mode="heightFix" width="auto" height="240rpx"
|
|
|
|
|
:src="require('@/static/title.png')"></u-image>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="notice">
|
|
|
|
|
<u-notice-bar :speed="80" color="#fff" bg-color="transparent" :volume-icon="false" :more-icon="false" :list="notices"></u-notice-bar>
|
|
|
|
|
<u-notice-bar :speed="80" color="#fff" bg-color="transparent" :volume-icon="false" :more-icon="false"
|
|
|
|
|
:list="notices"></u-notice-bar>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="raffle">
|
|
|
|
|
<view class="raffle-bkg">
|
|
|
|
|
<u-image style="display: flex;justify-content: center;" mode="scaleToFill" width="680rpx" height="924rpx" :src="require('@/static/raffle-phone.png')"></u-image>
|
|
|
|
|
<u-image style="display: flex;justify-content: center;" mode="scaleToFill" width="680rpx"
|
|
|
|
|
height="924rpx" :src="require('@/static/raffle-phone.png')"></u-image>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="raffle-box">
|
|
|
|
|
@ -28,13 +31,16 @@
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="raffle-box__turntable">
|
|
|
|
|
<view v-for="(item,index) in prizeList" :key="index" class="raffle-box__turntable--item" :style="{ 'grid-area': 'shop'+(index+1) }">
|
|
|
|
|
<view v-for="(item,index) in prizeList" :key="index" class="raffle-box__turntable--item"
|
|
|
|
|
:style="{ 'grid-area': 'shop'+(index+1) }">
|
|
|
|
|
<view class="item-shop">
|
|
|
|
|
<view class="item-shop__box" :style="{ 'background': index === flag ? '#eb5036' : '' }">
|
|
|
|
|
<view class="item-shop__box--img">
|
|
|
|
|
<u-image bg-color="transparent" mode="heightFix" height="84rpx" :src="item.image_file ? item.image_file.url : ''"></u-image>
|
|
|
|
|
<u-image bg-color="transparent" mode="heightFix" height="84rpx"
|
|
|
|
|
:src="item.image_file ? item.image_file.url : ''"></u-image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item-shop__box--text" :style="{ 'color': index === flag ? '#fff' : '' }">{{ item.name }}</view>
|
|
|
|
|
<view class="item-shop__box--text"
|
|
|
|
|
:style="{ 'color': index === flag ? '#fff' : '' }">{{ item.name }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
@ -52,8 +58,10 @@
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="bottom">
|
|
|
|
|
<u-image mode="widthFix" width="114rpx" :src="require('@/static/activity-rule.png')" @click="popoverType = 1,$refs['popover'].show()"></u-image>
|
|
|
|
|
<u-image style="margin-left: 66rpx;" mode="widthFix" width="114rpx" :src="require('@/static/me-center.png')" @click="toMe"></u-image>
|
|
|
|
|
<u-image mode="widthFix" width="114rpx" :src="require('@/static/activity-rule.png')"
|
|
|
|
|
@click="popoverType = 1,$refs['popover'].show()"></u-image>
|
|
|
|
|
<u-image style="margin-left: 66rpx;" mode="widthFix" width="114rpx"
|
|
|
|
|
:src="require('@/static/me-center.png')" @click="toMe"></u-image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
@ -71,25 +79,29 @@
|
|
|
|
|
二、 活动规则
|
|
|
|
|
</view>
|
|
|
|
|
<view class="box-text__content">
|
|
|
|
|
|
|
|
|
|
1. 活动期间,每个号码每日可有三次抽奖机会<br />
|
|
|
|
|
2. 分享活动页面可增加一次机会。关注江苏有线苏州分公司公众号或视频号可增加一次机会。下载“视界观”App可增加一次机会。<br />
|
|
|
|
|
3. 每个手机号每天最多6次抽奖机会。<br />
|
|
|
|
|
4. 话费红包将在三个工作日内自动充值到参与抽奖的192手机号账户中。实物奖品会在活动结束后3个工作日内,根据您参与活动的中奖号码与您联系并安排派奖,联系未果视为主动放弃奖品。
|
|
|
|
|
4. 话费红包将在3-5个工作日内自动充值到参与抽奖的192手机号账户中。实物奖品会在活动结束后3个工作日内,根据您参与活动的中奖号码与您联系并安排派奖,联系未果视为主动放弃奖品。<br />
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view v-if="popoverType === 2">
|
|
|
|
|
<view class="box-text__title">谢谢参与</view>
|
|
|
|
|
<u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx','margin-top': '56rpx' }" @click="$refs['popover'].hidden(),draw()">再来一次</u-button>
|
|
|
|
|
<u-button shape="circle" :ripple="true" :hair-line="false"
|
|
|
|
|
:custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx','margin-top': '56rpx' }"
|
|
|
|
|
@click="$refs['popover'].hidden(),draw()">再来一次</u-button>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view v-if="popoverType === 3">
|
|
|
|
|
<view class="box-text__title">恭喜您获得{{ result.name }}</view>
|
|
|
|
|
<view class="box-text__subtitle">请至个人中心查看</view>
|
|
|
|
|
<view class="box-text__prize">
|
|
|
|
|
<u-image style="display: flex;justify-content: center;" mode="heightFix" :height="300" :src="result.image_file ? result.image_file.url : ''"></u-image>
|
|
|
|
|
<u-image style="display: flex;justify-content: center;" mode="heightFix" :height="300"
|
|
|
|
|
:src="result.image_file ? result.image_file.url : ''"></u-image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="box-text__tip">
|
|
|
|
|
<view class="box-text__tip" v-show="result.name === '小米手机一部'">
|
|
|
|
|
型号请以实物为准
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
@ -97,7 +109,9 @@
|
|
|
|
|
<view v-if="popoverType === 4">
|
|
|
|
|
<view class="box-text__title">抱歉</view>
|
|
|
|
|
<view class="box-text__subtitle">没有机会了</view>
|
|
|
|
|
<u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx','margin-top': '56rpx' }" @click="$refs['popover'].hidden(),popoverType = 5,$refs['popover'].show()">去做任务</u-button>
|
|
|
|
|
<u-button shape="circle" :ripple="true" :hair-line="false"
|
|
|
|
|
:custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx','margin-top': '56rpx' }"
|
|
|
|
|
@click="$refs['popover'].hidden(),popoverType = 5,$refs['popover'].show()">去做任务</u-button>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view v-if="popoverType === 5">
|
|
|
|
|
@ -134,8 +148,9 @@
|
|
|
|
|
|
|
|
|
|
<view slot="content-bottom" class="content-bottom" v-if="popoverType === 3">
|
|
|
|
|
<view class="content-bottom__title">奖品领取:</view>
|
|
|
|
|
<view class="content-bottom__text">话费红包将在三个工作日内自动充值到参与抽奖的192手机号账户中。
|
|
|
|
|
<br>实物奖品会在活动结束后3个工作日内,根据您参与活动的中奖号码与您联系并安排派奖,联系未果视为主动放弃奖品。</view>
|
|
|
|
|
<view class="content-bottom__text">话费红包将在3-5个工作日内自动充值到参与抽奖的192手机号账户中。
|
|
|
|
|
<br>实物奖品会在活动结束后3个工作日内,根据您参与活动的中奖号码与您联系并安排派奖,联系未果视为主动放弃奖品。
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</popover>
|
|
|
|
|
|
|
|
|
|
@ -272,7 +287,8 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
this.prizeList = arr
|
|
|
|
|
this.usrInfo = res.user
|
|
|
|
|
this.notices = res.draw_log_day?.filter(i => i.draw_prize?.name !== '谢谢参与')?.map(i => `恭喜${i.mobile.slice(0,3)}****${i.mobile.slice(-4)}获得${i.draw_prize ? i.draw_prize.name : ''}`)
|
|
|
|
|
this.notices = res.draw_log_day?.filter(i => i.draw_prize?.name !== '谢谢参与')?.map(i =>
|
|
|
|
|
`恭喜${i.mobile.slice(0,3)}****${i.mobile.slice(-4)}获得${i.draw_prize ? i.draw_prize.name : ''}`)
|
|
|
|
|
},
|
|
|
|
|
async draw() {
|
|
|
|
|
try {
|
|
|
|
|
@ -315,11 +331,16 @@ export default {
|
|
|
|
|
computed: {
|
|
|
|
|
getIcon() {
|
|
|
|
|
switch (this.popoverType) {
|
|
|
|
|
case 1: return 'smile';
|
|
|
|
|
case 2: return 'sad';
|
|
|
|
|
case 3: return 'laugh';
|
|
|
|
|
case 4: return 'sad';
|
|
|
|
|
case 5: return 'smile';
|
|
|
|
|
case 1:
|
|
|
|
|
return 'smile';
|
|
|
|
|
case 2:
|
|
|
|
|
return 'sad';
|
|
|
|
|
case 3:
|
|
|
|
|
return 'laugh';
|
|
|
|
|
case 4:
|
|
|
|
|
return 'sad';
|
|
|
|
|
case 5:
|
|
|
|
|
return 'smile';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -358,6 +379,7 @@ export default {
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
|
|
|
|
@ -384,11 +406,13 @@ export default {
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 2.4vh auto 0 auto;
|
|
|
|
|
|
|
|
|
|
&-bkg {
|
|
|
|
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
@ -405,6 +429,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
padding-top: 100rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__times {
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 46rpx;
|
|
|
|
|
@ -417,6 +442,7 @@ export default {
|
|
|
|
|
color: #FCE534;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__turntable {
|
|
|
|
|
height: 560rpx;
|
|
|
|
|
display: grid;
|
|
|
|
|
@ -436,6 +462,7 @@ export default {
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-shop {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
@ -463,6 +490,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& .center-btn {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
@ -481,6 +509,7 @@ export default {
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
width: 80rpx;
|
|
|
|
|
content: "开始抽奖";
|
|
|
|
|
@ -498,6 +527,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__tip {
|
|
|
|
|
zoom: .9;
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
@ -547,11 +577,13 @@ export default {
|
|
|
|
|
|
|
|
|
|
padding: 20rpx 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__content {
|
|
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__tip {
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
@ -569,6 +601,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
padding-bottom: 40rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__item-5 {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
@ -586,6 +619,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content-bottom {
|
|
|
|
|
|
|
|
|
|
padding: 50rpx 60rpx;
|
|
|
|
|
@ -596,6 +630,7 @@ export default {
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-shadow: 0 1rpx 0 #FCF4CA;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__text {
|
|
|
|
|
color: #e5c592;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
@ -633,6 +668,7 @@ export default {
|
|
|
|
|
height: 400rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qrcode-pop_cover {
|
|
|
|
|
background: rgba(0, 0, 0, 0.8);
|
|
|
|
|
position: fixed;
|
|
|
|
|
@ -673,24 +709,28 @@ export default {
|
|
|
|
|
.fade-in {
|
|
|
|
|
animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes fade-in {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fade-out {
|
|
|
|
|
animation: fade-out .8s ease-out both;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes fade-out {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|