update

package.json

@@ -25,7 +25,7 @@
 		"dev:swan": "npm run build:swan -- --watch",
 		"dev:alipay": "npm run build:alipay -- --watch",
 		"dev:tt": "npm run build:tt -- --watch",
-		"dev:h5": "npm run build:h5 -- --watch",
+		"dev:h5": "npm run build:h5 -- --watch --mode production",
 		"dev:rn": "npm run build:rn -- --watch",
 		"dev:qq": "npm run build:qq -- --watch",
 		"dev:jd": "npm run build:jd -- --watch",
@@ -45,45 +45,46 @@
 		"@babel/runtime": "^7.21.5",
 		"@icon-park/vue-next": "^1.4.2",
 		"@nutui/nutui-taro": "^4.3.11",
-		"@tarojs/components": "4.0.4",
-		"@tarojs/helper": "4.0.4",
-		"@tarojs/plugin-framework-vue3": "4.0.4",
-		"@tarojs/plugin-html": "4.0.4",
-		"@tarojs/plugin-platform-alipay": "4.0.4",
-		"@tarojs/plugin-platform-h5": "4.0.4",
-		"@tarojs/plugin-platform-harmony-hybrid": "4.0.4",
-		"@tarojs/plugin-platform-jd": "4.0.4",
-		"@tarojs/plugin-platform-qq": "4.0.4",
-		"@tarojs/plugin-platform-swan": "4.0.4",
-		"@tarojs/plugin-platform-tt": "4.0.4",
-		"@tarojs/plugin-platform-weapp": "4.0.4",
-		"@tarojs/runtime": "4.0.4",
-		"@tarojs/shared": "4.0.4",
-		"@tarojs/taro": "4.0.4",
+		"@tarojs/components": "3.6.34",
+		"@tarojs/helper": "3.6.34",
+		"@tarojs/plugin-framework-vue3": "3.6.34",
+		"@tarojs/plugin-html": "3.6.34",
+		"@tarojs/plugin-platform-alipay": "3.6.34",
+		"@tarojs/plugin-platform-h5": "3.6.34",
+		"@tarojs/plugin-platform-harmony-hybrid": "3.6.34",
+		"@tarojs/plugin-platform-jd": "3.6.34",
+		"@tarojs/plugin-platform-qq": "3.6.34",
+		"@tarojs/plugin-platform-swan": "3.6.34",
+		"@tarojs/plugin-platform-tt": "3.6.34",
+		"@tarojs/plugin-platform-weapp": "3.6.34",
+		"@tarojs/runtime": "3.6.34",
+		"@tarojs/shared": "3.6.34",
+		"@tarojs/taro": "3.6.34",
 		"alova": "^2.21.3",
 		"lottie-web": "^5.12.2",
 		"tcplayer.js": "^5.1.0",
 		"vue": "^3.0.0",
+		"vue3-danmaku": "^1.6.1",
 		"xgplayer": "^3.0.18",
 		"xgplayer-flv": "^3.0.18"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.8.0",
 		"@nutui/auto-import-resolver": "^1.0.0",
-		"@tarojs/cli": "4.0.4",
-		"@tarojs/taro-loader": "4.0.4",
+		"@tarojs/cli": "3.6.34",
+		"@tarojs/taro-loader": "3.6.34",
 		"@tarojs/test-utils-vue3": "^0.1.1",
-		"@tarojs/webpack5-runner": "4.0.4",
+		"@tarojs/webpack5-runner": "3.6.34",
 		"@types/jest": "^29.3.1",
 		"@types/node": "^18.15.11",
 		"@types/webpack-env": "^1.13.6",
 		"@vue/babel-plugin-jsx": "^1.0.6",
 		"@vue/compiler-sfc": "^3.0.0",
 		"autoprefixer": "^10.4.19",
-		"babel-preset-taro": "4.0.4",
+		"babel-preset-taro": "3.6.34",
 		"css-loader": "3.4.2",
 		"eslint": "^8.12.0",
-		"eslint-config-taro": "4.0.4",
+		"eslint-config-taro": "3.6.34",
 		"eslint-plugin-vue": "^8.0.0",
 		"jest": "^29.3.1",
 		"jest-environment-jsdom": "^29.5.0",

src/api/index.js

@@ -14,3 +14,10 @@ export const GetPeriod = async () => await alovaInst.Get(`/dice/periods`);
 
 export const GetIsWin = async (uid) =>
   await alovaInst.Get(`/dice/user/win?uid=${uid}`);
+
+// 获取中奖信息
+export const GetWinInfo = async () =>
+  await alovaInst.Get(`/dice/all/user/win`);
+
+// 获取参与人数
+export const GetJoinNum = async () => await alovaInst.Get(`/dice/user/play/count`);

src/pages/index/index.scss

@@ -79,3 +79,16 @@
     }
   }
 }
+
+.danmaku-box {
+  width: 100vw;
+  height: 420px;
+
+  .danmaku {
+    position: absolute;
+    width: 100vw;
+    height: 420px;
+    top: 0;
+    z-index: 1;
+  }
+}

src/pages/index/index.vue

@@ -1,22 +1,56 @@
 <template>
   <view class="relative">
     <!-- 直播区域 -->
-    <view id="Player" class="w-full h-[420px]"></view>
+
+    <view class="danmaku-box">
+      <vue-danmaku
+        ref="danmakuRef"
+        class="danmaku"
+        v-model:danmus="danmus"
+        useSlot
+        :speeds="100"
+      >
+        <template v-slot:dm="{ danmu }">
+          <view class="flex items-center text-box">
+            <image
+              class="w-[45px] h-[45px] mr-[10px] rounded-full"
+              :src="danmu.User.avatarUrl"
+            ></image>
+            <text class="text-[#fff] text-[28px]"
+              >恭喜{{ danmu.User.nickName }}获得{{ danmu.DrawNum }}积分,价值{{
+                danmu.Number
+              }}</text
+            >
+          </view>
+        </template>
+      </vue-danmaku>
+      <view id="Player" class="w-full h-[420px]"></view>
+    </view>
+
     <!-- <view id="J_prismPlayer"></view> -->
     <!-- <view class="player" id="mse"></view> -->
     <!-- 头部 -->
-    <view class="z-50 bg-[#EB1313] w-full h-[110px] p-[18px] text-[30px] flex text-white justify-between items-center">
+    <view
+      class="z-50 bg-[#EB1313] w-full h-[110px] p-[18px] text-[30px] flex text-white justify-between items-center"
+    >
       <view>积分: {{ user.integral }}</view>
       <view class="flex items-center justify-center">
         <view class="pr-[10px] text-[25px]">
           <view>玩</view>
           <view>法</view>
         </view>
-        <nut-popover v-model:visible="showSelector" :list="selector" location="bottom" @choose="onChange">
+        <nut-popover
+          v-model:visible="showSelector"
+          :list="selector"
+          location="bottom"
+          @choose="onChange"
+        >
           <template #reference>
             <!-- @click.stop="showSelector = !showSelector" -->
-            <view @click.stop="showSelector = !showSelector"
-              class="w-[200px] h-[70px] pl-2 pr-2 border-2 rounded-md border-white flex items-center justify-center">
+            <view
+              @click.stop="showSelector = !showSelector"
+              class="w-[200px] h-[70px] pl-2 pr-2 border-2 rounded-md border-white flex items-center justify-center"
+            >
               <view>{{ formData.selectorChecked }}</view>
               <down theme="filled" size="25" fill="#fff" />
             </view>
@@ -40,12 +74,20 @@
           </view>
         </template>
       </nut-popover> -->
-      <navigator :url="`/pages/bet_record/index?uid=${uid}`" open-type="navigate" hover-class="none"
-        class="flex items-center">
+      <navigator
+        :url="`/pages/bet_record/index?uid=${uid}`"
+        open-type="navigate"
+        hover-class="none"
+        class="flex items-center"
+      >
         <view>投注记录</view>
         <right theme="filled" size="25" fill="#ffffff" />
       </navigator>
     </view>
+    <view
+      class="text-[25px] font-bold text-[red] text-center mt-[10px] mb-[10px]"
+      >当前参与人数: {{ joinNum }}</view
+    >
     <!-- 开奖 -->
     <view class="flex justify-between items-center p-[20px]">
       <view class="text-center relative aft">
@@ -53,26 +95,46 @@
         <view class="text-[red] text-[40px]">{{ tStr }}</view>
       </view>
       <view class="flex flex-col items-center popover">
-        <nut-popover v-model:visible="showTable" location="bottom" @open="openTable">
+        <nut-popover
+          v-model:visible="showTable"
+          location="bottom"
+          @open="openTable"
+        >
           <template #reference>
-            <view class="flex items-center" @click.stop="showTable = !showTable">
+            <view
+              class="flex items-center"
+              @click.stop="showTable = !showTable"
+            >
               <text class="text-[#333333] text-[28px]">近期开奖</text>
               <down class="mr-1" theme="filled" size="25" fill="#333333" />
             </view>
           </template>
           <template #content>
-            <nut-table style="width: 900px" :columns="columns" :data="data" striped :bordered="true"></nut-table>
+            <nut-table
+              style="width: 900px"
+              :columns="columns"
+              :data="data"
+              striped
+              :bordered="true"
+            ></nut-table>
           </template>
         </nut-popover>
         <view class="flex">
-          <view class="m-[5px] rounded-full w-[44px] h-[44px] text-white text-[28px] text-center leading-[44px]"
-            v-for="(item, index) in numList" :key="index">
+          <view
+            class="m-[5px] rounded-full w-[44px] h-[44px] text-white text-[28px] text-center leading-[44px]"
+            v-for="(item, index) in numList"
+            :key="index"
+          >
             <view v-if="!item.num" class="m-[5px]">
               <plus-cross theme="filled" size="20" fill="#333333" />
             </view>
-            <view class="rounded-full" :style="{
-              backgroundColor: item.color,
-            }">{{ item.num }}</view>
+            <view
+              class="rounded-full"
+              :style="{
+                backgroundColor: item.color,
+              }"
+              >{{ item.num }}</view
+            >
           </view>
         </view>
       </view>
@@ -81,20 +143,30 @@
     <!-- <scroll-view scroll-y class="h-[800px]"> -->
     <template v-if="formData.betType !== 2">
       <view class="grid gap-1 grid-cols-4 place-items-center p-[20px]">
-        <view v-for="(item, index) in betList" :key="index"
+        <view
+          v-for="(item, index) in betList"
+          :key="index"
           class="shadow-md border border-[#E6E6E6] rounded-[10px] w-[150px] mb-[20px] h-[150px] max-[150px] bg-[red] text-center flex justify-center items-center"
-          :class="formData.betIndexs.includes(item.value)
-            ? 'bg-[#EB1313]'
-            : 'bg-white'
-            " @click="betSelect(item)">
-          <view :class="formData.betIndexs.includes(item.value) ? 'text-white' : ''">
+          :class="
+            formData.betIndexs.includes(item.value)
+              ? 'bg-[#EB1313]'
+              : 'bg-white'
+          "
+          @click="betSelect(item)"
+        >
+          <view
+            :class="formData.betIndexs.includes(item.value) ? 'text-white' : ''"
+          >
             <view>{{ item.label }}</view>
-            <view :class="[
-              formData.betIndexs.includes(item.value)
-                ? 'text-white'
-                : 'text-[#EB1313]',
-              'text-[30px]',
-            ]">{{ item.odds }}</view>
+            <view
+              :class="[
+                formData.betIndexs.includes(item.value)
+                  ? 'text-white'
+                  : 'text-[#EB1313]',
+                'text-[30px]',
+              ]"
+              >{{ item.odds }}</view
+            >
             <!-- <viwe v-if="item.betVal > 0">{{ item.betVal }}</viwe> -->
           </view>
         </view>
@@ -102,17 +174,24 @@
     </template>
     <template v-else>
       <view class="grid gap-5 grid-cols-6 place-items-center p-[20px]">
-        <view v-for="(item, index) in betList" :key="index"
+        <view
+          v-for="(item, index) in betList"
+          :key="index"
           class="shadow-md border border-[#E6E6E6] rounded-full w-[80px] mb-[20px] h-[80px] max-[200px]: bg-[red] text-center leading-[80px]"
-          :class="formData.betIndexs.includes(item.value)
-            ? 'bg-[#EB1313]'
-            : 'bg-white'
-            " @click="betSelect(item)">
-          <view :style="{
-            color: formData.betIndexs.includes(item.value)
-              ? 'white'
-              : getTextColor(item.label),
-          }">
+          :class="
+            formData.betIndexs.includes(item.value)
+              ? 'bg-[#EB1313]'
+              : 'bg-white'
+          "
+          @click="betSelect(item)"
+        >
+          <view
+            :style="{
+              color: formData.betIndexs.includes(item.value)
+                ? 'white'
+                : getTextColor(item.label),
+            }"
+          >
             <view>{{ item.label }}</view>
             <view class="text-[28px] text-[#EB1313] leading-[50px]">{{
               item.odds
@@ -127,9 +206,12 @@
     <!-- 操作栏 -->
     <view class="fixed bottom-0 w-full">
       <!-- 投注信息 -->
-      <view v-if="formData.betIndexs.length > 0"
-        class="bg-[#F5F5F5] w-full text-[28px] p-[26px] flex justify-between items-center">
-        <view>共
+      <view
+        v-if="formData.betIndexs.length > 0"
+        class="bg-[#F5F5F5] w-full text-[28px] p-[26px] flex justify-between items-center"
+      >
+        <view
+          >共
           <text class="text-[#EB1313]">{{ formData.betIndexs.length }}</text> 注
           共
           <text class="text-[#EB1313]">{{
@@ -139,26 +221,41 @@
         </view>
         <!-- <view> 单注最多可赢 <text class="text-[#EB1313]">100</text> 积分 </view> -->
       </view>
-      <view class="bg-white p-[30px] w-full text-[28px] flex justify-between items-center">
-        <view @click="clearbet"
-          class="bg-[#FFE8E8] rounded-[10px] border border-[#FF0204] w-[100px] h-[60px] text-[#FF0204] text-center leading-[60px]">
-          清空</view>
+      <view
+        class="bg-white p-[30px] w-full text-[28px] flex justify-between items-center"
+      >
+        <view
+          @click="clearbet"
+          class="bg-[#FFE8E8] rounded-[10px] border border-[#FF0204] w-[100px] h-[60px] text-[#FF0204] text-center leading-[60px]"
+        >
+          清空</view
+        >
         <view>
-          <view>可用豆子:
-            <text class="text-[#EB1313]">{{ user.pulse }}</text> 豆子
+          <view
+            >可用豆子: <text class="text-[#EB1313]">{{ user.pulse }}</text> 豆子
           </view>
           <!-- @input="betIput" -->
-          <view class="flex">单注:
-            <input v-model="formData.value" type="number"
+          <view class="flex"
+            >单注:
+            <input
+              v-model="formData.value"
+              type="number"
               class="ml-1 mr-1 border border-[#D9D9D9] rounded-[10px] w-[140px] pl-[10px] pr-[10px] text-[#FF0204] text-center"
-              placeholder="" />
+              placeholder=""
+            />
             豆子
           </view>
         </view>
       </view>
       <!-- 确认投注 -->
-      <view class="text-[36px] h-[100px] bg-[red] text-white text-center leading-[100px]" shape="square" block
-        type="primary" @click="submit">一键投注</view>
+      <view
+        class="text-[36px] h-[100px] bg-[red] text-white text-center leading-[100px]"
+        shape="square"
+        block
+        type="primary"
+        @click="submit"
+        >一键投注</view
+      >
       <!-- <button @click="lottieFn(2, 1000)">text</button> -->
     </view>
     <view id="lottie" v-show="isLottie"></view>
@@ -178,6 +275,8 @@ import {
   GetPeriod,
   GetBetRecord,
   GetIsWin,
+  GetWinInfo,
+  GetJoinNum,
 } from "../../api";
 import "tcplayer.js/dist/tcplayer.min.css";
 // import Srs from "../../utils/srs.sdk";
@@ -188,8 +287,25 @@ import "xgplayer/dist/index.min.css";
 import "./index.scss";
 import wzj from "../../static/wzj.json";
 import zj from "../../static/zj.json";
+import vueDanmaku from "vue3-danmaku";
 
-onMounted(() => { });
+onMounted(() => {
+  // getWinInfo()
+});
+
+const danmakuRef = ref();
+
+const danmus = ref([]);
+// const danmus = ref([
+//   {
+//     User: {
+//       avatarUrl: "https://img.loliapi.cn/i/pp/img132.web",
+//       nickName: "Huakk"
+//     },
+//     DrawNum: "10000",
+//     Number: "100"
+//   }
+// ]);
 
 const player = ref(null);
 
@@ -262,6 +378,7 @@ Taro.useDidShow(() => {
   getBetList();
   getRecord();
   getNum();
+  getJoinNum();
 });
 
 const uid = ref("");
@@ -297,6 +414,9 @@ const getWin = async () => {
   const res = await GetIsWin(uid.value);
   if (res.number > 0) {
     lottieFn(1, res.number);
+  } else {
+    // 获取中奖信息
+    getWinInfo();
   }
 };
 
@@ -497,12 +617,12 @@ const initPlayer = () => {
 const showSelector = ref(false);
 
 const selector = ref([
+  { name: "单双", value: 3 },
   { name: "特码", value: 2 },
   {
     name: "头尾数",
     value: 1,
   },
-  { name: "单双", value: 3 },
 ]);
 
 const onChange = async ({ name, value }) => {
@@ -640,13 +760,13 @@ const columns = ref([
 
 const data = ref([]);
 
-const openTable = () => { };
+const openTable = () => {};
 
 const numList = ref([]);
 
 const formData = ref({
-  selectorChecked: "特码",
-  betType: 2,
+  selectorChecked: "单双",
+  betType: 3,
   betIndexs: [],
   value: "",
   total: 0,
@@ -819,10 +939,47 @@ const lottieFn = async (type, num = 0) => {
   ctx.addEventListener("complete", () => {
     isLottie.value = false;
     ctx.destroy();
+    // 获取中奖信息
+    setTimeout(() => {
+      getWinInfo();
+    }, 1500);
   });
-
-  await getUserInfo();
+  getUserInfo();
 };
+
+const getWinInfo = async () => {
+  danmus.value = [];
+  const res = await GetWinInfo();
+  danmus.value = res.list;
+  Taro.request({
+    url: "https://danmu.jdt168.com/get_danmu",
+    method: "GET",
+    success: ({ data: res }) => {
+      const newData = res.data.map((item) => ({
+        User: {
+          nickName: item.nick_name,
+          avatarUrl: item.avatar,
+        },
+        DrawNum: item.draw_num,
+        Number: item.win_number,
+      }));
+      danmus.value.push(...newData);
+    },
+  });
+  danmakuRef.value.play();
+};
+
+const joinNum = ref(0);
+
+const getJoinNum = async () => {
+  const res = await GetJoinNum();
+  const random_num = Math.floor(Math.random() * (300 - 100));
+  joinNum.value = res.number ? res.number : random_num;
+};
+
+setInterval(() => {
+  getJoinNum();
+}, 20 * 1000);
 </script>
 
 <style lang="scss"></style>