<template>
<view class="backgb">
<!-- 滚动视图 -->
<view class="page" :style="'background-image:url(' + $image.getImage(imgList[0]) + ')'">
<image :src="$image.getImage(imgList[1])" mode="widthFix" class="imgjl" @tap="winningrecord"></image>
<!-- 转盘背景 -->
<image :src="$image.getImage(imgList[2])" mode="widthFix" class="returnBg"
:style="'transform: rotate('+ 0*(360/4) +'deg);'" :animation="animationData"></image>
<!-- 转盘指针 -->
<image :src="$image.getImage(imgList[5])" mode="widthFix" class="returnz"></image>
<!-- 抽奖按钮 -->
<image @click="goHandle" :src="$image.getImage(imgList[4])" mode="widthFix" class="returnstar"></image>
<view class="myglod">我的金币:{{ memberInfo.gold }}</view>
<view class="bottom_rap" :style="'background-image: url(' + $image.getImage(imgList[3]) + ');'">
<view class="txtblock">
<view class="txtdian">·</view>
<view class="txt">活动所有奖品真实有效;金币奖励即时到账,实物奖品 1-7工作日内核对发出;</view>
</view>
<view class="txtblock">
<view class="txtdian">·</view>
<view class="txt">用户每次需消耗金币进行抽奖,有几率获得实物等大奖;</view>
</view>
<view class="txtblock">
<view class="txtdian">·</view>
<view class="txt">
活动期间,如存在违规操作,将自愿接受平台任何处理,消耗金币不予返还;所有参与者将视为已了解本活动规则,自愿承担所有责任及风险;</view>
</view>
</view>
<!-- 滚动消息 -->
<view class=""
style="position: absolute;top: 270rpx;left: 195rpx;width: 60%;display: flex;align-items: center;">
<u-notice-bar mode="vertical" :list="text1" font-size="24" color="#FFE0A5" bg-color="none"
:volume-icon="false" style="width: 100%;" padding="18rpx 0rpx"></u-notice-bar>
</view>
</view>
<!-- 金币 -->
<uni-popup type="center" :maskDeepColor="true" ref="popupgold" :maskClick="false">
<view :style="'background-image: url(' + $image.getImage(imgList[9]) + ');'" class="popbox2">
<view class="gold">{{ drawData.prizeDesc }}</view>
<image class="getbtn" @tap="popuclose" :src="$image.getImage(imgList[13])" mode="widthFix"></image>
</view>
</uni-popup>
<!-- 实体 -->
<uni-popup type="center" :maskDeepColor="true" ref="popupwu" :maskClick="false">
<view :style="'background-image: url(' + $image.getImage(imgList[drawData.prizeName=='小米手环'?11:10]) + ');'"
class="popbox2 popbox3">
<image class="returnS" :src="$image.getImage(imgList[16])" mode="widthFix"></image>
<image class="getbtn" @tap="receive" :src="$image.getImage(imgList[12])" mode="widthFix"></image>
<image class="closebtn" @tap="receiveclose" :src="$image.getImage(imgList[15])" mode="widthFix"></image>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
initialstate: false,
residencetime: "",
classify: [],
classifyIndex: 0,
prizeCode: null,
list: [],
//自定义排序规则
sortRule: [1, 2, 3, 4, -1, 5, 6, 7, 8],
rollList: [],
roll: [0, 1, 2, 5, 8, 7, 6, 3],
rollIndex: -1,
progress: 0,
rollStatus: true,
timer: null,
speed: 300,
memberInfo: {
gold: 0
},
drawData: {},
text1: [
'恭喜用户爱***M抽中了小米耳机',
'恭喜用户究***士抽中了500金币!',
'恭喜用户究***士抽中了500金币!',
'恭喜用户究***士抽中了500金币!',
],
imgList: [],
shiwugift: false, // 是否是实物
animation: "",
animationData: "",
awardNumber: 5,
isStart: false,
rotated: 0,
showpopupBool: false,
};
},
onReady() {
this.$titleText.getTitleText()
},
async onLoad() {
this.getBackgroundImage()
await this.getMemberInfo();
await this.details();
},
onShow() {
this.queryOne()
//定义动画
var animation = uni.createAnimation({
duration: 4000,
timingFunction: 'ease',
})
this.animation = animation
if (uni.getStorageSync('memberInfo')) {
this.$nextTick(async function() {
let state = await this.$server.addStart();
if (state.state) {
this.initialstate = true;
this.residencetime = state.residencetime
} else {
this.initialstate = false;
}
});
}
},
onUnload() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
if (this.initialstate) {
this.$server.addFinish(this.residencetime)
}
},
onHide() {
if (this.initialstate) {
this.$server.addFinish(this.residencetime)
}
},
methods: {
//动画
rotate: function(deg) {
setTimeout(function() {
//还原动画
this.animationData = ''
this.animation = ''
var animation = uni.createAnimation({
duration: 4500,
timingFunction: 'ease',
})
this.animation = animation
this.giftEven()
}.bind(this), 4500)
// 抽奖停止
this.animation.rotate(deg).step()
// 还原抽奖状态
// this.animation.rotate(1).step({
// duration: 0
// })
this.animationData = this.animation.export()
},
// 礼物弹框显示
giftEven() {
let this_ = this
setTimeout(function() {
this_.rollStatus = true;
if (!this_.shiwugift)
this_.$refs.popupgold.open()
else {
this_.$refs.popupwu.open()
}
}, 500)
},
// 获取背景图
async getBackgroundImage() {
const res = await this.$server.pR('/pic/getPicConfig', {
configCode: '100197'
})
if (res.data.code == 200) {
res.data.data.forEach(item => {
this.imgList.push(item.pic)
})
}
},
//获取用户信息
async getMemberInfo() {
await this.$server.getMemberInfo().then(res => {
this.memberInfo = res.data.data;
});
},
async details() {
//请求抽奖的商品列表
await this.$server.gR('/lucky/draw/query').then(res => {
if (res.data.code == 200) {
this.rollList = res.data.data;
//对数据进行排序
this.rollList.sort((a, b) => {
return this.sortRule.indexOf(a.sort) - this.sortRule.indexOf(b.sort);
});
}
});
},
// 是否有待领取的礼物
async queryOne() {
//请求抽奖的商品列表
await this.$server.pR('/lucky/draw/queryOne').then(res => {
if (res.data.code == 200) {
if (res.data.data != null) {
this.showpopupBool = true
this.drawData = res.data.data;
this.shiwugift = true
this.giftEven()
}
}
});
},
historyHandle() {
this.$server.navigateTo("pagesE/ShoppingMall/exchangerecord/exchangerecord")
},
navHandle(index) {
this.classifyIndex = index;
this.details();
},
btn(item) {
this.$server.navigateTo("pagesE/ShoppingMall/exchange/exchange",
`id=${item.id}&prizeCode=${this.prizeCode}&availableNum=${item.availableNum}`)
},
winningrecord() {
this.$server.navigateTo("pagesE/ShoppingMall/exchangerecord/winningrecord")
},
// 点击抽奖
goHandle() {
this.shiwugift = false
this.rotate(3600 + 145)
// return
//判断抽奖状态
if (this.rollStatus) {
//开始抽奖
this.rollStatus = false;
//请求抽奖接口
this.$server
.gR('/lucky/draw/execute', {
memberId: this.$storage.getMemberId()
})
.then(res => {
if (res.data.code == 200) {
// 获取抽奖结果
this.drawData = res.data.data;
this.showpopupBool = false
// 指针转动的角度
// 12 25 98 120 190 240 279 325
if (this.drawData.sort == 2) {
this.shiwugift = true
this.rotate(3600 + 15)
} else if (this.drawData.sort == 4) {
this.shiwugift = false
this.rotate(3600 + 310)
} else if (this.drawData.sort == 6) {
this.shiwugift = false
this.rotate(3600 + 280)
} else if (this.drawData.sort == 7) {
this.shiwugift = true
this.rotate(3600 + 240)
} else if (this.drawData.sort == 1) {
this.shiwugift = false
this.rotate(3600 + 190)
} else if (this.drawData.sort == 8) {
this.shiwugift = false
this.rotate(3600 + 145)
} else if (this.drawData.sort == 3) {
this.shiwugift = false
this.rotate(3600 + 80)
} else if (this.drawData.sort == 5) {
this.shiwugift = false
this.rotate(3600 + 40)
}
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
});
}
//更新金币信息
this.getMemberInfo();
})
}
},
popuclose() {
// 还原抽奖状态
this.animation.rotate(1).step({
duration: 0
})
this.animationData = this.animation.export()
this.$refs.popupgold.close()
},
receiveclose() {
// 还原抽奖状态
this.animation.rotate(1).step({
duration: 0
})
this.animationData = this.animation.export()
this.$refs.popupwu.close()
},
receive() {
// 还原抽奖状态
this.animation.rotate(1).step({
duration: 0
})
this.animationData = this.animation.export()
this.$refs.popupwu.close()
var item = this.drawData;
if (item.prizeType == 2) {
this.close();
uni.showToast({
title: '领取成功'
});
} else if (this.showpopupBool) {
this.$server.navigateTo("pagesE/ShoppingMall/Orderfilling/Orderfillingtwo",
`productId=${item.configureId}&prizePictype=${item.prizePic}&prizeName=${item.prizeName}&prizeDesc=${item.prizeDesc}&remarks=${item.luckyDrawLogId}`
)
} else {
this.$server.navigateTo("pagesE/ShoppingMall/Orderfilling/Orderfillingtwo",
`productId=${item.id}&prizePictype=${item.prizePic}&prizeName=${item.prizeName}&prizeDesc=${item.prizeDesc}&remarks=${item.luckyDrawLogId}&gold=${item.gold}`
)
`id=${this.list.id}&prizeCode=${this.prizeCode}&type=${this.type}&gold=${this.list.gold}`
}
},
again() {
this.close();
this.rollIndex = -1;
setTimeout(() => {
this.goHandle();
}, 500);
},
close() {
this.$refs.popup.close();
},
toTask() {
this.$server.switchTab("pagesE/task/task/task")
}
}
};
</script>
<style lang="scss" scoped>
.backgb {
background-color: #D51539;
min-height: 100vh;
}
.page {
background-size: 100%;
box-sizing: border-box;
background-repeat: no-repeat;
height: 1830rpx;
position: relative;
.shopping {}
}
.material {
width: 691rpx;
height: 746rpx;
position: relative;
.close {
width: 66rpx;
height: 66rpx;
position: absolute;
left: 0;
right: 0;
bottom: -112rpx;
margin: auto;
}
.receive {
width: 450rpx;
height: 110rpx;
border-radius: 110rpx;
position: absolute;
left: 120rpx;
bottom: 60rpx;
}
.receiveBox {
width: 450rpx;
height: 260rpx;
position: absolute;
top: 310rpx;
left: 120rpx;
.imgBox {
width: 450rpx;
height: 260rpx;
image {
width: 450rpx;
height: 260rpx;
}
}
}
}
.gold {
position: relative;
width: 420rpx;
height: 384rpx;
.gold-text {
width: 100%;
position: absolute;
top: 132rpx;
text-align: center;
text {
font-size: 40rpx;
font-weight: bold;
color: #900000;
}
}
}
.bottom_rap {
position: relative;
top: 1370rpx;
height: 415rpx;
width: 650rpx;
background-size: 100%;
padding: 80rpx 30rpx 10rpx;
background-repeat: no-repeat;
border-radius: 16rpx;
box-sizing: border-box;
margin: 0 auto;
.txtblock {
color: #AD061E;
display: flex;
margin-bottom: 20rpx;
font-size: 40rpx;
}
.txtdian {
font-size: 45rpx;
line-height: 40rpx;
}
.txt {
font-size: 26rpx;
color: #AD061E;
}
}
.returnBg {
position: absolute;
top: 395rpx;
width: 650rpx;
height: 600rpx;
left: 50rpx;
transform: translate(-50%);
}
.returnstar {
position: absolute;
top: 1153rpx;
width: 270rpx;
height: 80rpx;
left: 50%;
transform: translate(-50%);
}
.myglod {
position: absolute;
top: 1270rpx;
left: 50%;
color: #fff;
transform: translate(-50%);
}
.returnz {
position: absolute;
top: 600rpx;
width: 180rpx;
height: 90rpx;
left: 286rpx;
transform-origin: 50% 57% !important;
}
.imgjl {
width: 109rpx;
height: 107rpx;
position: absolute;
top: 360rpx;
right: 8rpx;
z-index: 1;
}
.popbox2 {
width: 400rpx;
height: 530rpx;
background-size: 100%;
background-repeat: no-repeat;
position: relative;
.iconclose {
width: 48rpx;
height: 40rpx;
position: absolute;
top: -60rpx;
right: -50rpx;
}
.gold {
position: absolute;
width: 75rpx;
height: 50rpx;
top: -5rpx;
font-size: 36rpx;
left: 250rpx;
color: #FFE400;
text-align: center;
}
.returnS {
position: absolute;
width: 380rpx;
height: 250rpx;
top: 100rpx;
left: 160rpx;
z-index: -1;
animation: rotation 2.3s linear infinite;
}
.getbtn {
position: absolute;
width: 250rpx;
height: 60rpx;
top: 485rpx;
left: 50%;
transform: translate(-50%);
}
.closebtn {
position: absolute;
width: 45rpx;
height: 40rpx;
top: -50rpx;
right: 90rpx;
}
}
.popbox3 {
width: 680rpx;
}
@keyframes rotation {
0% {
-webkit-transform: rotate(0deg) scale(1, 1);
}
50% {
-webkit-transform: rotate(180deg) scale(1.2, 1.2);
}
100% {
-webkit-transform: rotate(360deg) scale(1, 1);
}
}
</style>