Vue 幸運大轉盤

轉盤抽獎主要有兩種，指針轉動和轉盤轉動，我的以爲轉盤轉動比較好看點，指針轉動看着頭暈，轉盤轉動時指針是在轉盤的中間位置，這裏要用到css的transform屬性和transition屬性，這兩個由於不經常使用最好是上網查查，用法和功能。

  在html部分

　　

<div id="wheel_surf">
      <div class="wheel_surf_title">幸運大轉盤</div>
       <div class="lucky-wheel">
             <div class="wheel-main">
                  <div class="wheel-pointer-box">
                         <div class="wheel-pointer" @click="rotate_handle()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></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="index">
                                       <div class="prize-pic" v-if="item.icon">
                                               <img :src="item.icon" />
                                        </div>
                                        <div class="prize-type">
{{item.name}}</div>
                                     </div>
                               </div>
                         </div>
                    </div>
                </div>
                <div v-transfer-dom>
                    <x-dialog v-model="showHideOnBlur" class="dialog-demo wheel_dialog" hide-on-blur>
                        <div class="img-box">
                            <div v-show="val == 7" class="noactive">
                                <p>謝謝參與！祝您下次好運</p>
                            </div>
                            <div v-show="val !== 7">
                                <p>恭喜你</p>
                                <img :src="imgActive" />
                                <p>{{item.rewardDesc}}</p> // 獲獎返回值
                            </div>
                        </div>
                        <div @click="showHideOnBlur=false">
                            <span class="vux-close"></span>
                        </div>
                    </x-dialog>
                </div>
            </div>

　　獎項數據

                    這裏的第一個style部分是指針的位置，距離轉動的初始值，是固定不變的，第二個style是轉盤的位置transform:rotate_angle是轉盤轉動的角度，transition:rotate_transition是轉動的時候它的轉動速度，方向，等等屬性。rotate_handle()是點擊開始轉動的事件。prize_list是轉盤上面的獎品圖片名字列表。

　　data:

prize_list: [

        {

                icon: require("../../../../static/WX/img/wheel_big_5.png"), // 獎品圖片

                count: 5, // 獎品級別

                name: "五等獎", // 獎品名稱

                isPrize: 1 // 該獎項是否爲獎品

             },

            {

                icon: require("../../../../static/WX/img/wheel_big_2.png"),

                count: 2,

                name: "二等獎",

                isPrize: 1

            },

           {

                icon: require("../../../../static/WX/img/wheel_big_4.png"),

                count: 4,

                name: "四等獎",

                isPrize: 1

            },

           {

                icon: require("../../../../static/WX/img/wheel_big_1.png"),

                count: 1,

                name: "一等獎",

                isPrize: 1

            },

           {

                icon: require("../../../../static/WX/img/wheel_big_6.png"),

                count: 6,

                name: "六等獎",

                isPrize: 1

            },

           {

                count: 7,

                name: "謝謝參與",

                isPrize: 0

            },

           {

                icon: require("../../../../static/WX/img/wheel_big_3.png"),

                count: 3,

                name: "三等獎",

                isPrize: 1

            }

       ], //獎品列表

        hasPrize: false, //是否中獎

        start_rotating_degree: 0, //初始旋轉角度

        rotate_angle: 0, //將要旋轉的角度

        start_rotating_degree_pointer: 0, //指針初始旋轉角度

        rotate_angle_pointer: 0, //指針將要旋轉的度數

        rotate_transition: "transform 6s ease-in-out", //初始化選中的過分屬性控制

        rotate_transition_pointer: "transform 12s ease-in-out", //初始化指針過分屬性控制

        click_flag: true, //是否能夠旋轉抽獎

        item: {}

　　methods:

　　

 rotating(index) {

            if (!this.click_flag) return;

            var type = 0; // 默認爲 0  轉盤轉動 1 箭頭和轉盤都轉動(暫且遺留)

            var during_time = 5; // 默認爲1s

            var random = Math.floor(Math.random() * 7);

            var result_index

            result_index = this.val

            if (this.val == 1) { // 這裏多餘能夠不寫

                result_index = 3

            } else if (this.val == 2) {

                result_index = 1

            } else if (this.val == 3) {

                result_index = 6

            } else if (this.val == 4) {

                result_index = 2

            } else if (this.val == 5) {

                result_index = 0

            } else if (this.val == 6) {

                result_index = 4

            } else if (this.val == 7) {

                result_index = 5

            }

            this.valindex = result_index // // 最終要旋轉到哪一塊

            var result_angle = [18, 324, 275, 220, 175, 120, 64]; //最終會旋轉到下標的位置所須要的度數，從指針初始位置開始算度數，順時針或逆時針

            var rand_circle = 6; // 附加多轉幾圈，2-3

            this.click_flag = false; // 旋轉結束前，不容許再次觸發

            if (type == 0) {

                // 轉動盤子

                var rotate_angle =this.start_rotating_degree + rand_circle * 360 +result_angle[result_index] - this.start_rotating_degree % 360;

                this.start_rotating_degree = rotate_angle;

                this.rotate_angle = "rotate(" + rotate_angle + "deg)";

                var that = this;

                // 旋轉結束後，容許再次觸發

                setTimeout(function() {

                    that.click_flag = true;

                    that.game_over();

                }, during_time * 1000 + 1500); // 延時，保證轉盤轉完

            } else {

            //

            }

        }

 js部分主要是轉動中止的角度rotate_angle ，第一次是從0開始到一個角度，在這個角度的基礎上到下一個角度，因此會減去上一個角度對圓的取餘，這裏面this.val是表明着獎品等級，result_index是對應的旋轉到的角度，由於旋轉是順時針，因此角度的選擇要逆時針的選取。轉完調用that.game_over();函數來獲取獎品count等級。

        下面方法爲處理獎品數據   

　　旋轉停下來時調用game_over()函數

 rotate_handle() {

            api.activityget(param).then(res => {

                if (res.status == 200 || res.status == '200') {

                    this.item = res.data

                    this.val = res.data.rewardLevel // 獲取獲獎等級

                    this.rotating(); //開始旋轉

                 } else {

                    this.$vux.alert.show({

                        title: '提示',

                        content: res.message,

                    })

                }

            })

        }

下面是css部分，根據你的獎品等級和數量自動調整距離左邊和頂部距離和轉動角度。

<style scoped>

    .wheel-main {

      display: flex;

      align-items: center;

      justify-content: center;

      position: relative;

    }

    .wheel-bg {

      width: 8rem;

      height: 8rem;

      background: url("../../../static/img/draw_wheel.png") no-repeat center top;

      background-size: 100%;

      color: #fff;

      font-weight: 500;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-content: center;

      transition: transform 3s ease;

    }

    .wheel-pointer-box {

      position: absolute;

      top:  50%;

      left: 50%;

      z-index: 100;

      transform: translate(-50%, -60%);

    }

    .wheel-pointer {

      width: 1.5rem;

      height:2.2rem;

      background: url("../../../static/img/btn_start_n.png") no-repeat ;

      background-size: 100%;

      transform-origin: center 60%;

    }

    .wheel-bg div {

      text-align: center;

    }

    .prize-list {

      width: 100%;

      height: 100%;

      position: relative;

    }

    .prize-list .prize-item {

      position: absolute;

      top: 0;

      left: 0;

      z-index: 2;

    }

    .prize-list .prize-item:first-child {

      top: .95rem;

      left: 2.9rem;

      transform: rotate(-20deg);

    }

    .prize-list .prize-item:nth-child(2) {

      top: 1.4rem;

      left: 5rem;

      transform: rotate(40deg);

    }

    .prize-list .prize-item:nth-child(3) {

      top: 3.2rem;

      left: 5.95rem;

      transform: rotate(-270deg);

    }

    .prize-list .prize-item:nth-child(4) {

      top: 5.08rem;

      left: 5.1rem;

      transform: rotate(-225deg);

    }

    .prize-list .prize-item:nth-child(5) {

      top: 5.8rem;

      left: 3.2rem;

      transform: rotate(-170deg);

    }

    .prize-list .prize-item:nth-child(6) {

      top: 4.7rem;

      left: 1.5rem;

      transform: rotate(-115deg);

    }

    .prize-list .prize-item:nth-child(6) .prize-type{

      font-size: .3rem;

    }

    .prize-list .prize-item:nth-child(7) {

      top: 2.4rem;

      left: 1.2rem;

      transform: rotate(-69deg);

    }

    .prize-list .prize-item:nth-child(7) img{

      width: .7rem;

    }

    .prize-list .prize-item:nth-child(8) {

      top: 1.1rem;

      left: 2.6rem;

      transform: rotate(-20deg);

    }

    .prize-pic img {

      width: .8rem;

    }

    .prize-count {

      font-size: .4rem;

    }

    .prize-type {

      font-size: 10px;

    }

</style>