<template>
<view class="container">
<view class="frame_view">
<view class="frame_row">
<view class="frame_item" :class="'item' + color[0]">
<image src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg" mode="aspectFill"></image>
<text>{
{
award[0].name }}</text>
</view>
<view class="frame_item" :class="'item' + color[1]">
<image src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg" mode="aspectFill"></image>
<text>{
{
award[1].name }}</text>
</view>
<view class="frame_item" :class="'item' + color[2]">
<image src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg" mode="aspectFill"></image>
<text>{
{
award[2].name }}</text>
</view>
</view>
<view class="frame_row">
<view class="frame_item" :class="'item' + color[7]">
<image src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg" mode="aspectFill"></image>
<text>{
{
award[7].name }}</text>
</view>
<image class="frame_item" :src="btnconfirm" @click="clickLuck"></image>
<view class="frame_item" :class="'item' + color[3]">
<image src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg" mode="aspectFill"></image>
<text>{
{
award[3].name }}</text>
</view>
</view>
<view class="frame_row">
<view class="frame_item" :class="'item' + color[6]">
<image src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg" mode="aspectFill"></image>
<text>{
{
award[6].name }}</text>
</view>
<view class="frame_item" :class="'item' + color[5]">
<image src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg" mode="aspectFill"></image>
<text>{
{
award[5].name }}</text>
</view>
<view class="frame_item" :class="'item' + color[4]">
<image src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg" mode="aspectFill"></image>
<text>{
{
award[4].name }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
//计数器
var interval = null;
//值越大旋转时间越长 即旋转速度
var intime = 50;
export default {
data() {
return {
color: [0, 0, 0, 0, 0, 0, 0, 0],
award: [{
chance: 0,
name: '奖品一',
status: 1
},
{
chance: 0,
name: '奖品二',
status: 1
},
{
chance: 0,
name: '奖品三',
status: 1
},
{
chance: 0,
name: '奖品四',
status: 1
},
{
chance: 0,
name: '奖品五',
status: 1
},
{
chance: 0,
name: '奖品六',
status: 1
},
{
chance: 0,
name: '奖品七',
status: 1
},
{
chance: 100,
name: '谢谢惠顾',
status: 0
}
], //概率数组，格式可以自己设计，目的为了形成一个奖池
img: [
'http://img.touxiangwu.com/2020/3/uq6Bja.jpg',
], //图片链接
btnconfirm: 'http://img.touxiangwu.com/2020/3/uq6Bja.jpg', //点击图片链接
Luck: true, //防置重复点击
luckPosition: 0 //停止位置
};
},
methods: {
clickLuck() {
if (this.Luck == false) {
//防止过度点击
return;
}
this.Luck = false;
var arr = [];
//根据概率循环位置
for (var i = 0; i < this.award.length; i++) {
for (var k = 0; k < this.award[i].chance; k++) {
arr.push(i);
}
}
console.log(arr);
//[0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7]
//随机打乱数组
for (let i = 0, len = arr.length; i < len; i++) {
let index = parseInt(Math.random() * (len - 1));
let tempValue = arr[i];
arr[i] = arr[index];
arr[index] = tempValue;
}
console.log(arr);
//[2,6,1,1,1,6,3,5,4,1,3,2,0,6,6,6,1,2,1,1,6,7,6,4,0,1,6,1,6,1,1,2,7,6,2,2,6,5,6,3,6,3,6,6,6,6,3,4,1,2,1,5,6,7,4,0,7,6,0,6,5,7,2,6,6,7,6,2,6,6,6,3,1,1,3,6,2,1,3,5,5,6,2,6,6,5,1,0,3,6,6,6,0,2,7,5,6,0,6,2,1,2,1,6,5,1,4,3,3,6,4,6,3,6,3,3,1,1,2,7,1,6,4,2,6,1,1,1,6,3,6,6,3,6,6,3,4,7,1,0,2,6,4,0,6,5,3,2,6,2,6,6,6,6,0,4,6,1,6,1,7,6,6,3,6,6,3,6,1,2]
//从数组中随机抽取一个位置
var a = Math.ceil(Math.random() * 100);
console.log(arr[a], a); //5,81 每次不一样
this.luckPosition = arr[a];
var e = this;
//设置按钮不可点击
e.btnconfirm = 'http://img.touxiangwu.com/2020/3/uq6Bja.jpg';
//清空计时器
clearInterval(interval);
var index = 0;
//循环设置每一项的背景图
interval = setInterval(function() {
var c = [0, 0, 0, 0, 0, 0, 0, 0];
if (index > 7) {
index = 0;
}
c[index] = 1;
e.color = c;
index++;
}, intime);
// console.log(intime);
//模拟网络请求时间 设为两秒
var stoptime = 1000;
setTimeout(function() {
e.stop(e.luckPosition);
}, stoptime);
},
stop(which) {
var e = this;
//清空计数器
clearInterval(interval);
//初始化当前位置
var current = -1;
var color = e.color;
for (var i = 0; i < color.length; i++) {
if (color[i] == 1) {
current = i;
}
}
//下标从1开始
var index = current + 1;
e.stopLuck(which, index, intime, 10);
},
/**
* which:中奖位置
* index:当前位置
* time：时间标记
* splittime：每次增加的时间 值越大减速越快
*/
stopLuck(which, index, time, splittime) {
var e = this;
//值越大出现中奖结果后减速时间越长
var color = e.color;
setTimeout(function() {
//重置前一个位置
var c = [0, 0, 0, 0, 0, 0, 0, 0];
if (index > 7) {
index = 0;
}
//当前位置为选中状态
c[index] = 1;
e.color = c;
//如果旋转时间过短或者当前位置不等于中奖位置则递归执行
//直到旋转至中奖位置
if (time < 400 || index != which) {
//越来越慢
splittime++;
time += splittime;
//当前位置+1
index++;
e.stopLuck(which, index, time, splittime);
} else {
//1秒后显示弹窗
setTimeout(function() {
if (e.award[which].status == 1) {
//中奖
uni.showModal({
title: '提示',
content: '恭喜中奖',
showCancel: false,
success: function(res) {
if (res.confirm) {
//设置按钮可以点击
e.btnconfirm = 'http://img.touxiangwu.com/2020/3/uq6Bja.jpg';
e.Luck = true;
}
}
});
} else {
//中奖
uni.showModal({
title: '提示',
content: '很遗憾未中奖',
showCancel: false,
success: function(res) {
if (res.confirm) {
//设置按钮可以点击
e.btnconfirm = 'http://img.touxiangwu.com/2020/3/uq6Bja.jpg';
e.Luck = true;
}
}
});
}
}, 1000);
}
}, time);
}
}
};
</script>
<style>
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
box-sizing: border-box;
}
.frame_view {
bottom: 160rpx;
left: 60rpx;
right: 60rpx;
width: 618rpx;
height: 660rpx;
padding: 50rpx;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border-radius: 30rpx;
background-repeat: no-repeat;
background-size: 100%;
}
.frame_row {
width: 520rpx;
height: 180rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.frame_item {
width: 160rpx;
height: 168rpx;
background-repeat: no-repeat;
background-size: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-size: 20px;
padding: 10rpx 0;
}
.frame_item image {
width: 100rpx;
height: 100rpx;
display: block;
}
.frame_item text {
font-size: 14px;
display: block;
width: 100%;
text-align: center;
}
.item1 {
color: red;
}
</style>
原文更详细链接：https://blog.csdn.net/lhkuxia/article/details/106851781?spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-11-106851781-blog-125281402.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-11-106851781-blog-125281402.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=14