update

src/api/index.js

@@ -18,3 +18,6 @@ export const GetIsWin = async (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

@@ -82,11 +82,14 @@
 
 .danmaku-box {
   width: 100%;
+  height: 420px;
+
 
   .danmaku {
     position: absolute;
     width: 100%;
     height: 420px;
     top: 0;
+    z-index: 1;
   }
 }

src/pages/index/index.vue

@@ -2,11 +2,9 @@
   <view class="relative absolute">
     <!-- 直播区域 -->
 
-    <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">
+      <vue-danmaku ref="danmakuRef" class="danmaku" v-model:danmus="danmus" useSlot loop :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 }}积分,价值{{
@@ -15,6 +13,7 @@
           </view>
         </template>
       </vue-danmaku>
+      <view id="Player" class="w-full h-[420px]"></view>
     </view>
 
     <!-- <view id="J_prismPlayer"></view> -->
@@ -61,9 +60,12 @@
         <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">
+
         <view class="text-[28px] text-[#333333]">距{{ pStr }}期截止时间</view>
         <view class="text-[red] text-[40px]">{{ tStr }}</view>
       </view>
@@ -193,6 +195,7 @@ import {
   GetBetRecord,
   GetIsWin,
   GetWinInfo,
+  GetJoinNum
 } from "../../api";
 import "tcplayer.js/dist/tcplayer.min.css";
 // import Srs from "../../utils/srs.sdk";
@@ -210,6 +213,16 @@ onMounted(() => { });
 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);
 
@@ -282,6 +295,7 @@ Taro.useDidShow(() => {
   getBetList();
   getRecord();
   getNum();
+  getJoinNum();
 });
 
 const uid = ref("");
@@ -858,6 +872,17 @@ const getWinInfo = async () => {
   // danmus.value = [{ img: "https://img.loliapi.cn/i/pp/img132.webp", name: "huakk", text: "恭喜你中奖了" }];
   danmakuRef.value.play();
 };
+
+const joinNum = ref(0);
+
+const getJoinNum = async () => {
+  const res = await GetJoinNum();
+  joinNum.value = res.number;
+}
+
+setInterval(() => {
+  getJoinNum();
+}, 5000)
 </script>
 
 <style lang="scss"></style>