<template>
<view style="overflow: hidden;">
<navbar-customize :title="titleText" :background="'url(' + $image.getImage(imgList[2]) + ')'">
</navbar-customize>
<view class="backgb" v-if="kaishi">
<view class="pages" :style="'background-image: url(' + $image.getImage(imgList[14]) + ')'">
<view class="pages_shijian">
<view class="pages_2" :style="'background-image: url(' + $image.getImage(imgList[3]) + ')'">
{{duration}}
</view>
</view>
<view class="red_packet" id="red_packet" v-if="totle">
<view class="package" v-for="(item, index) in liParams"
:style="{ left: item.left,width:item.width, height:item.width, animationDuration: item.durTime, webkitAnimationDuration: item.durTime}"
:data-index="index" @webkitAnimationEnd="removeDom" @click="taphong(item)">
<image :src="$image.getImage(imgList[item.packimg])" v-if="item.status==0"
:style="{ width:item.width, height:item.width,transform: item.transforms, webkitTransform: item.transforms}">
</image>
<view v-else-if="item.status == 1" class="txtcolor">+{{item.gold}}</view>
<view v-else></view>
</view>
</view>
</view>
</view>
<!-- 倒计时 -->
<view class="backgb2" v-else>
<view class="pages" :style="'background-image: url(' + $image.getImage(imgList[7]) + ')'">
<!-- 水波纹 -->
<image :src="$image.getImage(imgList[8])" class="main_imgwave"></image>
<view class="main_img" :style="'background-image: url(' + $image.getImage(imgList[8]) + ')'">
{{seconds2 - 1>0?seconds2 - 1:""}}
</view>
<view class="main_img" v-show="seconds2 == 1"
:style="'background-image: url(' + $image.getImage(imgList[19]) + ')'">
</view>
</view>
</view>
<!-- 弹出框 -->
<uni-popup type="center" ref="hongbao" :maskClick="false">
<view :style="'background-image: url(' + $image.getImage(imgList[11]) + ')'" class="tile_1">
<view class="tile_3">
<view class="tile_4">
+{{totlecopy}}金币
</view>
</view>
<image :src="$image.getImage(imgList[13])" style="width:285rpx;height:102rpx;" class="tile_6"
@tap="shipin()" mode="widthFix"></image>
<image :src="$image.getImage(imgList[6])" style="width:285rpx;height:102rpx;" class="tile_7"
@tap="close()" mode="widthFix"></image>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
second: 3, // 倒计时
liParams: [], // 红包数组
timer: null,
duration: 10, // 持续时间
selectedNum: 0, // 选中红包个数，不超过3个
clickNum: 0, // 点击的次数
randomNum: Math.ceil(Math.random() * 6), // 1~6 随机数
couponArr: [],
acquisitionNum: 0, // 获得红包个数
goldarray: [], //可获得金币 从小到达
backpak11: [], //待发射的红包
backnum: 0, //发射红包引
hongbaolength: [],
dataobj: {},
dataobjredEnvelopeRainVideo: "",
titleText: '红包雨',
imgList: [],
kaishi: false,
duration: 10,
seconds2: 4,
timer2: '',
totle: '',
minutes: 0,
totlecopy:0,
}
},
async onLoad() {
await this.getRedEnvelopeRain()
await this.getBackgroundImage()
this.clockCountDown2()
},
destroyed() {
clearInterval(this.timer)
clearInterval(this.timer2)
},
onUnload() {
clearInterval(this.timer)
clearInterval(this.timer2)
if (this.initialstate) {
this.$server.addFinish(this.residencetime)
}
},
methods: {
shipin() {
this.$refs.hongbao.close()
this.$server.redirectTo('pagesH/RW/video',
`time=${this.dataobj.redEnvelopeRainVideo.time}&url=${this.dataobj.redEnvelopeRainVideo.url}&id=${this.dataobj.redEnvelopeRainVideo.id}&drugActivityTaskMemberLogDetailsId=${this.dataobj.redEnvelopeRainVideo.redEnvelopeConfigId}&golds=${this.totlecopy}&moduleCode=${"HBY"}`
)
},
close() {
this.$server.redirectTo("pagesE/enveloperain/index")
},
clockCountDown2() {
setTimeout(() => {
this.timer2 = setInterval(() => {
// 秒针每秒减1
if (this.seconds2 > 0) {
this.seconds2--;
}
// 倒计时结束
if (this.seconds2 == 0) {
clearInterval(this.timer2);
this.timer2 = null;
this.kaishi = true;
this.totle = true;
this.addpack()
this.clockCountDown()
}
}, 1000);
}, 1000);
},
clockCountDown() {
this.timer = setInterval(() => {
// 秒针每秒减1
if (this.duration > 0) {
this.duration--;
}
// 秒针归零时，分针减1
if (this.minutes > 0 && this.duration == 0) {
this.minutes--;
this.duration = 59;
}
// 倒计时结束
if (this.minutes == 0 && this.duration == 0) {
this.timer = null;
this.complete()
}
}, 1000);
},
// 结束
complete() {
clearInterval(this.timer);
this.totle = false
this.$refs.hongbao.open()
},
taphong(item) {
item.status = 1
this.totlecopy += item.gold
setTimeout(() => {
item.status = 2;
}, 300);
},
// 发射红包
addpack() {
this.startRedPacket(this.backpak11[this.backnum])
this.backnum++
if (this.backnum == 11)
this.backnum = 0
},
startRedPacket(assarry) {
let win = 0
// 获取屏幕宽度
uni.getSystemInfo({
success: function(res) {
win = res.windowWidth
}
});
let rotate = (parseInt(Math.random() * 90 - 45)) + "deg" // 旋转角度
let durTime = parseInt(Math.random() * 1.6) + 1.9 + 's' // 时间
let left = parseInt(Math.random() * win + Math.random() * 39)
if (left < 0) {
left = 10
} else if (left > win) {
left = (win + 160)
}
this.liParams.push({
left: left + 'rpx',
width: '170rpx',
transforms: 'rotate(' + rotate + ')',
durTime: durTime,
status: 0, // 0 默认 1 中奖 2 未中奖
packimg: assarry.packimg,
gold: assarry.gold
})
setTimeout(() => {
// 多少时间结束
clearTimeout(this.timer)
return false
}, this.duration * 1000)
let this_ = this
// 红包密度
this.timer = setTimeout(() => {
this_.addpack()
}, 300)
},
removeDom(e) {
this.package1 = true
this.package = false
let target = e.currentTarget
document.querySelector('#red_packet').removeChild(target)
},
getBackgroundImage() {
this.$server.pR('/pic/getPicConfig', {
configCode: '100118'
}).then((res => {
res.data.data.forEach(item => {
this.imgList.push(item.pic)
})
}))
},
getRedEnvelopeRain() {
this.$server.pR('/redEnvelopeRainConfig/getRedEnvelopeRain', {}).then((res) => {
if (res.data.code == 200) {
this.hongbaolength = res.data.data.list;
this.dataobj = res.data.data
this.dataobjredEnvelopeRainVideo = res.data.data.redEnvelopeRainVideo
this.duration = this.dataobj.gameTime
// this.duration = 9
res.data.data.list.map(item => {
this.goldarray.push(item.gold)
})
// 将16个红包绑定指定金币
this.bindgoldArry()
}
})
},
// 将16个红包绑定指定金币 1 4 6
bindgoldArry() {
// 定义红包图片及对应的金币数，然后再打乱插入轨迹
let backpak11 = [{
gold: this.goldarray[0],
packimg: 4
}, {
gold: this.goldarray[0],
packimg: 4
}, {
gold: this.goldarray[0],
packimg: 4
}, {
gold: this.goldarray[0],
packimg: 4
}, {
gold: this.goldarray[0],
packimg: 4
}, {
gold: this.goldarray[0],
packimg: 4
}, {
gold: this.goldarray[1],
packimg: 9
}, {
gold: this.goldarray[1],
packimg: 9
}, {
gold: this.goldarray[1],
packimg: 9
}, {
gold: this.goldarray[1],
packimg: 9
}, {
gold: this.goldarray[2],
packimg: 5
}]
var l = backpak11.length
var index, temp
while (l > 0) {
index = Math.floor(Math.random() * l)
temp = backpak11[l - 1]
backpak11[l - 1] = backpak11[index]
backpak11[index] = temp
l--
}
this.backpak11 = backpak11
},
}
}
</script>
<style lang="less" scoped>
.backgb {
height: calc(100vh - 161rpx);
overflow: hidden;
padding-top: 160rpx;
background-color: #FCE3C4;
background-size: 100% 100%;
.pages {
height: calc(100vh - 180rpx);
overflow: hidden;
background-size: 100%;
box-sizing: border-box;
background-repeat: no-repeat;
.pages_shijian {
padding-top: 22rpx;
padding-left: 18rpx;
display: flex;
align-items: center;
.pages_2 {
background-size: 100%;
background-repeat: no-repeat;
width: 159rpx;
height: 146rpx;
text-align: center;
line-height: 185rpx;
font-size: 38rpx;
color: #FF0000;
}
.pages_1 {
font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;
}
}
}
.icon {
display: inline-block;
width: 82rpx;
height: 82rpx;
background: #6C0A75;
font-size: 60rpx;
line-height: 92rpx;
text-align: center;
position: absolute;
top: 40rpx;
right: 40rpx;
z-index: 4;
background-size: 100% 100%;
color: #eec318;
font-weight: bolder;
i {
font-size: 24rpx;
}
}
}
.backgb2 {
height: calc(100vh - 161rpx);
overflow: hidden;
padding-top: 160rpx;
background-size: 100% 100%;
background-color: #FEF9F0;
.pages {
height: calc(100vh - 180rpx);
background-size: 100%;
overflow: hidden;
box-sizing: border-box;
background-repeat: no-repeat, repeat;
position: relative;
.main_imgwave {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
width: 240rpx;
height: 240rpx;
animation: wave 1s linear infinite;
}
.main_img {
background-size: 100%;
background-repeat: no-repeat, repeat;
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
width: 240rpx;
height: 240rpx;
text-align: center;
line-height: 245rpx;
font-size: 126rpx;
font-weight: bold;
color: #fff;
}
.optionsbtn {
opacity: 0;
}
}
}
.red_packet {
text {
width: 250rpx;
height: 250rpx;
display: block;
}
.package1 {
display: none;
}
.package {
position: fixed;
animation: all 3s linear;
top: -200rpx;
z-index: 3;
animation: aim_move 5s linear 1 forwards;
.txtcolor {
font-size: 56rpx;
font-weight: 800;
color: #F1D03D !important;
}
}
}
@keyframes wave {
0% {
width: 235rpx;
height: 235rpx;
}
50% {
width: 275rpx;
height: 275rpx;
}
100% {
width: 235rpx;
height: 235rpx;
}
}
@keyframes aim_move {
0% {
transform: translateY(0);
}
100% {
transform: translateY(115vh);
}
}
// 弹框
.tile_1 {
background-size: 100%;
background-repeat: no-repeat;
width: 484rpx;
height: 684rpx;
display: flex;
justify-content: center;
padding-top: 349rpx;
box-sizing: border-box;
flex-direction: column;
align-items: center;
.tile_2 {
font-size: 50rpx;
font-weight: bold;
color: #FFFFFF;
}
.tile_3 {
display: flex;
align-items: center;
.tile_4 {
font-size: 40rpx;
// font-weight: bold;
color: #FFD98C;
}
.tile_5 {
margin-left: 21rpx;
}
}
.tile_6 {
margin-top: 25rpx;
}
}
</style>
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
