feat(custom): 澳拾改版

src/pages/turntable/index/index.scss

@@ -3,7 +3,7 @@ body {
 }
 
 .page {
-    background-image: url('../static/bg.png');
+    background-image: url('../../../static/bg.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
     height: 100dvh;
@@ -43,12 +43,12 @@ body {
             }
 
             .tz-btn {
-                background-image: url('../static/tz_btn.png');
+                background-image: url('../../../static/tz_btn.png');
                 transform-origin: center center;
             }
 
             .kj-btn {
-                background-image: url('../static/kj_btn.png');
+                background-image: url('../../../static/kj_btn.png');
                 transform-origin: center center;
                 margin-left: 10px;
             }
@@ -73,7 +73,7 @@ body {
             height: 120px;
 
             .bg {
-                background-image: url('../static/avatar_border.png');
+                background-image: url('../../../static/avatar_border.png');
                 background-size: 100% 100%;
                 border-radius: 50%;
                 width: 120px;
@@ -122,7 +122,7 @@ body {
             align-items: center;
 
             .dz-bg {
-                background-image: url('../static/dz.png');
+                background-image: url('../../../static/dz.png');
                 background-size: 100% 100%;
                 width: 55px;
                 height: 55px;
@@ -141,7 +141,7 @@ body {
             right: -8%;
             top: 45%;
             transform: translateY(-50%);
-            background-image: url('../static/rule_btn.png');
+            background-image: url('../../../static/rule_btn.png');
             background-size: 100% 100%;
             width: 173px;
             height: 176px;
@@ -171,7 +171,7 @@ body {
             margin-top: 10px;
 
             .item {
-                background-image: url('../static/num.png');
+                background-image: url('../../../static/num.png');
                 background-size: 100% 100%;
                 width: 72px;
                 height: 72px;
@@ -205,7 +205,7 @@ body {
             left: 100px;
             width: 139px;
             height: 171px;
-            background-image: url('../static/1-1.png');
+            background-image: url('../../../static/1-1.png');
             background-size: 100% 100%;
         }
 
@@ -213,7 +213,7 @@ body {
             top: 100px;
             width: 205px;
             height: 251px;
-            background-image: url('../static/1-2.png');
+            background-image: url('../../../static/1-2.png');
             background-size: 100% 100%;
         }
 
@@ -221,7 +221,7 @@ body {
             right: 50px;
             width: 205px;
             height: 251px;
-            background-image: url('../static/2-2.png');
+            background-image: url('../../../static/2-2.png');
             background-size: 100% 100%;
         }
 
@@ -230,12 +230,12 @@ body {
             right: 0;
             width: 140px;
             height: 171px;
-            background-image: url('../static/2-1.png');
+            background-image: url('../../../static/2-1.png');
             background-size: 100% 100%;
         }
 
         .turntable-wrap {
-            background-image: url('../static/turntable_bg.png');
+            background-image: url('../../../static/turntable_bg.png');
             background-size: 100% 100%;
             width: 650px;
             height: 650px;
@@ -339,7 +339,7 @@ body {
 
                         .icon {
                             position: absolute;
-                            background-image: url('../static/dz.png');
+                            background-image: url('../../../static/dz.png');
                             background-size: 100% 100%;
                             width: 50px;
                             height: 50px;
@@ -353,7 +353,7 @@ body {
 
         .bet-btn {
             position: absolute;
-            background-image: url('../static/bet_btn.png');
+            background-image: url('../../../static/bet_btn.png');
             background-size: 100% 100%;
             width: 150px;
             height: 150px;
@@ -368,7 +368,7 @@ body {
 
         .pointer {
             position: absolute;
-            background-image: url('../static/pointer.png');
+            background-image: url('../../../static/pointer.png');
             background-size: 100% 100%;
             width: 47px;
             height: 111px;
@@ -380,7 +380,7 @@ body {
 
     .countdown-box {
         margin-top: 30px;
-        background-image: url('../static/countdown_bg.png');
+        background-image: url('../../../static/countdown_bg.png');
         background-size: 100% 100%;
         width: 750px;
         height: 96px;
@@ -411,7 +411,7 @@ body {
             margin-bottom: 20px;
 
             .icon {
-                background-image: url('../static/dz.png');
+                background-image: url('../../../static/dz.png');
                 background-size: 100% 100%;
                 width: 70px;
                 height: 70px;
@@ -429,11 +429,11 @@ body {
         }
 
         .item-active {
-            background-image: url('../static/dz_active.png');
+            background-image: url('../../../static/dz_active.png');
         }
 
         .item-no-active {
-            background-image: url('../static/dz_opt.png');
+            background-image: url('../../../static/dz_opt.png');
         }
     }
 
@@ -460,7 +460,7 @@ body {
             left: 50%;
             bottom: 5%;
             transform: translateX(-50%);
-            background-image: url('../static/img_0.png');
+            background-image: url('../../../static/img_0.png');
             background-size: 100% 100%;
             // width: 700px;
             height: 300px;

src/pages/turntable/index/index.vue

@@ -3,18 +3,19 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 import Taro from '@tarojs/taro'
 import Lottie from 'lottie-web'
 import * as dayjs from 'dayjs'
-import dan from '../static/dan.png'
-import he from '../static/he.png'
-import shuang from '../static/shuang.png'
+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 wzj from '../../../static/wzj.json'
+import zj from '../../../static/zj.json'
 import './index.scss'
 
 Taro.useDidShow(() => {
+    // startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3', true)
     getUserInfo()
     getBetList()
     getList()
@@ -67,6 +68,21 @@ const bet_index = ref<number | null>(null)
 
 const timeStr = ref('')
 
+const innerAudioContext = Taro.createInnerAudioContext()
+
+const startMusic = (path: string, loop: boolean = false) => {
+    // const innerAudioContext = Taro.createInnerAudioContext()
+    innerAudioContext.autoplay = true
+    innerAudioContext.src = path
+    innerAudioContext.loop = loop
+    innerAudioContext.onPlay(() => {
+        console.log('开始播放')
+    })
+    innerAudioContext.onError(() => {
+        console.log('播放失败')
+    })
+}
+
 const initWs = () => {
     ws.value = new WebSocket(
         `${process.env.TARO_APP_TURNTABLE_WS}?uid=${Taro.getStorageSync('uid')}&game_id=${
@@ -129,7 +145,7 @@ const initWs = () => {
                 duration: 1000,
             })
             initWs()
-        }, 3000)
+        }, 5000)
     }
 }
 
@@ -246,6 +262,10 @@ const startRun = (name: string) => {
         })
     isRunning.value = true
 
+    innerAudioContext.stop()
+
+    startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/1.mp3', false)
+
     turntable_list.value.forEach((item) => {
         item.isActive = false
     })
@@ -274,6 +294,8 @@ const startRun = (name: string) => {
 
     turntable.value.removeAttribute('style')
     setTimeout(() => {
+        turntable.value.style.background = `url(${bgUrl.value}) no-repeat`
+        turntable.value.style.backgroundSize = 'contain'
         turntable.value.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`
         turntable.value.style.transition = `transform ${rotateSpeed}s ease-out`
     }, 10)