添加直播间功能，直播间右上角人数需要完善

2026-01-14 17:57:17 +08:00
parent 0c88d29dce
commit db1b797b68
10 changed files with 632 additions and 87 deletions
--- a/pages/anchor/components/activity.nvue
+++ b/pages/anchor/components/activity.nvue
@@ -1,11 +1,12 @@
 <script setup>
  import { reactive } from 'vue'
  import { useUI } from '../../../utils/use-ui'
-  import { TUIGroupService } from '@tencentcloud/chat-uikit-engine-lite'
-  import { useAuthUser } from '../../../composables/useAuthUser'
+  import { addLiveActivity } from '@/api/tui-kit'
+  import { useBarrageState } from '@/uni_modules/tuikit-atomic-x/state/BarrageState';
+  import { LIVE_BUSINESS } from '@/constants/live-keys'
+

  const { showToast } = useUI()
-  const { tencentUserSig } = useAuthUser()

  const props = defineProps({
    modelValue: {
@@ -35,6 +36,9 @@
    }
  })

+
+  const { sendCustomMessage } = useBarrageState(props.roomId);
+
  const emit = defineEmits(['update:modelValue'])

  /**
@@ -86,12 +90,6 @@
  })

  const submitForm = async () => {
-    const res = await TUIGroupService.getGroupMemberProfile({
-      groupID: props.groupID,
-      userIDList: [tencentUserSig.value.userId]
-    })
-
-    console.log(res)
    if (!formData.title) {
      showToast('请填写标题')
      return
@@ -134,7 +132,18 @@
      creatorType: props.creatorType,
      roomId: props.roomId
    }
-    console.log(data)
+
+    const res = await addLiveActivity(data)
+    sendCustomMessage({
+      liveID: props.roomId,
+      businessID: LIVE_BUSINESS.SIGN,
+      data: JSON.stringify(res.data)
+    });
+    formData.title = ''
+    formData.endTime = ''
+    formData.rewardValue = ''
+    formData.maxParticipants = ''
+    close()
  }
 </script>

--- a/pages/anchor/index.nvue
+++ b/pages/anchor/index.nvue
@@ -75,7 +75,7 @@
 						<image class="action-button-icon" src="/static/images/host-pk.png" mode="aspectFit" />
            <text class="action-button-text">主播pk</text>
          </view> -->
-					<view class="action-button-item" @tap="isShowActivity = true">
+					<view class="action-button-item" @tap="userAddActivity">
 					  <image class="action-button-icon" src="/static/images/activity.png" mode="aspectFit" />
 					  <text class="action-button-text">活动</text>
 					</view>
@@ -91,7 +91,7 @@
        </view>
      </view>
 			<!-- 活动弹框 -->
-			<Activity v-model="isShowActivity" :roomId="roomDataId" :groupID="groupId"></Activity>
+			<Activity v-model="isShowActivity" :roomId="roomDataId" :groupID="groupId" :creatorType="creatorType"></Activity>
      <LiveAudienceList v-model="isShowAudienceList"></LiveAudienceList>
      <AudienceActionPanel v-if="liveID" v-model="isShowAudienceActionPanel" :userInfo="selectedAudience"
        :liveID="liveID"></AudienceActionPanel>
@@ -130,7 +130,7 @@
 <script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app';
  import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
-  import { imAddLive, imDataStartLive, imDataEndLive } from '@/api/tui-kit'
+  import { imAddLive, imDataStartLive, getLiveActivityDetail, imDataEndLive } from '@/api/tui-kit'
  import BeforeLivePanel from '../../components/BeforeLivePanel.nvue';
  import LiveStatusInfoCard from '@/uni_modules/tuikit-atomic-x/components/LiveStatusInfoCard.nvue';
  import UserInfoPanel from '@/uni_modules/tuikit-atomic-x/components/LiveStreamView/UserInfoPanel.nvue';
@@ -376,8 +376,10 @@
    }
  };
  const groupId = ref('')
+  const creatorType = ref('')
  // 页面加载
  onLoad((options) => {
+    creatorType.value = options?.creatorType
    groupId.value = decodeURIComponent(options?.groupId)
    // 禁用右滑返回（仅 iOS 有效）
    if (uni.getSystemInfoSync().platform === 'ios') {
@@ -475,6 +477,23 @@

  }

+  // 添加活动
+  const userAddActivity =  () => {
+    getLiveActivityDetail(roomDataId.value).then(res => {
+      if (res?.data && res.data.status === 1) {
+        // status: 0-未开始 1-进行中 2-已结束 3-已取消
+        uni.showModal({
+          title: `提示`,
+          content: '您有一个活动正在进行中，请勿重复添加活动',
+          showCancel: false,
+          confirmText: '确定'
+        })
+      } else {
+        isShowActivity.value = true
+      }
+    })
+  };
+
  const handleCoHostRequestReceived = {
    callback: (event) => {
      if (isShowCoGuestPanelAvatar.value && applicants.value.length === 0) {
@@ -581,65 +600,65 @@

  const roomDataId = ref('')
  const startLive = async () => {
-    // try {
-    //   console.log('点击开始直播')
-    //   const data = {
-    //     coverUrl: coverURL.value,
-    //     roomName: liveTitle.value,
-    //     groupId: groupId.value
-    //   }
-    //   const roomData = await imAddLive(data)
-    //   const roomId = roomData.data.roomId
-    //   uni.$liveID = roomId
-    //   liveID.value = roomId
-    //   const res = await imDataStartLive(roomId)
-    //   console.log(roomData, '========11111')
-    //   console.log(res, '========22222')
-    //   roomDataId.value = roomId
-    //   const params = {
-    //     cursor: "", // 首次拉起传空（不能是null),然后根据回调数据的cursor确认是否拉完
-    //     count: 20,   // 分页拉取的个数
-    //   };
-    //   joinLive({  liveID: roomId })
-    //   fetchLiveList(params);
-    //   openLocalCamera({ isFront: isFrontCamera.value });
-    //   openLocalMicrophone();
-    //   setLocalVideoMuteImage();
-    //   isStartLive.value = true;
-    // } catch (err) {
-    //   console.log(err, '====22')
-    // }
+    try {
+      console.log('点击开始直播')
+      const data = {
+        coverUrl: coverURL.value,
+        roomName: liveTitle.value,
+        groupId: groupId.value
+      }
+      const roomData = await imAddLive(data)
+      const roomId = roomData.data.roomId
+      uni.$liveID = roomId
+      liveID.value = roomId
+      const res = await imDataStartLive(roomId)
+      console.log(roomData, '========11111')
+      console.log(res, '========22222')
+      roomDataId.value = roomId
+      const params = {
+        cursor: "", // 首次拉起传空（不能是null),然后根据回调数据的cursor确认是否拉完
+        count: 20,   // 分页拉取的个数
+      };
+      joinLive({  liveID: roomId })
+      fetchLiveList(params);
+      openLocalCamera({ isFront: isFrontCamera.value });
+      openLocalMicrophone();
+      setLocalVideoMuteImage();
+      isStartLive.value = true;
+    } catch (err) {
+      console.log(err, '====22')
+    }
 // ======================原本代码
-   createLive({
-     liveInfo: {
-       liveID: uni?.$liveID,
-       liveName: liveTitle.value,
-       coverURL: coverURL.value,
-       isSeatEnabled: true,
-       seatMode: 'APPLY',
-       maxSeatCount: 0,
-       isPublicVisible: liveMode.value === '公开',
-       keepOwnerOnSeat: true,
-       seatLayoutTemplateID: templateLayout.value,
-     },
-     success: () => {
-       const params = {
-         cursor: "", // 首次拉起传空（不能是null),然后根据回调数据的cursor确认是否拉完
-         count: 20,   // 分页拉取的个数
-       };
-       fetchLiveList(params);
+   // createLive({
+   //   liveInfo: {
+   //     liveID: uni?.$liveID,
+   //     liveName: liveTitle.value,
+   //     coverURL: coverURL.value,
+   //     isSeatEnabled: true,
+   //     seatMode: 'APPLY',
+   //     maxSeatCount: 0,
+   //     isPublicVisible: liveMode.value === '公开',
+   //     keepOwnerOnSeat: true,
+   //     seatLayoutTemplateID: templateLayout.value,
+   //   },
+   //   success: () => {
+   //     const params = {
+   //       cursor: "", // 首次拉起传空（不能是null),然后根据回调数据的cursor确认是否拉完
+   //       count: 20,   // 分页拉取的个数
+   //     };
+   //     fetchLiveList(params);

-       openLocalCamera({ isFront: isFrontCamera.value });
-       openLocalMicrophone();
-       setLocalVideoMuteImage();
-     },
-     fail: (errCode, errMsg) => {
-       uni.showToast({
-         title: '创建直播间失败',
-       });
-     },
-   });
-   isStartLive.value = true;
+   //     openLocalCamera({ isFront: isFrontCamera.value });
+   //     openLocalMicrophone();
+   //     setLocalVideoMuteImage();
+   //   },
+   //   fail: (errCode, errMsg) => {
+   //     uni.showToast({
+   //       title: '创建直播间失败',
+   //     });
+   //   },
+   // });
+   // isStartLive.value = true;
  };

  const ShowAnchorViewClickPanel = (userInfo) => {