微信小程序实现九宫格抽奖,九宫格抽奖跑马灯效果

时间:2020-06-03 10:29:59    来源:易博网络    作者:易博网络定制开发    浏览:52

2.png


小程序九宫格抽奖案例,欢迎大家指导提意见

WXML部分

<view class="ldMain">
  <view class="title">{{remarkShort}}</view>
  <view class="container-out">
    <view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view>

    <view class='frame_view'>
      <view class='frame_row'>
        <image class='frame_item ' style='opacity:{{color[0]}}'  src='{{awardList[0].imageAward}}'></image>
        <image class='frame_item' style='opacity:{{color[1]}}'  src='{{awardList[1].imageAward}}'></image>
        <image class='frame_item' style='opacity:{{color[2]}}'   src='{{awardList[2].imageAward}}'></image>
      </view>

      <view class='frame_row'>
        <image class='frame_item' style='opacity:{{color[7]}}'   src='{{awardList[7].imageAward}}'></image>
        <image class='frame_item' src='{{btnconfirm}}' bindtap='{{clickLuck}}'></image>
        <image class='frame_item' style='opacity:{{color[3]}}'   src='{{awardList[3].imageAward}}'></image>
      </view>

      <view class='frame_row'>
        <image class='frame_item' style='opacity:{{color[6]}}'  src='{{awardList[6].imageAward}}'></image>
        <image class='frame_item' style='opacity:{{color[5]}}' src='{{awardList[5].imageAward}}'></image>
        <image class='frame_item' style='opacity:{{color[4]}}' src='{{awardList[4].imageAward}}'></image>
      </view>
    </view>

  </view>
</view>
<view class="note">
<text class="title">积分抽奖规则</text>
<text class="p">
{{noteRemark}}
</text>
</view>
<view class="popup" hidden="{{showDiao}}">
  <view class="winning">
    <view class="content">
      <image src="{{luckyImage}}"></image>
      <text>{{remark}}</text>
      <view class="button">
        <button bindtap="toView">去看看</button>
        <button bindtap="againLucky">再抽一次</button>
      </view>
    </view>
  </view>
  <image src="https://xxxxxx/weChatImg/zjgb.png" class="zjgb" bindtap="close"></image>
</view>


JS部分

var globalData = getApp().globalData;
var getAjax = require("../../../utils/util.js");

//计数器
var interval = null;

//值越大旋转时间越长  即旋转速度
var intime = 50;
var luckyType = null;
var awardList = [];
var isAddress = null
var luckyIntegral = null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    circleList: [],//圆点数组  
    showDiao: true,
    colorCircleFirst: '#FFDF2F',//圆点颜色1  
    colorCircleSecond: '#FE4D32',//圆点颜色2 
    color: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
    btnconfirm: 'https://www.ls-mx.com/weChatImg/cj.png',
    clickLuck: 'clickLuck',
    luckPosition: 0,

  },
  onLoad: function () {
    wx.showNavigationBarLoading();
    if (globalData.tokenKey != "") {
      var _this = this;
      //圆点设置  
      var leftCircle = 7.5;
      var topCircle = 7.5;
      var circleList = [];
      for (var i = 0; i < 24; i++) {
        if (i == 0) {
          topCircle = 15;
          leftCircle = 15;
        } else if (i < 6) {
          topCircle = 11;
          leftCircle = leftCircle + 102.5;
        } else if (i == 6) {
          topCircle = 15
          leftCircle = 630;
        } else if (i < 12) {
          topCircle = topCircle + 88;
          leftCircle = 642;
        } else if (i == 12) {
          topCircle = 545;
          leftCircle = 632;
        } else if (i < 18) {
          topCircle = 550;
          leftCircle = leftCircle - 102.5;
        } else if (i == 18) {
          topCircle = 545;
          leftCircle = 10;
        } else if (i < 24) {
          topCircle = topCircle - 88;
          leftCircle = 7.5;
        } else {
          return
        }
        circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
      }
      this.setData({
        circleList: circleList
      })
      //圆点闪烁  
      setInterval(function () {
        if (_this.data.colorCircleFirst == '#ff6e74') {
          _this.setData({
            colorCircleFirst: '#fff',
            colorCircleSecond: '#ff6e74',
          })
        } else {
          _this.setData({
            colorCircleFirst: '#ff6e74',
            colorCircleSecond: '#fff',
          })
        }
      }, 500)//设置圆点闪烁的效果  


    } else {
      wx.navigateTo({
        url: '../../../pages/login/login',
      });
    }
  },
  /**
   * 获取奖品列表
   */
  getAward: function () {
    var e = this;
    //奖品item设置  
    //间距,怎么顺眼怎么设置吧. 
    awardList = [];
    var topAward = 13;
    var leftAward = 12;
    getAjax.getAjax('/api/lucky/luckyRoom', function (msg) {
      luckyIntegral = msg.data.luckyIntegral;
      for (var j = 0; j < msg.data.goods.length; j++) {
        if (j == 0) {
          topAward = 13;
          leftAward = 12;
        } else if (j < 3) {
          topAward = topAward;
          leftAward = leftAward + 185 + 12;
        } else if (j < 5) {
          leftAward = leftAward;
          //150是高,15是间距,下同  
          topAward = topAward + 150 + 13;
        } else if (j < 7) {
          leftAward = leftAward - 185 - 12;
          topAward = topAward;
        } else if (j < 8) {
          leftAward = leftAward;
          topAward = topAward - 150 - 13;
        }
        var imageAward = msg.data.goods[j].luckyImage;
        var luckyIds = msg.data.goods[j].luckyId;
        luckyIntegral =
          awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward, luckyId: luckyIds });
      }
      e.setData({
        awardList: awardList,
        remarkShort: msg.data.remarkShort,
        noteRemark: msg.data.remark
      })
    })
  },

  //点击抽奖按钮
  clickLuck: function () {
    var e = this;
    //设置按钮不可点击
    e.setData({
      btnconfirm: 'https://www.ls-mx.com/weChatImg/cj.png',
      clickLuck: '',
    })
    getAjax.getAjax('/api/user/address/list', function (msg) {
      if (msg.data.length < 1) {
        wx.showModal({
          title: '温馨提示',
          content: "请先添加地址再抽奖",
          confirmColor: "#1481ff",
          showCancel: false,
          confirmText: '添加地址',
          success: function (res) {
            if (res.confirm) {
              wx.navigateTo({
                url: '../../../pages/addAddress/addAddress',
              })
            }
          }
        })
        return false;
      }
      var userIntegral = wx.getStorageSync("userInfo")
      if (userIntegral.userIntegral < luckyIntegral) {
        wx.showToast({
          title: '当前积分不足抽奖',
          icon: 'none'
        })
        return false;
      }
      getAjax.getAjax('/api/lucky/luckyDraw', function (msg) {
        for (var i = 0; i < awardList.length; i++) {
          if (msg.data.luckyId == awardList[i].luckyId) {
            e.data.luckPosition = i;
          }
        }
        luckyType = msg.data.luckyType;
        e.setData({
          luckyImage: msg.data.luckyImage,
          remark: msg.data.remark
        })
      })
     
      //清空计时器
      clearInterval(interval);
      var index = 0;
      //循环设置每一项的透明度
      interval = setInterval(function () {
        if (index > 7) {
          index = 0;
          e.data.color[7] = 0.8
        } else if (index != 0) {
          e.data.color[index - 1] = 0.8
        }
        e.data.color[index] = 1
        e.setData({
          color: e.data.color,
        })
        index++;
      }, intime);

      //模拟网络请求时间  设为两秒
      var stoptime = 2000;
      setTimeout(function () {
        e.stop(e.data.luckPosition);
      }, stoptime)
    }, 'get');
    },
      stop: function (which) {
        var e = this;
        //清空计数器
        clearInterval(interval);
        //初始化当前位置
        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:当前位置
   * time:时间标记
   * splittime:每次增加的时间 值越大减速越快
   */
  stopLuck: function (which, index, time, splittime) {
    var e = this;
    //值越大出现中奖结果后减速时间越长
    var color = e.data.color;
    setTimeout(function () {
      //重置前一个位置
      if (index > 7) {
        index = 0;
        color[7] = 0.8
      } else if (index != 0) {
        color[index - 1] = 0.8
      }
      //当前位置为选中状态
      color[index] = 1
      e.setData({
        color: color,
      })
      //如果旋转时间过短或者当前位置不等于中奖位置则递归执行
      //直到旋转至中奖位置
      if (time < 400 || index != which) {
        //越来越慢
        splittime++;
        time += splittime;
        //当前位置+1
        index++;
        e.stopLuck(which, index, time, splittime);
      } else {
        //1秒后显示弹窗
        setTimeout(function () {
          e.setData({
            showDiao: ""
          })
        }, 1000);
      }
    }, time);

  },
  /**
   * 再抽一次
   */
  againLucky: function () {
    var e = this;
    //设置按钮可以点击
    e.setData({
      btnconfirm: 'https://xxxx/weChatImg/cj.png',
      clickLuck: 'clickLuck',
    })

    e.setData({
      showDiao: true
    })
    
  },
  /**
   * 跳转不用的目标页
   */
  toView: function () {
    var e = this;
    if (luckyType == 1) {
      wx.navigateTo({
        url: '../../../pages/myIntegral/myIntegral',
      })
    } else if (luckyType == 2) {
      wx.navigateTo({
        url: '../../../pages/exchangeRecord/exchangeRecord',
      })
    } else if (luckyType == 3) {
      wx.navigateTo({
        url: '../../../pages/exchangeRecord/exchangeRecord',
      })
    }
    e.setData({
      showDiao: true
    })

  },
  /**
   * 关闭窗口
   */
  close: function () {
    var that = this;
    //设置按钮可以点击
    that.setData({
      btnconfirm: 'https://xxxx/weChatImg/cj.png',
      clickLuck: 'clickLuck',
    })
    that.setData({
      showDiao: true
    })
    

  },
  onShow() {
    if (globalData.tokenKey != "") {
      var that = this;
      that.getAward();
      setTimeout(function () {
        wx.hideNavigationBarLoading();
      }, 1000)
    } else {
      wx.navigateTo({
        url: '../../../pages/login/login',
      });
    }
  },
  /**
   * 生命周期回调—监听页面隐藏
   */
  onHide: function () {
    var that = this;
    //设置按钮可以点击
    that.setData({
      btnconfirm: 'https://xxxx/weChatImg/cj.png',
      clickLuck: 'clickLuck',
    })
    //计数器
    var interval = null;
    //值越大旋转时间越长  即旋转速度
    var intime = 50;
    var luckyType = null;
    var awardList = [];
    var isAddress = null
    var luckyIntegral = null;
    that.setData({
      showDiao: true
    })
  
  },
  /**
   * 生命周期回调—监听页面卸载
   */
  onUnload: function () {
    var that = this;
    //设置按钮可以点击
    that.setData({
      btnconfirm: 'https://xxxxx/weChatImg/cj.png',
      clickLuck: 'clickLuck',
    })
    //计数器
    var interval = null;
    //值越大旋转时间越长  即旋转速度
    var intime = 50;
    var luckyType = null;
    var awardList = [];
    var isAddress = null
    var luckyIntegral = null;
    that.setData({
      showDiao: true
    })
   
  },
  /**
 * 用户点击右上角分享
 */
  onShareAppMessage: function () {
    var obj = {
      path: '/pages/index/index',
    };
    return obj;
  },
})


CSS部分

@import "../../../utils/font.wxss";
page{
background: #fff url(https://xxx/weChatImg/cjBj.png) no-repeat top center;
background-size: 100%;
}
.ldMain{
  width: 690rpx;
  height: 725rpx;
  margin: 358rpx auto 0 auto;
 border-radius: 18rpx;
 background: rgba(243, 52, 44, 0.62);
 padding-top: 44rpx;
 padding-bottom: 22rpx;
}
.ldMain .title{background: url(https://xx/weChatImg/cjgztitle.png) no-repeat top center;
background-size: 100%; width: 584rpx;height: 92rpx; font-size: 30rpx; color: #fff; line-height: 92rpx;margin: 0 auto; text-align: center}
button::after{border: none}
.container-out {  
  height: 576rpx;  
  width: 664rpx;  
  background-color: #fdf052;  
  margin: 40rpx auto;  
  border-radius: 18rpx;  

  position: relative;  
}  
    .frame_view{
  width: 606rpx;  
  height: 505rpx;  
  background-color: #ff3e43;  
  border-radius: 18rpx;  
  position: absolute;  
  left: 0;  
  right: 0;  
  top: 0;  
  bottom: 0;  
  margin: auto;  
}
.frame_row{
  width:575rpx;
  height:165rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 2rpx auto 0 auto;

} 
.frame_item{
height: 150rpx;  
  width: 185rpx;  
}


   
/**小圆球  
box-shadow: inset 3px 3px 3px #fff2af;*/ 
   
.circle {  
  position: absolute;  
  display: block;  
  border-radius: 50%;  
  height: 17rpx;  
  width: 17rpx;  
  box-shadow: 0 0px 5px  #ff3e43;
}  
   
.content-out {  
  position: absolute;  
  height: 150rpx;  
  width: 185rpx;  
  border-radius: 23rpx;
  border: none;

}  
   
/**居中 加粗*/ 
   
.start-btn {  
  position: absolute;  
  margin: auto;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
 
  height: 150rpx;  
  width: 185rpx;  

}  
   
.award-image {  
  position: absolute;  
  margin: auto;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
 
}
.popup{position:fixed;width: 100%; height: 100%; overflow: hidden;background: rgba(0, 0, 0, 0.7);z-index: 9999;top: 0; display: flex; justify-content: center; align-items: center;flex-direction: column;}
.popup .winning{width: 750rpx; height: 761rpx;background: url(https://xxx/weChatImg/zjbj.png) no-repeat center center; background-size: 100%;margin-top: -50rpx}
.popup .zjgb{width: 60rpx; height:60rpx; margin-top: -60rpx}
.popup .winning .content {width: 410rpx; height:370rpx; margin: 240rpx auto 0 auto; display: flex;justify-content: space-between; flex-direction: column; align-items: center }
.popup .winning .content image{ width: 196rpx; height: 160rpx}
.popup .winning .content .button{display: flex; justify-content: space-between;width: 100%}
.popup .winning .content .button button{ width: 180rpx; border-radius: 20px; border: 1px solid #fd3223; background: transparent; line-height: 60rpx; font-size: 28rpx;color: #fd3223}
.popup .winning .content .button button:last-child{background: #fd3223 !important; color: #FFF}
.popup .winning .content text{font-size: 28rpx;}
.note{ margin-top: 108rpx; margin-bottom: 40rpx; color: #322b2d; padding-left: 42rpx}
.note .title{color: #fd3c50;font-size: 30rpx}
.note .p{ font-size: 28rpx;margin-top: 50rpx; line-height: 30rpx}


本文Tags:
 

Copyright © 2011-2019.ebo168 易博网络 All rights reserved. 蜀ICP备20010023号-1