小程序 转盘抽奖 demo

于 2020-11-03 10:57:12 发布
阅读量1k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ygx_work/article/details/109464570
本文介绍了一个基于微信小程序的抽奖程序实现细节，包括页面结构、动画效果、后台接口调用等关键技术点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

// pages/draw/draw.js
const app = getApp()
let {
  config,
  Comm
} = require('../../utils/util.js');
let {
  AJAX,
} = require('../../utils/ajax.js');
var timer;
var n = 1;
var which = 1; //中奖项  
var drawCode = 0;
var deg; //中奖度数
// var luck = [15, 45, 75, 105, 135, 165, 195, 225, 255, 285, 315, 345]; //定义奖项 
Page({

  /**
   * 页面的初始数据
   */
  data: {
    animationData: {}, //动画 
    isEnd: false,
    detail: '',
    noLuck: false,
    btnShow: false,
    drawNum: 0,
    orderAmount: 0,
    drawUserList: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getUserDraw();
    this.getUserDrawRecodeList();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return app.shareFn();
  },
  toDrawDetail() {
    wx.navigateTo({
      url: '/pages/luckydrawdetail/luckydrawdetail',
    })
  },
  getUserDraw() {
    let _this = this;
    AJAX.POST('/drawRecode/getCustomerDrawCount', {}, function (res) {
      if (res && res.code == 1) {
        _this.setData({
          drawNum: res.data.count,
          orderAmount: res.data.orderAmount,
        })
      } else {
        Comm.message(res.msg)
      }
    })
  },
  getUserDrawRecodeList() {
    let _this = this;
    AJAX.POST('/drawRecode/getLastDrawRecodeList', {}, function (res) {
      if (res && res.code == 1) {
        _this.setData({
          drawUserList: res.data
        })
      } else {
        Comm.message(res.msg)
      }
    })
  },
  start() {
    var _this = this;
    this.setData({
      noLuck: false,
      btnShow: true,
    })
    timer = setInterval(function () {
      //开始旋转  
      // star.call(_this);
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 1000,
        timingFunction: "linear"
      });
      animation.rotate(360 * n).step();
      _this.setData({
        animationData: animation.export()
      })
      n++;
    }, 300);
    AJAX.POST('/luckDraw/invoke', {}, function (res) {
      if (res && res.code == 1) {
        drawCode = res.data;
      } else {
        Comm.message(res.msg);
      }
    })
    setTimeout(function () {
      _this.stop()
    }, 1000)
  },
  stop() {
    var _this = this;
    clearInterval(timer);
    timer = null;
    // console.log("结束动画.....");
    sto.call(_this);

    function sto() {
      // console.log("重置动画.....")
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 1.4 * (2000 - (which - 1) * 60),
        timingFunction: "ease-out"
      });
      let arr5 = [22.5, 202.5, 337.5];
      let arr6 = [112.5, 247.5];
      var angle = 0;
      var useAngle = 0;
      switch (drawCode) {
        case '555':
          angle = _this.shuffle(arr5);
          useAngle = _this.shuffle(arr5);
          break;
        case '666':
          angle = _this.shuffle(arr6);
          useAngle = _this.shuffle(arr6);
          break;
        case '777':
          angle = 67.5;
          useAngle = 67.5;
          break;
        case '888':
          angle = 157.5;
          useAngle = 157.5;
          break;
        case '999':
          angle = 292.5;
          useAngle = 292.5;
          break;
        default:
          break;
      }
      if (angle > 180) {
        angle = angle - 360;
      }
      animation.rotate(angle).step();
      let drawNum = _this.data.drawNum;
      drawNum--;
      this.setData({
        animationData: animation.export(),
        drawNum: drawNum,
        // isEnd: true,
      })
      setTimeout(function () {
        _this.setData({
          isEnd: true,
          btnShow: false,
        })
        _this.getDrawResult(useAngle);
      }, 3000)
    }
  },
  shuffle(array) {
    var return_array = '';
    var arrIndex = Math.floor(Math.random() * array.length);
    return_array = array[arrIndex];
    return return_array
  },
  getDrawResult: function (deg) {
    var prize = "";
    switch (deg) {
      case 22.5:
      case 202.5:
      case 337.5:
        prize = "五等奖";
        break;
      case 112.5:
      case 247.5:
        prize = "四等奖";
        break;
      case 67.5:
        prize = "三等奖";
        break;
      case 157.5:
        prize = "二等奖";
        break;
      case 292.5:
        prize = "一等奖";
        break;
      default:
        this.setData({
          noLuck: true
        })
        break;
    }
    if (!this.data.noLuck) {
      this.setData({
        detail: prize
      })
    }
  },
  showForm(e) {
    this.setData({
      isEnd: false
    })
    this.getUserDrawRecodeList();
  }
})

<!--pages/draw/draw.wxml-->
<!-- <text>pages/draw/draw.wxml</text> -->
<view class="container drawBox">
	<view class="container f0 drawBG">
		<image src="../../static/images/draw_bg.jpg" class="imgCover"></image>
	</view>
	<view class="drawDetail w100 flex-right pad5">
		<view class="colorfff f12 w20 center radius5 h25 lh25" bindtap="toDrawDetail">活动规则</view>
	</view>
	<view class='turntable w100'>
		<view class="drawBox w100">
			<view class="flex-center w100">
				<view class="turntableImg f0">
					<image class="imgCover" animation="{{animationData}}" src="../../static/images/turntable.png"></image>
				</view>
			</view>
			<view class='draw-btn w100'>
				<view class="draw-m" wx:if="{{btnShow}}"></view>
				<view class="f0 w100 flex-center">
					<image bindtap="start" src="../../static/images/draw_btn.png" wx:if="{{drawNum > 0}}"></image>
					<image src="../../static/images/draw_btn_d.png" wx:else></image>
				</view>
			</view>
		</view>
	</view>
	<view class='drawing-text w100'>
		<view class="f16 colorFE6 ">消费金额{{orderAmount/100 || 0}}元，剩余次数{{drawNum}}次</view>
	</view>
	<view class="swiperBox w100">
		<swiper autoplay circular vertical interval="3000" class="w100 h50 lh50 f14 bold">
			<block wx:for="{{drawUserList}}" wx:key="index">
				<swiper-item>
					<text>{{item.customerName}}抽中了</text><text class="colorFFB">{{item.grade}}</text>
				</swiper-item>
			</block>
		</swiper>
	</view>
	<view wx:if="{{isEnd}}" class='container modal-result flex-center'>
		<view class='modal-result-content flex-center'>
			<image mode="widthFix" src="../../static/images/modal_bg_1.png"></image>
			<view class='modal-result-text'>
				<view class="mart20 f14">亲，恭喜您获得</view>
				<view class='colorFF3 f18 bold mart5'>{{detail}}</view>
				<view class='mart20'>
					<view class='colorfff bold bgFF9 f14 center radius15 h30 lh30' bindtap="showForm">确认领取</view>
				</view>
			</view>
		</view>
	</view>
</view>

/* pages/draw/draw.wxss */
.drawBox {
  position: relative;
}

.drawBG {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}

.drawDetail {
  position: absolute;
  top: 17%;
  z-index: 3;
}

.drawDetail>view {
  background-color: rgba(51, 51, 51, 0.3);
}

.turntable {
  position: absolute;
  top: 30%;
  z-index: 2;
}

.turntableImg {
  width: 520rpx;
  height: 520rpx;
}

.draw-btn {
  position: absolute;
  top: calc(50% - 80rpx);
  z-index: 3;
}

.draw-m {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.draw-btn>view>image {
  width: 112rpx;
  height: 140rpx;
}

.drawing-text {
  position: absolute;
  z-index: 4;
  text-align: center;
  font-size: 24rpx;
  top: 76%;
  font-weight: bold;
  color: #333;
}
.swiperBox{
  position: absolute;
  z-index: 5;
  text-align: center;
  top: 90%;
}
.modal-result {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 5;
}

.modal-result-content {
  width: 80%;
  height: 30%;
  position: relative;
}

.modal-result-text {
  position: absolute;
  font-size: 32rpx;
  text-align: center;
  padding: 20rpx;
}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值