feat(custom): 转盘调整

src/pages/turntable/index/index.scss

@@ -290,12 +290,11 @@ body {
                 width: 530px;
                 height: 530px;
                 border-radius: 50%;
-                background: url('../static/turntable_bg_1.png') no-repeat 100% 100%;
+                // background: url('../../../static/wu.png') no-repeat;
-                background-size: contain;
+                // background-size: contain;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%) rotate(0deg);
-                border: 1px solid #625933;
 
                 .prize {
                     position: absolute;
@@ -319,18 +318,18 @@ body {
                             transform: rotate(70deg);
                         }
 
+                        &:nth-child(2) {
+                            top: -10px;
+                            left: -10px;
+                            transform: rotate(-60deg);
+                        }
+
                         &:nth-child(3) {
                             top: 10px;
                             left: 10px;
                             transform: rotate(190deg);
                         }
 
-                        &:nth-child(5) {
-                            top: 10px;
-                            left: -12px;
-                            transform: rotate(295deg);
-                        }
-
                         .img {
                             display: block;
                             width: 100px;
@@ -380,7 +379,7 @@ body {
     }
 
     .countdown-box {
-        margin-top: 50px;
+        margin-top: 30px;
         background-image: url('../static/countdown_bg.png');
         background-size: 100% 100%;
         width: 750px;
@@ -398,22 +397,24 @@ body {
 
     .footer-box {
         width: 100%;
-        margin-top: 10%;
+        margin-top: 5%;
         display: flex;
+        flex-wrap: wrap;
         justify-content: space-evenly;
 
         .item {
             background-size: 100% 100%;
-            width: 194px;
+            width: 300px;
-            height: 73px;
+            height: 100px;
             display: flex;
             align-items: center;
+            margin-bottom: 20px;
 
             .icon {
                 background-image: url('../static/dz.png');
                 background-size: 100% 100%;
-                width: 55px;
+                width: 70px;
-                height: 56px;
+                height: 70px;
                 margin: auto 15px;
             }
 
@@ -422,7 +423,7 @@ body {
                 -webkit-background-clip: text;
                 -webkit-text-stroke: 2px #000;
                 color: transparent;
-                font-size: 33px;
+                font-size: 50px;
                 font-weight: bold;
             }
         }
@@ -463,7 +464,7 @@ body {
             background-size: 100% 100%;
             // width: 700px;
             height: 300px;
-            animation: lottie .3s linear forwards;
+            animation: lottie 0.3s linear forwards;
             text-align: center;
             line-height: 310px;
             overflow: hidden;

src/pages/turntable/index/index.vue

@@ -6,6 +6,10 @@ import * as dayjs from 'dayjs'
 import dan from '../static/dan.png'
 import he from '../static/he.png'
 import shuang from '../static/shuang.png'
+import kd from '../../../static/kd.png'
+import kh from '../../../static/kh.png'
+import ks from '../../../static/ks.png'
+import wu from '../../../static/wu.png'
 import wzj from '../static/wzj.json'
 import zj from '../static/zj.json'
 import './index.scss'
@@ -160,7 +164,7 @@ const handelBetClick = (index: number) => {
 const light = ref({
     container: null,
     num: 8,
-    itemNum: 6,
+    itemNum: 3,
 })
 
 const turntable_light = ref()
@@ -173,33 +177,21 @@ const turntable_list = ref([
         url: he,
         name: '和',
         isActive: false,
-    },
+        activeUrl: kh,
-    {
-        id: 5,
-        url: null,
-        isActive: false,
-    },
-    {
-        id: 2,
-        name: '双',
-        url: shuang,
-        isActive: false,
-    },
-    {
-        id: 4,
-        url: null,
-        isActive: false,
     },
     {
         id: 1,
         url: dan,
         name: '单',
         isActive: false,
+        activeUrl: kd,
     },
     {
-        id: 6,
+        id: 2,
-        url: null,
+        name: '双',
+        url: shuang,
         isActive: false,
+        activeUrl: ks,
     },
 ])
 
@@ -215,11 +207,14 @@ const getBetList = () => {
     })
 }
 
-const handelDzClick = (index: number) => {
+const bgUrl = ref(wu)
-    turntable_list.value.forEach((item) => {
+
-        item.isActive = false
+const handelDzClick = (item) => {
+    turntable_list.value.forEach((itm) => {
+        itm.isActive = false
     })
-    turntable_list.value[index].isActive = true
+    item.isActive = true
+    bgUrl.value = item.activeUrl
 }
 
 const init = () => {
@@ -242,6 +237,13 @@ onMounted(() => {
 })
 
 const startRun = (name: string) => {
+    if (!name)
+        return Taro.showToast({
+            title: '未知开奖结果',
+            mask: true,
+            icon: 'none',
+            duration: 1000,
+        })
     isRunning.value = true
 
     turntable_list.value.forEach((item) => {
@@ -254,19 +256,19 @@ const startRun = (name: string) => {
 
     switch (name) {
         case '单':
-            kj_num = 6
+            kj_num = 1
             break
         case '双':
             kj_num = 2
             break
         case '和':
-            kj_num = 4
+            kj_num = 3
             break
     }
 
     let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)
 
-    let rotate = rotateItemDeg + 5 * 360
+    let rotate = rotateItemDeg + 5 * 360 - 70
 
     const rotateSpeed = Number((rotateItemDeg / 360 + 5).toFixed(2))
 
@@ -278,6 +280,7 @@ const startRun = (name: string) => {
 
     setTimeout(() => {
         isRunning.value = false
+        bgUrl.value = wu
         getBetJl()
         setTimeout(() => {
             getList()
@@ -451,16 +454,23 @@ onBeforeUnmount(() => {
 
                 <view class="turntable-wrap" id="turntable-wrap">
                     <view class="light" id="turntable_light"></view>
-                    <view class="turntable" id="turntable">
+                    <view
+                        :style="{
+                            background: `url(${bgUrl}) no-repeat`,
+                            backgroundSize: 'contain',
+                        }"
+                        class="turntable"
+                        id="turntable"
+                    >
                         <view class="prize" v-if="turntable_list && turntable_list.length">
                             <view
                                 class="item"
                                 v-for="(item, index) in turntable_list"
                                 :key="index"
-                                @click="handelDzClick(index)"
+                                @click="handelDzClick(item)"
                             >
                                 <image class="img" :src="item.url" />
-                                <view v-if="item.url" :class="item.isActive ? 'icon' : ''"></view>
+                                <!-- <view v-if="item.url" :class="item.isActive ? 'icon' : ''"></view> -->
                             </view>
                         </view>
                     </view>

src/pages/turntable/records/index.vue

@@ -3,9 +3,8 @@
         <template v-if="typeNum === 1">
             <view class="card" v-for="(item,index) in list as any[]" :key="index">
                 <view>
-                    <view>第{{ item.Periods }}期开奖</view>
                     <view>
-                        开奖数字:
+                        第{{ item.Periods }}期开奖:
                         <text
                             :style="{
                                 color: numColor(item.Name),