微信小程序抽奖转盘实现案例

朴灿烈づ我的快乐病毒、 2023-10-07 17:39 7阅读 0赞

> 也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

最终效果图  
![在这里插入图片描述][7913e5efae3d46a0b4f3a76ad0e4436e.gif_pic_center]

##### 1 wxml 布局文件 #####

<view class="activitymain">
    
      
      <view class="container_act">
        <view class="news flex-row">
          <image src="/img/draw_notice.png" class="img-35 notice-img"></image>
          <swiper class="swiper" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='1'>
            <block wx:for-index="idx" wx:for='{
         {list}}' wx:key="index">
              <swiper-item>
                <view class='content-item'>
                  <text class="ml30" decode="{
         {true}}">恭喜用户   </text>
                  <text class="high-light">{
       {item.phone}}</text>
                  <text decode="{
         {true}}">  {
       {item.name}}</text>
                </view>
              </swiper-item>
            </block>
          </swiper>
        </view>
    
        
        <view class="draw">
          <view class="draw_view flex-row jb">
            <view class="item {
         {turnplateList[0].status ? 'op1' : ''}}">
              <image src="{
         {turnplateList[0].img}}" class="item-img"></image>
              <view>{
       {turnplateList[0].name}}</view>
            </view>
            <view class="item {
         {turnplateList[1].status ? 'op1' : ''}}">
              <image src="{
         {turnplateList[1].img}}" class="item-img"></image>
              <view>{
       {turnplateList[1].name}}</view>
            </view>
            <view class="item {
         {turnplateList[2].status ? 'op1' : ''}}">
              <image src="{
         {turnplateList[2].img}}" class="item-img"></image>
              <view>{
       {turnplateList[2].name}}</view>
            </view>
            <view class="item {
         {turnplateList[3].status ? 'op1' : ''}}">
              <image src="{
         {turnplateList[3].img}}" class="item-img"></image>
              <view>{
       {turnplateList[3].name}}</view>
            </view>
            <view class="item no-bg">
              <image wx:if="{
         {drawLuck}}" src="/img/chose.png" class="draw-img" bindtap="drawLuck"></image>
              <image wx:else src="/img/chosed.png" class="draw-img"></image>
            </view>
    
            <view class="item {
         {turnplateList[4].status ? 'op1' : ''}}">
              <image src="{
         {turnplateList[4].img}}" class="item-img"></image>
              <view>{
       {turnplateList[4].name}}</view>
            </view>
    
            <view class="item {
         {turnplateList[5].status ? 'op1' : ''}}">
              <image src="{
         {turnplateList[5].img}}" class="item-img"></image>
              <view>{
       {turnplateList[5].name}}</view>
            </view>
            <view class="item {
         {turnplateList[6].status ? 'op1' : ''}}">
              <image src="{
         {turnplateList[6].img}}" class="item-img"></image>
              <view>{
       {turnplateList[6].name}}</view>
            </view>
            <view class="item {
         {turnplateList[7].status ? 'op1' : ''}}">
              <image src="{
         {turnplateList[7].img}}" class="item-img"></image>
              <view>{
       {turnplateList[7].name}}</view>
            </view>
          </view>
        </view>
    
        <view class="choice">
          您还有{
       {draw_count}}次抽奖机会
        </view>
      </view>
      
      <view class="goodslist">
        <view class="result_title">活动商品</view>
        <view class="shop_info" wx:for="{
         {3}}">
          <view class="item">
            <image src="https://i.postimg.cc/NGN7JqRB/222.webp" class="item-img"></image>
            <view class="goods_info">
              <text class="title">测试商品</text>
              <view class="price">
                <text>价格 $90</text>
                <button plain="true" type="warn" size="mini">立即购买</button>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="resultrule">
        <view class="result_title">抽奖规则</view>
        <view class="result_info">
          <scroll-view scroll-y="true" style="height: 200rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{
         {toView}}" scroll-top="{
         {scrollTop}}">
            <block wx:for="{
         {resultList}}" wx:key="index">
              <view class="goods_name">{
       {item.name}}</view>
            </block>
          </scroll-view>
        </view>
      </view>
    
      
      <view class="result">
        <view class="result_title">我的抽奖记录</view>
        <view class="result_info">
          <scroll-view scroll-y="true" style="height: 200rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{
         {toView}}" scroll-top="{
         {scrollTop}}">
            <block wx:for="{
         {resultList}}" wx:key="index">
              <view class="goods_name">{
       {item.name}}</view>
            </block>
          </scroll-view>
        </view>
      </view>
    
    
    </view>

##### 2 wxss 样式文件 #####

.activitymain {
        
      background-image: linear-gradient(#eb1c1c, #b92b2b);
      padding: 22rpx;
    }
    
    .container_act {
        
      border: 1px solid #FF9800;
      border-radius: 20rpx;
      color: #fff;
      box-shadow: 0px 4px 4px 0 #FF5722;
      /* height: 300px; */
      padding: 30rpx;
    }
    
    .news {
        
      margin: 20rpx auto;
      width: 100%;
      /* border: 1px solid black; */
      height: 30px;
      line-height: 30px;
      border-radius: 30rpx;
      background-color: rgb(229, 149, 149);
    }
    
    .notice-img {
        
      padding: 0 30rpx;
    }
    
    .swiper {
        
      width: 90%;
      height: 100%;
      font-size: 25rpx;
    }
    
    .content-item {
        
      max-width: 600rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .high-light {
        
      color: #eccb39;
    }
    
    .draw {
        
      /* border: 1px solid black; */
      margin-top: 50rpx;
      width: 100%;
      /* height: 350px; */
      border-radius: 20rpx;
      box-shadow: 0 0 7rpx 0 rgba(0, 137, 254, 0.45), 0 0 18rpx 0 #FFFFFF;
    }
    
    .draw_view {
        
      flex-wrap: wrap;
      padding: 30rpx;
    }
    
    .item {
        
      width: 31%;
      /* border: 1px solid black; */
      height: 90px;
      margin-bottom: 30rpx;
      background-color: #fff;
      color: #b90c0c;
      border-radius: 20rpx;
      font-size: 26rpx;
      text-align: center;
    }
    
    .item-img {
        
      margin-top: 10rpx;
      width: 60px;
      height: 60px;
      border-radius: 10rpx;
    }
    
    .choice {
        
      margin-top: 30rpx;
      text-align: center;
      font-size: 28rpx;
    }
    
    .draw-img {
        
      height: 100%;
      width: 100%;
    }
    
    .no-bg {
        
      background: none;
    }
    
    .op1 {
        
      border: 5rpx solid #ac1010;
      box-shadow: inset -4rpx -23rpx 20rpx 20rpx #ce1e1e;
      border-radius: 20rpx;
      box-sizing: border-box;
    }
    
    .result {
        
      /* border: 1px solid rebeccapurple; */
      margin: 60rpx 20rpx;
      border-radius: 20rpx;
      height: 200px;
      box-shadow: 0 0 98rpx 0 #FFFFFF inset;
      text-align: center;
    }
    
    .resultrule {
        
      /* border: 1px solid rebeccapurple; */
      margin: 60rpx 20rpx;
      border-radius: 20rpx;
      height: 200px;
      box-shadow: 0 0 8rpx 0 #FFFFFF inset;
      text-align: center;
    }
    
    .goodslist {
        
      /* border: 1px solid rebeccapurple; */
      margin: 60rpx 20rpx;
      border-radius: 20rpx;
      height: auto;
      box-shadow: 0 0 8rpx 0 #FFFFFF inset;
      text-align: center;
    }
    .goodslist .result_title{
        
      color: white;
      font-weight: 600;
      padding-top: 30rpx;
      margin-bottom: 20rpx;
    }
    
    .result_title {
        
      color: white;
      font-weight: 600;
      padding-top: 30rpx;
    }
    
    .result_info {
        
      /* border: 1px solid red; */
      margin: 20rpx;
      height: 200rpx;
    }
    
    .goods_name {
        
      color: #fff;
      padding: 10rpx;
      font-size: 28rpx;
    }
    
    /**app.wxss**/
    .flex-row {
        
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    
    .flex-column {
        
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .jb {
        
      justify-content: space-between;
    }
    
    .img-35 {
        
      width: 35rpx;
      height: 35rpx;
    }
    
    .shop_info {
        
      margin-left: 22rpx;
      margin-right: 22rpx;
      display: flex;
      flex-direction: row;
      justify-content: start;
    }
    
    .shop_info .item {
        
      width: 100%;
      height: auto;
      justify-content: start;
      display: flex;
      margin-bottom: 30rpx;
      padding: 12rpx;
      background-color: #fff;
      color: #b90c0c;
      border-radius: 20rpx;
      font-size: 26rpx;
      text-align: center;
    }
    
    .shop_info .goods_info {
        
      justify-content: start;
      display: flex;
      margin-top: 10rpx;
      flex-direction: column;
      align-items: start;
      /* width: 100%; */
      padding-left: 12rpx;
      flex: 1;
    }
    
    .shop_info .goods_info .title {
        
      font-weight: 500;
      font-size: 32rpx;
      color: #000;
    }
    
    .shop_info .item-img {
        
      FONT-VARIANT: JIS78;
      FONT-WEIGHT: 600;
      margin-top: 10rpx;
      width: 85rpx;
      height: 85rpx;
      border-radius: 10rpx;
    }
    
    .shop_info .goods_info .price {
        
      font-size: 22;
      color: #ac1010;
      display: flex;
      justify-content: left;
      width: 100%;
    }
    
    .shop_info .goods_info .price text {
        
      flex: 1;
      text-align: start;
    }
    
    .shop_info .goods_info .price button{
        
      width: 160rpx;
      font-size: 22rpx;
    }

##### 3 JS 文件 #####

// 获取应用实例
    const app = getApp()
    //计数器
    var interval = null;
    //值越大旋转时间越长  即旋转速度
    var intime = 50;
    Page({
        
      data: {
        
        resultList:[],
        luckPosition:5,
        drawLuck:true,
        list:[
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品"},
          {
        phone: "188****3434", name: "抽中半价商品抽中半价商品抽中半价商品抽中半价商品"},
        ],
        turnplateList:[
          {
        id: "1", name: "测试商品1", img:'/img/test.png',is_turnplateList:'1',status:false},
          {
        id: "2", name: "测试商品2", img:'/img/test.png',is_turnplateList:'1',status:false},
          {
        id: "3", name: "测试商品3", img:'/img/test.png',is_turnplateList:'1',status:false},
          {
        id: "4", name: "测试商品4", img:'/img/test.png',is_turnplateList:'0',status:false},
          {
        id: "5", name: "测试商品5", img:'/img/test.png',is_turnplateList:'1',status:false},
          {
        id: "6", name: "测试商品6", img:'/img/test.png',is_turnplateList:'1',status:false},
          {
        id: "7", name: "测试商品7", img:'/img/test.png',is_turnplateList:'1',status:false},
          {
        id: "8", name: "测试商品8", img:'/img/test.png',is_turnplateList:'0',status:false},
        ],
        draw_count:'5',
       
      },
      // 事件处理函数
     
      onLoad() {
        
        
      },
      drawLuck(){
        
        if(this.data.draw_count==0){
        
          wx.showToast({
        
            title: '您的抽奖次数已经用光了',
            icon:'none'
          })
          return false
        }
        this.setData({
        
          drawLuck:false
        })
        let that=this;
        //定时器
        clearInterval(interval)
        var index=0;
        interval=setInterval(function(){
        
          if(index>7){
        
            index=0;
            that.data.turnplateList[7].status = false
          }else if (index != 0) {
        
            that.data.turnplateList[index - 1].status = false
          }
          that.data.turnplateList[index].status = true
          that.setData({
        
            turnplateList: that.data.turnplateList,
          })
          index++;
        },intime)
        console.log(this.data.turnplateList)
         //模拟网络请求时间  设为两秒
         var stoptime = 2000;
         setTimeout(function () {
        
           that.stop(that.data.luckPosition);
         }, stoptime)
      },
      stop: function (which){
        
        var e = this;
        //清空计数器
        clearInterval(interval);
        //初始化当前位置
        var current = -1;
        var turnplateList = e.data.turnplateList;
        for (var i = 0; i < turnplateList.length; i++) {
        
          if (turnplateList[i] == 1) {
        
            current = i;
          }
        }
        //下标从1开始
        var index = current + 1;
        e.stopLuck(which, index, intime, 10);
      },
      stopLuck: function (which, index, time, splittime) {
        
        var that = this;
        //值越大出现中奖结果后减速时间越长
        var turnplateList = that.data.turnplateList;
        setTimeout(function () {
        
          //重置前一个位置
          if (index > 7) {
        
            index = 0;
            turnplateList[7].status = false
          } else if (index != 0) {
        
            turnplateList[index - 1].status = false
          }
          //当前位置为选中状态
          turnplateList[index].status = true
          that.setData({
        
            turnplateList: turnplateList,
          })
          //如果旋转时间过短或者当前位置不等于中奖位置则递归执行
          //直到旋转至中奖位置
          if (time < 400 || index != which) {
        
            //越来越慢
            splittime++;
            time += splittime;
            //当前位置+1
            index++;
            that.stopLuck(which, index, time, splittime);
          } else {
        
            //1秒后显示弹窗
            setTimeout(function () {
        
              let turnplateList_info = that.data.turnplateList[which];
              let title = '';
              if (turnplateList_info.is_turnplateList == 1) {
        
                title = '恭喜你抽中了' + turnplateList_info.name;
                let resultList=[]
                resultList.push(turnplateList_info)
                that.setData({
        
                  resultList:that.data.resultList.concat(resultList)
                })
                console.log(that.data.resultList)
              } else {
        
                title = '很遗憾未中奖';
              }
              wx.showModal({
        
                title: '提示',
                content: title,
                showCancel: false,
                success: function (res) {
        
                  if (res.confirm) {
        
                    let draw_count=that.data.draw_count;
                    draw_count--;
                    console.log(draw_count)
                    that.setData({
        
                      drawLuck: true,
                      luckPosition: 0,
                      draw_count:draw_count
                    })
                  }
                }
              })
            }, 1000);
          }
        }, time);
      },
    
      upper(e) {
        
        console.log(e)
      },
    
      lower(e) {
        
        console.log(e)
      },
    
      scroll(e) {
        
        console.log(e)
      },
    
      scrollToTop() {
        
        this.setAction({
        
          scrollTop: 0
        })
      },
    })

--------------------

完毕

[7913e5efae3d46a0b4f3a76ad0e4436e.gif_pic_center]: https://img-blog.csdnimg.cn/7913e5efae3d46a0b4f3a76ad0e4436e.gif#pic_center