i

.env.dev

@@ -1,2 +0,0 @@
-# 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config
-# TARO_APP_ID="开发环境下的小程序appid"

.env.development

@@ -0,0 +1,6 @@
+# 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config
+# TARO_APP_ID="开发环境下的小程序appid"
+
+
+TARO_APP_API = 'https://game.wanzhuanyongcheng.cn/dice'
+TARO_APP_WS = 'wss://game.wanzhuanyongcheng.cn/dice/home?uid='

.env.prod

@@ -1 +0,0 @@
-# TARO_APP_ID="生产环境下的小程序appid"

.env.production

@@ -0,0 +1,4 @@
+# TARO_APP_ID="生产环境下的小程序appid"
+
+TARO_APP_API = 'https://www.jdt168.com/dice'
+TARO_APP_WS = 'wss://www.jdt168.com/dice/home?uid='

.env.test

@@ -1 +1,5 @@
 # TARO_APP_ID="测试环境下的小程序appid"
+
+
+TARO_APP_API = 'https://game.wanzhuanyongcheng.cn/dice'
+TARO_APP_WS = 'wss://game.wanzhuanyongcheng.cn/dice/home?uid='

config/index.ts

@@ -6,7 +6,7 @@ import prodConfig from './prod'
 // https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
 export default defineConfig(async (merge, {}) => {
   const baseConfig: UserConfigExport = {
-    projectName: 'newGameHome',
+    projectName: 'GameHome',
     date: '2023-8-29',
     designWidth: 750,
     deviceRatio: {

package.json

@@ -14,6 +14,8 @@
     "build:alipay": "taro build --type alipay",
     "build:tt": "taro build --type tt",
     "build:h5": "taro build --type h5",
+    "build:h5:test": "taro build --type h5 --mode test",
+    "dev": "npm run build:h5 -- --watch --mode production",
     "build:rn": "taro build --type rn",
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",

src/config/index.ts

@@ -1,13 +1,7 @@
 // 用于配置项目的一些常量，如接口地址、websocket地址等
-import Taro from '@tarojs/taro'
+import Taro from "@tarojs/taro";
 
 export const app = {
-  API_URL: () =>
+  API_URL: () => `${process.env.TARO_APP_API}`,
-    process.env.NODE_ENV === 'production'
+  API_WS: () => `${process.env.TARO_APP_WS}${Taro.getStorageSync("uid")}`,
-      ? 'https://www.jdt168.com/dice'
+};
-      : 'https://www.jdt168.com/dice',
-  API_WS: () =>
-    process.env.NODE_ENV === 'production'
-      ? `wss://www.jdt168.com/dice/home?uid=${Taro.getStorageSync('uid')}`
-      : `wss://www.jdt168.com/dice/home?uid=${Taro.getStorageSync('uid')}`
-}

src/index.html

@@ -8,6 +8,7 @@
   <meta name="format-detection" content="telephone=no,address=no">
   <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>
   <script><%= htmlWebpackPlugin.options.script %></script>
 </head>

src/pages/game_detail/index.scss

@@ -32,3 +32,8 @@
     }
   }
 }
+.text {
+  padding: 10px;
+  font-size: 30px;
+  text-align: left;
+}

src/pages/game_detail/index.vue

@@ -1,36 +1,53 @@
 <template>
   <view class="index">
-    <swiper
+    <swiper class="swiper" :circular="true" :autoplay="true">
-      class='swiper'
+      <swiper-item v-for="(item, index) in list" :key="index">
-      :circular="true"
+        <image :src="item" />
-      :autoplay="true"
-    >
-      <swiper-item v-for="(item,index) in list" :key="index">
-        <image :src="item"/>
       </swiper-item>
     </swiper>
     <view class="container">
-      <view>摇骰子</view>
+      <!-- <view>摇骰子</view> -->
       <view>游戏介绍</view>
-      <view>。。。。。。。。。。</view>
+      <view class="text">
-      <view>游戏简介</view>
+        <view>用户需要购买平台促销商品获得游戏豆;</view>
-      <view>。。。。。。。。。。</view>
+        <view>竞猜游戏消耗游戏豆;</view>
+        <view>游戏积分作为竞猜奖品;</view>
+        <view>竞猜限制: 用户进行竞猜，大小两格限制20000/格，其它限制5000/格;</view>
+        <view>活动时间: 我们将在活动页面提示活动时间；</view>
+      </view>
+
+      <view>骰子竞猜规则</view>
+      <view class="text">
+        <view
+          >竞猜方式:
+          参与者需要在规定时间内，提交自己的竞猜范围，参与者需要预测两个骰子相加的点数或大、小范围，请确保你的预测在正确范围内;</view
+        >
+        <view
+          >结算方式:
+          我们将根据所有参与者的猜测结果进行统计和比对，找出与实际骰子点数相同的预测，实时开奖，发送奖励;</view
+        >
+        <view
+          >奖励机制:
+          奖励将根据活动参与人竞猜游戏豆数额做结算，将以游戏积分方式发放给猜中相同开奖点数的的幸运者;</view
+        >
+      </view>
       <view class="btn" @click="startGame()">开始游戏</view>
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
-import {ref} from 'vue'
+import { ref } from "vue";
-import Taro from '@tarojs/taro'
+import Taro from "@tarojs/taro";
-import './index.scss'
+import "./index.scss";
-
-const list = ref(['https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg', 'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg', 'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg', 'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'])
 
+const list = ref([
+  "https://files.wanzhuanyongcheng.com/file/img/yaotouzi/banner/qietu.png",
+]);
 
 const startGame = () => {
   Taro.navigateTo({
-    url: '/pages/yaotouzi/index/index'
+    url: "/pages/yaotouzi/index/index",
-  })
+  });
-}
+};
 </script>

src/pages/index/index.scss

@@ -19,6 +19,23 @@
       border-radius: 20px;
       text-align: center;
       line-height: 300px;
+      background-image: url("../../static/qietu.png");
+      background-size: 100% 100%;
+      position: relative;
+
+      .btn {
+        position: absolute;
+        width: 150px;
+        height: 100px;
+        background-image: url("../../static/an.png");
+        background-size: 100% 100%;
+        right: 30px;
+        bottom: 10px;
+
+        &:active {
+          transform: scale(1.1);
+        }
+      }
     }
   }
 }

src/pages/index/index.vue

@@ -3,42 +3,43 @@
     <view class="title">游戏大厅</view>
 
     <view class="card_list">
-      <view class="card_item" v-for="item in list" :key="item.id" @click="toPage(item.id)">{{ item.name }}</view>
+      <view class="card_item" v-for="item in list" :key="item.id">
+        <view class="btn" @click="toPage(item.id)"></view>
+      </view>
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
-import {ref} from "vue";
+import { ref } from "vue";
 import Taro from "@tarojs/taro";
 import "./index.scss";
 
 Taro.useLoad((options) => {
-  if (options.uid) {
+  Taro.setStorageSync("uid", options.uid);
+  if (Taro.getStorageSync("uid")) {
     Taro.showToast({
-      title: "登陆成功",
+      title: `登陆成功`,
       icon: "none",
-    })
+    });
-    Taro.setStorageSync("uid", options.uid)
   } else {
     Taro.showToast({
       title: "登陆失败，请重新进入游戏大厅",
       icon: "none",
-    })
+    });
   }
-})
+});
 
 const list = ref([
   {
     id: 1,
-    name: "摇骰子"
+    name: "摇骰子",
-  }
+  },
-])
+]);
 
 const toPage = (id: number) => {
   Taro.navigateTo({
-    url: `/pages/game_detail/index?id=${id}`
+    url: `/pages/game_detail/index?id=${id}`,
-  })
+  });
-}
+};
-
 </script>

src/pages/yaotouzi/index/index.scss

@@ -10,8 +10,8 @@
   //}
 
   .userInfo {
-    width: 90%;
+    width: 92%;
-    margin: 20px auto;
+    margin: 10px auto;
     //margin: auto;
     padding: 20px;
     display: flex;
@@ -73,8 +73,8 @@
   }
 
   .gameInfo {
-    width: 90%;
+    width: 92%;
-    margin: 20px auto;
+    margin: auto;
     padding: 20px;
     display: flex;
     justify-content: space-between;
@@ -138,13 +138,15 @@
 
   .opt {
     display: flex;
-    justify-content: space-evenly;
+    justify-content: space-between;
+    margin: 0 10px;
     flex-wrap: wrap;
 
     .item {
-      width: 18%;
+      width: 19%;
       text-align: center;
       //margin: auto 3px;
+      margin-top: 10px;
       border: 1px dashed #228960;
       position: relative;
 
@@ -178,6 +180,11 @@
         }
       }
     }
+
+    .item1 {
+      width: 24%;
+    }
+
   }
 
   .opt1 {
@@ -187,7 +194,8 @@
     text-align: center;
     box-sizing: border-box;
     height: 400px;
-    padding: 10px;
+    padding: 0 10px;
+    margin-top: 10px;
 
     .optt {
       width: 27%;
@@ -256,7 +264,7 @@
       .qz {
         background-image: url("../../../static/qz.png");
         background-size: 100% 100%;
-        width: 100%;
+        width: 90%;
         height: 25%;
         margin-bottom: 20px;
         line-height: 100px;
@@ -410,3 +418,31 @@
     opacity: 1;
   }
 }
+
+
+.card {
+  width: 92%;
+  padding: 20px;
+  margin: 10px auto;
+  border-radius: 10px;
+
+  .sub {
+    margin-top: 10px;
+    color: #555555;
+  }
+}
+
+
+.close {
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  background-color: rgba(255, 0, 0, 0.4);
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  text-align: center;
+  line-height: 30px;
+  font-size: 25px;
+  z-index: 1;
+}

src/pages/yaotouzi/index/index.vue

@@ -8,7 +8,7 @@
         <view class="left">
           <image :src="userInfo.avatarUrl"></image>
           <view class="userText">
-            <view class="userName">{{ userInfo.nickName || '用户' }}</view>
+            <view class="userName">{{ userInfo.nickName || "用户" }}</view>
             <view class="userScore">积分: {{ userInfo.integral || 0 }}</view>
           </view>
         </view>
@@ -22,7 +22,7 @@
         <view class="left">
           <image src="../../../static/tx.png"></image>
           <view class="game_box">
-            <view class="gameName">第{{ kJData[0]?.Periods || 0 }}期开奖</view>
+            <view class="gameName">{{ kJData[0]?.Periods || 0 }}期开奖</view>
             <view class="lottery">
               <text class="text">{{ kJData[0]?.Start || 0 }}</text>
               <text class="text">{{ kJData[0]?.End || 0 }}</text>
@@ -34,36 +34,74 @@
           <view>剩余{{ time }}s开奖</view>
         </view>
         <view class="right">
-          <view class="btn" @click="toPage(1)">开奖记录</view>
+          <view class="btn" @click="utils.vibrateShort(() => toPage(1))"
-          <view class="btn mt-15" @click="toPage(2)">投注记录</view>
+            >开奖记录</view
+          >
+          <view class="btn mt-15" @click="utils.vibrateShort(() => toPage(2))"
+            >投注记录</view
+          >
         </view>
       </view>
       <!--  选项区  -->
       <view class="opt">
-        <view class="subColor item" :class="{flicker: item.flicker}" v-for="item in odds" :key="item.id"
+        <view
-              @click.stop="addNum(item)">
+          class="subColor item"
+          :class="{ flicker: item.flicker }"
+          v-for="item in odds"
+          :key="item.id"
+          @click.stop="utils.vibrateShort(() => addNum(item))"
+        >
           <view class="name">{{ item.name }}</view>
           <view class="odd">赢{{ item.odds }}倍</view>
           <view class="mask" v-if="item.status">
-            <view class="text">{{ item.markNum }}</view>
+            <!-- <view class="text">{{ item.markNum }}</view> -->
+            <view class="text">{{ item.numStr }}</view>
           </view>
+          <view
+            class="close"
+            v-if="item.status"
+            @click.stop="utils.vibrateShort(() => clearOneBet(item))"
+            >x</view
+          >
         </view>
       </view>
       <view class="opt1" v-if="odds1.length > 0">
         <view class="optt">
-          <view class="subColor item" :class="{flicker: odds1[0].flicker}" @click.stop="addNum(odds1[0])">
+          <view
+            class="subColor item"
+            :class="{ flicker: odds1[0].flicker }"
+            @click.stop="utils.vibrateShort(() => addNum(odds1[0]))"
+          >
             <view class="name">{{ odds1[0].name }}</view>
             <view class="odd">赢{{ odds1[0].odds }}倍</view>
             <view class="mask" v-if="odds1[0].status">
-              <view class="text">{{ odds1[0].markNum }}</view>
+              <!-- <view class="text">{{ odds1[0].markNum }}</view> -->
+              <view class="text">{{ odds1[0].numStr }}</view>
             </view>
+            <view
+              class="close"
+              v-if="odds1[0].status"
+              @click.stop="utils.vibrateShort(() => clearOneBet(odds1[0]))"
+              >x</view
+            >
           </view>
-          <view class="subColor item" :class="{flicker: odds1[1].flicker}" @click.stop="addNum(odds1[1])">
+          <view
+            class="subColor item"
+            :class="{ flicker: odds1[1].flicker }"
+            @click.stop="utils.vibrateShort(() => addNum(odds1[1]))"
+          >
             <view class="name">{{ odds1[1].name }}</view>
             <view class="odd">赢{{ odds1[1].odds }}倍</view>
             <view class="mask" v-if="odds1[1].status">
-              <view class="text">{{ odds1[1].markNum }}</view>
+              <!-- <view class="text">{{ odds1[1].markNum }}</view> -->
+              <view class="text">{{ odds1[1].numStr }}</view>
             </view>
+            <view
+              class="close"
+              v-if="odds1[1].status"
+              @click.stop="utils.vibrateShort(() => clearOneBet(odds1[1]))"
+              >x</view
+            >
           </view>
         </view>
         <view class="base">
@@ -72,411 +110,600 @@
               {{ qzTitle }}
             </view>
           </view>
-          <view class="expanding-div" v-if="isShow">{{ nowKJInfo.Start }} - {{ nowKJInfo.End }}</view>
+          <view class="expanding-div" v-if="isShow"
+            >{{ nowKJInfo.Start }} - {{ nowKJInfo.End }}</view
+          >
         </view>
         <view class="optt">
-          <view class="subColor item" :class="{flicker: odds1[2].flicker}" @click.stop="addNum(odds1[2])">
+          <view
+            class="subColor item"
+            style="height: 100%"
+            :class="{ flicker: odds1[2].flicker }"
+            @click.stop="utils.vibrateShort(() => addNum(odds1[2]))"
+          >
             <view class="name">{{ odds1[2].name }}</view>
             <view class="odd">赢{{ odds1[2].odds }}倍</view>
             <view class="mask" v-if="odds1[2].status">
-              <view class="text">{{ odds1[2].markNum }}</view>
+              <!-- <view class="text">{{ odds1[2].markNum }}</view> -->
+              <view class="text">{{ odds1[2].numStr }}</view>
             </view>
+            <view
+              class="close"
+              v-if="odds1[2].status"
+              @click.stop="utils.vibrateShort(() => clearOneBet(odds1[2]))"
+              >x</view
+            >
           </view>
-          <view class="subColor item" :class="{flicker: odds1[3].flicker}" @click.stop="addNum(odds1[3])">
+          <!-- <view
+            class="subColor item"
+            :class="{ flicker: odds1[3].flicker }"
+            @click.stop="addNum(odds1[3])"
+          >
             <view class="name">{{ odds1[3].name }}</view>
             <view class="odd">赢{{ odds1[3].odds }}倍</view>
             <view class="mask" v-if="odds1[3].status">
               <view class="text">{{ odds1[3].markNum }}</view>
             </view>
-          </view>
+          </view> -->
         </view>
       </view>
       <view class="opt">
         <view
-          class="subColor item"
+          class="subColor item item1"
-          :class="{flicker: item.flicker}"
+          :class="{ flicker: item.flicker }"
-          style="margin-bottom: 10px"
           v-for="item in odds2"
           :key="item.id"
-          @click.stop="addNum(item)"
+          @click.stop="utils.vibrateShort(() => addNum(item))"
         >
           <view class="name">{{ item.name }}</view>
           <view class="odd">赢{{ item.odds }}倍</view>
           <view class="mask" v-if="item.status">
-            <view class="text">{{ item.markNum }}</view>
+            <!-- <view class="text">{{ item.markNum }}</view> -->
+            <view class="text">{{ item.numStr }}</view>
+          </view>
+          <view
+            class="close"
+            v-if="item.status"
+            @click.stop="utils.vibrateShort(() => clearOneBet(item))"
+            >x</view
+          >
+        </view>
+      </view>
+      <scroll-view style="height: 25%" scroll-y>
+        <view
+          class="card subColor"
+          v-for="(item,index) in kjList as any[]"
+          :key="index"
+        >
+          <view>
+            <view
+              >第{{ item.Periods }}期开奖:
+              <text style="color: red">{{ item.Start }} , {{ item.End }}</text>
+              <text
+                v-for="(num, i) in item.Name"
+                :key="i"
+                :style="{
+                  color: numColor(num),
+                }"
+              >
+                , {{ num }}
+              </text>
+            </view>
+            <!--          <view class="sub">开奖个数:-->
+            <!--            <text v-for="(num,i) in item.Name" :key="i" :style="{-->
+            <!--              color: numColor(num)-->
+            <!--            }">{{ num }},-->
+            <!--            </text>-->
+            <!--          </view>-->
           </view>
         </view>
-        <view style="width: 18%;"></view>
+      </scroll-view>
-      </view>
     </scroll-view>
     <!--  底部操作栏  -->
     <view class="subColor bottomBar">
-      <view class="btn1" @click="clearBet">重置</view>
+      <view class="btn1" @click="utils.vibrateShort(() => clearBet(true))"
-      <view class="btn2" @click="changeOdd">X{{ oddVal }}</view>
+        >重置</view
-      <view class="btn3" @click="verifyBet">投注</view>
+      >
+      <view class="btn2" @click="utils.vibrateShort(() => changeOdd())"
+        >X{{ oddVal }}</view
+      >
+      <view class="btn3" @click="utils.vibrateShort(() => verifyBet())"
+        >投注</view
+      >
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
-import {ref} from 'vue'
+import { ref } from "vue";
-import Taro from '@tarojs/taro'
+import Taro from "@tarojs/taro";
-import {app} from '@/config'
+import { app } from "@/config";
-import {getGameOption, getKaiJiangList, getJfDz} from '@/api'
+import { getGameOption, getKaiJiangList, getJfDz } from "@/api";
+import utils from "@/utils";
 
-const ws = ref<null | WebSocket>(null)
+const ws = ref<null | WebSocket>(null);
 
 // 是否显示开奖动画
-const isShow = ref(false)
+const isShow = ref(false);
 
 // 是否开启文字放大动画
-const isExpanding = ref(false)
+const isExpanding = ref(false);
 
 interface Odd {
-  id?: number
+  id?: number;
-  name?: string
+  name?: string;
-  odds?: number
+  odds?: number;
-  markNum?: number
+  markNum?: number;
-  status?: boolean
+  status?: boolean;
-  flicker?: boolean
+  flicker?: boolean;
+  numStr?: number;
 }
 
-const odds = ref<Odd[]>([])
+const odds = ref<Odd[]>([]);
 
-const odds1 = ref<Odd[]>([])
+const odds1 = ref<Odd[]>([]);
 
-const odds2 = ref<Odd[]>([])
+const odds2 = ref<Odd[]>([]);
 
-const qzTitle = ref('请投注')
+const qzTitle = ref("请投注");
 
-const time = ref(0)
+const time = ref(0);
 
 const nowKJInfo = ref<{
-  Start?: string
+  Start?: string;
-  End?: string
+  End?: string;
-  Periods?: number
+  Periods?: number;
-}>({})
+}>({});
 
 const userInfo = ref<{
-  pulse?: number
+  pulse?: number;
-  integral?: number
+  integral?: number;
-  nickName?: string
+  nickName?: string;
-  avatarUrl?: string
+  avatarUrl?: string;
-}>({})
+}>({});
 
-const zjObj = ref<any>([])
+const zjObj = ref<any>([]);
 
-const iMsgNum = ref(0)
+const iMsgNum = ref(0);
 
-Taro.useLoad(() => {
+const numColor = (num: string) => {
-  initWs()
+  switch (num) {
-  initData()
+    case "大":
-})
+      return "red";
+    case "小":
+      return "green";
+    // case '单':
+    //   return 'orange'
+    // case '双':
+    //   return 'blue'
+    case "和":
+      return "purple";
+    default:
+      return "black";
+  }
+};
+
+Taro.useDidShow(() => {
+  console.log("useDidShow");
+  startMusic(
+    "https://files.wanzhuanyongcheng.com/file/music/yaotouzi/bg.MP3",
+    true
+  );
+  initWs();
+  initData();
+});
+
+Taro.useDidHide(() => {
+  console.log("useDidHide");
+  ws.value?.close();
+});
 
 const initData = () => {
-  qzTitle.value = '请投注'
+  qzTitle.value = "请投注";
-  getOddList()
+  getOddList();
-  getKJList()
+  getKJList();
-  getUserInfo()
+  getUserInfo();
-}
+};
 
-const arr = ['2+2', '3+3', '4+4', '5+5', '6+6']
+const arr = ["2+2", "3+3", "4+4", "5+5", "6+6"];
-const arr1 = ['大', '小', '单', '双']
+// const arr1 = ["大", "小", "单", "双"];
-const arr2 = ['和', '3', '4', '5', '6', '8', '9', '10', '11']
+// const arr2 = ["和", "3", "4", "5", "6", "8", "9", "10", "11"];
+const arr1 = ["大", "小", "和"];
+const arr2 = ["3", "4", "5", "6", "8", "9", "10", "11"];
 
 // 投注列表
 const getOddList = async () => {
-  const res = await getGameOption()
+  const res = await getGameOption();
-  odds.value = []
+  odds.value = [];
-  odds1.value = []
+  odds1.value = [];
-  odds2.value = []
+  odds2.value = [];
   res.data.data.forEach((item: any) => {
-    const {name, ID, odds: odd} = item
+    const { name, ID, odds: odd, max } = item;
     const newItem = {
       id: ID,
       name: name,
       odds: odd,
+      max: max,
       markNum: 0,
+      numStr: 0,
       status: false,
-      flicker: false
+      flicker: false,
+    };
+    if (Taro.getStorageSync("odds")) {
+      odds.value = Taro.getStorageSync("odds");
+      odds1.value = Taro.getStorageSync("odds1");
+      odds2.value = Taro.getStorageSync("odds2");
+    } else {
+      if (arr1.includes(name)) {
+        odds1.value.push(newItem);
+      } else if (arr.includes(name)) {
+        odds.value.push(newItem);
+      } else if (arr2.includes(name)) {
+        odds2.value.push(newItem);
+      }
     }
-    if (arr1.includes(name)) {
+  });
-      odds1.value.push(newItem)
+  // const el = odds2.value.splice(0, 1)[0];
-    } else if (arr.includes(name)) {
+  // odds2.value.splice(4, 0, el);
-      odds.value.push(newItem)
+  // console.log(odds1.value)
-    } else if (arr2.includes(name)) {
+};
-      odds2.value.push(newItem)
-    }
-  })
-}
 
 // 获取个人信息
 const getUserInfo = async () => {
-  const res = await getJfDz(Taro.getStorageSync('uid'))
+  const res = await getJfDz(Taro.getStorageSync("uid"));
-  userInfo.value = res.data.data
+  userInfo.value = res.data.data;
-}
+};
 
-const kJData = ref<any>([])
+const kJData = ref<any>([]);
+const kjList = ref<any>([]);
 
 // 开奖列表
 const getKJList = async () => {
-  const res = await getKaiJiangList()
+  const res = await getKaiJiangList();
-  kJData.value = res.data.data
+  kJData.value = res.data.data;
-}
+  kjList.value = res.data.data.map((item: any) => {
+    return {
+      ...item,
+      Name: item.Name.split("-"),
+    };
+  });
+};
 
 // 初始化游戏
 const initWs = () => {
-  ws.value = new WebSocket(`${app.API_WS()}`)
+  ws.value = new WebSocket(`${app.API_WS()}`);
   ws.value.onopen = async () => {
     Taro.showToast({
-      title: '连接游戏服务器成功',
+      title: "连接游戏服务器成功",
       mask: true,
-      icon: 'none'
+      icon: "none",
-    })
+    });
-  }
+  };
 
   ws.value.onmessage = async (e: any) => {
-    const res = JSON.parse(e.data)
+    const res = JSON.parse(e.data);
     switch (res.code) {
       case 200:
-        let num = Number(res.data)
+        let num = Number(res.data);
-        time.value = num
+        time.value = num;
         if (num === 5) {
-          openDraw()
+          openDraw();
         }
-        break
+        break;
       case 401:
         Taro.showToast({
-          title: '未登录',
+          title: "未登录",
           mask: true,
-          icon: 'none'
+          icon: "none",
-        })
+        });
-        break
+        break;
       case 403:
         Taro.showToast({
-          title: '未能操作',
+          title: "未能操作",
           mask: true,
-          icon: 'none'
+          icon: "none",
-        })
+        });
-        break
+        break;
       case 400:
         Taro.showToast({
-          title: '豆子不足',
+          title: "豆子不足",
           mask: true,
-          icon: 'none'
+          icon: "none",
-        })
+        });
-        break
+        break;
       case 5:
         Taro.showToast({
-          title: '投注成功',
+          title: "投注成功",
           mask: true,
-          icon: 'none'
+          icon: "none",
-        })
+        });
-        break
+        break;
-      case 666:
+      case 100:
-        break
+        Taro.showToast({
+          title: res.msg,
+          icon: "none",
+        });
+        break;
+      case 101:
+        Taro.showToast({
+          title: res.msg,
+          icon: "none",
+        });
+        break;
+      case 301:
+        Taro.showToast({
+          title: res.msg,
+          icon: "none",
+        });
+        setTimeout(() => {
+          Taro.navigateBack({
+            delta: 1,
+          });
+        }, 2000);
       default:
-        iMsgNum.value++
+        iMsgNum.value++;
-        const arr = Object.values(res)
+        zjObj.value = res;
-        zjObj.value.push(...arr)
+        break;
-        if (iMsgNum.value === 3 || zjObj.value.length === 1) {
-          iMsgNum.value = 0
-          startFlicker()
-        }
-        break
     }
-  }
+  };
   ws.value.onerror = () => {
-    console.log('连接游戏服务器失败')
+    console.log("连接游戏服务器失败");
     Taro.showToast({
-      title: '连接游戏服务器失败',
+      title: "连接游戏服务器失败",
       mask: true,
-      icon: 'none'
+      icon: "none",
-    })
+    });
-  }
+  };
-}
+};
 
-const isKj = ref(false)
+const isKj = ref(false);
 // 开奖倒计时
 const openDraw = () => {
-  isExpanding.value = true
+  isExpanding.value = true;
-  isKj.value = true
+  isKj.value = true;
+  startMusic(
+    "https://files.wanzhuanyongcheng.com/file/music/yaotouzi/djs.MP3",
+    false
+  );
   for (let i = 5; i > 0; i--) {
     setTimeout(() => {
       // i <= 3 && (fontColor.value = "red");
-      qzTitle.value = i.toString()
+      qzTitle.value = i.toString();
-    }, 1000 * (5 - i))
+    }, 1000 * (5 - i));
   }
   setTimeout(async () => {
-    isExpanding.value = false
+    isExpanding.value = false;
-    const res = await getKaiJiangList()
+    const res = await getKaiJiangList();
-    nowKJInfo.value = res.data.data[0]
+    nowKJInfo.value = res.data.data[0];
-    qzTitle.value = `第${nowKJInfo.value?.Periods || 0}期开奖`
+    qzTitle.value = `${nowKJInfo.value?.Periods || 0}期开奖`;
-    playAminExpand()
+    playAminExpand();
-    isKj.value = false
+    setTimeout(() => {
-  }, 5000)
+      startFlicker();
-}
+    }, 6000);
+    isKj.value = false;
+  }, 5000);
+};
 
-const oddVal = ref(10)
+const oddVal = ref(100);
 const changeOdd = () => {
   switch (oddVal.value) {
-    case 10:
+    case 100:
-      oddVal.value = 100
+      oddVal.value = 1000;
-      break
+      break;
     // case 10:
     //   oddVal.value = 100
     //   break
-    case 100:
+    case 1000:
-      oddVal.value = 10
+      oddVal.value = 100;
-      break
+      break;
   }
-}
+};
 
-const clearBet = () => {
+const clearBet = (val: boolean) => {
-  clearItems(odds.value)
+  clearItems(odds.value, val);
-  clearItems(odds1.value)
+  clearItems(odds1.value, val);
-  clearItems(odds2.value)
+  clearItems(odds2.value, val);
-}
+  savsData();
+};
 
-const clearItems = (items: any[]) => {
+const clearItems = (items: any[], isClear: boolean = false) => {
   items.forEach((item: any) => {
-    item.markNum = 0
+    item.markNum = 0;
-    item.status = false
+    if (isClear) {
-  })
+      item.numStr = 0;
-}
+      item.status = false;
+    }
+  });
+};
 
 const addNum = (item: any) => {
-  if (item.markNum >= 1000) return Taro.showToast({
+  if (isKj.value)
-    title: '单注不能超过1000',
+    return Taro.showToast({
-    icon: 'none'
+      title: "正在开奖，不能下注",
-  })
+      icon: "none",
-  if (isKj.value) return Taro.showToast({
+    });
-    title: '正在开奖，不能下注',
+  if (item.name === "单" || item.name === "双")
-    icon: 'none'
+    return Taro.showToast({
-  })
+      title: `${item.name}不能下注`,
-  item.status = true
+      icon: "none",
-  item.markNum += oddVal.value
+    });
-}
+  item.status = true;
+  item.markNum += oddVal.value;
+  item.numStr += oddVal.value;
+  if (item.markNum >= item.max && item.numStr >= item.max) {
+    item.markNum = item.max;
+    item.numStr = item.max;
+    Taro.showToast({
+      title: `单注不能超过${item.max}`,
+      icon: "none",
+    });
+  }
+  savsData();
+};
 
 // 投注
 const verifyBet = () => {
+  if (isKj.value)
+    return Taro.showToast({
+      title: "正在开奖，不能下注",
+      icon: "none",
+    });
 
-  if (isKj.value) return Taro.showToast({
+  let numCount = 0;
-    title: '正在开奖，不能下注',
-    icon: 'none'
-  })
-
-  let numCount = 0
 
   odds.value.forEach((item: any) => {
     if (item.markNum > 0) {
-      numCount += item.markNum
+      numCount += item.markNum;
     }
-  })
+  });
 
   odds1.value.forEach((item: any) => {
     if (item.markNum > 0) {
-      numCount += item.markNum
+      numCount += item.markNum;
     }
-  })
+  });
 
   odds2.value.forEach((item: any) => {
     if (item.markNum > 0) {
-      numCount += item.markNum
+      numCount += item.markNum;
     }
-  })
+  });
 
-  if (numCount === 0) return Taro.showToast({
+  if (numCount === 0)
-    title: '请选择选项，再投注',
+    return Taro.showToast({
-    icon: 'none'
+      title: "请选择选项，再投注",
-  })
+      icon: "none",
+    });
 
-  if (numCount > (userInfo.value?.pulse as number)) return Taro.showToast({
+  if (numCount > (userInfo.value?.pulse as number))
-    title: '投注豆子不足',
+    return Taro.showToast({
-    icon: 'none'
+      title: "投注豆子不足",
-  })
+      icon: "none",
+    });
 
-  const data: any[] = []
+  const data: any[] = [];
 
   odds.value.forEach((item: any) => {
     if (item.markNum > 0) {
       data.push({
         bid: item.id,
         number: item.markNum,
-        name: item.name
+        name: item.name,
-      })
+      });
     }
-  })
+  });
 
   odds1.value.forEach((item: any) => {
     if (item.markNum > 0) {
       data.push({
         bid: item.id,
         number: item.markNum,
-        name: item.name
+        name: item.name,
-      })
+      });
     }
-  })
+  });
 
   odds2.value.forEach((item: any) => {
     if (item.markNum > 0) {
       data.push({
         bid: item.id,
         number: item.markNum,
-        name: item.name
+        name: item.name,
-      })
+      });
     }
-  })
+  });
 
-  ws.value?.send(JSON.stringify({
+  ws.value?.send(
-    type: 1,
+    JSON.stringify({
-    data: data
+      type: 1,
-  }))
+      data: data,
+    })
+  );
 
   setTimeout(() => {
-    getUserInfo()
+    getUserInfo();
-  }, 1000)
+  }, 1000);
 
-  qzTitle.value = '已投注'
+  qzTitle.value = "已投注";
-  clearBet()
+  clearBet(false);
-}
+  savsData();
+};
 
 // 前往开奖和投注记录
 const toPage = (type: number) => {
   Taro.navigateTo({
-    url: `/pages/yaotouzi/records/index?type=${type}`
+    url: `/pages/yaotouzi/records/index?type=${type}`,
-  })
+  });
-}
+};
 
 // 播放展开动画
 const playAminExpand = () => {
-  isShow.value = true
+  isShow.value = true;
+  startMusic(
+    "https://files.wanzhuanyongcheng.com/file/music/yaotouzi/kj.MP3",
+    false
+  );
   setTimeout(() => {
-    isShow.value = false
+    isShow.value = false;
-    initData()
+    initData();
-  }, 10000)
+  }, 10000);
-}
+};
 
 // 开始闪烁
 const startFlicker = () => {
-  flickerItems(odds.value)
+  flickerItems(odds.value);
-  flickerItems(odds1.value)
+  flickerItems(odds1.value);
-  flickerItems(odds2.value)
+  flickerItems(odds2.value);
-  zjObj.value = []
+  zjObj.value = [];
-}
+};
 
 const flickerItems = (items: any[]) => {
+  delData();
   items.forEach((item) => {
     zjObj.value.forEach((item2: any) => {
-      if (item.name === item2) {
+      if (item.name === item2.name) {
-        item.flicker = true
+        item.flicker = true;
         setTimeout(() => {
-          item.flicker = false
+          item.flicker = false;
-        }, 3000)
+        }, 3000);
       }
-    })
+    });
-  })
+  });
-}
+  startMusic(
+    "https://files.wanzhuanyongcheng.com/file/music/yaotouzi/bg.MP3",
+    true
+  );
+};
+
+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();
+  innerAudioContext.onError();
+};
+
+const clearOneBet = (item: Odd) => {
+  item.markNum = 0;
+  item.numStr = 0;
+  item.status = false;
+  savsData();
+};
+
+const savsData = () => {
+  Taro.setStorageSync("odds", odds.value);
+  Taro.setStorageSync("odds1", odds1.value);
+  Taro.setStorageSync("odds2", odds2.value);
+};
+
+const delData = () => {
+  Taro.removeStorageSync("odds");
+  Taro.removeStorageSync("odds1");
+  Taro.removeStorageSync("odds2");
+};
 </script>
 
 <style lang="scss" scoped>

src/pages/yaotouzi/records/index.vue

@@ -4,11 +4,18 @@
       <view class="card" v-for="(item,index) in list as any[]" :key="index">
         <view>
           <view>第{{ item.Periods }}期开奖:
-            <text style="color: red">{{ item.Start }},{{ item.End }}</text>
+<!--            <text style="color: red">{{ item.Start }},{{ item.End }}</text>-->
-          </view>
+            <text v-for="(num,i) in item.Name" :key="i" :style="{
-          <view class="sub">开奖时间:
+              color: numColor(num)
-            <text>{{ item.DrawTime }}</text>
+            }">{{ num }},
+            </text>
           </view>
+<!--          <view class="sub">开奖个数:-->
+          <!--            <text v-for="(num,i) in item.Name" :key="i" :style="{-->
+          <!--              color: numColor(num)-->
+          <!--            }">{{ num }},-->
+          <!--            </text>-->
+          <!--          </view>-->
         </view>
       </view>
     </template>
@@ -16,15 +23,9 @@
       <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>第{{ item.Periods }}期投注:</view>
-            </view>
+            <view>点数:<text style="color: red">{{ item.Name }}</text></view>
-            <view>
+            <view class="sub">投注时间:<text>{{ item.DrawTime }}</text></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>
@@ -59,14 +60,35 @@ 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 () => {
   let res: any
   if (typeNum.value === 1) {
     res = await getKaiJiangList()
-    list.value = res.data.data
+    list.value = res.data.data.map((item: any) => {
+      return {
+        ...item,
+        Name: item.Name.split('-')
+      }
+    })
   } else {
     res = await getTzJl(Taro.getStorageSync('uid'))
-    console.log(res)
     list.value = res.data.data.sort(
       (a: any, b: any) => b.Periods - a.Periods
     )

src/utils/index.ts

@@ -0,0 +1,11 @@
+import Taro from "@tarojs/taro";
+
+export default {
+  vibrateShort: (Func: Function) =>
+    Taro.vibrateShort({
+      type: "medium",
+      complete: () => {
+        Func();
+      },
+    }),
+};