fix(custom):

.drone.yml

@@ -0,0 +1,154 @@
+kind: pipeline
+type: docker
+name: default
+
+steps:
+  - name: 测试服-依赖安装&&编译打包
+    pull: if-not-exists
+    image: node:20
+    when:
+      branch:
+        - test
+    commands:
+      - npm config set registry https://registry.npmmirror.com/
+      - npm install -g pnpm
+      - pnpm install
+      - pnpm build:h5:test
+      - rm -rf dist.tar
+      - rm -rf node_modules
+      - tar -zcvf dist.tar ./dist ./default.conf ./Dockerfile
+
+  - name: 正式服-依赖安装&&编译打包
+    pull: if-not-exists
+    image: node:20
+    when:
+      branch:
+        - master
+    commands:
+      - npm config set registry https://registry.npmmirror.com/
+      - npm install -g pnpm
+      - pnpm install
+      - pnpm build:h5
+      - rm -rf dist.tar
+      - rm -rf node_modules
+      - tar -zcvf dist.tar ./dist ./default.conf ./Dockerfile
+
+  - name: 测试服-产物上传
+    pull: if-not-exists
+    image: appleboy/drone-scp
+    when:
+      branch:
+        - test
+    settings:
+      host:
+        from_secret: HOST_DEV
+      username:
+        from_secret: USER_DEV
+      password:
+        from_secret: PWD_DEV
+      port: 22
+      strip_components: 1
+      target: /www/builder
+      source:
+        - ./dist.tar
+
+  - name: 测试服-部署
+    pull: if-not-exists
+    image: appleboy/drone-ssh
+    when:
+      branch:
+        - test
+    settings:
+      host:
+        from_secret: HOST_DEV
+      username:
+        from_secret: USER_DEV
+      password:
+        from_secret: PWD_DEV
+      port: 22
+      script:
+        - cd /www/builder
+        - mkdir jdt-tz-dev
+        - tar -xzvf dist.tar -C /www/builder/jdt-tz-dev
+        - rm -rf dist.tar
+        - cd jdt-tz-dev
+        - docker build -t jdt-tz-dev .
+        - docker stop jdt-tz-dev
+        - docker rm jdt-tz-dev
+        - docker run -d -p 8283:80 --restart=always --name jdt-tz-dev jdt-tz-dev
+        - cd ..
+        - rm -rf jdt-tz-dev
+
+  - name: 正式服-产物上传
+    pull: if-not-exists
+    image: appleboy/drone-scp
+    when:
+      branch:
+        - master
+    settings:
+      host:
+        from_secret: HOST_PROD
+      username:
+        from_secret: USER_PROD
+      password:
+        from_secret: PWD_PROD
+      port: 22
+      strip_components: 1
+      target: /www/builder
+      source:
+        - ./dist.tar
+
+  - name: 正式服-部署
+    pull: if-not-exists
+    image: appleboy/drone-ssh
+    when:
+      branch:
+        - master
+    settings:
+      host:
+        from_secret: HOST_PROD
+      username:
+        from_secret: USER_PROD
+      password:
+        from_secret: PWD_PROD
+      port: 22
+      script:
+        - cd /www/builder
+        - mkdir jdt-tz-prod
+        - tar -xzvf dist.tar -C /www/builder/jdt-tz-prod
+        - rm -rf dist.tar
+        - cd jdt-tz-prod
+        - docker build -t jdt-tz-prod .
+        - docker stop jdt-tz-prod
+        - docker rm jdt-tz-prod
+        - docker run -d -p 8283:80 --restart=always --name jdt-tz-prod jdt-tz-prod
+        - cd ..
+        - rm -rf jdt-tz-prod
+
+  - name: 企业微信通知
+    pull: if-not-exists
+    image: plugins/webhook
+    when:
+      branch:
+        - test
+        - master
+      status:
+        - success
+        - failure
+    settings:
+      urls: https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=a2065e21-4f92-4f5b-a432-2c0cd1d965b5
+      content_type: application/json
+      template: |
+        {
+          "msgtype": "markdown",
+          "markdown": {
+              "content": "{{#success build.status}}✅{{else}}❌{{/success}}**{{ repo.owner }}/{{ repo.name }}** (Build #{{build.number}})\n
+                          >**构建结果**: {{ build.status }}
+                          >**构建详情**: [点击查看]({{ build.link }})
+                          >**代码分支**: {{ build.branch }}
+                          >**提交标识**: {{ build.commit }}
+                          >**提交发起**: {{ build.author }}
+                          >**提交信息**: {{ build.message }}
+        "
+          }
+        }

.editorconfig

@@ -1,12 +1,12 @@
-# http://editorconfig.org
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
 root = true
 
 [*]
 indent_style = space
 indent_size = 2
+end_of_line = lf
 charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
 trim_trailing_whitespace = false
+insert_final_newline = false

.env.development

@@ -2,12 +2,17 @@
 # TARO_APP_ID="开发环境下的小程序appid"
 
 
-TARO_APP_API = 'https://game.wanzhuanyongcheng.cn/dice'
+TARO_APP_API = 'https://game.wanzhuanyongcheng.cn'
 
 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'
+# 大转盘
+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'

.env.one

@@ -1,6 +0,0 @@
-
-TARO_APP_API = 'https://www.jdt168.com/dice'
-
-TARO_APP_WS = 'wss://www.jdt168.com/dice/home'
-
-TARO_APP_HOME = 'https://www.wanzhuanyongcheng.cn/app/game'

.env.production

@@ -0,0 +1,14 @@
+
+TARO_APP_API = 'https://www.jdt168.com'
+
+TARO_APP_WS = 'wss://www.jdt168.com/dice/home'
+
+TARO_APP_HOME = 'https://www.wanzhuanyongcheng.cn/app/game'
+
+# 大转盘
+TARO_APP_TURNTABLE_WS = 'wss://turntable.jdt168.com/turntable/home'
+
+TARO_APP_TURNTABLE_API = 'https://turntable.jdt168.com/turntable'
+
+# 澳拾
+TARO_APP_AOSHI_API = 'https://australia.jdt168.com'

.env.test

@@ -1,12 +1,17 @@
 # TARO_APP_ID="测试环境下的小程序appid"
 
 
-TARO_APP_API = 'https://game.wanzhuanyongcheng.cn/dice'
+TARO_APP_API = 'https://game.wanzhuanyongcheng.cn'
 
 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'
+# 大转盘
+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'

.env.tow

@@ -1,6 +0,0 @@
-
-TARO_APP_API = 'https://betting2.wanzhuanyongcheng.com/dice'
-
-TARO_APP_WS = 'wss://betting2.wanzhuanyongcheng.com/dice/home'
-
-TARO_APP_HOME = 'https://betting2.wanzhuanyongcheng.com/app/game'

.idea/.gitignore

@@ -1,8 +0,0 @@
-# 默认忽略的文件
-/shelf/
-/workspace.xml
-# 基于编辑器的 HTTP 客户端请求
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml

.idea/git_toolbox_prj.xml

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="GitToolBoxProjectSettings">
-    <option name="commitMessageIssueKeyValidationOverride">
-      <BoolValueOverride>
-        <option name="enabled" value="true" />
-      </BoolValueOverride>
-    </option>
-    <option name="commitMessageValidationEnabledOverride">
-      <BoolValueOverride>
-        <option name="enabled" value="true" />
-      </BoolValueOverride>
-    </option>
-  </component>
-</project>

.idea/inspectionProfiles/Project_Default.xml

@@ -1,7 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
-  </profile>
-</component>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/newGameHome.iml" filepath="$PROJECT_DIR$/.idea/newGameHome.iml" />
-    </modules>
-  </component>
-</project>

.idea/newGameHome.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

.idea/watcherTasks.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
-</project>

package.json

@@ -15,8 +15,6 @@
 		"build:tt": "taro build --type tt",
 		"build:h5": "taro build --type h5",
 		"build:h5:test": "taro build --type h5 --mode test",
-		"build:one": "taro build --type h5 --mode one",
-		"build:tow": "taro build --type h5 --mode tow",
 		"build:rn": "taro build --type rn",
 		"build:qq": "taro build --type qq",
 		"build:jd": "taro build --type jd",
@@ -58,32 +56,31 @@
 	"author": "",
 	"dependencies": {
 		"@babel/runtime": "^7.22.11",
-		"@sentry/browser": "^7.81.0",
+		"@tarojs/components": "3.6.34",
-		"@sentry/vue": "^7.81.0",
+		"@tarojs/helper": "3.6.34",
-		"@sentry/webpack-plugin": "^2.10.1",
+		"@tarojs/plugin-framework-vue3": "3.6.34",
-		"@tarojs/components": "3.6.20",
+		"@tarojs/plugin-platform-alipay": "3.6.34",
-		"@tarojs/helper": "3.6.20",
+		"@tarojs/plugin-platform-h5": "3.6.34",
-		"@tarojs/plugin-framework-vue3": "3.6.20",
+		"@tarojs/plugin-platform-jd": "3.6.34",
-		"@tarojs/plugin-platform-alipay": "3.6.20",
+		"@tarojs/plugin-platform-qq": "3.6.34",
-		"@tarojs/plugin-platform-h5": "3.6.20",
+		"@tarojs/plugin-platform-swan": "3.6.34",
-		"@tarojs/plugin-platform-jd": "3.6.20",
+		"@tarojs/plugin-platform-tt": "3.6.34",
-		"@tarojs/plugin-platform-qq": "3.6.20",
+		"@tarojs/plugin-platform-weapp": "3.6.34",
-		"@tarojs/plugin-platform-swan": "3.6.20",
+		"@tarojs/runtime": "3.6.34",
-		"@tarojs/plugin-platform-tt": "3.6.20",
+		"@tarojs/shared": "3.6.34",
-		"@tarojs/plugin-platform-weapp": "3.6.20",
+		"@tarojs/taro": "3.6.34",
-		"@tarojs/runtime": "3.6.20",
+		"dayjs": "^1.11.10",
-		"@tarojs/shared": "3.6.20",
+		"lottie-web": "^5.12.2",
-		"@tarojs/taro": "3.6.20",
 		"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.20",
+		"@tarojs/cli": "3.6.34",
-		"@tarojs/taro-loader": "3.6.20",
+		"@tarojs/taro-loader": "3.6.34",
 		"@tarojs/test-utils-vue3": "^0.1.1",
-		"@tarojs/webpack5-runner": "3.6.20",
+		"@tarojs/webpack5-runner": "3.6.34",
 		"@types/jest": "^29.5.4",
 		"@types/node": "^20.5.7",
 		"@types/webpack-env": "^1.18.1",
@@ -91,12 +88,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.20",
+		"babel-preset-taro": "3.6.34",
 		"commitizen": "^4.3.0",
 		"css-loader": "6.8.1",
 		"cz-customizable": "^7.0.0",
 		"eslint": "^8.48.0",
-		"eslint-config-taro": "3.6.20",
+		"eslint-config-taro": "3.6.34",
 		"eslint-plugin-vue": "^9.17.0",
 		"husky": "^8.0.0",
 		"jest": "^29.6.4",
@@ -110,5 +107,6 @@
 		"typescript": "^5.2.2",
 		"vue-loader": "^17.2.2",
 		"webpack": "5.88.2"
-	}
+	},
+	"packageManager": "pnpm@9.1.4+sha512.9df9cf27c91715646c7d675d1c9c8e41f6fce88246f1318c1aa6a1ed1aeb3c4f032fcdf4ba63cc69c4fe6d634279176b5358727d8f2cc1e65b65f43ce2f8bfb0"
 }

src/api/index.ts

@@ -2,16 +2,37 @@ import request from '@/utils/request'
 
 export const getGameOption = () =>
   request({
-    url: '/betting',
+    url: '/dice/betting',
     method: 'GET',
   })
 
-export const getKaiJiangList = () => request({ url: '/draw', method: 'GET' })
+export const getKaiJiangList = () => request({ url: '/dice/draw', method: 'GET' })
 
 // 用户信息
 export const getJfDz = (uid: string) =>
-  request({ url: `/userBettingInfo?uid=${uid}`, method: 'GET' })
+  request({ url: `/dice/userBettingInfo?uid=${uid}`, method: 'GET' })
 
 // 用户投注记录
 export const getTzJl = (uid: string) =>
-  request({ url: `/userBettingRecord?uid=${uid}`, method: 'GET' })
+  request({ url: `/dice/userBettingRecord?uid=${uid}`, method: 'GET' })
+
+// 大转盘相关api
+
+// 获取开奖记录
+export const get_turntable_list = () => request({ url: '/australia/list', method: 'GET' })
+
+//  获取个人信息
+export const get_user_info = (uid: string) =>
+  request({ url: `/australia/user/info?uid=${uid}`, method: 'GET' })
+
+// 大转盘投注
+export const turntable_bet = (data: any) =>
+  request({ url: '/australia/user/dice', method: 'POST', data })
+
+// 获取大转盘投注记录
+export const get_turntable_bet_record = (uid: string, date: string) =>
+  request({ url: `/australia/user/record?uid=${uid}&date=${date}`, method: 'GET' })
+
+// 获取大转盘开奖记录
+export const get_turntable_open_record = () =>
+  request({ url: `/australia/history/list`, method: 'GET' })

src/app.config.ts

@@ -1,17 +1,21 @@
 export default defineAppConfig({
   pages: [
     'pages/index/index',
+    'pages/webview/index',
     'pages/yaotouzi/index/index',
     'pages/game_detail/index',
     'pages/yaotouzi/records/index',
     'pages/balloon/index/index',
     'pages/balloon/records/index',
+    'pages/aoshi/index/index',
+    'pages/aoshi/records/index',
+    'pages/turntable/index/index',
+    'pages/turntable/records/index',
   ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
     navigationBarTitleText: 'Game',
     navigationBarTextStyle: 'black',
-  },
+  }
-  animation: false,
 })

src/app.scss

@@ -1,8 +1,10 @@
-.taro_page {
+// .taro_page {
-  background-color: #f5f5f5 !important;
+//   background-color: #f5f5f5 !important;
-  // width: 100vw !important;
+// }
-  // height: 100vh !important;
+
-}
+// body {
+//   line-height: 1;
+// }
 
 .mt-15 {
   margin-top: 15px;

src/components/Popup.vue

@@ -0,0 +1,35 @@
+<template>
+  <view class="mask" v-if="show" @click="isShowFn">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emits = defineEmits(['isShow'])
+
+const isShowFn = () => {
+  emits('isShow')
+}
+</script>
+
+<style lang="scss">
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+}
+</style>

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/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.config.ts

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

src/pages/aoshi/index/index.scss

@@ -0,0 +1,564 @@
+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/wu.png') no-repeat;
+        // background-size: contain;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) rotate(-0.8deg);
+
+        .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(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;
+            }
+          }
+        }
+      }
+    }
+
+    .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: 30px;
+    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%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+    margin-top: 30px;
+
+    .item {
+      background-size: 100% 100%;
+      width: 220px;
+      min-width: 220px;
+      height: 75px;
+      display: flex;
+      align-items: center;
+      margin: 10px auto;
+
+      .icon {
+        background-image: url('../../../static/dz.png');
+        background-size: 100% 100%;
+        width: 55px;
+        height: 55px;
+        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: 40px;
+        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: 310px;
+      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;
+  }
+}
+
+.popup-content {
+  background-color: #fff;
+  width: 70%;
+  padding: 20px;
+  border-radius: 8px;
+}

src/pages/aoshi/index/index.vue

@@ -0,0 +1,490 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import Taro from '@tarojs/taro'
+import Lottie from 'lottie-web'
+import HPopup from '../../../components/Popup.vue'
+import * as dayjs from 'dayjs'
+import dan from '../../../static/dan.png'
+import he from '../../../static/he.png'
+import shuang from '../../../static/shuang.png'
+import kd from '../../../static/kd.png'
+import kh from '../../../static/kh.png'
+import ks from '../../../static/ks.png'
+import wu from '../../../static/wu.png'
+import wzj from '../../../static/wzj.json'
+import zj from '../../../static/zj.json'
+import './index.scss'
+
+Taro.useDidShow(() => {
+  startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3', true)
+  getUserInfo()
+  getBetList()
+  getList()
+})
+
+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 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 bet_index = ref<number | null>(null)
+
+const timeStr = ref('')
+
+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 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 = 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'))
+
+  if (m === 0 && s === 0) {
+    clearInterval(timeId.value)
+    clearInterval(time_i.value)
+    getList()
+    setTimeout(() => {
+      startRun(list.value[0].name)
+    }, 1500)
+  }
+}
+
+const startRun = (name: string) => {
+  if (!name)
+    return Taro.showToast({
+      title: '未知开奖结果',
+      mask: true,
+      icon: 'none',
+      duration: 1000,
+    })
+  isRunning.value = true
+
+  innerAudioContext.stop()
+
+  startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/1.mp3', false)
+
+  turntable_list.value.forEach((item) => {
+    item.isActive = false
+  })
+
+  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
+  }
+
+  let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)
+
+  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()
+      startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3', true)
+    }, 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',
+    })
+  Taro.request({
+    url: `${process.env.TARO_APP_AOSHI_API}/australia/user/dice`,
+    method: 'POST',
+    data: {
+      name: arr[0].name,
+      uid: Taro.getStorageSync('uid'),
+      aid: String(betObj.ID),
+      game_id: String(Taro.getStorageSync('gameItem').ID),
+    },
+    success: ({ data: res }) => {
+      Taro.showToast({
+        title: res.msg,
+        icon: 'none',
+      })
+    },
+  })
+  setTimeout(() => {
+    getUserInfo()
+  }, 500)
+}
+
+// 前往开奖和投注记录
+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()
+}
+
+Taro.useDidHide(() => {
+  clearInterval(timeId.value)
+  clearInterval(time_i.value)
+  innerAudioContext.stop()
+})
+
+onBeforeUnmount(() => {
+  clearInterval(timeId.value)
+  clearInterval(time_i.value)
+  innerAudioContext.stop()
+})
+
+const showPopup = ref(false)
+const game_info = ref<any>({})
+
+Taro.useDidShow(() => {
+  game_info.value = Taro.getStorageSync('gameItem')
+})
+</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" @click="showPopup = true"></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>
+    <view id="lottie" v-show="isLottie"></view>
+    <!-- 弹窗 -->
+    <HPopup :show="showPopup" @isShow="showPopup = false">
+      <view class="popup-content">
+        <rich-text :nodes="game_info.introduction"></rich-text>
+      </view>
+    </HPopup>
+  </view>
+</template>

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

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

src/pages/aoshi/records/index.vue

@@ -0,0 +1,143 @@
+<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.preDrawIssue }}期开奖:
+                        <text
+                            :style="{
+                                color: numColor(item.name),
+                            }"
+                        >
+                            {{ item.name }}
+                        </text>
+                        <view>
+                            {{ item.preDrawCode }}
+                        </view>
+                    </view>
+                    <view>开奖时间: {{ item.preDrawTime }}</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 'orange'
+        case '双':
+            return 'blue'
+        case '和':
+            return 'purple'
+        default:
+            return 'black'
+    }
+}
+
+const getData = async () => {
+    if (typeNum.value === 1) {
+        Taro.request({
+            url: `${process.env.TARO_APP_AOSHI_API}/australia/history/list`,
+            method: 'GET',
+            success: ({ data: res }) => {
+                list.value = res.data.data.data || []
+            },
+        })
+    } else {
+        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">
+.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/pages/balloon/index/index.scss

@@ -47,3 +47,10 @@
     }
   }
 }
+
+.popup-content {
+  background-color: #fff;
+  width: 70%;
+  padding: 20px;
+  border-radius: 8px;
+}

src/pages/game_detail/index.vue

@@ -20,17 +20,24 @@ 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 = () => {
-  console.log(info.value)
+  // 判断url中是否含有http
+  if (info.value.url.indexOf('http') === -1) {
     Taro.navigateTo({
       url: info.value.url,
     })
+  } else {
+    Taro.setStorageSync("url", `${info.value.url}?uid=${Taro.getStorageSync('uid')}&game_id=${info.value.ID}`)
+    Taro.navigateTo({
+      url: `/pages/webview/index`,
+    })
+  }
 }
 </script>

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>
@@ -38,7 +42,7 @@ const getList = async () => {
         url: `${process.env.TARO_APP_HOME}`,
         method: 'POST',
         success: ({ data: res }) => {
-      list.value = res.data.data || []
+            list.value = res.data.data.sort((a: any, b: any) => b.sort - a.sort) || []
         },
     })
 }

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,564 @@
+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/wu.png') no-repeat;
+                // background-size: contain;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%) rotate(0deg);
+
+                .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(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;
+                        }
+                    }
+                }
+            }
+        }
+
+        .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: 30px;
+        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%;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 10px;
+        margin-top: 30px;
+
+        .item {
+            background-size: 100% 100%;
+            width: 220px;
+            min-width: 220px;
+            height: 75px;
+            display: flex;
+            align-items: center;
+            margin: 10px auto;
+
+            .icon {
+                background-image: url('../../../static/dz.png');
+                background-size: 100% 100%;
+                width: 55px;
+                height: 55px;
+                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: 40px;
+                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: 310px;
+            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;
+    }
+}
+
+.popup-content {
+  background-color: #fff;
+  width: 70%;
+  padding: 20px;
+  border-radius: 8px;
+}

src/pages/turntable/index/index.vue

@@ -0,0 +1,537 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import Taro from '@tarojs/taro'
+import Lottie from 'lottie-web'
+import * as dayjs from 'dayjs'
+import HPopup from '../../../components/Popup.vue'
+import dan from '../../../static/dan.png'
+import he from '../../../static/he.png'
+import shuang from '../../../static/shuang.png'
+import kd from '../../../static/kd-1.png'
+import kh from '../../../static/kh-1.png'
+import ks from '../../../static/kX.png'
+import wu from '../../../static/kk.png'
+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()
+  initWs()
+})
+
+const ws = ref<null | WebSocket>(null)
+
+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: 100,
+  },
+  {
+    id: 2,
+    name: 1000,
+  },
+  {
+    id: 3,
+    name: 1200,
+  },
+  {
+    id: 4,
+    name: 2000,
+  },
+])
+
+const newKjNum = ref(1)
+
+const list = ref<
+  {
+    Periods?: number
+    Name?: string
+  }[]
+>([])
+
+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=${
+      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()
+    }, 5000)
+  }
+}
+
+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 = () => {
+  Taro.request({
+    url: `${process.env.TARO_APP_TURNTABLE_API}/draw`,
+    method: 'GET',
+    success: ({ data: res }) => {
+      list.value = res.data.data || []
+      newKjNum.value = (list.value[0].Periods 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: 2,
+    name: '小',
+    url: shuang,
+    isActive: false,
+    activeUrl: ks,
+  },
+  {
+    id: 1,
+    url: dan,
+    name: '大',
+    isActive: false,
+    activeUrl: kd,
+  },
+])
+
+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 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()
+})
+
+const startRun = (name: string) => {
+  if (!name)
+    return Taro.showToast({
+      title: '未知开奖结果',
+      mask: true,
+      icon: 'none',
+      duration: 1000,
+    })
+  isRunning.value = true
+
+  innerAudioContext.stop()
+
+  startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/1.mp3', false)
+
+  turntable_list.value.forEach((item) => {
+    item.isActive = false
+  })
+
+  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
+  }
+
+  let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)
+
+  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
+    bgUrl.value = wu
+    getBetJl()
+    setTimeout(() => {
+      getList()
+      getUserInfo()
+      startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3', true)
+    }, 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}`,
+  })
+}
+
+// 动画相关
+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_TURNTABLE_API}/userTurntableRecord?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) {
+        // 是否下注
+        if (newKjNum.value - data.Periods === 0) {
+          // 是否中奖
+          if (data.DrawNum > 0) {
+            lottieFn(1, data.DrawNum)
+          } else {
+            lottieFn(2)
+          }
+        }
+      }
+    },
+  })
+}
+
+Taro.useDidHide(() => {
+  ws.value?.close()
+  innerAudioContext.stop()
+})
+
+onBeforeUnmount(() => {
+  ws.value?.close()
+  innerAudioContext.stop()
+})
+
+const showPopup = ref(false)
+const game_info = ref<any>({})
+
+Taro.useDidShow(() => {
+  game_info.value = Taro.getStorageSync('gameItem')
+})
+</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" @click="showPopup = true"></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
+            :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.name }}</view>
+      </view>
+    </view>
+    <view id="lottie" v-show="isLottie"></view>
+
+    <!-- 弹窗 -->
+    <HPopup :show="showPopup" @isShow="showPopup = false">
+      <view class="popup-content">
+        <rich-text :nodes="game_info.introduction"></rich-text>
+      </view>
+    </HPopup>
+  </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,144 @@
+<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 }}期开奖:
+                        <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 }) => {
+                list.value = res.data.data || []
+            },
+        })
+    }
+    Taro.stopPullDownRefresh()
+}
+</script>
+
+<style lang="scss">
+.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/pages/webview/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '',
+})

src/pages/webview/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <view>
+    <web-view :src="src" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Taro from '@tarojs/taro'
+
+const src = ref('')
+
+Taro.useLoad((e) => {
+  src.value = Taro.getStorageSync("url")
+})
+</script>
+
+<style lang="scss"></style>

src/pages/yaotouzi/index/index.vue

@@ -35,7 +35,9 @@
                 </view>
                 <view class="right">
                     <view class="btn" @click="utils.vibrateShort(() => toPage(1))">开奖记录</view>
-          <view class="btn mt-15" @click="utils.vibrateShort(() => toPage(2))">投注记录</view>
+                    <view class="btn mt-15" @click="utils.vibrateShort(() => toPage(2))">
+                        投注记录
+                    </view>
                 </view>
             </view>
             <!--  选项区  -->
@@ -206,7 +208,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, onBeforeUnmount } from 'vue'
 import Taro from '@tarojs/taro'
 import { app } from '@/config'
 import { getGameOption, getKaiJiangList, getJfDz } from '@/api'
@@ -286,6 +288,11 @@ Taro.useDidHide(() => {
     ws.value?.close()
 })
 
+onBeforeUnmount(() => {
+    console.log('useBeforeUnmount')
+    ws.value?.close()
+})
+
 const initData = () => {
     qzTitle.value = '请投注'
     getOddList()

src/pages/yaotouzi/records/index.vue

@@ -102,6 +102,9 @@ const getData = async () => {
 </script>
 
 <style lang="scss" scoped>
+.taro_page {
+  background-color: #f5f5f5 !important;
+}
 .app {
   display: flex;
   flex-direction: column;

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)