增加弹幕

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,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>