|
@@ -42,7 +42,7 @@
|
|
|
:outerHeight="canvasConfig.outerHeight"
|
|
|
:colors="canvasConfig.colors"
|
|
|
:ringCount="8"
|
|
|
- :duration="1"
|
|
|
+ :duration="5"
|
|
|
:prizeList="prizeList"
|
|
|
:prizeIndex="prizeIndex"
|
|
|
@reset-index="prizeIndex = -1"
|
|
@@ -101,15 +101,66 @@
|
|
|
<view class="content">
|
|
|
<image src="../../static/popupBack.png"></image>
|
|
|
<view class="textCon">
|
|
|
- <text class="ts">中奖了!</text> </br>
|
|
|
- <text class="reward">恭喜您获得{{luckyDay.name}}</text> </br>
|
|
|
- <image src="../../static/doubleBt.png" class="doubleBt" mode="widthFix" @click="lookVideo"></image> </br>
|
|
|
+ <text class="ts">恭喜您获得</text> </br>
|
|
|
+ <text class="reward ts">{{luckyDay.name}}</text> </br>
|
|
|
+ <image src="../../static/doubleBt.png" class="doubleBt" mode="widthFix" :style="{transform: `scale(${scale})`}" @click="lookVideo"></image> </br>
|
|
|
<text class="bt" @click="receiveGold(false)">不了,单倍领取</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<image src="../../static/close.png" class="close" mode="widthFix" @click="closeHandle"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 弹窗VIP -->
|
|
|
+ <view class="popupVIP popup" v-if="popupVIPShow">
|
|
|
+ <view class="popupContent" style="width: 524rpx;">
|
|
|
+ <view class="content">
|
|
|
+ <image src="../../static/vipBack.png"></image>
|
|
|
+ <view class="textCon" style="display: flex; align-items: flex-end;">
|
|
|
+ <view class="againLuckDrawBt btVip" @click="againLuckDraw('vip');startAni(2)" :style="{transform: `scale(${scale})`}">再次抽奖</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image src="../../static/close.png" class="close" mode="widthFix" @click="popupVIPShow = false;startAni(2)"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 弹窗12 -->
|
|
|
+ <view class="popup12 popup" v-if="popup12Show">
|
|
|
+ <view class="popupContent" style="width: 702rpx;">
|
|
|
+ <view class="content">
|
|
|
+ <image src="../../static/12Back.png" style="height: 722rpx;"></image>
|
|
|
+ <view class="textCon" style="display: flex; align-items: flex-end;">
|
|
|
+ <view class="againLuckDrawBt" @click="againLuckDraw('12'); startAni(3)" :style="{transform: `scale(${scale})`, marginBottom: 0}">再次抽奖</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image src="../../static/close.png" class="close" mode="widthFix" @click="popup12Show = false; startAni(3)"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 弹窗金币 -->
|
|
|
+ <view class="popup12 popup" v-if="popupGoldShow">
|
|
|
+ <view class="popupContent" style="width: 636rpx;">
|
|
|
+ <view class="content">
|
|
|
+ <image src="../../static/goldBack.png" style="height: 790rpx;"></image>
|
|
|
+ <view class="textCon" style="display: flex; align-items: center; flex-direction: column; justify-content: flex-end;">
|
|
|
+ <text class="goldText">恭喜您获得</text> </br>
|
|
|
+ <text class="goldText" style="margin-bottom: 48rpx;">{{luckyDay.name}}</text>
|
|
|
+ <view class="againLuckDrawBt btGold" @click="againLuckDraw('gold'); startGold(false)" :style="{transform: `translateX(12rpx) scale(${scale})`}">再次抽奖</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image src="../../static/close.png" class="close" mode="widthFix" @click="popupGoldShow = false; startGold(false)"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 碎片飞行 -->
|
|
|
+ <view class="fragmentAni" :animation="animationData">
|
|
|
+ <image :src="prizeType === 3 ? '../../static/turntable_iPhone12.png' : '../../static/turntable_VIP.png'" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <!-- 金币飞行组 -->
|
|
|
+ <view class="fragmentGold" :animation="animationDatas[index]" v-for="(item, index) in goldData" :key="index" :style="{top: item.top, left: item.left}">
|
|
|
+ <image src="../../static/turntable_gold.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <!-- 弹窗提示 -->
|
|
|
+ <view class="receiveTs" :animation="animationDataTs">
|
|
|
+ {{tsTitle}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -119,6 +170,7 @@
|
|
|
import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
|
|
|
import { config, getHome, getOpenId, getBanner, setDrawGain, getPond, setReceive } from '@/api/api.js'
|
|
|
import { clearCacheFile } from '@/uni_modules/almost-lottery/utils/almost-utils.js'
|
|
|
+
|
|
|
export default {
|
|
|
components: {
|
|
|
AlmostLottery
|
|
@@ -154,29 +206,21 @@
|
|
|
// 是否正在抽奖中,避免重复触发
|
|
|
prizeing: false,
|
|
|
|
|
|
- // 以下为中奖概率有关数据
|
|
|
- // 是否由前端控制概率,默认不开启,强烈建议由后端控制
|
|
|
- onFrontend: false,
|
|
|
- // 权重随机数的最大值
|
|
|
- weightTotal: 0,
|
|
|
- // 权重数组
|
|
|
- weightArr: [],
|
|
|
-
|
|
|
// 以下为业务需求有关示例数据
|
|
|
- // 金币余额
|
|
|
- goldCoin: 50,
|
|
|
// 当日免费抽奖次数余额
|
|
|
freeNum: 10,
|
|
|
- // 每次消耗的金币数
|
|
|
- goldNum: 20,
|
|
|
- // 每天免费抽奖次数
|
|
|
- freeNumDay: 2,
|
|
|
|
|
|
// 以下是
|
|
|
// 活动规则开关控制
|
|
|
activityRules: false,
|
|
|
// 弹窗控制
|
|
|
popupShow: false,
|
|
|
+ // 抽到VIP碎片弹窗控制
|
|
|
+ popupVIPShow: false,
|
|
|
+ // 抽到12碎片弹窗控制
|
|
|
+ popup12Show: false,
|
|
|
+ // 抽到金币弹窗控制
|
|
|
+ popupGoldShow: false,
|
|
|
|
|
|
openId: '',
|
|
|
mpData: {},
|
|
@@ -186,6 +230,26 @@
|
|
|
luckyDay: {}, // 中奖信息
|
|
|
doubleKey: "", // 领取key
|
|
|
clearTime: "", // 碎片有效期
|
|
|
+ scale: 1,
|
|
|
+ animation: null, // 动画实例
|
|
|
+ animationData: null, // 动画
|
|
|
+ animationDatas: [null, null, null, null, null, null, null, null], // 动画组
|
|
|
+ animationDataTs: null,
|
|
|
+ prizeType: 3, // 奖品类型
|
|
|
+ durationMath: 20, // 防止动画每次都一样
|
|
|
+ durationMath1: 20,
|
|
|
+ durationMath2: 20,
|
|
|
+ goldData: [
|
|
|
+ {top: '404rpx', left: '300rpx'},
|
|
|
+ {top: '434rpx', left: '240rpx'},
|
|
|
+ {top: '430rpx', left: '398rpx'},
|
|
|
+ {top: '448rpx', left: '424rpx'},
|
|
|
+ {top: '380rpx', left: '412rpx'},
|
|
|
+ {top: '332rpx', left: '332rpx'},
|
|
|
+ {top: '356rpx', left: '240rpx'},
|
|
|
+ {top: '474rpx', left: '294rpx'}
|
|
|
+ ],
|
|
|
+ tsTitle: '', //提示信息
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -197,9 +261,11 @@
|
|
|
// 请求奖品数据
|
|
|
this.mpData = options
|
|
|
this.getData()
|
|
|
+ this.animation = uni.createAnimation({ timingFunction: 'ease' })
|
|
|
},
|
|
|
onUnload() {
|
|
|
uni.hideLoading()
|
|
|
+ timer && clearInterval(timer)
|
|
|
},
|
|
|
onShareAppMessage() {},
|
|
|
filters: {
|
|
@@ -223,7 +289,102 @@
|
|
|
await this.getList()
|
|
|
uni.stopPullDownRefresh();
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ // 监听获奖序号的变动
|
|
|
+ popupShow(newVal, oldVal) {
|
|
|
+ this.openAniBt(newVal)
|
|
|
+ },
|
|
|
+ popupVIPShow(newVal) {
|
|
|
+ this.openAniBt(newVal)
|
|
|
+ },
|
|
|
+ popup12Show(newVal) {
|
|
|
+ this.openAniBt(newVal)
|
|
|
+ },
|
|
|
+ popupGoldShow(newVal) {
|
|
|
+ this.openAniBt(newVal)
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ // 是否开始呼吸开关动画
|
|
|
+ openAniBt(val) {
|
|
|
+ if(val) {
|
|
|
+ timer = setInterval(() => {
|
|
|
+ if(this.scale === 1) {
|
|
|
+ this.scale = 0.92
|
|
|
+ }else {
|
|
|
+ this.scale = 1
|
|
|
+ }
|
|
|
+ }, 500)
|
|
|
+ } else {
|
|
|
+ timer && clearInterval(timer)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 开始动画 12 vip 碎片
|
|
|
+ startAni(prizeType = 3) {
|
|
|
+ if(prizeType === 3 || prizeType === 2) {
|
|
|
+ this.prizeType = prizeType
|
|
|
+ this.startTsAni(false)
|
|
|
+ let index = this.prizeCountDtoList.findIndex(item => item.prizeType === prizeType)
|
|
|
+ let left = index !== -1 ? index === 0 ? '150rpx' : '500rpx' : '500rpx'
|
|
|
+ this.animation.opacity(1).step({ duration: this.durationMath })
|
|
|
+ if( this.durationMath >= 50 ) {
|
|
|
+ this.durationMath = 20
|
|
|
+ } else {
|
|
|
+ this.durationMath = this.durationMath + 1
|
|
|
+ }
|
|
|
+ this.animation.top('1300rpx').left(left).step({ duration: 1200, delay: 100 })
|
|
|
+ this.animation.opacity(0).top('453rpx').left('331rpx').step({ duration: 0 })
|
|
|
+ this.animationData = this.animation.export()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ startGold(watchVideos) {
|
|
|
+ this.prizeType = 1
|
|
|
+ this.startTsAni(watchVideos)
|
|
|
+ if( this.durationMath1 >= 50 ) {
|
|
|
+ this.durationMath1 = 20
|
|
|
+ } else {
|
|
|
+ this.durationMath1 = this.durationMath1 + 1
|
|
|
+ }
|
|
|
+ this.animationDatas = this.goldData.map(item => {
|
|
|
+ let animation = uni.createAnimation({ timingFunction: 'ease' })
|
|
|
+ animation.opacity(1).step({ duration: this.durationMath1 })
|
|
|
+ animation.top('76rpx').left('60rpx').step({ duration: Math.floor(Math.random() * 101) + 1000, delay: 100 }) //
|
|
|
+ animation.opacity(0).top(item.top).left(item.left).step({ duration: 0 })
|
|
|
+ return animation.export()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ startTsAni(watchVideos) {
|
|
|
+ if(this.prizeType === 1) {
|
|
|
+ if (watchVideos) {
|
|
|
+ this.tsTitle = '+' + (this.luckyDay.prizeCount * 2) + this.luckyDay.prizeName
|
|
|
+ } else {
|
|
|
+ this.tsTitle = '+' + this.luckyDay.name
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.tsTitle = this.luckyDay.prizeName + '+1'
|
|
|
+ }
|
|
|
+ if( this.durationMath2 >= 50 ) {
|
|
|
+ this.durationMath2 = 20
|
|
|
+ } else {
|
|
|
+ this.durationMath2 = this.durationMath2 + 1
|
|
|
+ }
|
|
|
+ let animation = uni.createAnimation({ timingFunction: 'ease' })
|
|
|
+ animation.opacity(1).step({ duration: this.durationMath2 })
|
|
|
+ animation.top('250rpx').step({ duration: 1000, delay: 100 })
|
|
|
+ animation.opacity(0).top('450rpx').step({ duration: 0 })
|
|
|
+ this.animationDataTs = animation.export()
|
|
|
+ },
|
|
|
+ // 再次抽奖
|
|
|
+ againLuckDraw(type) {
|
|
|
+ if (type === 'vip') {
|
|
|
+ this.popupVIPShow = false
|
|
|
+ } else if (type === '12') {
|
|
|
+ this.popup12Show = false
|
|
|
+ } else {
|
|
|
+ this.popupGoldShow = false
|
|
|
+ }
|
|
|
+ this.handleDrawStart()
|
|
|
+ },
|
|
|
// 看视频双倍
|
|
|
lookVideo() {
|
|
|
this.receiveGold(true)
|
|
@@ -232,6 +393,7 @@
|
|
|
receiveGold(watchVideos = false) {
|
|
|
if(this.doubleKey) {
|
|
|
setReceive({appId: config.appid, doubleKey: this.doubleKey, openId: this.openId, watchVideos, ...this.mpData }).then(res => {
|
|
|
+ this.startGold(watchVideos)
|
|
|
this.popupShow = false
|
|
|
this.doubleKey = ""
|
|
|
this.getList()
|
|
@@ -346,7 +508,10 @@
|
|
|
name: item.prizeCount + item.prizeName,
|
|
|
stock: 100,
|
|
|
weight: 10,
|
|
|
- prizeImage
|
|
|
+ prizeImage,
|
|
|
+ prizeType: item.prizeType,
|
|
|
+ prizeCount: item.prizeCount,
|
|
|
+ prizeName: item.prizeName,
|
|
|
}
|
|
|
} else {
|
|
|
prizeImage = '/static/turntable_iPhone12.png'
|
|
@@ -358,7 +523,10 @@
|
|
|
name: item.prizeName,
|
|
|
stock: 100,
|
|
|
weight: 10,
|
|
|
- prizeImage
|
|
|
+ prizeImage,
|
|
|
+ prizeType: item.prizeType,
|
|
|
+ prizeCount: item.prizeCount,
|
|
|
+ prizeName: item.prizeName,
|
|
|
}
|
|
|
}
|
|
|
})
|
|
@@ -420,13 +588,13 @@
|
|
|
// 旋转结束后,开始处理拿到结果后的逻辑
|
|
|
this.prizeing = false
|
|
|
let prizeName = this.prizeList[this.prizeIndex].name
|
|
|
-
|
|
|
+ let { prizeType, prizeCount } = this.prizeList[this.prizeIndex]
|
|
|
+ this.luckyDay = this.prizeList[this.prizeIndex]
|
|
|
let tipContent = ''
|
|
|
if (prizeName === '谢谢参与') {
|
|
|
tipContent = '很遗憾,没有中奖,请再接再厉!'
|
|
|
} else if (prizeName.indexOf('碎片') === -1 && this.freeNum >= 8) {
|
|
|
this.popupShow = true
|
|
|
- this.luckyDay = this.prizeList[this.prizeIndex]
|
|
|
return
|
|
|
} else {
|
|
|
// 如果奖品设有库存
|
|
@@ -434,13 +602,15 @@
|
|
|
let prizeStock = this.prizeList[this.prizeIndex].stock
|
|
|
tipContent = prizeStock ? `恭喜您,获得 ${prizeName}` : `很抱歉,您来晚了,当前奖品 ${prizeName} 已无库存`
|
|
|
} else {
|
|
|
- tipContent = `恭喜您,获得 ${prizeName} !`
|
|
|
+ if (prizeType === 1) {
|
|
|
+ this.popupGoldShow = true
|
|
|
+ } else if (prizeType === 2) {
|
|
|
+ this.popupVIPShow = true
|
|
|
+ } else if (prizeType === 3) {
|
|
|
+ this.popup12Show = true
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- uni.showModal({
|
|
|
- content: tipContent,
|
|
|
- showCancel: false
|
|
|
- })
|
|
|
this.getList()
|
|
|
},
|
|
|
// 抽奖转盘绘制完成
|
|
@@ -448,7 +618,7 @@
|
|
|
console.log('抽奖转盘绘制完成', res)
|
|
|
uni.showToast({
|
|
|
title: res.msg,
|
|
|
- duration: 3000,
|
|
|
+ duration: 800,
|
|
|
mask: true,
|
|
|
icon: 'none'
|
|
|
})
|
|
@@ -469,6 +639,7 @@
|
|
|
}
|
|
|
|
|
|
.luckyDrawContent {
|
|
|
+ overflow-x: hidden;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
@@ -781,9 +952,9 @@
|
|
|
|
|
|
.reward {
|
|
|
height: 60rpx;
|
|
|
- background: #FFD9A2;
|
|
|
- border-radius: 31rpx;
|
|
|
- font-size: 32rpx;
|
|
|
+ // background: #FFD9A2;
|
|
|
+ // border-radius: 31rpx;
|
|
|
+ font-size: 50rpx;
|
|
|
font-weight: 400;
|
|
|
display: inline-block;
|
|
|
padding: 0 32rpx;
|
|
@@ -792,10 +963,20 @@
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
+ .goldText {
|
|
|
+ font-size: 64rpx;
|
|
|
+ font-family: FZZZHONGJW--GB1-0, FZZZHONGJW--GB1;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 25rpx;
|
|
|
+ transform: translateX(12rpx);
|
|
|
+ }
|
|
|
+
|
|
|
.doubleBt {
|
|
|
- width: 424rpx;
|
|
|
- height: 84rpx;
|
|
|
- margin-top: 114rpx;
|
|
|
+ width: 456rpx;
|
|
|
+ height: 104rpx;
|
|
|
+ margin-top: 90rpx;
|
|
|
+ transition: all linear .5s;
|
|
|
}
|
|
|
|
|
|
.bt {
|
|
@@ -804,6 +985,37 @@
|
|
|
font-weight: 400;
|
|
|
color: #FCE8CD;
|
|
|
}
|
|
|
+
|
|
|
+ .againLuckDrawBt {
|
|
|
+ width: 424rpx;
|
|
|
+ height: 86rpx;
|
|
|
+ background: linear-gradient(180deg, #FDDEA5 0%, #FFC981 75%, #FFC983 100%);
|
|
|
+ border-radius: 43rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #854007;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 86rpx;
|
|
|
+ margin: 0 auto 40rpx;
|
|
|
+ transition: all linear .5s;
|
|
|
+ }
|
|
|
+ .btGold {
|
|
|
+ width: 448rpx;
|
|
|
+ height: 104rpx;
|
|
|
+ border-radius: 52rpx;
|
|
|
+ line-height: 104rpx;
|
|
|
+ font-size: 40rpx;
|
|
|
+ box-shadow: 0px 2rpx 8rpx 4rpx rgba(183, 2, 2, 0.37);
|
|
|
+ background: linear-gradient(180deg, #FFFCBE 0%, #F87527 100%);
|
|
|
+ }
|
|
|
+ .btVip {
|
|
|
+ width: 426rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background: linear-gradient(180deg, #F6E5CA 0%, #EDC388 100%);
|
|
|
+ box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(162, 58, 20, 0.77);
|
|
|
+ border-radius: 44rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
&>.close {
|
|
@@ -813,5 +1025,35 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // 碎片飞行初始样式 // 金币飞行
|
|
|
+ .fragmentAni, .fragmentGold {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100;
|
|
|
+ top: 453rpx;
|
|
|
+ left: 330rpx;
|
|
|
+ opacity: 0;
|
|
|
+ &>image {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fragmentGold {
|
|
|
+ // opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .receiveTs {
|
|
|
+ position: absolute;
|
|
|
+ border: 2rpx solid rgb(242, 69, 69);
|
|
|
+ top: 450rpx;
|
|
|
+ z-index: 100;
|
|
|
+ color: #FFFFFF;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ background-color: rgba(131, 37, 37, 0.6);
|
|
|
+ border-radius: 5rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|