359 lines
7.3 KiB
Vue
359 lines
7.3 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="box-ly-zp" :style="style_box">
|
||
|
|
<view :animation="animationData" class="cs-ct" :style="style_wh">
|
||
|
|
<view class="cs-line">
|
||
|
|
<view class="cs-litem" v-for="(item,index) in awardsList" :key="index" :style="[{transform:'rotate('+item.lineTurn+')'},{'background-color':themeColor},{left:(width/2) +'rpx'},{height:(height/2) +'rpx'},{'-webkit-transform-origin': '50% ' +(height/2) +'rpx'},{'transform-origin': '50% ' +(height/2) +'rpx'}]"></view>
|
||
|
|
</view>
|
||
|
|
<view class="cs-list">
|
||
|
|
<view class="cs-item" :style="{color: themeColor }" v-for="(iteml,index2) in awardsList" :key="index2">
|
||
|
|
<view class="cs-item-text" :style="[{transform:'rotate('+iteml.turn+')'},{'-webkit-transform-origin': '50% ' +(height/2) +'rpx'},{'transform-origin': '50% ' +(height/2) +'rpx'}]">
|
||
|
|
<text class="txt">{{iteml.name}}</text>
|
||
|
|
<image lazy-load="true" class="cs-item-text-img" :src="iteml.img" @tap="toDetailPage({index: index2})"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view @tap="playReward" class="cs-btn" :style="[{left:((width/2)-40) +'rpx'},{top:((height/2)-40) +'rpx'}]" v-bind:class="btnDisabled">开始 </view>
|
||
|
|
<view class="cs-btn-table" :style="[{left:((width/2)-50) +'rpx'},{top:((height/2)+50) +'rpx'},{color: themeColor }]">剩余{{chance_num}}次</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
list: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
height: {
|
||
|
|
type: Number,
|
||
|
|
default: 700
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: Number,
|
||
|
|
default: 700
|
||
|
|
},
|
||
|
|
themeColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#33CCCC',
|
||
|
|
},
|
||
|
|
chance_num_init :{
|
||
|
|
type: Number,
|
||
|
|
default: 5
|
||
|
|
},
|
||
|
|
//停留位置
|
||
|
|
stay_index :{
|
||
|
|
type: Number,
|
||
|
|
default: 1
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
chance: true,
|
||
|
|
|
||
|
|
awardsList: {},
|
||
|
|
animationData: {},
|
||
|
|
btnDisabled: '',
|
||
|
|
chance_num: 5
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
list(){
|
||
|
|
this.init()
|
||
|
|
},
|
||
|
|
chance_num_init(e){
|
||
|
|
this.chance_num = e ;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.init();
|
||
|
|
this.chance_num = this.chance_num_init ;
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
style_box() {
|
||
|
|
let that = this;
|
||
|
|
var height = parseInt(that.height);
|
||
|
|
var width = parseInt(that.width);
|
||
|
|
var style = '';
|
||
|
|
if (height > 0) {
|
||
|
|
style = `height:${height}rpx;`;
|
||
|
|
}
|
||
|
|
if (width > 0) {
|
||
|
|
style += `width:${width}rpx;`;
|
||
|
|
}
|
||
|
|
style += `border: 8rpx solid ${that.themeColor};`;
|
||
|
|
return style;
|
||
|
|
},
|
||
|
|
style_wh() {
|
||
|
|
let that = this;
|
||
|
|
var height = parseInt(that.height);
|
||
|
|
var width = parseInt(that.width);
|
||
|
|
var style = '';
|
||
|
|
if (height > 0) {
|
||
|
|
style = `height:${height}rpx;`;
|
||
|
|
}
|
||
|
|
if (width > 0) {
|
||
|
|
style += `width:${width}rpx;`;
|
||
|
|
}
|
||
|
|
return style;
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
//详情页
|
||
|
|
toDetailPage(item) {
|
||
|
|
let that = this ;
|
||
|
|
let list = that.awardsList ;
|
||
|
|
let index = item.index ;
|
||
|
|
let data = {
|
||
|
|
curIndex: index,
|
||
|
|
item : list[index] ,
|
||
|
|
list: list
|
||
|
|
};
|
||
|
|
this.$emit('toDetailPage', data);
|
||
|
|
},
|
||
|
|
//画抽奖圆盘
|
||
|
|
init: function() {
|
||
|
|
var awards = this.list;
|
||
|
|
var awardsList = [];
|
||
|
|
var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值
|
||
|
|
|
||
|
|
// 奖项列表
|
||
|
|
for (var i = 0; i < awards.length; i++) {
|
||
|
|
awardsList.push({
|
||
|
|
turn: i * turnNum + 'deg',
|
||
|
|
lineTurn: i * turnNum + turnNum / 2 + 'deg',
|
||
|
|
name: awards[i].name,
|
||
|
|
img : awards[i].img,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
this.btnDisabled = this.chance ? '' : 'disabled';
|
||
|
|
this.awardsList = awardsList;
|
||
|
|
},
|
||
|
|
|
||
|
|
//发起抽奖
|
||
|
|
playReward: function() {
|
||
|
|
let that = this ;
|
||
|
|
if (this.chance_num == 0) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '次数已经用完',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
return
|
||
|
|
}
|
||
|
|
//中奖index
|
||
|
|
var awardsNum = that.list;
|
||
|
|
//var awardIndex = Math.round(Math.random() * (awardsNum.length - 1)); //随机数
|
||
|
|
var awardIndex = that.stay_index ;
|
||
|
|
var runNum = 8; //旋转8周
|
||
|
|
var duration = 4000; //时长
|
||
|
|
|
||
|
|
// 旋转角度
|
||
|
|
this.runDeg = this.runDeg || 0;
|
||
|
|
this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum.length))
|
||
|
|
//创建动画
|
||
|
|
var animationRun = uni.createAnimation({
|
||
|
|
duration: duration,
|
||
|
|
timingFunction: 'ease'
|
||
|
|
})
|
||
|
|
animationRun.rotate(that.runDeg).step();
|
||
|
|
that.animationData = animationRun.export();
|
||
|
|
that.btnDisabled = 'disabled';
|
||
|
|
|
||
|
|
// 中奖提示
|
||
|
|
var isAward = that.list[awardIndex].isAward || false;
|
||
|
|
that.chance_num = that.chance_num - 1;
|
||
|
|
if (isAward) {
|
||
|
|
setTimeout(function() {
|
||
|
|
|
||
|
|
that.btnDisabled = '';
|
||
|
|
|
||
|
|
}.bind(that), duration);
|
||
|
|
} else {
|
||
|
|
setTimeout(function() {
|
||
|
|
uni.showModal({
|
||
|
|
title: '很遗憾',
|
||
|
|
content: '没中 ' + (that.list[awardIndex].name),
|
||
|
|
showCancel: false
|
||
|
|
});
|
||
|
|
that.btnDisabled = '';
|
||
|
|
}.bind(that), duration);
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout(function() {
|
||
|
|
|
||
|
|
let data = {
|
||
|
|
curIndex: awardIndex,
|
||
|
|
item: that.list[awardIndex],
|
||
|
|
list: that.list,
|
||
|
|
isAward : isAward ,
|
||
|
|
};
|
||
|
|
this.$emit('result', data);
|
||
|
|
|
||
|
|
}.bind(that), duration);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.txt{
|
||
|
|
padding-top: 10upx;
|
||
|
|
padding-bottom: 10upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 转盘 */
|
||
|
|
.box-ly-zp {
|
||
|
|
margin: 0 auto;
|
||
|
|
position: relative;
|
||
|
|
border-radius: 50%;
|
||
|
|
box-shadow: 0 10upx 30upx #333, 0 0 10upx #000;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-ct {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
z-index: 1;
|
||
|
|
display: block;
|
||
|
|
border-radius: inherit;
|
||
|
|
background-clip: padding-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-element {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
width: inherit;
|
||
|
|
height: inherit;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-list {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: inherit;
|
||
|
|
height: inherit;
|
||
|
|
z-index: 9999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-item {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
font-weight: bold;
|
||
|
|
text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-item-text {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
padding-top: 20upx;
|
||
|
|
margin: 0 auto;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-item-text text {
|
||
|
|
font-size: 30upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-item-text-img {
|
||
|
|
width: 60upx;
|
||
|
|
height: 60upx;
|
||
|
|
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 分隔线 */
|
||
|
|
.cs-line {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: inherit;
|
||
|
|
height: inherit;
|
||
|
|
z-index: 99;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-litem {
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
top: 0;
|
||
|
|
width: 3upx;
|
||
|
|
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 抽奖按钮
|
||
|
|
*/
|
||
|
|
.cs-btn {
|
||
|
|
position: absolute;
|
||
|
|
background-color: #e44025;
|
||
|
|
z-index: 400;
|
||
|
|
width: 80upx;
|
||
|
|
height: 80upx;
|
||
|
|
border-radius: 50%;
|
||
|
|
color: #f4e9cc;
|
||
|
|
line-height: 80upx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 26upx;
|
||
|
|
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
|
||
|
|
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-btn::after {
|
||
|
|
position: absolute;
|
||
|
|
display: block;
|
||
|
|
content: ' ';
|
||
|
|
left: 12upx;
|
||
|
|
top: -44upx;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
border-width: 30upx;
|
||
|
|
border-style: solid;
|
||
|
|
border-color: transparent;
|
||
|
|
border-bottom-color: #e44025;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-btn.disabled {
|
||
|
|
pointer-events: none;
|
||
|
|
background: #b07a7b;
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-btn.disabled::after {
|
||
|
|
border-bottom-color: #b07a7b;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-btn-table {
|
||
|
|
|
||
|
|
width: 120upx;
|
||
|
|
text-align: center;
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
font-size: 26upx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
</style>
|