// 基礎(chǔ)參數(shù)
data () {
   return {
     isrun: false,
     rotateAngle: 0, // 旋轉(zhuǎn)角度
     config: {
       duration: 4000, // 總旋轉(zhuǎn)時間 ms級
       circle: 8, // 旋轉(zhuǎn)圈數(shù)
       mode: 'ease-in-out' // 由快到慢 慣性效果都省了
     },
     cricleAdd: 1, // 第幾次抽獎
     drawIndex: 0 // 中獎索引 轉(zhuǎn)盤圖片排序 指針右手開始 0-...
   }
 }
 // 計算屬性
 computed: {
   rotateStyle () {
     const _c = this.config
     return `
       -webkit-transition: transform ${_c.duration}ms ${_c.mode};
       transition: transform ${_c.duration}ms ${_c.mode};
       -webkit-transform: rotate(${this.rotateAngle}deg);
           transform: rotate(${this.rotateAngle}deg);`
   }
 }
 // 入?yún)?
 props: {
   httpData: {}, // 接口調(diào)用所需參數(shù)
   stateData: {
     type: Object,
     default: () => {
       return {
         coin: 0, // 超級幣數(shù)量
         prize_img: '' // 轉(zhuǎn)盤圖片
       }
     }
   }
 }

this.rotateAngle = this.config.circle * 360 * this.cricleAdd - (22.5 + this.drawIndex * 45)
// 圈數(shù)位置解析
// this.config.circle * 360 * this.cricleAdd 順時針總?cè)?shù)/累積總?cè)?shù)
// 22.5 + this.drawIndex * 45 ===> (獎品位置 === this.drawIndex * 45) (指針中間位置 === 22.5)

this.$emit('draw_fin', 'start')
this.$emit('draw_fin', 'fin')

  methods: {
      async run () {
        if (this.stateData.coin < 10) {
          console.log('超級幣不足')
          return
        }   
        if (this.isrun) return
        // const data = await this.goDraw()
        // 可以作為彈窗等信息展示
        this.$emit('draw_fin', 'start')
        this.$set(this.stateData, 'coin', 0) // 更新數(shù)據(jù)，此處僅為示例，推薦使用 draw_fin方法的 start/fin 進行相應(yīng)數(shù)據(jù)更新
        this.isrun = true
        this.rotateAngle = this.config.circle * 360 * this.cricleAdd - (22.5 + this.drawIndex * 45)
        // 圈數(shù)位置解析
        // this.config.circle * 360 * this.cricleAdd 順時針總?cè)?shù)/累積總?cè)?shù)
        // 22.5 + this.drawIndex * 45 ===> (獎品位置 === this.drawIndex * 45) (指針中間位置 === 22.5)

    this.cricleAdd++
    setTimeout(() => {
      this.$emit('draw_fin', 'fin')
      this.isrun = false
    }, this.config.duration)
  },
  goDraw () {
    // 請求接口拿到中獎商品
    // 加下自己項目的樣式 loading 用戶體驗
    return new Promise(async (resolve, reject) => {
      // await 獎品接口
      resolve({
        msg: '抽獎明細'
      })
    })
  }

import dialWrap from '../../components/dial/dial.vue'
<dialWrap ref="dialWrap" :stateData="stateData"></dialWrap>