feat(custom): 澳拾改版

.env.development

@@ -8,6 +8,8 @@ TARO_APP_WS = 'wss://game.wanzhuanyongcheng.cn/dice/home'
 
 TARO_APP_HOME = 'https://test.wanzhuanyongcheng.cn/app/game'
 
+# 气球
+
 TARO_APP_BALLOON_WS = 'wss://balloon.wanzhuanyongcheng.cn/balloon/home'
 
 TARO_APP_BALLOON_API = 'https://balloon.wanzhuanyongcheng.cn/balloon'
@@ -17,3 +19,6 @@ TARO_APP_BALLOON_API = 'https://balloon.wanzhuanyongcheng.cn/balloon'
 TARO_APP_TURNTABLE_WS = 'wss://game2.wanzhuanyongcheng.cn/turntable/home'
 
 TARO_APP_TURNTABLE_API = 'https://game2.wanzhuanyongcheng.cn/turntable'
+
+# 澳拾
+TARO_APP_AOSHI_API = 'https://game3.wanzhuanyongcheng.cn'

src/pages/aoshi/index/index copy.vue

@@ -0,0 +1,287 @@
+<template>
+    <view class="container">
+        <view class="header">
+            <view class="left">公告：开奖结果同步傲拾</view>
+            <view class="right">
+                <view class="btn" @click="toPage(2)">投注记录</view>
+                <view class="btn" @click="toPage(1)">开奖记录</view>
+            </view>
+        </view>
+        <view class="user-info">
+            <view class="left">
+                <view class="avatar">
+                    <image :src="userInfo.avatarUrl || require('../../../static/tx.png')" />
+                </view>
+                <view class="info">
+                    <view class="name">{{ userInfo.nickName || '用户' }}</view>
+                    <!-- <view class="level">积分: {{ userInfo.integral || 0 }}</view> -->
+                    <view class="level">积分: {{ `${jfStr}w` || 0 }}</view>
+                </view>
+            </view>
+            <view class="right">
+                <view class="image"></view>
+                <!-- <text>{{ dzStr || 0 }}w</text> -->
+                <text>{{ userInfo.pulse || 0 }}</text>
+            </view>
+            <!-- <view class="game_btn" @click="handleRule">游戏规则</view> -->
+        </view>
+        <view class="kj-box">
+            <view class="title">
+                第
+                <text class="num">{{ kjData.nowPeriods || 0 }}</text>
+                期已开奖:
+            </view>
+            <view class="title-sub">
+                <view class="item" v-for="(item, index) in kjNums" :key="index">
+                    {{ item }}
+                </view>
+            </view>
+        </view>
+        <view class="turntable">
+            <view class="num-box">
+                <view
+                    class="item"
+                    v-for="(item, index) in nums"
+                    :key="index"
+                    :style="{
+                        color: item.active ? '#ff0000' : '#833E16',
+                        backgroundColor: item.optActive ? '#FBEDBC' : '#ffeeee',
+                    }"
+                    @click="handleClick(item)"
+                >
+                    <text>{{ item.value }}</text>
+                </view>
+            </view>
+            <view class="bet-btn" @click="handleBet">
+                <view>点击</view>
+                <view>投注</view>
+            </view>
+        </view>
+        <view class="countdown">
+            <text v-if="isKj">正在开奖中，已停止投注!!!</text>
+            <text v-else>
+                {{ Number(kjData.nowPeriods) + 1 || 0 }}期开奖还剩: {{ timeStr || '0分0秒' }}
+            </text>
+        </view>
+        <view class="bet-opt">
+            <view
+                class="item"
+                v-for="(item, index) in betOpts"
+                :key="index"
+                :style="{
+                    backgroundColor: item.isActive ? '#FBDD36' : '#fbedbc',
+                }"
+                @click="handleBetOpt(item)"
+            >
+                {{ item.value }}豆子
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { get_turntable_list, get_user_info, turntable_bet } from '@/api'
+import Taro from '@tarojs/taro'
+import * as dayjs from 'dayjs'
+
+const userInfo = ref<any>({})
+
+interface NumsType {
+    ID: number
+    name: string
+    optActive?: boolean
+    active?: boolean
+    value?: string
+    list?: number[]
+}
+
+const nums = ref<NumsType[]>([])
+
+const kjNums = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+
+const betOpts = ref([
+    {
+        isActive: false,
+        value: 100,
+    },
+    {
+        isActive: false,
+        value: 500,
+    },
+    {
+        isActive: false,
+        value: 1000,
+    },
+    {
+        isActive: false,
+        value: 2000,
+    },
+    {
+        isActive: false,
+        value: 3000,
+    },
+    {
+        isActive: false,
+        value: 5000,
+    },
+])
+
+Taro.useDidShow(() => {
+    get_info()
+    get_list()
+})
+
+const kjData = ref<any>({})
+
+const timeId = ref<NodeJS.Timeout>()
+
+const get_list = async () => {
+    const res = await get_turntable_list()
+    kjData.value = res.data || {}
+    kjNums.value = kjData.value.nowDraw.split(',').map((item) => Number(item))
+
+    nums.value = kjData.value.list.map((item) => ({
+        optActive: false,
+        active: false,
+        value: item.name,
+        ID: item.ID,
+        list: item.list.split(/[,-.]/).map((item: string) => Number(item)),
+    }))
+
+    nums.value.forEach((item) => {
+        item.list?.forEach((itm) => {
+            if (itm === Number(kjData.value.drawNumber)) {
+                item.active = true
+            }
+        })
+    })
+    timeId.value = setInterval(() => {
+        countdownFn()
+    }, 1000)
+}
+
+const timeStr = ref('')
+
+const isKj = ref(false)
+
+const offColorChange = ref(false)
+
+const time_i = ref<NodeJS.Timeout>()
+
+const countdownFn = () => {
+    const currentTimestamp = dayjs().valueOf()
+    const timeLeft = kjData.value.drawTime * 1000 - currentTimestamp
+    timeStr.value = dayjs(timeLeft).format('mm分ss秒')
+
+    const m = Number(dayjs(timeLeft).format('mm'))
+    const s = Number(dayjs(timeLeft).format('ss'))
+
+    isKj.value = m === 0 && s < 40 ? true : false
+
+    if (m === 0 && s < 40 && !offColorChange.value) {
+        startColorFn()
+    }
+
+    if (m === 0 && s === 0) {
+        clearInterval(timeId.value)
+        clearInterval(time_i.value)
+        offColorChange.value = true
+        setTimeout(() => {
+            get_list()
+            get_info()
+        }, 3000)
+    }
+}
+
+const startColorFn = () => {
+    nums.value.forEach((item) => {
+        item.active = false
+    })
+
+    // 随机选中一个
+    const randomNum = Math.floor(Math.random() * nums.value.length)
+    nums.value[randomNum].active = true
+}
+const dzStr = ref('')
+const jfStr = ref('')
+
+const get_info = async () => {
+    const res = await get_user_info(Taro.getStorageSync('uid'))
+
+    userInfo.value = res.data.data || {}
+
+    dzStr.value = String((userInfo.value.pulse / 10000).toFixed(2))
+    jfStr.value = String((userInfo.value.integral / 10000).toFixed(2))
+}
+
+const handleClick = (itemOpt) => {
+    nums.value.forEach((item) => {
+        item.optActive = false
+    })
+    itemOpt.optActive = true
+}
+
+const handleBetOpt = (item) => {
+    betOpts.value.forEach((item) => {
+        item.isActive = false
+    })
+    item.isActive = true
+}
+
+const handleBet = () => {
+    const newNums = nums.value.filter((item) => item.optActive === true)
+    if (newNums.length === 0)
+        return Taro.showToast({
+            title: '请选择投注项',
+            icon: 'none',
+        })
+    const item = betOpts.value.filter((item) => item.isActive === true)
+    if (item.length === 0)
+        return Taro.showToast({
+            title: '请选择投注豆子',
+            icon: 'none',
+        })
+    Taro.showModal({
+        title: '确认投注吗？',
+        content: `投注豆子：${item[0].value}`,
+        success: async (res) => {
+            if (res.confirm) {
+                const game_info = Taro.getStorageSync('gameItem')
+                const uid = Taro.getStorageSync('uid')
+                const res = await turntable_bet({
+                    uid: uid,
+                    aid: nums.value.filter((item) => item.optActive === true)[0].ID,
+                    number: item[0].value,
+                    game_id: game_info.ID,
+                })
+                Taro.showToast({
+                    title: res.msg,
+                    icon: 'none',
+                })
+                setTimeout(() => {
+                    get_info()
+                }, 2000)
+            }
+        },
+    })
+}
+
+// const handleRule = () => {
+//   Taro.showToast({
+//     title: '暂无规则',
+//     icon: 'none',
+//   })
+// }
+
+// 前往开奖和投注记录
+const toPage = (type: number) => {
+    Taro.navigateTo({
+        url: `/pages/aoshi/records/index?type=${type}`,
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/pages/aoshi/index/index.scss

@@ -1,212 +1,556 @@
-.container {
+body {
-  font-size: 30px;
+    line-height: 1;
-  padding: 20px;
+}
-  box-sizing: border-box;
+
-  background-image: url('../static/bj.png');
+.page {
+    background-image: url('../../../static/bg.png');
     background-size: 100% 100%;
-  width: 100vw;
+    background-repeat: no-repeat;
-  height: 100vh;
+    height: 100dvh;
+    overflow: hidden;
+    position: relative;
 
     .header {
+        margin-top: 30px;
         display: flex;
         justify-content: space-between;
-    align-items: center;
-    color: #fff;
 
-    .right {
+        .left-box {
+            width: 378px;
+            height: 40px;
+            background: linear-gradient(90deg, #d19116 65%, #330706 95%);
+
+            .text {
+                background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+                -webkit-background-clip: text;
+                color: transparent;
+                font-size: 25px;
+                font-weight: bold;
+            }
+        }
+
+        .right-box {
             display: flex;
 
             .btn {
-        padding: 5px 10px;
+                background-size: 100% 100%;
-        border: 1px solid #fff;
+                width: 149px;
-        border-radius: 10px;
+                height: 46px;
 
                 &:active {
-          color: #a6a6a6;
+                    animation: btnClick 0.1s ease-in-out;
                 }
             }
-      .btn:nth-child(2) {
+
+            .tz-btn {
+                background-image: url('../../../static/tz_btn.png');
+                transform-origin: center center;
+            }
+
+            .kj-btn {
+                background-image: url('../../../static/kj_btn.png');
+                transform-origin: center center;
                 margin-left: 10px;
             }
         }
     }
 
-  .user-info {
+    .user-box {
-    display: flex;
+        width: 646px;
-    justify-content: space-between;
+        height: 115px;
-    align-items: center;
+        background: rgba(98, 98, 98, 0.3);
-    margin-top: 15px;
+        border-radius: 30px;
-    padding: 20px;
+        margin: 35px auto;
-    background-color: #ff0606;
+        position: relative;
-    color: #fff;
+        backdrop-filter: blur(10px);
-    border-radius: 26px;
 
-    .left {
+        .avatar-box {
-      display: flex;
+            position: absolute;
-      align-items: center;
+            left: -5%;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 120px;
+            height: 120px;
+
+            .bg {
+                background-image: url('../../../static/avatar_border.png');
+                background-size: 100% 100%;
+                border-radius: 50%;
+                width: 120px;
+                height: 120px;
+                animation: bgRevolve 10s linear infinite;
+                transform-origin: center;
+            }
 
             .avatar {
-        margin-right: 20px;
+                position: absolute;
-        width: 100px;
+                width: 92px;
-        height: 100px;
+                height: 92px;
-        image {
                 border-radius: 50%;
-        }
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
             }
         }
 
-    .right {
+        .user-info {
-      // width: 200px;
+            position: absolute;
-      // height: 80px;
+            left: 100px;
-      background-color: rgba(255, 255, 255, 0.4);
+            top: 50%;
-      border-radius: 40px;
+            transform: translateY(-50%);
-      text-align: center;
+            background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
-      line-height: 80px;
+            -webkit-background-clip: text;
-      font-size: 40px;
+            color: transparent;
+
+            .name {
+                font-size: 30px;
+                font-weight: bold;
+            }
+
+            .jf {
+                margin-top: 20px;
+                font-size: 28px;
+            }
+        }
+
+        .dz-box {
+            position: absolute;
+            right: 160px;
+            top: 50%;
+            transform: translateY(-50%);
             display: flex;
             align-items: center;
-      justify-content: space-around;
-      padding: 0 20px;
 
-      .image {
+            .dz-bg {
-        width: 50px;
-        height: 50px;
                 background-image: url('../../../static/dz.png');
                 background-size: 100% 100%;
+                width: 55px;
+                height: 55px;
+            }
+
+            .text {
+                background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+                -webkit-background-clip: text;
+                color: transparent;
+                font-weight: bold;
             }
         }
 
-    .game_btn {
+        .rule-btn {
-      padding: 10px;
+            position: absolute;
-      background: linear-gradient(0deg, #ff9600, #feec89);
+            right: -8%;
-      border-radius: 34px;
+            top: 45%;
-      color: #ff0606;
+            transform: translateY(-50%);
-      font-weight: bold;
+            background-image: url('../../../static/rule_btn.png');
+            background-size: 100% 100%;
+            width: 173px;
+            height: 176px;
+            transform-origin: center center;
+
+            &:active {
+                animation: ruleBtnClick 0.1s ease-in-out;
+            }
+        }
+    }
+
+    .kj-box {
         text-align: center;
+        margin-top: -10px;
+
+        .title {
+            background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+            -webkit-background-clip: text;
+            color: transparent;
+            font-size: 40px;
+            font-weight: bold;
+        }
+
+        .num-box {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+
+            .item {
+                background-image: url('../../../static/num.png');
+                background-size: 100% 100%;
+                width: 72px;
+                height: 72px;
+                text-align: center;
+                line-height: 72px;
+                font-weight: bold;
+                color: #b2150b;
+            }
+
+            .item:nth-child(1) {
+                color: #000;
+            }
+
+            .item:nth-child(2) {
+                color: #000;
+            }
+        }
+    }
+
+    .turntable-box {
+        position: relative;
+        height: 670px;
+        overflow: hidden;
+
+        .star {
+            position: absolute;
+            animation: starFlashing 1s ease-in-out infinite alternate;
+        }
+
+        .star-1 {
+            left: 100px;
+            width: 139px;
+            height: 171px;
+            background-image: url('../../../static/1-1.png');
+            background-size: 100% 100%;
+        }
+
+        .star-2 {
+            top: 100px;
+            width: 205px;
+            height: 251px;
+            background-image: url('../../../static/1-2.png');
+            background-size: 100% 100%;
+        }
+
+        .star-3 {
+            right: 50px;
+            width: 205px;
+            height: 251px;
+            background-image: url('../../../static/2-2.png');
+            background-size: 100% 100%;
+        }
+
+        .star-4 {
+            top: 200px;
+            right: 0;
+            width: 140px;
+            height: 171px;
+            background-image: url('../../../static/2-1.png');
+            background-size: 100% 100%;
+        }
+
+        .turntable-wrap {
+            background-image: url('../../../static/turntable_bg.png');
+            background-size: 100% 100%;
+            width: 650px;
+            height: 650px;
+            position: relative;
+            border-radius: 50%;
+            transform-origin: center center;
+            left: 50%;
+            top: 20px;
+            transform: translateX(-50%);
+            overflow: hidden;
+            //animation: turntableRevolve 5s linear infinite;
+
+            .light {
+                .lightItem {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    margin: 0 auto;
+                    width: 10px;
+                    height: 100%;
+                    border-radius: 50%;
+                    transform-origin: center center;
+
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        top: 4px;
+                        left: 0;
+                        right: 0;
+                        margin: 0 auto;
+                        width: 15px;
+                        height: 15px;
+                        border-radius: 50%;
+                        box-sizing: border-box;
+                    }
+                }
+
+                .lightItem:nth-of-type(even):before {
+                    background: transparent;
+                    animation: white-to-yellow 1.5s linear infinite;
+                }
+
+                .lightItem:nth-of-type(odd):before {
+                    background: #fefc87;
+                    animation: white-to-yellow 1.5s linear reverse infinite;
                 }
             }
 
             .turntable {
-    margin: 30px auto;
+                position: absolute;
-    background-image: url('../static/zpbj.png');
+                width: 530px;
-    background-size: 100% 100%;
+                height: 530px;
-    position: relative;
+                border-radius: 50%;
+                // background: url('../../../static/wu.png') no-repeat;
+                // background-size: contain;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%) rotate(-0.8deg);
 
-    .num-box {
+                .prize {
-      display: flex;
+                    position: absolute;
-      flex-wrap: wrap;
+                    width: 300px;
-      align-items: center;
+                    height: 300px;
-      padding: 80px;
+                    top: 50%;
-      margin: auto;
+                    left: 50%;
+                    transform: translate(-50%, -50%) rotate(-200deg);
 
                     .item {
-        width: 200px;
+                        position: absolute;
-        height: 220px;
+                        width: 150px;
+                        height: 150px;
+                        border-radius: 50%;
+                        color: #000;
                         text-align: center;
-        line-height: 240px;
+                        transform-origin: right bottom;
-        font-size: 80px;
+
-        font-weight: bold;
+                        &:nth-child(1) {
-        border: 5px solid #833e16;
+                            top: -10px;
+                            transform: rotate(70deg);
+                        }
+
+                        &:nth-child(2) {
+                            top: -10px;
+                            left: -10px;
+                            transform: rotate(-60deg);
+                        }
+
+                        &:nth-child(3) {
+                            top: 10px;
+                            left: 10px;
+                            transform: rotate(190deg);
+                        }
+
+                        .img {
+                            display: block;
+                            width: 100px;
+                            height: 100px;
+                            transform: rotate(-45deg) scale(1.1);
+                        }
+
+                        .icon {
+                            position: absolute;
+                            background-image: url('../../../static/dz.png');
+                            background-size: 100% 100%;
+                            width: 50px;
+                            height: 50px;
+                            transform: rotate(-45deg) scale(1.6);
+                            top: -10px;
                         }
-      .item:nth-child(1) {
-        width: 48%;
-        border-radius: 100px 30px 30px 30px;
                     }
-      .item:nth-child(2) {
-        width: 48%;
-        border-radius: 30px 100px 30px 30px;
                 }
-      .item:nth-child(3) {
-        flex: 1;
-        border-radius: 30px 30px 100px 100px;
             }
         }
 
         .bet-btn {
             position: absolute;
-      top: 50%;
+            background-image: url('../../../static/bet_btn.png');
+            background-size: 100% 100%;
+            width: 150px;
+            height: 150px;
             left: 50%;
+            top: 50%;
             transform: translate(-50%, -50%);
-      width: 170px;
+
-      height: 170px;
+            //&:active {
-      background: #fbdd36;
+            //  animation: betBtnClick .1s ease-in-out;
-      border: 5px solid #b72100;
+            //}
-      border-radius: 57px;
+        }
-      color: #ff0606;
+
-      font-size: 60px;
+        .pointer {
-      font-weight: bold;
+            position: absolute;
-      text-align: center;
+            background-image: url('../../../static/pointer.png');
-      line-height: 1.4;
+            background-size: 100% 100%;
+            width: 47px;
+            height: 111px;
+            top: 15px;
+            left: 50%;
+            transform: translateX(-50%);
         }
     }
 
-  .kj-box {
+    .countdown-box {
-    background-color: #ff0606;
+        margin-top: 30px;
-    border-radius: 26px;
+        background-image: url('../../../static/countdown_bg.png');
-    padding: 20px 30px;
+        background-size: 100% 100%;
-    margin-top: 15px;
+        width: 750px;
-    color: #fff;
+        height: 96px;
+        text-align: center;
+        line-height: 96px;
+
         .title {
-      font-size: 35px;
+            font-size: 38px;
             font-weight: bold;
-
+            color: #b81801;
-      .num {
+            text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
-        color: #fbdd36;
         }
     }
 
-    .title-sub {
+    .footer-box {
-      text-align: center;
-      margin-top: 10px;
-      font-size: 40px;
-      display: flex;
-
-      .item {
-        width: 50px;
-        height: 50px;
-        line-height: 50px;
-        margin-right: 20px;
-      }
-
-      .item:nth-child(1) {
-        font-weight: bold;
-        color: #fbdd36;
-      }
-      .item:nth-child(2) {
-        font-weight: bold;
-        color: #fbdd36;
-      }
-    }
-  }
-
-  .countdown {
-    margin: 30px auto;
         width: 100%;
-    height: 100px;
+        margin-top: 5%;
-    background-color: #fbdd36;
-    text-align: center;
-    line-height: 100px;
-    border-radius: 38px;
-    border: #ff0606 5px solid;
-    color: #ff0606;
-    font-size: 40px;
-    font-weight: bold;
-  }
-
-  .bet-opt {
         display: flex;
         flex-wrap: wrap;
-    justify-content: space-between;
+        justify-content: space-evenly;
 
         .item {
-      width: 200px;
+            background-size: 100% 100%;
+            width: 240px;
             height: 100px;
-      // border: 1px solid #ff0000;
+            display: flex;
-      border-radius: 26px;
+            align-items: center;
             margin-bottom: 20px;
+
+            .icon {
+                background-image: url('../../../static/dz.png');
+                background-size: 100% 100%;
+                width: 70px;
+                height: 70px;
+                margin: auto 15px;
+            }
+
+            .name {
+                background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+                -webkit-background-clip: text;
+                -webkit-text-stroke: 2px #000;
+                color: transparent;
+                font-size: 50px;
+                font-weight: bold;
+            }
+        }
+
+        .item-active {
+            background-image: url('../../../static/dz_active.png');
+        }
+
+        .item-no-active {
+            background-image: url('../../../static/dz_opt.png');
+        }
+    }
+
+    #lottie {
+        position: fixed;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.8);
+
+        .lottie-text {
+            position: absolute;
+            top: 59%;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #b81801;
+            text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
+            font-size: 80px;
+            font-weight: bold;
+        }
+
+        .lottie-bg {
+            position: absolute;
+            left: 50%;
+            bottom: 5%;
+            transform: translateX(-50%);
+            background-image: url('../../../static/img_0.png');
+            background-size: 100% 100%;
+            // width: 700px;
+            height: 300px;
+            animation: lottie 0.3s linear forwards;
             text-align: center;
-      line-height: 100px;
+            line-height: 310px;
-      color: #843e16;
+            overflow: hidden;
+
+            .lottie-num {
+                color: #b81801;
+                text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
+                font-size: 60px;
+                font-weight: bold;
             }
         }
     }
+}
+
+@keyframes btnClick {
+    from {
+        transform: scale(1);
+    }
+
+    to {
+        transform: scale(1.1);
+    }
+}
+
+@keyframes betBtnClick {
+    from {
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    to {
+        transform: translate(-50%, -50%) scale(1.1);
+    }
+}
+
+@keyframes ruleBtnClick {
+    from {
+        transform: scale(1) translateY(-50%);
+    }
+
+    to {
+        transform: scale(1.1) translateY(-50%);
+    }
+}
+
+@keyframes bgRevolve {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes starFlashing {
+    from {
+        transform: scale(1);
+    }
+
+    to {
+        transform: scale(1.1);
+    }
+}
+
+@keyframes turntableRevolve {
+    from {
+        transform: translateX(-50%) rotate(0deg);
+    }
+    to {
+        transform: translateX(-50%) rotate(360deg);
+    }
+}
+
+@keyframes white-to-yellow {
+    0% {
+        background: transparent;
+    }
+    100% {
+        background: #fefc87;
+    }
+}
+
+@keyframes lottie {
+    0% {
+        width: 0;
+    }
+    100% {
+        width: 700px;
+    }
+}

src/pages/aoshi/index/index.vue

@@ -1,287 +1,455 @@
-<template>
-  <view class="container">
-    <view class="header">
-      <view class="left">公告：开奖结果同步傲拾</view>
-      <view class="right">
-        <view class="btn" @click="toPage(2)">投注记录</view>
-        <view class="btn" @click="toPage(1)">开奖记录</view>
-      </view>
-    </view>
-    <view class="user-info">
-      <view class="left">
-        <view class="avatar">
-          <image :src="userInfo.avatarUrl || require('../../../static/tx.png')" />
-        </view>
-        <view class="info">
-          <view class="name">{{ userInfo.nickName || '用户' }}</view>
-          <!-- <view class="level">积分: {{ userInfo.integral || 0 }}</view> -->
-          <view class="level">积分: {{ `${jfStr}w` || 0 }}</view>
-        </view>
-      </view>
-      <view class="right">
-        <view class="image"></view>
-        <!-- <text>{{ dzStr || 0 }}w</text> -->
-        <text>{{ userInfo.pulse || 0 }}</text>
-      </view>
-      <!-- <view class="game_btn" @click="handleRule">游戏规则</view> -->
-    </view>
-    <view class="kj-box">
-      <view class="title">
-        第
-        <text class="num">{{ kjData.nowPeriods || 0 }}</text>
-        期已开奖:
-      </view>
-      <view class="title-sub">
-        <view class="item" v-for="(item, index) in kjNums" :key="index">
-          {{ item }}
-        </view>
-      </view>
-    </view>
-    <view class="turntable">
-      <view class="num-box">
-        <view
-          class="item"
-          v-for="(item, index) in nums"
-          :key="index"
-          :style="{
-            color: item.active ? '#ff0000' : '#833E16',
-            backgroundColor: item.optActive ? '#FBEDBC' : '#ffeeee',
-          }"
-          @click="handleClick(item)"
-        >
-          <text>{{ item.value }}</text>
-        </view>
-      </view>
-      <view class="bet-btn" @click="handleBet">
-        <view>点击</view>
-        <view>投注</view>
-      </view>
-    </view>
-    <view class="countdown">
-      <text v-if="isKj">正在开奖中，已停止投注!!!</text>
-      <text v-else>
-        {{ Number(kjData.nowPeriods) + 1 || 0 }}期开奖还剩: {{ timeStr || '0分0秒' }}
-      </text>
-    </view>
-    <view class="bet-opt">
-      <view
-        class="item"
-        v-for="(item, index) in betOpts"
-        :key="index"
-        :style="{
-          backgroundColor: item.isActive ? '#FBDD36' : '#fbedbc',
-        }"
-        @click="handleBetOpt(item)"
-      >
-        {{ item.value }}豆子
-      </view>
-    </view>
-  </view>
-</template>
-
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
-import { get_turntable_list, get_user_info, turntable_bet } from '@/api'
 import Taro from '@tarojs/taro'
+import Lottie from 'lottie-web'
 import * as dayjs from 'dayjs'
-
+import dan from '../../../static/dan.png'
-const userInfo = ref<any>({})
+import he from '../../../static/he.png'
-
+import shuang from '../../../static/shuang.png'
-interface NumsType {
+import kd from '../../../static/kd.png'
-  ID: number
+import kh from '../../../static/kh.png'
-  name: string
+import ks from '../../../static/ks.png'
-  optActive?: boolean
+import wu from '../../../static/wu.png'
-  active?: boolean
+import wzj from '../../../static/wzj.json'
-  value?: string
+import zj from '../../../static/zj.json'
-  list?: number[]
+import './index.scss'
-}
-
-const nums = ref<NumsType[]>([])
-
-const kjNums = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
-
-const betOpts = ref([
-  {
-    isActive: false,
-    value: 100,
-  },
-  {
-    isActive: false,
-    value: 500,
-  },
-  {
-    isActive: false,
-    value: 1000,
-  },
-  {
-    isActive: false,
-    value: 2000,
-  },
-  {
-    isActive: false,
-    value: 3000,
-  },
-  {
-    isActive: false,
-    value: 5000,
-  },
-])
 
 Taro.useDidShow(() => {
-  get_info()
+    getUserInfo()
-  get_list()
+    getBetList()
+    getList()
 })
 
+const user_info = ref<{
+    nickName: string
+    avatarUrl: string
+    pulse: number
+    integral: number
+}>({
+    nickName: '游客',
+    avatarUrl: '',
+    pulse: 0,
+    integral: 0,
+})
+
+const bet_options = ref<
+    {
+        ID: number
+        max: number
+    }[]
+>([])
+
+const newKjNum = ref(1)
+
+const list = ref<
+    {
+        name: string
+        preDrawIssue: number
+        preDrawCode: string
+    }[]
+>([])
+
 const kjData = ref<any>({})
 
-const timeId = ref<NodeJS.Timeout>()
+const bet_index = ref<number | null>(null)
-
-const get_list = async () => {
-  const res = await get_turntable_list()
-  kjData.value = res.data || {}
-  kjNums.value = kjData.value.nowDraw.split(',').map((item) => Number(item))
-
-  nums.value = kjData.value.list.map((item) => ({
-    optActive: false,
-    active: false,
-    value: item.name,
-    ID: item.ID,
-    list: item.list.split(/[,-.]/).map((item: string) => Number(item)),
-  }))
-
-  nums.value.forEach((item) => {
-    item.list?.forEach((itm) => {
-      if (itm === Number(kjData.value.drawNumber)) {
-        item.active = true
-      }
-    })
-  })
-  timeId.value = setInterval(() => {
-    countdownFn()
-  }, 1000)
-}
 
 const timeStr = ref('')
 
-const isKj = ref(false)
+const getUserInfo = async () => {
+    Taro.request({
+        url: `${process.env.TARO_APP_AOSHI_API}/australia/user/info?uid=${Taro.getStorageSync(
+            'uid'
+        )}`,
+        method: 'GET',
+        success: ({ data: res }) => {
+            user_info.value = res.data.data || {}
+        },
+    })
+}
 
-const offColorChange = ref(false)
+const getList = () => {
+    Taro.request({
+        url: `${process.env.TARO_APP_AOSHI_API}/australia/history/list`,
+        method: 'GET',
+        success: ({ data: res }) => {
+            list.value = res.data.data.data || []
+            newKjNum.value = (list.value[0]?.preDrawIssue as number) + 1
+        },
+    })
+}
+
+const handelBetClick = (index: number) => {
+    bet_index.value = index
+}
+
+// 转盘相关
+const light = ref({
+    container: null,
+    num: 8,
+    itemNum: 3,
+})
+
+const turntable_light = ref()
+const turntable = ref()
+const isRunning = ref(false)
+
+const turntable_list = ref([
+    {
+        id: 3,
+        url: he,
+        name: '和',
+        isActive: false,
+        activeUrl: kh,
+    },
+    {
+        id: 1,
+        url: dan,
+        name: '单',
+        isActive: false,
+        activeUrl: kd,
+    },
+    {
+        id: 2,
+        name: '双',
+        url: shuang,
+        isActive: false,
+        activeUrl: ks,
+    },
+])
+
+const getBetList = () => {
+    Taro.request({
+        url: `${process.env.TARO_APP_AOSHI_API}/australia/list`,
+        method: 'GET',
+        success: ({ data: res }) => {
+            bet_options.value = res.data.data || []
+            kjData.value = res.data
+
+            timeId.value = setInterval(() => {
+                countdownFn()
+            }, 1000)
+        },
+    })
+}
+
+const bgUrl = ref(wu)
+
+const handelDzClick = (item) => {
+    turntable_list.value.forEach((itm) => {
+        itm.isActive = false
+    })
+    item.isActive = true
+    bgUrl.value = item.activeUrl
+}
+
+const init = () => {
+    // 初始化轮盘灯
+    let lightFragment = document.createDocumentFragment()
+    for (let i = 0; i < light.value.num; i++) {
+        let lightItem = document.createElement('view')
+        let deg = (360 / light.value.num) * i
+        lightItem.className = 'lightItem'
+        lightItem.style.transform = `rotate(${deg}deg)`
+        lightFragment.appendChild(lightItem)
+    }
+    turntable_light.value.appendChild(lightFragment)
+}
+
+onMounted(() => {
+    turntable_light.value = document.querySelector('#turntable_light')
+    turntable.value = document.querySelector('#turntable')
+    init()
+
+    // startRun('单')
+})
+
+const timeId = ref<NodeJS.Timeout>()
 
 const time_i = ref<NodeJS.Timeout>()
 
 const countdownFn = () => {
     const currentTimestamp = dayjs().valueOf()
-  const timeLeft = kjData.value.drawTime * 1000 - currentTimestamp
+    const timeLeft = dayjs(kjData.value.drawTime).unix() * 1000 - currentTimestamp
     timeStr.value = dayjs(timeLeft).format('mm分ss秒')
 
     const m = Number(dayjs(timeLeft).format('mm'))
     const s = Number(dayjs(timeLeft).format('ss'))
 
-  isKj.value = m === 0 && s < 40 ? true : false
-
-  if (m === 0 && s < 40 && !offColorChange.value) {
-    startColorFn()
-  }
-
     if (m === 0 && s === 0) {
         clearInterval(timeId.value)
         clearInterval(time_i.value)
-    offColorChange.value = true
+        startRun(list.value[0].name)
-    setTimeout(() => {
-      get_list()
-      get_info()
-    }, 3000)
     }
 }
 
-const startColorFn = () => {
+const startRun = (name: string) => {
-  nums.value.forEach((item) => {
+    if (!name)
-    item.active = false
+        return Taro.showToast({
+            title: '未知开奖结果',
+            mask: true,
+            icon: 'none',
+            duration: 1000,
         })
+    isRunning.value = true
 
-  // 随机选中一个
+    turntable_list.value.forEach((item) => {
-  const randomNum = Math.floor(Math.random() * nums.value.length)
-  nums.value[randomNum].active = true
-}
-const dzStr = ref('')
-const jfStr = ref('')
-
-const get_info = async () => {
-  const res = await get_user_info(Taro.getStorageSync('uid'))
-
-  userInfo.value = res.data.data || {}
-
-  dzStr.value = String((userInfo.value.pulse / 10000).toFixed(2))
-  jfStr.value = String((userInfo.value.integral / 10000).toFixed(2))
-}
-
-const handleClick = (itemOpt) => {
-  nums.value.forEach((item) => {
-    item.optActive = false
-  })
-  itemOpt.optActive = true
-}
-
-const handleBetOpt = (item) => {
-  betOpts.value.forEach((item) => {
         item.isActive = false
     })
-  item.isActive = true
+
+    bet_index.value = null
+
+    let kj_num = 0
+
+    switch (name) {
+        case '单':
+            kj_num = 1
+            break
+        case '双':
+            kj_num = 2
+            break
+        case '和':
+            kj_num = 3
+            break
     }
 
-const handleBet = () => {
+    let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)
-  const newNums = nums.value.filter((item) => item.optActive === true)
+
-  if (newNums.length === 0)
+    let rotate = rotateItemDeg + 5 * 360 - 70
+
+    const rotateSpeed = Number((rotateItemDeg / 360 + 5).toFixed(2))
+
+    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)
+
+    setTimeout(() => {
+        isRunning.value = false
+        getBetJl()
+        setTimeout(() => {
+            bgUrl.value = wu
+            getUserInfo()
+        }, 2000)
+    }, rotateSpeed * 1000)
+}
+
+const betFn = () => {
+    if (bet_index.value === null)
+        return Taro.showToast({
+            title: '请选择豆子',
+            icon: 'none',
+        })
+    const arr = turntable_list.value.filter((item) => item.isActive === true)
+
+    const betObj = bet_options.value[bet_index.value]
+
+    if (arr.length === 0)
         return Taro.showToast({
             title: '请选择投注项',
             icon: 'none',
         })
-  const item = betOpts.value.filter((item) => item.isActive === true)
+    Taro.request({
-  if (item.length === 0)
+        url: `${process.env.TARO_APP_AOSHI_API}/australia/user/dice`,
-    return Taro.showToast({
+        method: 'POST',
-      title: '请选择投注豆子',
+        data: {
-      icon: 'none',
+            name: arr[0].name,
-    })
+            uid: Taro.getStorageSync('uid'),
-  Taro.showModal({
+            aid: String(betObj.ID),
-    title: '确认投注吗？',
+            game_id: String(Taro.getStorageSync('gameItem').ID),
-    content: `投注豆子：${item[0].value}`,
+        },
-    success: async (res) => {
+        success: ({ data: res }) => {
-      if (res.confirm) {
-        const game_info = Taro.getStorageSync('gameItem')
-        const uid = Taro.getStorageSync('uid')
-        const res = await turntable_bet({
-          uid: uid,
-          aid: nums.value.filter((item) => item.optActive === true)[0].ID,
-          number: item[0].value,
-          game_id: game_info.ID,
-        })
             Taro.showToast({
                 title: res.msg,
                 icon: 'none',
             })
-        setTimeout(() => {
-          get_info()
-        }, 2000)
-      }
         },
     })
+    setTimeout(() => {
+        getUserInfo()
+    }, 500)
 }
 
-// const handleRule = () => {
-//   Taro.showToast({
-//     title: '暂无规则',
-//     icon: 'none',
-//   })
-// }
-
 // 前往开奖和投注记录
 const toPage = (type: number) => {
     Taro.navigateTo({
         url: `/pages/aoshi/records/index?type=${type}`,
     })
 }
+
+// 动画相关
+const isLottie = ref(false) // 是否显示动画
+
+const lottieFn = (type: number, num: number = 0) => {
+    isLottie.value = true
+
+    const lottieEle = document.getElementById('lottie') as HTMLDivElement
+
+    const ctx = Lottie.loadAnimation({
+        container: lottieEle,
+        renderer: 'svg',
+        loop: false,
+        autoplay: true,
+        animationData: type === 1 ? zj : wzj,
+    })
+
+    if (type === 1) {
+        const text = document.createElement('view')
+        text.className = 'lottie-text'
+        // text.innerHTML = `单`
+        const view = document.createElement('view')
+        view.className = 'lottie-bg'
+        view.innerHTML = `<view class="lottie-num">${num}积分</view>`
+        const els = [view, text]
+
+        for (const i in els) {
+            lottieEle.appendChild(els[i])
+        }
+    }
+
+    ctx.addEventListener('complete', () => {
+        isLottie.value = false
+        ctx.destroy()
+    })
+}
+
+const getBetJl = () => {
+    Taro.request({
+        url: `${process.env.TARO_APP_AOSHI_API}/australia/user/record?uid=${Taro.getStorageSync(
+            'uid'
+        )}`,
+        method: 'GET',
+        success: ({ data: res }) => {
+            const data = res.data.data[0]
+            const t = dayjs().format('YYYY-MM-DD')
+
+            // 是否为今天
+            if (data.DrawTime === t) {
+                console.log('1')
+                // 是否下注
+                if (newKjNum.value - data.Periods === 0) {
+                    console.log('2')
+                    // 是否中奖
+                    if (data.DrawNum > 0) {
+                        lottieFn(1, data.DrawNum)
+                        console.log('3')
+                    } else {
+                        lottieFn(2)
+                        console.log('4')
+                    }
+                }
+            }
+        },
+    })
+    getBetList()
+    getList()
+}
 </script>
 
-<style lang="scss" scoped>
+<template>
-@import './index.scss';
+    <view class="page">
-</style>
+        <view class="header">
+            <view class="left-box">
+                <text class="text">公告: 开奖结果同步澳拾</text>
+            </view>
+            <view class="right-box">
+                <view class="btn tz-btn" @click="toPage(2)"></view>
+                <view class="btn kj-btn" @click="toPage(1)"></view>
+            </view>
+        </view>
+        <view class="user-box">
+            <view class="avatar-box">
+                <view class="bg"></view>
+                <image
+                    class="avatar"
+                    :src="user_info.avatarUrl || '../../../static/default_avatar.png'"
+                />
+            </view>
+            <view class="user-info">
+                <view class="name">{{ user_info.nickName }}</view>
+                <view class="jf">积分: {{ user_info.integral || 0 }}</view>
+            </view>
+            <view class="dz-box">
+                <view class="dz-bg"></view>
+                <view class="text">{{ user_info.pulse || 0 }}</view>
+            </view>
+            <view class="rule-btn"></view>
+        </view>
+        <view class="kj-box">
+            <text class="title">第{{ list[0]?.preDrawIssue || 0 }}期已开奖</text>
+            <view class="num-box">
+                <view
+                    class="item"
+                    v-for="(item, index) in list[0]?.preDrawCode?.split(',')"
+                    :key="index"
+                >
+                    {{ Number(item) }}
+                </view>
+            </view>
+            <!-- <view class="num-box" style="justify-content: center">
+                <view class="item">
+                    {{ list[0]?.Name }}
+                </view>
+            </view> -->
+        </view>
+        <view
+            style="display: flex; justify-content: flex-end; flex-direction: column; margin-top: 6%"
+        >
+            <view class="turntable-box">
+                <view class="star star-1"></view>
+                <view class="star star-2"></view>
+                <view class="star star-3"></view>
+                <view class="star star-4"></view>
+
+                <view class="turntable-wrap" id="turntable-wrap">
+                    <view class="light" id="turntable_light"></view>
+                    <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(item)"
+                            >
+                                <image class="img" :src="item.url" />
+                                <!-- <view v-if="item.url" :class="item.isActive ? 'icon' : ''"></view> -->
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="bet-btn" @click="betFn"></view>
+                <view class="pointer"></view>
+            </view>
+        </view>
+        <view class="countdown-box">
+            <text class="title" v-if="!isRunning">
+                第{{ newKjNum }}期开奖还剩:{{ timeStr || '00' }}
+            </text>
+            <text v-else class="title">正在开奖中...</text>
+        </view>
+        <view class="footer-box">
+            <view
+                class="item"
+                v-for="(item, index) in bet_options"
+                :key="index"
+                :class="bet_index === index ? 'item-active' : 'item-no-active'"
+                @click="handelBetClick(index)"
+            >
+                <view class="icon"></view>
+                <view class="name">{{ item.max }}</view>
+            </view>
+            <view class="item"></view>
+            <view class="item"></view>
+        </view>
+        <view id="lottie" v-show="isLottie"></view>
+    </view>
+</template>

src/pages/aoshi/records/index.vue

@@ -6,17 +6,17 @@
                     <view>
                         第{{ item.preDrawIssue }}期开奖:
                         <text
-              v-for="(num, i) in item.preDrawCode"
-              :key="i"
                             :style="{
-                color: numColor(num),
+                                color: numColor(item.name),
                             }"
                         >
-              {{ num }}
+                            {{ item.name }}
                         </text>
+                        <view>
+                            {{ item.preDrawCode }}
+                        </view>
                     </view>
                     <view>开奖时间: {{ item.preDrawTime }}</view>
-          <view>开奖数字: {{ item.drawName }}</view>
                 </view>
             </view>
         </template>
@@ -35,7 +35,9 @@
                         </view>
                     </view>
                     <view style="text-align: right">
-            <view style="color: red" v-if="item.State === 1">+{{ item.DrawNum }}积分</view>
+                        <view style="color: red" v-if="item.State === 1">
+                            +{{ item.DrawNum }}积分
+                        </view>
                         <view style="color: green">-{{ item.Number }}豆子</view>
                     </view>
                 </view>
@@ -50,7 +52,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import Taro from '@tarojs/taro'
-import { get_turntable_bet_record, get_turntable_open_record } from '@/api'
 
 const list = ref<any[]>([])
 
@@ -70,10 +71,6 @@ Taro.usePullDownRefresh(() => {
 
 const numColor = (num: string) => {
     switch (num) {
-    case '大':
-      return 'red'
-    case '小':
-      return 'green'
         case '单':
             return 'orange'
         case '双':
@@ -86,19 +83,30 @@ const numColor = (num: string) => {
 }
 
 const getData = async () => {
-  let res: any
     if (typeNum.value === 1) {
-    res = await get_turntable_open_record()
+        Taro.request({
-    list.value = res.data.data.result.data || []
+            url: `${process.env.TARO_APP_AOSHI_API}/australia/history/list`,
+            method: 'GET',
+            success: ({ data: res }) => {
+                list.value = res.data.data.data || []
+            },
+        })
     } else {
-    res = await get_turntable_bet_record(Taro.getStorageSync('uid'), '1')
+        Taro.request({
+            url: `${process.env.TARO_APP_AOSHI_API}/australia/user/record?uid=${Taro.getStorageSync(
+                'uid'
+            )}`,
+            method: 'GET',
+            success: ({ data: res }) => {
                 list.value = res.data.data || []
+            },
+        })
     }
     Taro.stopPullDownRefresh()
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .taro_page {
     background-color: #f5f5f5 !important;
 }

src/pages/game_detail/index.vue

@@ -20,13 +20,13 @@ import Taro from '@tarojs/taro'
 import './index.scss'
 
 const info = ref<any>({})
+const list = ref<string[]>([])
 
 Taro.useLoad(() => {
     info.value = Taro.getStorageSync('gameItem')
+    list.value.push(info.value.cover)
 })
 
-const list = ref(['https://files.wanzhuanyongcheng.com/file/img/yaotouzi/banner/qietu.png'])
-
 const startGame = () => {
     Taro.navigateTo({
         url: info.value.url,

src/pages/index/index.scss

@@ -19,7 +19,7 @@
       border-radius: 20px;
       text-align: center;
       line-height: 300px;
-      background-image: url('../../static/qietu.png');
+    //   background-image: url('../../static/qietu.png');
       background-size: 100% 100%;
       position: relative;
 

src/pages/index/index.vue

@@ -3,9 +3,13 @@
         <view class="title">游戏大厅</view>
 
         <view class="card_list">
-      <view class="card_item" v-for="item in list as any[]" :key="item.ID">
+            <view
-        <view class="btn" @click="toPage(item)"></view>
+                class="card_item"
-      </view>
+                v-for="item in list as any[]"
+                :key="item.ID"
+                :style="{ backgroundImage: `url(${item.cover})` }"
+                @click="toPage(item)"
+            ></view>
         </view>
     </view>
 </template>

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 dan from '../../../static/dan.png'
-import he from '../static/he.png'
+import he from '../../../static/he.png'
-import shuang from '../static/shuang.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 wzj from '../../../static/wzj.json'
-import zj from '../static/zj.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)