转盘抽奖

转盘抽奖

http://hfc.suoluomei.com/hpl/index.php?s=/Weixin/active/newYearRedPacket

效果图

 // 奖品列表
      var prizeList
      var prizeId

      function sortBy(property) {
        return function(a, b) {
          return a[property] < b[property]
            ? -1
            : a[property] > b[property]
            ? 1
            : 0
        }
      }
      // 抽奖判断
      $.post(
        '__MODULE__/active/getNewYearRedPacketInit',
        function(res) {
          if (res.errcode === 0) {
            var data = res.data
            // 已参加过活动，取消点击事件
            if (data.joined == 1) {
              $.alert({
                title: '您已经抽过奖了',
                text: '点确认前往禾粉圈查看',
                onOK: function() {
                  window.location.href = '__MODULE__/GoodsBook/card_package'
                }
              })
              $('.begin').click(function() {
                $.alert({
                  title: '您已经抽过奖了',
                  text: '点确认前往禾粉圈查看',
                  onOK: function() {
                    window.location.href = '__MODULE__/GoodsBook/card_package'
                  }
                })
              })
              return
            } else {
              prizeList = data.rows && data.rows.sort(sortBy('sort'))
              console.log('​prizeList', prizeList)
              // 扇区份数，与奖品数组
              prizing(prizeList.length, prizeList)
            }
          } else {
            $.alert({
              title: '网络错误',
              text: ''
            })
          }
        },
        'json'
      )

      function prizing(part, prizeList) {
        // 开始抽奖
        $('.begin').one('click', function() {
          console.log('开始抽奖')
          $.post(
            '__MODULE__/Active/actionNewYearRedPacketPrize',
            function(resp) {
              if (resp.errcode !== 0) {
                $.alert('网络异常', '')
                return
              }
              var prizeId = resp.data.id
              console.log('​prizing -> prizeList', prizeList)
              var winPrize = prizeList.filter(function(item, index) {
                return item.id == prizeId
              })

              // 设置初始旋转角度
              var defaultRotate = 1440
              // 所在扇区
              var sectorId = winPrize[0].sort
              // 360/(计算奖品个数*2) ==> 得到偏转角
              // var getRotate = 360 / (part * 2)
              // 设置中奖奖品所在位置的角度
              console.log('​prizing -> prizeId', sectorId)
              var setRotate = (360 / (part * 2)) * (sectorId * 2 - 1)
              console.log('​prizing -> part', part)
              console.log('​prizing -> setRotate', setRotate)
    
            // 别写这些难维护的代码
              // switch (prizeId) {
              //   case 0:
              //     setRotate = getRotate
              //     break
              //   case 1:
              //     setRotate = getRotate * 3
              //     break
              //   case 2:
              //     setRotate = getRotate * 5
              //     break
              //   case 3:
              //     setRotate = getRotate * 7
              //     break
              //   case 4:
              //     setRotate = getRotate * 9
              //     break
              //   case 5:
              //     setRotate = getRotate * 11
              //     break
              //   case 6:
              //     setRotate = getRotate * 13
              //     break
              //   case 7:
              //     setRotate = getRotate * 15
              //     break
              // }
              var allRotate = defaultRotate + setRotate
              $('.turnImg ').velocity(
                {
                  rotateZ: allRotate + 'deg'
                },
                {
                  duration: 3000,
                  complete: function(ele) {
                    setTimeout(function() {
                      $('.js-win').fadeIn()
                      unbindPrizing()
                    }, 1000)
                  }
                }
              )

              var winPrizeInfo = winPrize[0]
              // 显示中奖信息
              var prizeType = parseInt(winPrizeInfo.score) == 0 ? '元' : '积分'
              console.log('​prizing -> prizeType', prizeType, winPrizeInfo)
              var prizeText =
                parseInt(winPrizeInfo.score) == 0
                  ? winPrizeInfo.money
                  : winPrizeInfo.score

              $('.js-prize-type').text(prizeType)
              $('.js-prize-des').text(prizeText)
            },
            'json'
          )
        })
      }

      function unbindPrizing() {
        $('.begin').off('click')
        $('.begin').on('click', function() {
          $.confirm({
            title: '您已经抽过奖了',
            text: '点击确定查看',
            onOK: function() {
              // TODO 跳转
              window.location.href = '__MODULE__/GoodsBook/card_package'
            },
            onCancel: function() {
              // TODO
            }
          })
          $('.js-win').fadeIn()
        })
      }

      $('.popup .close').click(function() {
        $(this)
          .parent()
          .parent()
          .fadeOut()
      })

      $('.js-check-prize').click(function() {
        // TODO 跳转到中奖记录？
        window.location.href = '__MODULE__/GoodsBook/card_package'
      })

奖品数组 data， 以指针为起点分成 data.length 份扇形，
`sort` 用于排序，对应以指针为起点的第n个扇形，
前端只需要更换图片，后台传递数据控制扇形数和`sort`指向对应扇区的奖品

{data:{rows: [{id: "83", name: "新年大转盘红包", score: "200", money: "0.00", sort: "5"},…], joined: 0}, errcode: 0,msg: "操作成功", status: 1}