|
|
<template>
|
|
|
<view>
|
|
|
<view class="bkg">
|
|
|
<u-image width="100%" height="100vh" :src="require('@/static/home-bkg.jpg')"></u-image>
|
|
|
</view>
|
|
|
|
|
|
<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>
|
|
|
</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>
|
|
|
</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>
|
|
|
</view>
|
|
|
|
|
|
<view class="raffle-box">
|
|
|
<view class="raffle-box__hello">
|
|
|
尊敬的192用户，您好
|
|
|
</view>
|
|
|
|
|
|
<view class="raffle-box__times">
|
|
|
剩余抽奖次数：<span>{{ usrInfo.score || 0 }}次</span>
|
|
|
</view>
|
|
|
|
|
|
<view class="raffle-box__turntable">
|
|
|
<view v-for="(item,index) in prizeList" 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>
|
|
|
</view>
|
|
|
<view class="item-shop__box--text" :style="{ 'color': index === flag ? '#fff' : '' }">{{ item.name }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="raffle-box__turntable--item" :style="{ 'grid-area': 'center' }">
|
|
|
<view class="center-btn" @click="$u.throttle(draw)">
|
|
|
<view></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="raffle-box__tip">
|
|
|
仅限中国广电（苏州地区用户）手机号参与活动
|
|
|
</view>
|
|
|
</view>
|
|
|
</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>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<popover :icon="getIcon" height="1128rpx" ref="popover">
|
|
|
<view slot="box-content">
|
|
|
<view v-if="popoverType === 1">
|
|
|
<view class="box-text__title">活动规则</view>
|
|
|
<view class="box-text__top">
|
|
|
一、 参与方式及参与对象
|
|
|
</view>
|
|
|
<view class="box-text__content">
|
|
|
本次活动奖品数量有限，仅限中国广电（苏州地区用户）手机号参与活动，输入其他手机号均无效。
|
|
|
</view>
|
|
|
<view class="box-text__top">
|
|
|
二、 活动规则
|
|
|
</view>
|
|
|
<view class="box-text__content">
|
|
|
1. 活动期间，每个号码每日可有三次抽奖机会 2. 分享活动页面可增加一次机会。关注江苏有线苏州分公司公众号或视频号可增加一次机会。下载“视界观”App可增加一次机会。 3. 每个手机号每天最多6次抽奖机会。 4. 实物奖品会在活动结束后3个工作日内，根据您参与活动的中奖号码与您联系并安排派奖，联系未果视为主动放弃奖品。
|
|
|
</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>
|
|
|
</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>
|
|
|
</view>
|
|
|
<view class="box-text__tip">
|
|
|
型号请以实物为准
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<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>
|
|
|
</view>
|
|
|
|
|
|
<view v-if="popoverType === 5">
|
|
|
<view class="box-text__title-5">做任务增加抽奖机会</view>
|
|
|
<view class="box-text__item-5" v-for="(item,index) in
|
|
|
[
|
|
|
{
|
|
|
v: '将活动分享给小伙伴',
|
|
|
b: '去分享'
|
|
|
},
|
|
|
{
|
|
|
v: '关注江苏有线苏州分公司公众号或视频号',
|
|
|
b: '去关注'
|
|
|
},
|
|
|
{
|
|
|
v: '下载“视界观”App',
|
|
|
b: '去下载'
|
|
|
}
|
|
|
]">
|
|
|
<view>{{ item.v }}</view>
|
|
|
<u-button :custom-style="{
|
|
|
background: '#FFD553',
|
|
|
color: '#fff',
|
|
|
fontSize: '28rpx',
|
|
|
width: '166rpx',
|
|
|
height: '56rpx'
|
|
|
}" shape="circle" :hair-line="false" :ripple="true" @click="index === 0 ? toShare = true : ''">{{ item.b }}</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view slot="content-bottom" class="content-bottom" v-if="popoverType === 3">
|
|
|
<view class="content-bottom__title">奖品领取：</view>
|
|
|
<view class="content-bottom__text">实物奖品会在活动结束后3个工作日内，根据您参与
|
|
|
活动的中奖号码与您联系并安排派奖，联系未果视
|
|
|
为主动放奔奖品。苏州地区用户） 手机息参与活动
|
|
|
礼品兑换成功后，概不退换。到对应地点领取，逾期视为自动放弃。</view>
|
|
|
</view>
|
|
|
</popover>
|
|
|
|
|
|
<transition name="share-pop" enter-active-class="fade-in" leave-to-class="fade-out">
|
|
|
<view class="share_cover" v-show="toShare" @click="toShare = false">
|
|
|
<image src="/static/share.png" class="share_cover_arrow"></image>
|
|
|
<view class="share_cover_word">
|
|
|
请点击右上角将它发送给指定朋友或分享到朋友圈
|
|
|
</view>
|
|
|
</view>
|
|
|
</transition>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import popover from "@/component/popover/index.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
popover
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
toShare: false,
|
|
|
popoverType: 1,//1为规则，2为未中奖，3中奖，4没有机会，5做任务
|
|
|
flag: '',//当前奖品显示
|
|
|
prizeList: [],
|
|
|
usrInfo: {},
|
|
|
notices: [],
|
|
|
result: {},
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
},
|
|
|
methods: {
|
|
|
toMe() {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/me/index'
|
|
|
})
|
|
|
},
|
|
|
|
|
|
easeOut(t) {
|
|
|
return 1 - Math.pow(1 - t, 3);
|
|
|
},
|
|
|
getRandomNumber(min, max) {
|
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
|
},
|
|
|
async fetchRandomNumbers(count) {
|
|
|
for (let i = 0; i < count; i++) {
|
|
|
const t = this.easeOut(i / (count - 1));
|
|
|
const delay = t * 400;
|
|
|
await new Promise((resolve) => setTimeout(resolve, delay));
|
|
|
this.flag = this.getRandomNumber(0, this.prizeList.length - 1);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async getProducts() {
|
|
|
const res = await this.$u.api.getPrize()
|
|
|
let len = res.list.length
|
|
|
let arr = res.list
|
|
|
if(len < 8) {
|
|
|
const diff = 8 - len;
|
|
|
for (let i = 0; i < diff; i++) {
|
|
|
const randomIndex = Math.floor(Math.random() * len);
|
|
|
arr.push(arr[randomIndex]);
|
|
|
}
|
|
|
} else {
|
|
|
arr = arr.slice(0, 8);
|
|
|
}
|
|
|
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 : ''}`)
|
|
|
},
|
|
|
async draw() {
|
|
|
try{
|
|
|
const res = await this.$u.api.draw()
|
|
|
console.log(111,res)
|
|
|
let resPrize = this.prizeList.find(i => i.id === res.id)
|
|
|
this.result = resPrize
|
|
|
await this.fetchRandomNumbers(25)
|
|
|
this.flag = this.prizeList.indexOf(resPrize);
|
|
|
|
|
|
if(resPrize.name === "谢谢参与") {
|
|
|
this.popoverType = 2
|
|
|
this.$refs['popover'].show();
|
|
|
} else {
|
|
|
this.popoverType = 3
|
|
|
this.$refs['popover'].show();
|
|
|
}
|
|
|
|
|
|
await this.getProducts();
|
|
|
}catch (err) {
|
|
|
this.popoverType = 4
|
|
|
this.$refs['popover'].show();
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
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';
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
this.getProducts()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.bkg {
|
|
|
z-index: -1;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
.content {
|
|
|
min-height: 100vh;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
& .title {
|
|
|
|
|
|
margin-top: 5vh;
|
|
|
}
|
|
|
|
|
|
& .notice {
|
|
|
background: rgba(254, 210, 141, 0.6);
|
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(3,46,63,0.45);
|
|
|
border-radius: 28rpx;
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
|
|
|
margin: .2vh 140rpx 0 140rpx;
|
|
|
}
|
|
|
|
|
|
.raffle {
|
|
|
width: 680rpx;
|
|
|
height: 924rpx;
|
|
|
|
|
|
position: relative;
|
|
|
margin: 2.4vh auto 0 auto;
|
|
|
&-bkg {
|
|
|
|
|
|
z-index: 1;
|
|
|
position: absolute;
|
|
|
}
|
|
|
&-box {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
|
|
|
z-index: 2;
|
|
|
position: relative;
|
|
|
top: 0;
|
|
|
|
|
|
&__hello {
|
|
|
text-align: center;
|
|
|
font-size: 38rpx;
|
|
|
font-weight: normal;
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
padding-top: 100rpx;
|
|
|
}
|
|
|
&__times {
|
|
|
text-align: center;
|
|
|
font-size: 46rpx;
|
|
|
font-weight: normal;
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
padding-top: 16rpx;
|
|
|
|
|
|
& > span {
|
|
|
color: #FCE534;
|
|
|
}
|
|
|
}
|
|
|
&__turntable {
|
|
|
height: 560rpx;
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
|
grid-gap: 12rpx;
|
|
|
grid-template-areas:
|
|
|
"shop1 shop2 shop3"
|
|
|
"shop4 center shop5"
|
|
|
"shop6 shop7 shop8";
|
|
|
|
|
|
margin-top: 40rpx;
|
|
|
padding: 0 70rpx;
|
|
|
|
|
|
&--item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.item-shop {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: linear-gradient(to bottom, #fff 88%, #FECDC0);
|
|
|
border-radius: 22rpx;
|
|
|
|
|
|
&__box {
|
|
|
width: calc(100% - 12rpx);
|
|
|
height: calc(100% - 12rpx);
|
|
|
border: 1rpx dashed #C5352B;
|
|
|
border-radius: 22rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
margin: 6rpx;
|
|
|
|
|
|
&--text {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: normal;
|
|
|
color: #E3473C;
|
|
|
|
|
|
padding-top: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
& .center-btn {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
width: 166rpx;
|
|
|
height: 166rpx;
|
|
|
background: linear-gradient(180deg, #FCE2C9, #FED491);
|
|
|
box-shadow: 0px 8rpx 18px 0px rgba(155,22,40,0.35);
|
|
|
border-radius: 50%;
|
|
|
|
|
|
& > view {
|
|
|
width: 142rpx;
|
|
|
height: 142rpx;
|
|
|
background: linear-gradient(180deg, #FCE2C9, #FED491);
|
|
|
box-shadow: 0px 4px 9px 0px rgba(155,22,40,0.35);
|
|
|
border-radius: 50%;
|
|
|
|
|
|
position: relative;
|
|
|
&::after {
|
|
|
width: 80rpx;
|
|
|
content: "开始抽奖";
|
|
|
font-size: 40rpx;
|
|
|
font-weight: normal;
|
|
|
color: #D8372C;
|
|
|
text-shadow: 0 2rpx 0 #FCF4CA;
|
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
&__tip {
|
|
|
zoom: .9;
|
|
|
font-size: 22rpx;
|
|
|
text-align: center;
|
|
|
color: #F9DAC1;
|
|
|
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 46rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
margin-top: 1.85vh;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
.box-text {
|
|
|
&__title {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
&__subtitle {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 400;
|
|
|
color: #545454;
|
|
|
text-align: center;
|
|
|
|
|
|
padding-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
&__top {
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
font-size: 36rpx;
|
|
|
text-align: left;
|
|
|
|
|
|
padding: 20rpx 0;
|
|
|
}
|
|
|
&__content {
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
font-size: 26rpx;
|
|
|
text-align: left;
|
|
|
}
|
|
|
&__tip {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 400;
|
|
|
color: #9a9a9a;
|
|
|
text-align: center;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
&__title-5 {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 400;
|
|
|
color: #9a9a9a;
|
|
|
text-align: left;
|
|
|
|
|
|
padding-bottom: 40rpx;
|
|
|
}
|
|
|
&__item-5 {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
& > view {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 400;
|
|
|
color: #333333;
|
|
|
flex: 1;
|
|
|
|
|
|
padding-right: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.content-bottom {
|
|
|
|
|
|
padding: 50rpx 60rpx;
|
|
|
|
|
|
&__title {
|
|
|
font-size: 36rpx;
|
|
|
color: #e5c592;
|
|
|
font-weight: 500;
|
|
|
text-shadow: 0 1rpx 0 #FCF4CA;
|
|
|
}
|
|
|
&__text {
|
|
|
color: #e5c592;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
text-shadow: 0 1rpx 0 #FCF4CA;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.share_cover {
|
|
|
background: rgba(0, 0, 0, 0.8);
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
height: 100vh;
|
|
|
width: 100vw;
|
|
|
z-index: 100000;
|
|
|
|
|
|
.share_cover_word {
|
|
|
color: #FFFFFF;
|
|
|
font-size: 48rpx;
|
|
|
width: 60%;
|
|
|
margin: 400rpx auto;
|
|
|
text-align: center;
|
|
|
line-height: 40px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.share_cover_arrow {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
width: 300rpx;
|
|
|
height: 400rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
.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>
|
