<view class="container">
 停止位置:<input value='{{luckPosition}}' style="width:100%;text-align:center" bindinput='input' type='number'></input>
 <view class='frame_view'>
<view class='frame_row'>
<image class='frame_item' style='opacity:{{color[0]}}' src='{{images[0]}}'></image>
<image class='frame_item' style='opacity:{{color[1]}}' src='{{images[1]}}'></image>
<image class='frame_item' style='opacity:{{color[2]}}' src='{{images[2]}}'></image>
</view>
 
<view class='frame_row'>
<image class='frame_item' style='opacity:{{color[7]}}' src='{{images[7]}}'></image>
<image class='frame_item' src='{{btnconfirm}}' bindtap='{{clickLuck}}'></image>
<image class='frame_item' style='opacity:{{color[3]}}' src='{{images[3]}}'></image>
</view>
 
<view class='frame_row'>
<image class='frame_item' style='opacity:{{color[6]}}' src='{{images[6]}}'></image>
<image class='frame_item' style='opacity:{{color[5]}}' src='{{images[5]}}'></image>
<image class='frame_item' style='opacity:{{color[4]}}' src='{{images[4]}}'></image>
</view>
</view>
</view>

//計數(shù)器
var interval = null;
 
//值越大旋轉(zhuǎn)時間越長 即旋轉(zhuǎn)速度
var intime = 50;
 
 
data: {
 color: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
 //9張獎品圖片
 images: ['/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png'],
 
 //確定按鈕
 btnconfirm: '/images/dianjichoujiang.png',
 
 //點擊事件
 clickLuck:'clickLuck',
 //中獎位置
 luckPosition:0,
 },

//進入頁面時緩慢切換
 loadAnimation:function (){
 var e = this;
 //初始位置為0
 var index = 0;
 //每1秒鐘切換一次位置
 interval = setInterval(function () {
 if (index > 7) {
 index = 0;
 e.data.color[7] = 0.5
 } else if (index != 0) {
 e.data.color[index - 1] = 0.5
 }
 e.data.color[index] = 1
 e.setData({
 color: e.data.color,
 })
 index++;
 }, 1000);
}

//which為中獎位置 需要停止時調(diào)用該方法
stop: function (which){
 var e = this;
 //清空計數(shù)器
 clearInterval(interval);
 //初始化當(dāng)前位置
 var current = -1;
 var color = e.data.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:當(dāng)前位置
 * time：時間標記
 * splittime：每次增加的時間 值越大減速越快
 */
 stopLuck: function (which, index,time,splittime){
 var e = this;
 //值越大出現(xiàn)中獎結(jié)果后減速時間越長
 var color = e.data.color;
 setTimeout(function () {
 //重置前一個位置
 if (index > 7) {
 index = 0;
 color[7] = 0.5
 } else if (index != 0) {
 color[index - 1] = 0.5
 }
 //當(dāng)前位置為選中狀態(tài)
 color[index] = 1
 e.setData({
 color: color,
 })
 //如果旋轉(zhuǎn)時間過短或者當(dāng)前位置不等于中獎位置則遞歸執(zhí)行
 //直到旋轉(zhuǎn)至中獎位置
 if (time < 400 || index != which){
 //越來越慢
 splittime++;
 time += splittime;
 //當(dāng)前位置+1
 index++;
 e.stopLuck(which, index, time, splittime);
 }else{
 //1秒后顯示彈窗
 setTimeout(function () {
 if (which == 1 || which == 3 || which == 5 || which == 7) {
 //中獎
 wx.showModal({
 title: '提示',
 content: '恭喜中獎',
 showCancel: false,
 success: function (res) {
 if (res.confirm) {
 //設(shè)置按鈕可以點擊
 e.setData({
 btnconfirm: '/images/dianjichoujiang.png',
 clickLuck: 'clickLuck',
 })
 e.loadAnimation();
 }
 }
 })
 } else {
 //中獎
 wx.showModal({
 title: '提示',
 content: '很遺憾未中獎',
 showCancel: false,
 success:function(res){
 if(res.confirm){
 //設(shè)置按鈕可以點擊
 e.setData({
 btnconfirm: '/images/dianjichoujiang.png',
 clickLuck: 'clickLuck',
 })
 e.loadAnimation();
 }
 }
 })
 }
 }, 1000);
 }
 }, time);
 },

//模擬網(wǎng)絡(luò)請求時間 設(shè)為兩秒
 var stoptime = 2000;
 setTimeout(function () {
 e.stop(e.data.luckPosition);
 }, stoptime)