feat(custom): 大转盘第一版

.editorconfig

@@ -3,7 +3,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 2
+indent_size = 4
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

.env.development

@@ -11,3 +11,9 @@ 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'
+
+
+# 大转盘
+TARO_APP_TURNTABLE_WS = 'wss://game2.wanzhuanyongcheng.cn/turntable/home'
+
+TARO_APP_TURNTABLE_API = 'https://game2.wanzhuanyongcheng.cn/turntable'

.env.test

@@ -10,3 +10,8 @@ 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'
+
+# 大转盘
+TARO_APP_TURNTABLE_WS = 'wss://game2.wanzhuanyongcheng.cn/turntable/home'
+
+TARO_APP_TURNTABLE_API = 'https://game2.wanzhuanyongcheng.cn/turntable'

package.json

@@ -61,30 +61,31 @@
 		"@sentry/browser": "^7.81.0",
 		"@sentry/vue": "^7.81.0",
 		"@sentry/webpack-plugin": "^2.10.1",
-    "@tarojs/components": "3.6.21",
+		"@tarojs/components": "3.6.22",
-    "@tarojs/helper": "3.6.21",
+		"@tarojs/helper": "3.6.22",
-    "@tarojs/plugin-framework-vue3": "3.6.21",
+		"@tarojs/plugin-framework-vue3": "3.6.22",
-    "@tarojs/plugin-platform-alipay": "3.6.21",
+		"@tarojs/plugin-platform-alipay": "3.6.22",
-    "@tarojs/plugin-platform-h5": "3.6.21",
+		"@tarojs/plugin-platform-h5": "3.6.22",
-    "@tarojs/plugin-platform-jd": "3.6.21",
+		"@tarojs/plugin-platform-jd": "3.6.22",
-    "@tarojs/plugin-platform-qq": "3.6.21",
+		"@tarojs/plugin-platform-qq": "3.6.22",
-    "@tarojs/plugin-platform-swan": "3.6.21",
+		"@tarojs/plugin-platform-swan": "3.6.22",
-    "@tarojs/plugin-platform-tt": "3.6.21",
+		"@tarojs/plugin-platform-tt": "3.6.22",
-    "@tarojs/plugin-platform-weapp": "3.6.21",
+		"@tarojs/plugin-platform-weapp": "3.6.22",
-    "@tarojs/runtime": "3.6.21",
+		"@tarojs/runtime": "3.6.22",
-    "@tarojs/shared": "3.6.21",
+		"@tarojs/shared": "3.6.22",
-    "@tarojs/taro": "3.6.21",
+		"@tarojs/taro": "3.6.22",
 		"dayjs": "^1.11.10",
+		"lottie-web": "^5.12.2",
 		"vue": "^3.3.4"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.22.11",
 		"@commitlint/cli": "^18.2.0",
 		"@commitlint/config-conventional": "^18.1.0",
-    "@tarojs/cli": "3.6.21",
+		"@tarojs/cli": "3.6.22",
-    "@tarojs/taro-loader": "3.6.21",
+		"@tarojs/taro-loader": "3.6.22",
 		"@tarojs/test-utils-vue3": "^0.1.1",
-    "@tarojs/webpack5-runner": "3.6.21",
+		"@tarojs/webpack5-runner": "3.6.22",
 		"@types/jest": "^29.5.4",
 		"@types/node": "^20.5.7",
 		"@types/webpack-env": "^1.18.1",
@@ -92,12 +93,12 @@
 		"@typescript-eslint/parser": "^6.5.0",
 		"@vue/babel-plugin-jsx": "^1.1.5",
 		"@vue/compiler-sfc": "^3.3.4",
-    "babel-preset-taro": "3.6.21",
+		"babel-preset-taro": "3.6.22",
 		"commitizen": "^4.3.0",
 		"css-loader": "6.8.1",
 		"cz-customizable": "^7.0.0",
 		"eslint": "^8.48.0",
-    "eslint-config-taro": "3.6.21",
+		"eslint-config-taro": "3.6.22",
 		"eslint-plugin-vue": "^9.17.0",
 		"husky": "^8.0.0",
 		"jest": "^29.6.4",

src/app.config.ts

@@ -8,6 +8,8 @@ export default defineAppConfig({
         'pages/balloon/records/index',
         'pages/aoshi/index/index',
         'pages/aoshi/records/index',
+        'pages/turntable/index/index',
+        'pages/turntable/records/index',
     ],
     window: {
         backgroundTextStyle: 'light',

src/app.scss

@@ -2,6 +2,10 @@
 //   background-color: #f5f5f5 !important;
 // }
 
+body {
+  // line-height: 1;
+}
+
 .mt-15 {
   margin-top: 15px;
 }

src/index.html

@@ -9,7 +9,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="white" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta http-equiv="Cache-control" content="no-cache" />
-    <title>newGameHome</title>
+    <title>捷兑通-游戏</title>
     <script>
       <%= htmlWebpackPlugin.options.script %>
     </script>

src/pages/turntable/index/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+    navigationBarTitleText: '大转盘',
+    navigationStyle: 'custom',
+})

src/pages/turntable/index/index.scss

@@ -0,0 +1,513 @@
+body {
+  line-height: 1;
+}
+
+.page {
+  background-image: url('../static/bg.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 100dvh;
+  overflow: hidden;
+  position: relative;
+
+  .header {
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+
+    .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 {
+        background-size: 100% 100%;
+        width: 149px;
+        height: 46px;
+
+        &:active {
+          animation: btnClick 0.1s ease-in-out;
+        }
+      }
+
+      .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-box {
+    width: 646px;
+    height: 115px;
+    background: rgba(98, 98, 98, 0.3);
+    border-radius: 30px;
+    margin: 35px auto;
+    position: relative;
+    backdrop-filter: blur(10px);
+
+    .avatar-box {
+      position: absolute;
+      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 {
+        position: absolute;
+        width: 92px;
+        height: 92px;
+        border-radius: 50%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .user-info {
+      position: absolute;
+      left: 100px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+      -webkit-background-clip: text;
+      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;
+
+      .dz-bg {
+        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;
+      }
+    }
+
+    .rule-btn {
+      position: absolute;
+      right: -8%;
+      top: 45%;
+      transform: translateY(-50%);
+      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 {
+        position: absolute;
+        width: 530px;
+        height: 530px;
+        border-radius: 50%;
+        background: url('../static/turntable_bg_1.png') no-repeat 100% 100%;
+        background-size: contain;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) rotate(0deg);
+        border: 1px solid #625933;
+
+        .prize {
+          position: absolute;
+          width: 300px;
+          height: 300px;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%) rotate(-200deg);
+
+          .item {
+            position: absolute;
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+            color: #000;
+            text-align: center;
+            transform-origin: right bottom;
+
+            &:nth-child(1) {
+              top: -10px;
+              transform: rotate(70deg);
+            }
+
+            &: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;
+              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;
+            }
+          }
+        }
+      }
+    }
+
+    .bet-btn {
+      position: absolute;
+      background-image: url('../static/bet_btn.png');
+      background-size: 100% 100%;
+      width: 150px;
+      height: 150px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      //&:active {
+      //  animation: betBtnClick .1s ease-in-out;
+      //}
+    }
+
+    .pointer {
+      position: absolute;
+      background-image: url('../static/pointer.png');
+      background-size: 100% 100%;
+      width: 47px;
+      height: 111px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .countdown-box {
+    margin-top: 50px;
+    background-image: url('../static/countdown_bg.png');
+    background-size: 100% 100%;
+    width: 750px;
+    height: 96px;
+    text-align: center;
+    line-height: 96px;
+
+    .title {
+      font-size: 38px;
+      font-weight: bold;
+      color: #b81801;
+      text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
+    }
+  }
+
+  .footer-box {
+    width: 100%;
+    margin-top: 10%;
+    display: flex;
+    justify-content: space-evenly;
+
+    .item {
+      background-size: 100% 100%;
+      width: 194px;
+      height: 73px;
+      display: flex;
+      align-items: center;
+
+      .icon {
+        background-image: url('../static/dz.png');
+        background-size: 100% 100%;
+        width: 55px;
+        height: 56px;
+        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: 33px;
+        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);
+  }
+}
+
+@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;
+  }
+}

src/pages/turntable/index/index.vue

@@ -0,0 +1,426 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import Taro from '@tarojs/taro'
+import Lottie from 'lottie-web'
+import dan from '../static/dan.png'
+import he from '../static/he.png'
+import shuang from '../static/shuang.png'
+import './index.scss'
+
+Taro.useDidShow(() => {
+    getUserInfo()
+    getBetList()
+    getList()
+    initWs()
+
+    Lottie.loadAnimation({
+        container: document.getElementById('lottie') as Element,
+        renderer: 'svg',
+        loop: true,
+        autoplay: true,
+        animationData: require('../static/wzj.json'),
+    })
+})
+
+const ws = ref<null | WebSocket>(null)
+
+// const lottery_list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+
+const user_info = ref<{
+    nickName: string
+    avatarUrl: string
+    pulse: number
+    integral: number
+}>({
+    nickName: '游客',
+    avatarUrl: '',
+    pulse: 0,
+    integral: 0,
+})
+
+const bet_options = ref([
+    {
+        id: 1,
+        name: 600,
+    },
+    {
+        id: 2,
+        name: 1000,
+    },
+    {
+        id: 3,
+        name: 1200,
+    },
+    {
+        id: 4,
+        name: 2000,
+    },
+])
+
+const list = ref<
+    {
+        Periods?: number
+        Name?: string
+    }[]
+>([])
+
+const bet_index = ref<number | null>(null)
+
+const timeStr = ref('')
+
+const initWs = () => {
+    ws.value = new WebSocket(
+        `${process.env.TARO_APP_TURNTABLE_WS}?uid=${Taro.getStorageSync('uid')}&game_id=${
+            Taro.getStorageSync('gameItem').ID
+        }`
+    )
+    ws.value.onopen = () => {
+        Taro.showToast({
+            title: '连接游戏服务器成功',
+            mask: true,
+            icon: 'none',
+            duration: 2000,
+        })
+    }
+    ws.value.onmessage = ({ data }) => {
+        let res = JSON.parse(data)
+        switch (res.code) {
+            case 200:
+                timeStr.value = res.data
+                break
+            case 5:
+                Taro.showToast({
+                    title: res.msg,
+                    mask: true,
+                    icon: 'none',
+                    duration: 1000,
+                })
+                break
+            case 301:
+                Taro.showToast({
+                    title: res.msg,
+                    mask: true,
+                    icon: 'none',
+                    duration: 1000,
+                })
+                break
+            default:
+                startRun(res[0].name)
+                if (res.msg) {
+                    Taro.showToast({
+                        title: res.msg,
+                        mask: true,
+                        icon: 'none',
+                        duration: 1000,
+                    })
+                }
+                break
+        }
+    }
+    ws.value.onclose = () => {
+        console.log('连接关闭')
+    }
+
+    ws.value.onerror = () => {
+        setTimeout(() => {
+            Taro.showToast({
+                title: '连接游戏服务器失败，正在重试',
+                mask: true,
+                icon: 'none',
+                duration: 1000,
+            })
+            initWs()
+        }, 3000)
+    }
+}
+
+const getUserInfo = async () => {
+    Taro.request({
+        url: `${process.env.TARO_APP_TURNTABLE_API}/userTurntableInfo?uid=${Taro.getStorageSync(
+            'uid'
+        )}`,
+        method: 'GET',
+        success: ({ data: res }) => {
+            user_info.value = res.data.data || {}
+        },
+    })
+}
+
+const getList = async () => {
+    Taro.request({
+        url: `${process.env.TARO_APP_TURNTABLE_API}/draw`,
+        method: 'GET',
+        success: ({ data: res }) => {
+            list.value = res.data.data || []
+        },
+    })
+}
+
+const handelBetClick = (index: number) => {
+    bet_index.value = index
+}
+
+// 转盘相关
+const light = ref({
+    container: null,
+    num: 8,
+    itemNum: 6,
+})
+
+const turntable_light = ref()
+const turntable = ref()
+const isRunning = ref(false)
+
+const turntable_list = ref([
+    {
+        id: 3,
+        url: he,
+        name: '和',
+        isActive: false,
+    },
+    {
+        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,
+    },
+    {
+        id: 6,
+        url: null,
+        isActive: false,
+    },
+])
+
+const bet_list = ref([])
+
+const getBetList = () => {
+    Taro.request({
+        url: `${process.env.TARO_APP_TURNTABLE_API}/turntable`,
+        method: 'GET',
+        success: ({ data: res }) => {
+            bet_list.value = res.data.data || []
+        },
+    })
+}
+
+const handelDzClick = (index: number) => {
+    turntable_list.value.forEach((item) => {
+        item.isActive = false
+    })
+    turntable_list.value[index].isActive = true
+}
+
+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()
+})
+
+const startRun = (name: string, isShow = false) => {
+    isRunning.value = true
+
+    turntable_list.value.forEach((item) => {
+        item.isActive = false
+    })
+
+    let kj_num = 0
+
+    switch (name) {
+        case '单':
+            kj_num = 6
+            break
+        case '双':
+            kj_num = 2
+            break
+        case '和':
+            kj_num = 4
+            break
+    }
+
+    let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)
+
+    let rotate = rotateItemDeg + 5 * 360
+
+    const rotateSpeed = Number((rotateItemDeg / 360 + 5).toFixed(2))
+
+    turntable.value.removeAttribute('style')
+    setTimeout(() => {
+        turntable.value.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`
+        turntable.value.style.transition = `transform ${rotateSpeed}s ease-out`
+    }, 10)
+
+    setTimeout(() => {
+        isRunning.value = false
+        if (isShow) {
+            console.log(`中奖结果: ${name}`)
+        }
+        setTimeout(() => {
+            getList()
+            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 && item.url !== null)
+
+    const betArr = bet_list.value.filter((item) => item['name'] === arr[0].name)
+
+    console.log(betArr)
+
+    if (betArr.length === 0)
+        return Taro.showToast({
+            title: '请选择投注项',
+            icon: 'none',
+        })
+    ws.value?.send(
+        JSON.stringify({
+            type: 1,
+            data: [
+                {
+                    number: bet_options.value[bet_index.value].name,
+                    bid: betArr[0]['ID'],
+                    name: betArr[0]['name'],
+                },
+            ],
+        })
+    )
+    setTimeout(() => {
+        getUserInfo()
+    }, 500)
+}
+
+// 前往开奖和投注记录
+const toPage = (type: number) => {
+    Taro.navigateTo({
+        url: `/pages/turntable/records/index?type=${type}`,
+    })
+}
+</script>
+
+<template>
+    <view class="page">
+        <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]?.Periods || 0 }}期已开奖</text>
+            <!-- <view class="num-box">
+        <view class="item" v-for="(item, index) in lottery_list" :key="index">
+          {{ 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 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)"
+                            >
+                                <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">
+                第{{ (list[0]?.Periods as number) + 1 || 1 }}期开奖还剩:{{ 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.name }}</view>
+            </view>
+        </view>
+        <!-- <view id="lottie"></view> -->
+    </view>
+</template>

src/pages/turntable/records/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+    navigationBarBackgroundColor: '#23684B',
+    enablePullDownRefresh: true,
+})

src/pages/turntable/records/index.vue

@@ -0,0 +1,146 @@
+<template>
+    <view class="app">
+        <template v-if="typeNum === 1">
+            <view class="card" v-for="(item,index) in list as any[]" :key="index">
+                <view>
+                    <view>第{{ item.Periods }}期开奖</view>
+                    <view>
+                        开奖数字:
+                        <text
+                            :style="{
+                                color: numColor(item.Name),
+                            }"
+                        >
+                            {{ item.Name }}
+                        </text>
+                    </view>
+                    <view>开奖时间: {{ item.DrawTime }}</view>
+                </view>
+            </view>
+        </template>
+        <template v-else>
+            <view v-if="list.length > 0">
+                <view class="card desc" v-for="(item,index) in list as any[]" :key="index">
+                    <view>
+                        <view>第{{ item.Periods }}期投注:</view>
+                        <view>
+                            点数:
+                            <text style="color: red">{{ item.Name }}</text>
+                        </view>
+                        <view class="sub">
+                            投注时间:
+                            <text>{{ item.DrawTime }}</text>
+                        </view>
+                    </view>
+                    <view style="text-align: right">
+                        <view style="color: red" v-if="item.State === 1">
+                            +{{ item.DrawNum }}积分
+                        </view>
+                        <view style="color: green">-{{ item.Number }}豆子</view>
+                    </view>
+                </view>
+            </view>
+            <view v-else>
+                <view style="margin-top: 100px">暂无记录.....</view>
+            </view>
+        </template>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import Taro from '@tarojs/taro'
+
+const list = ref<any[]>([])
+
+const typeNum = ref(0)
+
+Taro.useLoad((options) => {
+    typeNum.value = Number(options.type)
+    Taro.setNavigationBarTitle({
+        title: options.type === '1' ? '开奖记录' : '投注记录',
+    })
+    getData()
+})
+
+Taro.usePullDownRefresh(() => {
+    getData()
+})
+
+const numColor = (num: string) => {
+    switch (num) {
+        case '大':
+            return 'red'
+        case '小':
+            return 'green'
+        case '单':
+            return 'orange'
+        case '双':
+            return 'blue'
+        case '和':
+            return 'purple'
+        default:
+            return 'black'
+    }
+}
+
+const getData = async () => {
+    if (typeNum.value === 1) {
+        Taro.request({
+            url: `${process.env.TARO_APP_TURNTABLE_API}/draw`,
+            method: 'GET',
+            success: ({ data: res }) => {
+                list.value = res.data.data || []
+            },
+        })
+    } else {
+        Taro.request({
+            url: `${
+                process.env.TARO_APP_TURNTABLE_API
+            }/userTurntableRecord?uid=${Taro.getStorageSync('uid')}`,
+            method: 'GET',
+            success: ({ data: res }) => {
+                console.log(res)
+                list.value = res.data.data || []
+            },
+        })
+    }
+    Taro.stopPullDownRefresh()
+}
+</script>
+
+<style lang="scss" scoped>
+.taro_page {
+    background-color: #f5f5f5 !important;
+}
+.app {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    //justify-content: center;
+    font-size: 35px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.card {
+    width: 95%;
+    padding: 20px;
+    background-color: #fff;
+    margin-top: 10px;
+    border-radius: 10px;
+
+    .sub {
+        margin-top: 10px;
+        color: #555555;
+    }
+}
+
+.desc {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+</style>

src/utils/request.ts

@@ -9,9 +9,9 @@ export interface RequestParams {
 }
 
 const request = (request: RequestParams): Promise<any> => {
-  Taro.showLoading({
+    // Taro.showLoading({
-    title: '加载中',
+    //   title: '加载中',
-  })
+    // })
     return new Promise((resolve, reject) => {
         Taro.request({
             url: `${app.API_URL()}${request.url}`,
@@ -22,7 +22,7 @@ const request = (request: RequestParams): Promise<any> => {
             data: request.data || {},
             success: (res) => {
                 resolve(res.data)
-        Taro.hideLoading()
+                // Taro.hideLoading()
             },
             fail: (err) => {
                 reject(err)