uni-app轉盤抽獎

uni-app的轉盤抽獎效果，要注意的點：

1、不能操作dom

2、主要靠css3的transition & transform讓轉盤旋轉

 

以下是uni-app轉盤抽獎效果的代碼：

<template>
  <!-- 轉盤 -->
  <view v-if="isTurntable" class="contanier-box">
    <!-- 旋轉的圓盤，主要靠css3的transition & transform讓轉盤旋轉-->
    <view
      class="turntable-box"
      :style="{transition: 'transform ' + rotateTime + 's ease-in-out', '-webkit-transition': 'transform ' + rotateTime + 's ease-in-out', transform:'rotate('+finalAngle+'deg)','-webkit-transform':'rotate('+finalAngle+'deg)','-moz-transform':'rotate('+finalAngle+'deg)'}"
    >
      <view class="box turntable">
        <!-- 分塊線，用css畫轉盤 -->
        <view class="snip" v-for="(item,index) in 3" :key="index"></view>
        <!-- 獎品 -->
        <view class="list">
          <view class="item" v-for="(item,index) in awardList" :key="index">
            <text class="text">{{item.text}}</text>
            <image :src="domain+item.img" class="img"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 指針 -->
    <view class="pointer-box">
      <view class="pointer"></view>
    </view>
    <!-- 抽獎開始按鈕 -->
    <view class="act-btn" @tap="canLuckDraw?toRotate():''">
      <view class="text-box">
        <view class="text">立即</view>
        <view class="text">抽獎</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      domain: getApp().globalData.baseUrl, // 後臺域名
      hasDraw: false, // 是否已抽獎
      showResult: false, // 是否顯示抽獎結果
      isWin: true, // 是否中獎
      awardList: [], // 獎項列表
      isTurntable: false, // 是否是轉盤
      angleInterval: 30, // 旋轉角度差值
      startAngle: 0, // 初始旋轉角度
      finalAngle: 0, // 最終旋轉角度
      rotating: false, // 轉盤是否在旋轉中
      luckyPrize: {}, // 抽獎結果
      timeInterval: 1, // 轉盤旋轉一週的時間間隔
      rotateTime: 0, // 轉盤旋轉的總時間
      canLuckDraw: true // 是否可抽獎
    }
  },
  methods: {
    // 請求轉盤抽獎頁面信息
    prizeTurnFun () {
      this.$api.luckDraw
        .prizeTurn()
        .then(res => {
          this.awardList = []
          // 按格式組合
          for (let i = 0; i < res.prizeArr.length; i++) {
            this.awardList.push({
              text: res.prizeArr[i],
              img: res.prizeImgArr[i]
            })
          }
        })
        .catch(() => {
          this.canLuckDraw = false
        })
    },
    // 開始轉盤抽獎
    toRotate () {
      const that = this
      if (that.rotating) return false
      that.rotating = true
      // 請求抽獎結果信息
      that.$api.luckDraw
        .doPrizeTurn()
        .then(res => {
          that.luckyPrize = res.luckyPrize
          that.isWin = true
          if (that.luckyPrize.is_winning === 2) that.isWin = false
          that.finalAngle = res.deg
          that.rotateTime = parseInt(res.deg / 360) * that.timeInterval
          let num = 0
          let timer = setInterval(function () {
            num += 1
            that.rotating = true
            if (num > that.rotateTime) {
              clearInterval(timer)
              timer = null
              that.rotating = false
              that.showResult = true
            }
          }, 1000)
        })
        .catch(() => {
          that.rotating = false
        })
    }
  }
}
</script>

<style lang="scss">
.contanier-box {
  width: 674upx;
  height: 674upx;
  position: relative;
  margin: 335upx auto 73upx;
  overflow: hidden;
  .turntable-box {
    width: 674upx;
    height: 674upx;
    position: relative;
    background: url($baseImgUrl+"luck-draw-pan.png") no-repeat;
    background-size: contain;
    .box {
      width: 590upx;
      height: 590upx;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #ddd;
      border-radius: 50%;
      overflow: hidden;
      .snip {
        position: absolute;
        width: 0;
        height: 0;
        top: -50%;
        left: -7.9%;
        border-right: 342upx solid transparent;
        border-left: 342upx solid transparent;
        border-top: 590upx solid #fff;
        border-bottom: 590upx solid #f6f3c9;
        border-radius: 100%;

        &:nth-child(1) {
          transform: rotate(0deg);
        }

        &:nth-child(2) {
          transform: rotate(60deg);
          border-top: 590upx solid #f6f3c9;
          border-bottom: 590upx solid #fff;
        }

        &:nth-child(3) {
          transform: rotate(120deg);
          border-bottom: 590upx solid #f6f3c9;
        }
      }
      .list {
        .item {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 200upx;
          height: 590upx;
          margin-top: -295upx;
          margin-left: -100upx;
          &:nth-child(1) {
            transform: rotate(0deg);
          }
          &:nth-child(2) {
            transform: rotate(60deg);
          }
          &:nth-child(3) {
            transform: rotate(120deg);
          }
          &:nth-child(4) {
            transform: rotate(180deg);
          }
          &:nth-child(5) {
            transform: rotate(240deg);
          }
          &:nth-child(6) {
            transform: rotate(300deg);
          }
          .text {
            position: absolute;
            top: 36upx;
            left: 50%;
            transform: translate(-50%, 0);
            font-size: 27upx;
            color: $darkRed;
            white-space: nowrap;
          }
          .img {
            width: 100upx;
            height: 100upx;
            position: absolute;
            top: 92upx;
            left: 50%;
            transform: translate(-50%, 0);
            border-radius: 50%;
          }
        }
      }
    }
  }

  .pointer-box {
    position: absolute;
    width: 40upx;
    height: 104upx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -52upx;
    overflow: hidden;
    .pointer {
      width: 100%;
      height: 200%;
      background: linear-gradient(
        90deg,
        rgba(228, 57, 40, 1),
        rgba(251, 94, 45, 1),
        rgba(232, 34, 84, 1)
      );
      border-radius: 50%;
      border-radius: 50%;
    }
  }
  .act-btn {
    width: 154upx;
    height: 184upx;
    background: url($baseImgUrl+"luck-draw-btn.png") no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
    z-index: 99;
    margin-top: -92upx;
    text-align: center;
    .text-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      line-height: 32upx;
      margin-top: -3upx;
      .text {
        color: #fff;
        font-weight: bold;
        font-size: 26upx;
      }
    }
  }
}
</style>