增加弹幕

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",
@@ -64,6 +64,7 @@
 		"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"
 	},

pnpm-lock.yaml

@@ -77,6 +77,9 @@ importers:
       vue:
         specifier: ^3.0.0
         version: 3.4.31(typescript@5.5.3)
+      vue3-danmaku:
+        specifier: ^1.6.1
+        version: 1.6.1(vue@3.4.31(typescript@5.5.3))
       xgplayer:
         specifier: ^3.0.18
         version: 3.0.18(core-js@3.37.1)
@@ -7169,6 +7172,11 @@ packages:
   vue-template-es2015-compiler@1.9.1:
     resolution: {integrity: sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==}
 
+  vue3-danmaku@1.6.1:
+    resolution: {integrity: sha512-v7KqMV5WK3mqRSotSuJfnJldsIpilh72nLKKebWGCO7HM4k330QV1f4oje410GfwSx+SrJ+YLeTG8QLJYuKwYg==}
+    peerDependencies:
+      vue: ^3.0.0
+
   vue@3.4.31:
     resolution: {integrity: sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==}
     peerDependencies:
@@ -15737,6 +15745,10 @@ snapshots:
 
   vue-template-es2015-compiler@1.9.1: {}
 
+  vue3-danmaku@1.6.1(vue@3.4.31(typescript@5.5.3)):
+    dependencies:
+      vue: 3.4.31(typescript@5.5.3)
+
   vue@3.4.31(typescript@5.5.3):
     dependencies:
       '@vue/compiler-dom': 3.4.31

src/api/index.js

@@ -14,3 +14,7 @@ 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`);

src/pages/index/index.scss

@@ -79,3 +79,14 @@
     }
   }
 }
+
+.danmaku-box {
+  width: 100%;
+
+  .danmaku {
+    position: absolute;
+    width: 100%;
+    height: 420px;
+    top: 0;
+  }
+}

src/pages/index/index.vue

@@ -1,7 +1,22 @@
 <template>
-  <view class="relative">
+  <view class="relative absolute">
     <!-- 直播区域 -->
-    <view id="Player" class="w-full h-[420px]"></view>
+
+    <view id="Player" class="w-full h-[420px] relative"> </view>
+    <view class="danmaku-box">
+      <vue-danmaku ref="danmakuRef" class="danmaku" v-model:danmus="danmus" useSlot :speeds="100">
+        <template v-slot:dm="{ danmu }">
+          <!-- <span>{{ index }}{{ danmu.name }}：{{ danmu.text }}</span> -->
+          <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>
+
     <!-- <view id="J_prismPlayer"></view> -->
     <!-- <view class="player" id="mse"></view> -->
     <!-- 头部 -->
@@ -144,8 +159,7 @@
           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">单注:
@@ -178,6 +192,7 @@ import {
   GetPeriod,
   GetBetRecord,
   GetIsWin,
+  GetWinInfo,
 } from "../../api";
 import "tcplayer.js/dist/tcplayer.min.css";
 // import Srs from "../../utils/srs.sdk";
@@ -188,9 +203,14 @@ 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(() => { });
 
+const danmakuRef = ref();
+
+const danmus = ref([]);
+
 const player = ref(null);
 
 const showTop = ref(false);
@@ -297,6 +317,9 @@ const getWin = async () => {
   const res = await GetIsWin(uid.value);
   if (res.number > 0) {
     lottieFn(1, res.number);
+  } else {
+    // 获取中奖信息
+    getWinInfo();
   }
 };
 
@@ -819,9 +842,21 @@ 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;
+  // danmus.value = [{ img: "https://img.loliapi.cn/i/pp/img132.webp", name: "huakk", text: "恭喜你中奖了" }];
+  danmakuRef.value.play();
 };
 </script>