大转盘组件

<template>
  <view>
    <view class="turntable_wp sol-class">
      <image class="turntableImg" src="@/static/images/home/turntable/bgp.png"></image>
      <view
        :style="'-webkit-transform:rotate(' + deg + 'deg) translateZ(0);transform:rotate(' + deg + 'deg) translateZ(0)'"
        class="turntable_pointer"
        @tap="start"
      >
        <image src="@/static/images/home/turntable/btn.png"></image>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, unref } from 'vue'
import { turntable } from '../pages/home/pages/turntable/turntable'
const { getNewGiftlist } = turntable()
onMounted(async () => {
  await getNewGiftlist()
})
const deg = ref(0)
const singleAngle = ref()
const isStart = ref(false)

const emits = defineEmits(['start', 'success'])
const props = defineProps({
  // 划分区域
  areaNumber: {
    type: Number,
    default: 7,
  },
  // 速度
  speed: {
    type: Number,
    default: 16,
  },
})

onBeforeMount(() => {
  init()
})

function init() {
  const { areaNumber } = props
  const singleAngleData = 360 / areaNumber
  singleAngle.value = singleAngleData
}

// 点击开始抽奖
function start() {
  emits('start')
}

function begin(awardNumer: number) {
  let degData = deg.value
  const singleAngleData = singleAngle.value
  const speed = props.speed
  const isStartData = isStart.value
  if (isStartData) return
  isStart.value = true
  let endAddAngle = 0
  endAddAngle = 360 - ((awardNumer - 1) * singleAngleData + singleAngleData / 2) // 中奖角度

  const rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360 // 随机旋转几圈再停止

  // console.log(endAddAngle)
  let cAngle
  degData = 0
  const timer = setInterval(() => {
    if (degData < rangeAngle) {
      degData += speed
    } else {
      cAngle = (endAddAngle + rangeAngle - degData) / speed
      cAngle = cAngle > speed ? speed : cAngle < 1 ? 1 : cAngle
      degData += cAngle

      if (degData >= endAddAngle + rangeAngle) {
        degData = endAddAngle + rangeAngle
        isStart.value = false
        clearInterval(timer)
        emits('success')
      }
    }

    deg.value = degData
  }, 1000 / 60)
}

defineExpose({
  begin,
})
</script>
<style lang="scss" scoped>
.turntable_wp {
  width: 578.27rpx;
  height: 748.88rpx;
  position: relative;
}

.turntable_wp .turntable_pointer {
  position: absolute;
  width: 240rpx;
  height: 240rpx;
  top: 41%;
  left: 50%;
  margin: 0 0 0 -30rpx;
  z-index: 9;

  image {
    width: 240rpx;
    height: 240rpx;
    position: absolute;
    transform: rotate(-33deg);
  }
}

// .TsTurntable {
//   position: absolute;
//   top: 195rpx;
//   left: calc((750rpx - 470rpx) / 2);
//   z-index: 8;
// }

.turntableImg {
  width: 596rpx;
  height: 781rpx;
  position: absolute;
  // z-index: 8;
  top: 150rpx;
  left: calc((750rpx - 596rpx) / 2);
}
</style>