vue 实现抽奖转盘

转盘效果使用原生js 和css3动画实现
中奖概率由后端控制，后端返回中奖金额和中奖名称，前端处理指针显示的地方
本demo 实现的是 转盘转动指针不动的效果
本组件可直接复制代码至自己的项目，加上图片即可运行，图片已在备注中标出
lucky.vue

<template>
    <div class="container">
        <div class="lucky-wheel">
            <div class="lucky-title">
				<!--转盘标题图片定位在转盘上边-->
                <img src="../../assets/img/pc/jctitle_03.png" alt="">
            </div>
            <div class="wheel-main">
                <div class="wheel-pointer-box">
                     <div class="wheel-pointer wheelBefor"  @click="tcFun()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}">

                        <!-- 指针程呼吸状态，两张指针进行透明度切换，使用css3改变透明度当条件成立时-->
                         <img src="../../assets/img/pc/strat_befor.png" alt="">

                     </div>
                </div>
                <div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}">
                    <div class="prize-list">
                        <div class="prize-item" v-for="(item,index) in prize_list" :key="item.id">
                            <div class="prize-type">
                                {
  {item.name}}
                            </div>
                            <div class="prize-count" v-if="item.count">
                                {
  {item.count}}元
                            </div>
                            <div class="prize-pic">
                                <img :src="item.icon">
                            </div>
                        </div>
                        <div class="zplightBox">
                            <!-- 透明彩灯，使用css3改变透明度使其闪动 -->
                            <img src="../../assets/img/pc/zplight.png" alt="">
                        </div>



                    </div>
                </div>




            </div>
        </div>
        <!-- 中奖弹窗 -->

        <div class="toast" v-show="toast_control">
            <div class="toastTop">
                <img src="../../assets/img/pc/tctop.png" alt="">
            </div>
            <div class="toast-container">
                <div class="containerBox">
                    <div class="toast-title">

                        <p>恭喜获得 <span>{
  {prize_list[this.index].name}} 奖池</span></p>

                        <p><strong>现金{
  {number}}元</strong></p>
                    </div>
                    <div class="toast-btn">
                        <div class="toast-cancel"  @click="close_toast">确定</div>
                    </div>
                </div>

            </div>
        </div>
        <div class="toast-mask" v-show="toast_control"></div>
        <!--提示-->
        <el-dialog
                title="提示"
                :visible.sync="promptDialogVisible"
                class="promptBox"
                center>
            <p>将消耗5个字符开启奖池</p>
            <span slot="footer" class="dialog-footer">
            <el-button class="cancelBtn" @click="promptDialogVisible = false">取 消</el-button>
            <el-button class="submitBtn" @click="rotate_handle()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props:[‘wheelStartBol'],// 从父组建传 状态过来
  data() {
    return {
      easejoy_bean: 0, //金豆
      lottery_ticket: 0, //抽奖次数
      prize_list: [//奖品列表
        {