i

2023-10-08 22:52:44 +08:00
parent 88e96df20c
commit 2980496abc
23 changed files with 649 additions and 305 deletions
--- a/.env.dev
+++ b/.env.dev
@@ -1,2 +0,0 @@
-# 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config
-# TARO_APP_ID="开发环境下的小程序appid"
--- a/.env.development
+++ b/.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='
--- a/.env.prod
+++ b/.env.prod
@@ -1 +0,0 @@
-# TARO_APP_ID="生产环境下的小程序appid"
--- a/.env.production
+++ b/.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='
--- a/.env.test
+++ b/.env.test
@@ -1 +1,5 @@
-# TARO_APP_ID="测试环境下的小程序appid"
+# TARO_APP_ID="测试环境下的小程序appid"
+
+
+TARO_APP_API = 'https://game.wanzhuanyongcheng.cn/dice'
+TARO_APP_WS = 'wss://game.wanzhuanyongcheng.cn/dice/home?uid='
--- a/config/index.ts
+++ b/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: {
--- a/package.json
+++ b/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",
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,13 +1,7 @@
 // 用于配置项目的一些常量，如接口地址、websocket地址等
-import Taro from '@tarojs/taro'
+import Taro from "@tarojs/taro";

 export const app = {
-  API_URL: () =>
-    process.env.NODE_ENV === 'production'
-      ? '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')}`
-}
+  API_URL: () => `${process.env.TARO_APP_API}`,
+  API_WS: () => `${process.env.TARO_APP_WS}${Taro.getStorageSync("uid")}`,
+};
--- a/src/index.html
+++ b/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>
--- a/src/pages/game_detail/index.scss
+++ b/src/pages/game_detail/index.scss
@@ -32,3 +32,8 @@
    }
  }
 }
+.text {
+  padding: 10px;
+  font-size: 30px;
+  text-align: left;
+}
--- a/src/pages/game_detail/index.vue
+++ b/src/pages/game_detail/index.vue
@@ -1,36 +1,53 @@
 <template>
  <view class="index">
-    <swiper
-      class='swiper'
-      :circular="true"
-      :autoplay="true"
-    >
-      <swiper-item v-for="(item,index) in list" :key="index">
-        <image :src="item"/>
+    <swiper class="swiper" :circular="true" :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>游戏简介</view>
-      <view>。。。。。。。。。。</view>
+      <view class="text">
+        <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 Taro from '@tarojs/taro'
-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'])
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+import "./index.scss";

+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>
--- a/src/pages/index/index.scss
+++ b/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);
+        }
+      }
    }
  }
 }
--- a/src/pages/index/index.vue
+++ b/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>
--- a/src/pages/yaotouzi/index/index.scss
+++ b/src/pages/yaotouzi/index/index.scss
@@ -10,8 +10,8 @@
  //}

  .userInfo {
-    width: 90%;
-    margin: 20px auto;
+    width: 92%;
+    margin: 10px auto;
    //margin: auto;
    padding: 20px;
    display: flex;
@@ -73,8 +73,8 @@
  }

  .gameInfo {
-    width: 90%;
-    margin: 20px auto;
+    width: 92%;
+    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;
+}
--- a/src/pages/yaotouzi/index/index.vue
+++ b/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 mt-15" @click="toPage(2)">投注记录</view>
+          <view class="btn" @click="utils.vibrateShort(() => toPage(1))"
+            >开奖记录</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"
-              @click.stop="addNum(item)">
+        <view
+          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="{flicker: item.flicker}"
-          style="margin-bottom: 10px"
+          class="subColor item item1"
+          :class="{ flicker: item.flicker }"
          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>
-      </view>
+      </scroll-view>
    </scroll-view>
    <!--  底部操作栏  -->
    <view class="subColor bottomBar">
-      <view class="btn1" @click="clearBet">重置</view>
-      <view class="btn2" @click="changeOdd">X{{ oddVal }}</view>
-      <view class="btn3" @click="verifyBet">投注</view>
+      <view class="btn1" @click="utils.vibrateShort(() => clearBet(true))"
+        >重置</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 Taro from '@tarojs/taro'
-import {app} from '@/config'
-import {getGameOption, getKaiJiangList, getJfDz} from '@/api'
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+import { app } from "@/config";
+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
-  name?: string
-  odds?: number
-  markNum?: number
-  status?: boolean
-  flicker?: boolean
+  id?: number;
+  name?: string;
+  odds?: number;
+  markNum?: number;
+  status?: 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
-  End?: string
-  Periods?: number
-}>({})
+  Start?: string;
+  End?: string;
+  Periods?: number;
+}>({});

 const userInfo = ref<{
-  pulse?: number
-  integral?: number
-  nickName?: string
-  avatarUrl?: string
-}>({})
+  pulse?: number;
+  integral?: number;
+  nickName?: string;
+  avatarUrl?: string;
+}>({});

-const zjObj = ref<any>([])
+const zjObj = ref<any>([]);

-const iMsgNum = ref(0)
+const iMsgNum = ref(0);

-Taro.useLoad(() => {
-  initWs()
-  initData()
-})
+const numColor = (num: string) => {
+  switch (num) {
+    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 = '请投注'
-  getOddList()
-  getKJList()
-  getUserInfo()
-}
+  qzTitle.value = "请投注";
+  getOddList();
+  getKJList();
+  getUserInfo();
+};

-const arr = ['2+2', '3+3', '4+4', '5+5', '6+6']
-const arr1 = ['大', '小', '单', '双']
-const arr2 = ['和', '3', '4', '5', '6', '8', '9', '10', '11']
+const arr = ["2+2", "3+3", "4+4", "5+5", "6+6"];
+// const arr1 = ["大", "小", "单", "双"];
+// 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()
-  odds.value = []
-  odds1.value = []
-  odds2.value = []
+  const res = await getGameOption();
+  odds.value = [];
+  odds1.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)
-    } else if (arr.includes(name)) {
-      odds.value.push(newItem)
-    } else if (arr2.includes(name)) {
-      odds2.value.push(newItem)
-    }
-  })
-}
+  });
+  // const el = odds2.value.splice(0, 1)[0];
+  // odds2.value.splice(4, 0, el);
+  // console.log(odds1.value)
+};

 // 获取个人信息
 const getUserInfo = async () => {
-  const res = await getJfDz(Taro.getStorageSync('uid'))
-  userInfo.value = res.data.data
-}
+  const res = await getJfDz(Taro.getStorageSync("uid"));
+  userInfo.value = res.data.data;
+};

-const kJData = ref<any>([])
+const kJData = ref<any>([]);
+const kjList = ref<any>([]);

 // 开奖列表
 const getKJList = async () => {
-  const res = await getKaiJiangList()
-  kJData.value = res.data.data
-}
+  const res = await getKaiJiangList();
+  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)
-        time.value = num
+        let num = Number(res.data);
+        time.value = num;
        if (num === 5) {
-          openDraw()
+          openDraw();
        }
-        break
+        break;
      case 401:
        Taro.showToast({
-          title: '未登录',
+          title: "未登录",
          mask: true,
-          icon: 'none'
-        })
-        break
+          icon: "none",
+        });
+        break;
      case 403:
        Taro.showToast({
-          title: '未能操作',
+          title: "未能操作",
          mask: true,
-          icon: 'none'
-        })
-        break
+          icon: "none",
+        });
+        break;
      case 400:
        Taro.showToast({
-          title: '豆子不足',
+          title: "豆子不足",
          mask: true,
-          icon: 'none'
-        })
-        break
+          icon: "none",
+        });
+        break;
      case 5:
        Taro.showToast({
-          title: '投注成功',
+          title: "投注成功",
          mask: true,
-          icon: 'none'
-        })
-        break
-      case 666:
-        break
+          icon: "none",
+        });
+        break;
+      case 100:
+        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++
-        const arr = Object.values(res)
-        zjObj.value.push(...arr)
-        if (iMsgNum.value === 3 || zjObj.value.length === 1) {
-          iMsgNum.value = 0
-          startFlicker()
-        }
-        break
+        iMsgNum.value++;
+        zjObj.value = res;
+        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
-  isKj.value = true
+  isExpanding.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()
-    }, 1000 * (5 - i))
+      qzTitle.value = i.toString();
+    }, 1000 * (5 - i));
  }
  setTimeout(async () => {
-    isExpanding.value = false
-    const res = await getKaiJiangList()
-    nowKJInfo.value = res.data.data[0]
-    qzTitle.value = `第${nowKJInfo.value?.Periods || 0}期开奖`
-    playAminExpand()
-    isKj.value = false
-  }, 5000)
-}
+    isExpanding.value = false;
+    const res = await getKaiJiangList();
+    nowKJInfo.value = res.data.data[0];
+    qzTitle.value = `${nowKJInfo.value?.Periods || 0}期开奖`;
+    playAminExpand();
+    setTimeout(() => {
+      startFlicker();
+    }, 6000);
+    isKj.value = false;
+  }, 5000);
+};

-const oddVal = ref(10)
+const oddVal = ref(100);
 const changeOdd = () => {
  switch (oddVal.value) {
-    case 10:
-      oddVal.value = 100
-      break
+    case 100:
+      oddVal.value = 1000;
+      break;
    // case 10:
    //   oddVal.value = 100
    //   break
-    case 100:
-      oddVal.value = 10
-      break
+    case 1000:
+      oddVal.value = 100;
+      break;
  }
-}
+};

-const clearBet = () => {
-  clearItems(odds.value)
-  clearItems(odds1.value)
-  clearItems(odds2.value)
-}
+const clearBet = (val: boolean) => {
+  clearItems(odds.value, val);
+  clearItems(odds1.value, val);
+  clearItems(odds2.value, val);
+  savsData();
+};

-const clearItems = (items: any[]) => {
+const clearItems = (items: any[], isClear: boolean = false) => {
  items.forEach((item: any) => {
-    item.markNum = 0
-    item.status = false
-  })
-}
+    item.markNum = 0;
+    if (isClear) {
+      item.numStr = 0;
+      item.status = false;
+    }
+  });
+};

 const addNum = (item: any) => {
-  if (item.markNum >= 1000) return Taro.showToast({
-    title: '单注不能超过1000',
-    icon: 'none'
-  })
-  if (isKj.value) return Taro.showToast({
-    title: '正在开奖，不能下注',
-    icon: 'none'
-  })
-  item.status = true
-  item.markNum += oddVal.value
-}
+  if (isKj.value)
+    return Taro.showToast({
+      title: "正在开奖，不能下注",
+      icon: "none",
+    });
+  if (item.name === "单" || item.name === "双")
+    return Taro.showToast({
+      title: `${item.name}不能下注`,
+      icon: "none",
+    });
+  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({
-    title: '正在开奖，不能下注',
-    icon: 'none'
-  })
-
-  let numCount = 0
+  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({
-    title: '请选择选项，再投注',
-    icon: 'none'
-  })
+  if (numCount === 0)
+    return Taro.showToast({
+      title: "请选择选项，再投注",
+      icon: "none",
+    });

-  if (numCount > (userInfo.value?.pulse as number)) return Taro.showToast({
-    title: '投注豆子不足',
-    icon: 'none'
-  })
+  if (numCount > (userInfo.value?.pulse as number))
+    return Taro.showToast({
+      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({
-    type: 1,
-    data: data
-  }))
+  ws.value?.send(
+    JSON.stringify({
+      type: 1,
+      data: data,
+    })
+  );

  setTimeout(() => {
-    getUserInfo()
-  }, 1000)
+    getUserInfo();
+  }, 1000);

-  qzTitle.value = '已投注'
-  clearBet()
-}
+  qzTitle.value = "已投注";
+  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
-    initData()
-  }, 10000)
-}
+    isShow.value = false;
+    initData();
+  }, 10000);
+};

 // 开始闪烁
 const startFlicker = () => {
-  flickerItems(odds.value)
-  flickerItems(odds1.value)
-  flickerItems(odds2.value)
-  zjObj.value = []
-}
+  flickerItems(odds.value);
+  flickerItems(odds1.value);
+  flickerItems(odds2.value);
+  zjObj.value = [];
+};

 const flickerItems = (items: any[]) => {
+  delData();
  items.forEach((item) => {
    zjObj.value.forEach((item2: any) => {
-      if (item.name === item2) {
-        item.flicker = true
+      if (item.name === item2.name) {
+        item.flicker = true;
        setTimeout(() => {
-          item.flicker = false
-        }, 3000)
+          item.flicker = false;
+        }, 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>
--- a/src/pages/yaotouzi/records/index.vue
+++ b/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>
-          </view>
-          <view class="sub">开奖时间:
-            <text>{{ item.DrawTime }}</text>
+<!--            <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>
    </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>
-            <view>
-              点数:
-              <text style="color: red">{{ item.Name }}</text>
-            </view>
-            <view class="sub">投注时间:
-              <text>{{ item.DrawTime }}</text>
-            </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>
@@ -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
    )
--- a/src/static/1.jpg
+++ b/src/static/1.jpg
--- a/src/static/an.png
+++ b/src/static/an.png
--- a/src/static/music/bg.MP3
+++ b/src/static/music/bg.MP3
--- a/src/static/music/djs.MP3
+++ b/src/static/music/djs.MP3
--- a/src/static/music/kj.MP3
+++ b/src/static/music/kj.MP3
--- a/src/static/qietu.png
+++ b/src/static/qietu.png
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -0,0 +1,11 @@
+import Taro from "@tarojs/taro";
+
+export default {
+  vibrateShort: (Func: Function) =>
+    Taro.vibrateShort({
+      type: "medium",
+      complete: () => {
+        Func();
+      },
+    }),
+};
				`@@ -1 +0,0 @@`
				`# TARO_APP_ID="生产环境下的小程序appid"`