You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
197 lines
4.1 KiB
197 lines
4.1 KiB
<template>
|
|
<view class="LuckyWheel">
|
|
<LuckyWheel ref="myLucky" v-if="showLuckyWheel" width="640rpx" height="640rpx" :blocks="blocks" :prizes="prizes"
|
|
:buttons="buttons" :default-config="defaultConfig" @start="startCallBack" @end="endCallBack">
|
|
</LuckyWheel>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import LuckyWheel from '../uni-luck-draw/lucky-wheel.vue'; // 大转盘
|
|
export default {
|
|
components: {
|
|
LuckyWheel
|
|
},
|
|
props: {
|
|
prizes1: {
|
|
default: () => []
|
|
},
|
|
drawId: {
|
|
default: undefined
|
|
}
|
|
},
|
|
watch: {
|
|
drawId: {
|
|
immediate: true,
|
|
handler: function(newV) {
|
|
this.draw_id = newV
|
|
}
|
|
}
|
|
},
|
|
name: 'luckyWheel',
|
|
data() {
|
|
return {
|
|
draw_id: '',
|
|
showLuckyWheel: false,
|
|
xie: '谢谢参与',
|
|
defaultConfig: {
|
|
accelerationTime: 1000,
|
|
decelerationTime: 2000,
|
|
speed: 30
|
|
},
|
|
blocks: [{
|
|
padding: '22px',
|
|
imgs: [{
|
|
src: this.$util.img('upload/weapp/user/lottery_disk.png'),
|
|
width: '640rpx',
|
|
height: '640rpx',
|
|
top: '2rpx',
|
|
rotate: false
|
|
}]
|
|
}],
|
|
prizes: [],
|
|
buttons: [{
|
|
radius: '50px'
|
|
},
|
|
{
|
|
radius: '45px'
|
|
},
|
|
{
|
|
imgs: [{
|
|
src: this.$util.img('upload/weapp/user/lottery_disk_center.png'),
|
|
width: '212rpx',
|
|
height: '238rpx',
|
|
top: '-130rpx'
|
|
}]
|
|
}
|
|
]
|
|
};
|
|
},
|
|
|
|
created() {
|
|
// 获取抽奖活动奖品列表
|
|
this.getDrawGoodsList();
|
|
},
|
|
methods: {
|
|
// 点击抽奖按钮触发回调
|
|
startCallBack() {
|
|
//剩余可抽奖次数
|
|
this.$api.sendRequest({
|
|
url: '/api/draw/checkdrawnum',
|
|
data: {
|
|
draw_id: Number(this.draw_id)
|
|
},
|
|
success: ({ data }) => {
|
|
if (data.cam_draw_num > 0) {
|
|
this.doDraw();
|
|
// 先开始旋转
|
|
|
|
} else {
|
|
this.$util.showToast({
|
|
title: '抽奖次数不足'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//抽奖
|
|
doDraw() {
|
|
this.$api.sendRequest({
|
|
url: '/api/draw/doDraw',
|
|
data: {
|
|
draw_id: Number(this.draw_id)
|
|
},
|
|
success: res => {
|
|
setTimeout(() => {
|
|
this.$refs.myLucky.stop(this.prizes.findIndex(v => v.item.id == res.data
|
|
.id));
|
|
}, 3000)
|
|
this.$refs.myLucky.play();
|
|
},
|
|
fail: res => {
|
|
this.$refs.myLucky.init();
|
|
}
|
|
});
|
|
},
|
|
// 抽奖结束触发回调
|
|
endCallBack(prize) {
|
|
this.$emit('endCallBack', prize.item);
|
|
},
|
|
// 获取抽奖活动奖品列表
|
|
getDrawGoodsList() {
|
|
this.$api.sendRequest({
|
|
url: '/api/draw/getDrawGoodsList',
|
|
data: {
|
|
draw_id: Number(this.draw_id)
|
|
},
|
|
success: ({ data }) => {
|
|
console.log(data, "this.prizesthis.prizes");
|
|
// if (data.length < 8) {
|
|
// this.prizes.push({
|
|
// fonts: [{
|
|
// text: '谢谢参与',
|
|
// fontColor: '#aaa',
|
|
// fontSize: '16px',
|
|
// fontWeight: 600,
|
|
// lineClamp: 1,
|
|
// top: '16rpx'
|
|
// }],
|
|
// id: 0,
|
|
// type: 0,
|
|
// background: '#f4f4f4',
|
|
// imgs: [{
|
|
// src: this.$util.img('upload/weapp/user/thanks.png'),
|
|
// width: '90rpx',
|
|
// height: '90rpx',
|
|
// top: '62rpx',
|
|
// title: '谢谢参与'
|
|
// }],
|
|
// item: {
|
|
// image: 'upload/weapp/user/thanks.png',
|
|
// id: 0,
|
|
// type: 0,
|
|
// text: '谢谢参与',
|
|
// }
|
|
// });
|
|
// }
|
|
data.map((v, i) => {
|
|
this.prizes.push({
|
|
background: i % 2 == 0 ? '#ffc692' : '#ffedde',
|
|
fonts: [{
|
|
text: v.title,
|
|
fontColor: '#EB1617',
|
|
fontSize: '16px',
|
|
fontWeight: 600,
|
|
lineClamp: 1,
|
|
top: '16rpx'
|
|
}],
|
|
imgs: [{
|
|
src: this.$util.img(v.image),
|
|
width: '90rpx',
|
|
height: '90rpx',
|
|
top: '62rpx',
|
|
title: v.title
|
|
}],
|
|
item: v
|
|
});
|
|
});
|
|
this.showLuckyWheel = true;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<script module="lucky" lang="renderjs">
|
|
export default {
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss"></style>
|