vue2-大转盘抽奖

最新推荐文章于 2025-07-05 14:49:21 发布

原创

最新推荐文章于 2025-07-05 14:49:21 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#数学建模 #java #开发语言

自带旋转动效的抽奖大转盘

开箱即用的大转盘抽奖

<template>
  <div>
    <div class="turntable-luck-wrap">
      <div class="luck-draw-wrap">
        <div class="luck-draw-box">
          <div class="wheel-pointer" @click="drawLuck"></div>
          <div class="luck-roate" :style="rotateStyle()">
            <div v-if="prizeList" class="prize-list">
              <div
                v-for="(item, index) in prizeList"
                :key="index"
                class="prize-item"
                :style="item.style"
              >
                <div class="prize-type">{
  
  { item.rewardName }}</div>
                <div class="prize-pic">
                  <!-- <img :src="item.rewardIconUrl" /> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="residue-count">
        剩余抽奖次数:
        <span>{
  
  { countNum }}</span>
        次
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { obnActivityDraw } from '@/api/address';
import { getQueryString } from '@ziroom/manticore-utils';

@Component({ name: 'Turntable', components: {} })
export default class Turntable extends Vue {
  @Prop({ type: N