1. <template>
    2.     <view class="content">
    3.         <view class="main">
    4.             <image src="/static/turntable@2x.png" style="width: 100%;height: 100%;" class="turntable"
    5.             :style=" 'transform: rotate(' +deg+ 'deg);  transition-duration: ' +ss+'s ;'  "
    6.             ></image>
    7.             <image src="/static/this@2x.png" mode="scaleToFill" style="width: 157upx;height: 229upx;" class="center-img" @click="start"></image>
    8.             <image src="/static/img/tuoyuan@2x.png" style="width: 460upx;height: 75upx;" class="shadow"></image>
    9.         </view>
    12.         <view class="modal" :class="{show: modal}" @click="closeModal">
    13.             <view class="modal-body" :class="{show: modal}" @click.stop>
    14.                 <view class="f-cc flex-column" style="margin-top: 300upx;">
    15.                     <view class="txt1" v-if="showTitle">恭喜您获得</view>
    16.                     <view class="txt2">{{modalTxt}}</view>
    17.                 </view>
    18.                 <image  src="../../static/home_gb@2x.png" @click="closeModal" class="close" style="width: 48upx;height: 48upx;"></image>
    19.             </view>
    20.         </view>
    22.     </view>
    23. </template>
    25. <script>
    26.     let luck = false // 锁
    27.     // 奖品池
    28.     let arr = [
    29.         {deg:0, showTitle: true, msg: '200金币',id: '1' },
    30.         {deg:45, showTitle: false, msg: '谢谢参与',id: '2'},
    31.         {deg:90, showTitle: true, msg: '500金币',id: '3'},
    32.         {deg:135, showTitle: false, msg: '谢谢参与',id: '4'},
    33.         {deg:180, showTitle: true, msg: '1000金币',id: '5'},
    34.         {deg:225, showTitle: false, msg: '再来一次',id: '6'},
    35.         {deg:270, showTitle: true, msg: '50金币',id: '7'},
    36.         {deg:315, showTitle: false, msg: '再来一次',id: '8'}
    37.     ]
    39.     export default {
    40.         data() {
    41.             return {
    42.                 showTitle: true,
    43.                 modal: false, // 展示modal模块
    44.                 modalTxt: '', // 奖品
    45.                 ss: 5, // 旋转所用时间
    46.                 deg: 0 // 旋转角度
    47.             };
    48.         },
    49.         onShow() {
    50.             luck = false
    51.         },
    52.         methods:{
    54.             play(num) {
    55.                 this.deg =  360 * 3 + arr[num].deg + 20
    56.                 setTimeout(()=> {
    57.                     this.showResult(arr[num])
    58.                 }, this.ss * 1000);
    59.             },
    61.             start() {
    62.                 if(luck) {
    63.                     return
    64.                 }
    65.                 luck = true // 关锁
    66.                 let num = Math.floor(Math.random() * arr.length)
    67.                 this.play(num)
    68.             },
    71.             //　展示结果
    72.             showResult(data) {
    73.                 this.modal= true
    74.                 this.showTitle = data.showTitle
    75.                 this.modalTxt = data.msg
    76.             },
    78.             //　关闭
    79.             closeModal() {
    80.                 luck = false
    81.                 let s = this.ss
    82.                 this.modal = false
    83.                 this.ss = 0
    84.                 this.deg = 0
    85.                 setTimeout(() => {
    86.                     this.ss = s
    87.                 }, 100)
    88.             }
    89.         }
    90.     }
    91. </script>
    93. <style lang="scss" scoped>
    94.     page {
    95.         position: relative;
    96.         width: 100%;
    97.         min-height: 100%;
    98.     }
    99.     .content {
    100.         box-sizing: border-box;
    101.         width: 100%;
    102.         height: 100vh;
    103.         background-size: cover;
    104.         overflow: hidden;
    105.         padding-bottom: 90upx;
    106.         background-color: pink;
    108.         .main {
    109.             position: relative;
    110.             width: 624upx;
    111.             height: 624upx;
    112.             margin: 316upx auto 39upx;
    113.             .turntable {
    114.                 position: absolute;
    115.                 top: 0;
    116.                 right: 0;
    117.                 left: 0;
    118.                 bottom: 0;
    119.                 margin: auto;
    120.                 // animation: rotateArc 5s cubic-bezier(0.61, 0.08, 0.35, 0.83);
    121.                 transform: rotate(0deg);
    122.                 z-index: 12;
    123.                 transition-timing-function: ease;
    124.                 transition-property: all;
    126.                 // transition: all 10s ease;
    127.             }
    128.             .center-img {
    129.                 position: absolute;
    130.                 top: 181upx;
    131.                 right: 0;
    132.                 left: 0;
    133.                 margin: auto;
    134.                 z-index: 99;
    135.             }
    136.             .shadow {
    137.                 position: absolute;
    138.                 bottom: -30upx;
    139.                 left: 0;
    140.                 right: 0;
    141.                 margin: auto;
    142.                 z-index: 1;
    143.             }
    144.         }
    145.         .h1 {
    146.             font-size: 32upx;
    147.             text-align: center;
    148.             color: #fff;
    149.         }
    150.         .h2 {
    151.             width: 450upx;
    152.             font-size: 22upx;
    153.             color: #fff;
    154.             margin-bottom: 22upx;
    155.             margin: auto;
    156.         }
    157.         .modal.show {
    158.             display: block;
    159.         }
    160.         .modal {
    161.             position: fixed;
    162.             top: 0;
    163.             right: 0;
    164.             bottom: 0;
    165.             left: 0;
    166.             background-color: rgba(0,0,0, .4);
    167.             z-index: 100;
    168.             display: none;
    169.             .modal-body.show {
    170.                 animation: scaleFrames .4s cubic-bezier(.5,.49,.57,1.41) forwards;
    171.             }
    172.             .modal-body {
    173.                 position: absolute;
    174.                 top: 0;
    175.                 right: 0;
    176.                 bottom: 0;
    177.                 left: 0;
    178.                 margin: auto;
    179.                 width: 544upx;
    180.                 height: 570upx;
    181.                 background-size: 100% 100%;
    182.                 background-image: url('../../static/zhuanpan_tanchaung@2x.png');
    183.                 padding: 1upx;
    184.                 transform: scale(0);
    185.                 .txt1 {
    186.                     font-size:60upx;
    187.                     font-family:Source Han Sans CN;
    188.                     font-weight:500;
    189.                     color:rgba(255,255,255,1);
    190.                     line-height:104upx;
    191.                     text-shadow:0upx -5upx 10upx rgba(253,49,58,0.5);
    192.                     text-align: center;
    193.                 }
    194.                 .txt2 {
    195.                     font-size:60upx;
    196.                     font-family:Source Han Sans CN;
    197.                     font-weight:500;
    198.                     color:rgba(255,234,58,1);
    199.                     line-height:121upx;
    200.                     text-align: center;
    201.                 }
    202.                 .close {
    203.                     position: absolute;
    204.                     left: 0;
    205.                     right: 0;
    206.                     bottom: -68upx;
    207.                     margin: auto;
    208.                 }
    209.             }
    210.         }
    211.     }
    214.     @keyframes scaleFrames{
    215.         from{
    216.             transform: scale(0);
    217.         }
    218.         to{
    219.             transform: scale(1);
    220.         }
    221.     }
    223.     @keyframes rotateArc{
    224.         from{
    225.             transform: rotate(0deg);
    226.         }
    227.         to{
    228.             transform: rotate(3600deg);
    229.         }
    230.     }
    231. </style>