小程序 大转盘

<style scoped>
page {
  background: #000;
  height: 100%;
}

/* 转盘 */
.canvas-container {
  margin: 30% auto 0;
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: 0 2px 3px #333, 0 0 2px #000;
}
.canvas-content {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 300px;
  height: 300px;  
  border-radius: inherit;
  background-clip: padding-box;
  background-color: #ffcb3f;
}
.canvas-element {
  position: relative;
  z-index: 1;
  width: inherit;
  height: inherit;
  border-radius: 50%;
}
.canvas-list {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 9999;
}
.canvas-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #e4370e;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}
.canvas-item-text {
  position: relative;
  display: block;
  padding-top: 20px;
  margin: 0 auto;
  text-align: center;
  -webkit-transform-origin: 50% 150px;
  transform-origin: 50% 150px;
  font-size: 12px;
}

/* 分隔线 */
.canvas-line {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 99;
}
.canvas-litem {
  position: absolute;
  left: 150px;
  top: 0;
  width: 1px;
  height: 150px;
  background-color: rgba(228, 55, 14, 0.4);
  overflow: hidden;
  -webkit-transform-origin: 50% 150px;
  transform-origin: 50% 150px;
}
/* .canvas-litem:nth-child(odd) {
  background: #000;
}
.canvas-litem:nth-child(even) {
  background: #fff;
} */
/**
* 抽奖按钮
*/
.canvas-btn {
  position: absolute;
  left: 110px;
  top: 110px;
  z-index: 400;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #f4e9cc;
  background-color: #e44025;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
  text-decoration: none;
}
.canvas-btn::after {
  position: absolute;
  display: block;
  content: ' ';
  left: 10px;
  top: -46px;
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 30px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #e44025;
}
.canvas-btn.disabled {
  pointer-events: none;
  background: #b07a7b;
  color: #ccc;
}
.canvas-btn.disabled::after {
  border-bottom-color: #b07a7b;
}
.mages {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 130%;
}
</style>

<template>
  <!-- <view
    style="height:100vh;width:100%;background:url(../../image/icons/timg.png);background-size:100%;"
  >-->
  <view style="height:100vh;width:100%;background-size:100%;">
    <view class="container">
      <view class="main">
        <view class="canvas-container" >
          <!-- <view animation="{{animationData}}" class="canvas-content" style="background:{{backgroung}}"> -->
          <view animation="{{animationData}}" class="canvas-content" >
            <view class="canvas-line">
              <view
                class="canvas-litem"
                wx:for="{{awardsList}}"
                wx:key="unique"
                style="-webkit-transform: rotate({{item.lineTurn}});transform: rotate({{item.lineTurn}})"
              ></view>
            </view>
            <view class="canvas-list">
              <view class="canvas-item" wx:for="{{awardsList}}" wx:key="unique">
                <view
                  class="canvas-item-text"
                  style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})"
                >
                  {{item.award}}
                  <image class="mages" src="{{imgHost+item.img}}"/>
                </view>
              </view>
            </view>
          </view>
          <view @tap="playReward" class="canvas-btn {{btnDisabled}}">抽奖</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'
import api from 'api'
import commonMixin from 'commonMixin'
import moment from 'moment'
import Coupon from 'com/coupon'
import Copyright from 'com/copyright'
// 首页
export default class Home extends wepy.page {
  mixins = [commonMixin];
  config = {
    navigationBarTitleText: '抽奖',
    enablePullDownRefresh: true,
    backgroundTextStyle: 'dark'
  };
  components = {
    Coupon,
    Copyright
  };

  data = {
    awardsList: {},
    animationData: {},
    btnDisabled: '',
    backgroung: '',
    // 奖品配置
    frequency: 1,
    awardsConfig: {
      chance: true,
      awards: [
        { index: 0, prize_name: '1元红包' },
        { index: 1, prize_name: '5元话费' },
        { index: 2, prize_name: '6元红包' },
        { index: 3, prize_name: '7元话费' },
        { index: 4, prize_name: '8元红包' },
        { index: 5, prize_name: '9元话费' },
        { index: 6, prize_name: '10元红包' },
        { index: 7, prize_name: '11元红包' }
      ]
    }
  };

  async onLoad(options) {
    let bannerRes = await api.prizeShow()
    await this._lottery(bannerRes)
    this.backgroung = '#000'
  }
  // 画抽奖圆盘
  async _lottery(bannerRes) {
    let that = this
    that.awardsConfig.awards = bannerRes.data.data
    console.log(that.awardsConfig.awards, 1111)
    let awards = that.awardsConfig.awards
    // console.log(awards, 2222)
    let awardsList = []
    let turnNum = 1 / awards.length // 文字旋转 turn 值
    // 奖项列表
    for (let i = 0; i < awards.length; i++) {
      awardsList.push({
        turn: i * turnNum + 'turn',
        lineTurn: i * turnNum + turnNum / 2 + 'turn',
        award: awards[i].prize_name,
        img: awards[i].thumb,
        id: awards[i].id
      })
    }
    // console.log(awardsList, 1111)
    this.awardsList = awardsList

    // console
    this.$apply()
  }
  methods = {
    // 发起抽奖
    async playReward() {
      // this.frequency++
      if (this.frequency == 1) {
        let prizelottery = await api.prizeDraw()
        let prizeid = ''
        let prizevalue = Number(prizelottery.data)
        // console.log(this.awardsList, '1q111')
        // let a = ''
        for (let i = 0; i < this.awardsList.length; i++) {
          if (this.awardsList[i].id == prizevalue) {
            prizeid = i
          }
        }
        console.log(prizeid, prizevalue, 222)
        let lengthj = this.awardsConfig.awards.length
        // console.log(lengthj)
        // 中奖index
        let awardIndex = prizeid
        let runNum = 6 // 旋转8周
        let duration = 4000 // 时长

        // 旋转角度
        this.runDeg = this.runDeg || 0
        this.runDeg =
          this.runDeg +
          (360 - (this.runDeg % 360)) +
          (360 * runNum - awardIndex * (360 / lengthj))
        // 创建动画
        let animationRun = wx.createAnimation({
          duration: duration,
          timingFunction: 'ease'
        })
        animationRun.rotate(this.runDeg).step()
        this.setData({
          animationData: animationRun.export(),
          btnDisabled: 'disabled'
        })
        // 中奖提示
        let awardsConfig = this.awardsConfig
        // console.log(awardIndex);
        setTimeout(
          function() {
            wx.showModal({
              title: '恭喜',
              content: '获得' + awardsConfig.awards[awardIndex].prize_name,
              showCancel: false,
              success(res) {
                // console.log(res)
                // // 跳转至订单页面
                // wx.redirectTo({
                //   url: '/pages/center/child/orders?status=0'
                // });
              }
            })
            this.setData({
              btnDisabled: ''
            })
          }.bind(this),
          duration
        )
      }
    }
  };
}
</script>