nvue直播间需要调整分享样式

2026-02-03 00:45:33 +08:00
parent 10ceb6b476
commit ae36c4cf10
393 changed files with 753 additions and 147 deletions
--- a/pages/anchor/index.nvue
+++ b/pages/anchor/index.nvue
@@ -301,16 +301,18 @@
 	import Activity from './components/activity.nvue'
 	import { LIVE_BUSINESS } from '@/constants/live-keys'

+
+	const liveID = ref(uni.$liveID)
 	const dom = uni.requireNativePlugin('dom')
 	const { loginUserInfo } = useLoginState()
-	uni.$liveID = `live_${uni.$userID}`
+	// uni.$liveID = `live_${uni.$userID}`
 	uni.$localGuestStatus = 'IDLE'
 	const {
 		setVoiceEarMonitorEnable,
 		setVoiceEarMonitorVolume,
 		setAudioChangerType,
 		setAudioReverbType
-	} = useAudioEffectState(uni.$liveID)
+	} = useAudioEffectState(liveID.value)
 	const {
 		setSmoothLevel,
 		setWhitenessLevel,
@@ -318,7 +320,7 @@
 		whitenessLevel,
 		ruddyLevel,
 		smoothLevel
-	} = useBaseBeautyState(uni.$liveID)
+	} = useBaseBeautyState(liveID.value)
 	const {
 		addCoHostListener,
 		removeCoHostListener,
@@ -327,7 +329,7 @@
 		exitHostConnection,
 		coHostStatus,
 		invitees
-	} = useCoHostState(uni?.$liveID)
+	} = useCoHostState(liveID.value)
 	const {
 		joinLive,
 		createLive,
@@ -339,10 +341,10 @@
 		callExperimentalAPI
 	} = useLiveListState()
 	const { applicants, rejectApplication, connected } = useCoGuestState(
-		uni?.$liveID
+		liveID.value
 	)
 	const { messageList, sendTextMessage, sendCustomMessage } =
-		useBarrageState(uni?.$liveID)
+		useBarrageState(liveID.value)
 	const {
 		openLocalCamera,
 		openLocalMicrophone,
@@ -350,13 +352,13 @@
 		switchCamera,
 		closeLocalMicrophone,
 		closeLocalCamera
-	} = useDeviceState(uni?.$liveID)
-	const { audienceList } = useLiveAudienceState(uni?.$liveID)
-	const { seatList, canvas, lockSeat } = useLiveSeatState(uni?.$liveID)
+	} = useDeviceState(liveID.value)
+	const { audienceList } = useLiveAudienceState(liveID.value)
+	const { seatList, canvas, lockSeat } = useLiveSeatState(liveID.value)
 	const { addGiftListener, removeGiftListener } = useGiftState(
-		uni?.$liveID
+		liveID.value
 	)
-	const { summaryData } = useLiveSummaryState(uni.$liveID)
+
 	const defaultCoverURL =
 		'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png'
 	const defaultAvatarURL =
@@ -390,7 +392,6 @@
 	const isStartLive = ref(false)
 	// 通过点击 message 信息选中的观众
 	const selectedAudience = ref({})
-	const liveID = ref(uni?.$liveID)
 	const isLargeSizeGiftPlayer = ref(false)
 	const giftInfo = ref({})

@@ -412,7 +413,7 @@
 	const barrageListRef = ref()
 	const giftPlayerRef = ref()
 	const { showGift, onGiftFinished } = giftService({
-		roomId: uni?.$liveID,
+		roomId: liveID.value,
 		giftPlayerRef
 	})
 	const isShowAnchorInfo = ref(true)
@@ -436,8 +437,6 @@
 			if (newUserId) {
 				// 如果当前标题是默认值或者为空，则更新为新的用户名
 				currentUserID.value = newUserId
-				uni.$liveID = `live_${currentUserID.value}`
-				liveID.value = uni.$liveID
 			}
 		},
 		{ immediate: true, deep: true }
@@ -499,7 +498,7 @@
 	const handleModalConfirm = () => {
 		if (currentModalUserInfo.value) {
 			acceptHostConnection({
-				liveID: uni?.$liveID,
+				liveID: liveID.value,
 				fromHostLiveID: currentModalUserInfo.value.liveID
 			})
 		}
@@ -510,7 +509,7 @@
 	const handleModalCancel = () => {
 		if (currentModalUserInfo.value) {
 			rejectHostConnection({
-				liveID: uni?.$liveID,
+				liveID: liveID.value,
 				fromHostLiveID: currentModalUserInfo.value.liveID
 			})
 		}
@@ -524,7 +523,7 @@
 			if (!isShowCoGuestPanelAvatar.value) {
 				applicants.value.forEach(applicant => {
 					rejectApplication({
-						liveID: uni?.$liveID,
+						liveID: liveID.value,
 						userID: applicant.userID
 					})
 				})
@@ -555,7 +554,7 @@
 		} else {
 			applicants.value.forEach(applicant => {
 				rejectApplication({
-					liveID: uni?.$liveID,
+					liveID: liveID.value,
 					userID: applicant.userID
 				})
 			})
@@ -597,6 +596,8 @@
 	const creatorType = ref('')
 	// 页面加载
 	onLoad(options => {
+		// uni.$liveID = options.roomId
+		liveID.value = options.roomId
 		creatorType.value = options?.creatorType
 		groupId.value = decodeURIComponent(options?.groupId)
 		// 禁用右滑返回（仅 iOS 有效）
@@ -607,9 +608,7 @@
 				currentPage.$page.style.disableSwipeBack = true
 			}
 		}
-	})

-	onMounted(() => {
 		uni.setKeepScreenOn({
 			keepScreenOn: true
 		})
@@ -626,49 +625,53 @@
 			}
 		})
 		addCoHostListener(
-			uni.$liveID,
+			liveID.value,
 			'onCoHostRequestAccepted',
 			handleCoHostRequestAccepted
 		)
 		addCoHostListener(
-			uni.$liveID,
+			liveID.value,
 			'onCoHostRequestRejected',
 			handleCoHostRequestRejected
 		)
 		addCoHostListener(
-			uni.$liveID,
+			liveID.value,
 			'onCoHostRequestTimeout',
 			handleCoHostRequestTimeout
 		)
 		addCoHostListener(
-			uni.$liveID,
+			liveID.value,
 			'onCoHostRequestReceived',
 			handleCoHostRequestReceived
 		)
-		addGiftListener(uni.$liveID, 'onReceiveGift', handleReceiveGift)
+		addGiftListener(liveID.value, 'onReceiveGift', handleReceiveGift)
+	})
+
+	onMounted(() => {
+
 	})
 	onUnmounted(() => {
 		removeCoHostListener(
-			uni.$liveID,
+			liveID.value,
 			'onCoHostRequestAccepted',
 			handleCoHostRequestAccepted
 		)
 		removeCoHostListener(
-			uni.$liveID,
+			liveID.value,
 			'onCoHostRequestRejected',
 			handleCoHostRequestRejected
 		)
 		removeCoHostListener(
-			uni.$liveID,
+			liveID.value,
 			'onCoHostRequestTimeout',
 			handleCoHostRequestTimeout
 		)
 		removeCoHostListener(
-			uni.$liveID,
+			liveID.value,
 			'onCoHostRequestReceived',
 			handleCoHostRequestReceived
 		)
-		removeGiftListener(uni.$liveID, 'onReceiveGift', handleReceiveGift)
+		removeGiftListener(liveID.value, 'onReceiveGift', handleReceiveGift)
 	})

 	const handleCoHostRequestAccepted = {
@@ -727,7 +730,7 @@
 			const res = JSON.parse(event)
 			if (connected.value.length > 1 || applicants.value.length > 0) {
 				rejectHostConnection({
-					liveID: uni?.$liveID,
+					liveID: liveID.value,
 					fromHostLiveID: res.inviter.liveID
 				})
 				return
@@ -789,11 +792,13 @@
 		isShowEndSheet.value = true
 	}

+
+	const { summaryData } = useLiveSummaryState(liveID.value)
 	const onEndSheetSelect = (res: { tapIndex: number }) => {
 		const index = res.tapIndex
 		if (coHostStatus.value === 'CONNECTED' && index === 0) {
 			exitHostConnection({
-				liveID: uni?.$liveID
+				liveID: liveID.value
 			})
 			endSheetItems.value = ['关闭直播间']
 			endSheetTitle.value = ''
@@ -806,7 +811,7 @@
 			clearAudioEffectSet()
 			clearBeautyPanelSet()
 			uni.$summaryData = summaryData.value
-			console.warn(` 退出直播===直播间人数`, audienceCount.value)
+			console.warn(` 退出直播===`, summaryData.value)
 			imDataEndLive(roomDataId.value, audienceCount.value).then(() => {
 				uni.redirectTo({ url: '/pages/liveend/index' })
 			})
@@ -830,27 +835,25 @@

 	const roomDataId = ref('')
 	const startLive = async () => {
-		console.log(uni.$liveID, '点击开始直播')
-
+		console.log(uni.$liveID,'=====', liveID.value,'点击开始直播')
 		try {
 			const data = {
 				coverUrl: coverURL.value,
 				roomName: liveTitle.value,
-				groupId: groupId.value
+				groupId: groupId.value,
+				roomId: liveID.value
 			}
 			const roomData = await imAddLive(data)
 			const roomId = roomData.data.roomId
-			uni.$liveID = roomId
-			liveID.value = roomId
 			const res = await imDataStartLive(roomId)
 			console.log('========11111111', roomData)
 			console.log('========22222222', res)
-			roomDataId.value = roomId
+			roomDataId.value = liveID.value
 			const params = {
 				cursor: '', // 首次拉起传空（不能是null),然后根据回调数据的cursor确认是否拉完
 				count: 20 // 分页拉取的个数
 			}
-			joinLive({ liveID: roomId })
+		  joinLive({ liveID: roomId })
 			fetchLiveList(params)
 			openLocalCamera({ isFront: isFrontCamera.value })
 			openLocalMicrophone()
@@ -862,7 +865,7 @@
 		// ======================原本代码
 		// createLive({
 		// 	liveInfo: {
-		// 		liveID: uni?.$liveID,
+		// 		liveID: liveID.value,
 		// 		liveName: liveTitle.value,
 		// 		coverURL: coverURL.value,
 		// 		isSeatEnabled: true,
--- a/pages/audience/index.nvue
+++ b/pages/audience/index.nvue
@@ -60,7 +60,7 @@
        <BarrageInput></BarrageInput>
        <view class="action-buttons">
          <image v-if="activityData?.id" class="action-btn" @click="isShowActivity = true" src="/static/images/activity.png" />
-          <image class="action-btn" @click="showNetworkQualityPanel()" src="/static/images/dashboard.png" />
+        <!--  <image class="action-btn" @click="showNetworkQualityPanel()" src="/static/images/dashboard.png" /> -->
          <image class="action-btn" @click="showGiftPicker()" src="/static/images/live-gift.png" />
          <image class="action-btn" :class="{ 'disabled': shouldDisableCoGuestButton }"
            v-if="templateLayout !== 200 && uni.$localGuestStatus === 'IDLE'" @click="handleCoGuestButtonClick"
@@ -69,6 +69,12 @@
            @click="ShowCoGuestRequestPanel()" src="/static/images/live-request.png" />
          <image class="action-btn" v-if="templateLayout !== 200 && uni.$localGuestStatus === 'CONNECTED'"
            @click="ShowCoGuestRequestPanel()" src="/static/images/live-disconnect.png" />
+          <image
+            class="action-btn"
+            src="/static/images/fengxiang.png"
+            style="width: 72rpx; height: 72rpx;"
+            @click="shareDialog = true"
+          />
          <Like />
        </view>
      </view>
@@ -95,9 +101,19 @@
    @select="onExitSheetSelect" />
  <ActionSheet v-model="isShowCoGuestSheet" :title="coGuestSheetTitle" :itemList="coGuestSheetItems"
    @select="onCoGuestSheetSelect" />
+
+   <SharePopup
+      v-model:show="shareDialog"
+      :id="currentLive.liveId"
+      :text="currentLive.liveName"
+      :cover="currentLive.coverUrl"
+      :userLiveData="currentLive.liveOwner"
+      type="1"
+    ></SharePopup>
 </template>

 <script setup lang="ts">
+  import SharePopup from '@/components/share-popup/share-popup.vue'
  import { imDataEndLive, getLiveActivityDetail, getLiveActivityRecord } from '@/api/tui-kit'
  import { onLoad } from '@dcloudio/uni-app';
  import { ref, onMounted, computed, onUnmounted, watch, nextTick } from 'vue';
@@ -136,6 +152,7 @@


  const dom = uni.requireNativePlugin('dom')
+  const shareDialog = ref(false)
  const isShowActivity = ref(false)
  const activityData = ref({})
  const systemInfo = ref({});
--- a/pages/discover/livelist/h5-live-player.vue
+++ b/pages/discover/livelist/h5-live-player.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
  import { onLoad, onBackPress } from '@dcloudio/uni-app'
  import { ref, computed, watch, Teleport } from 'vue'
  import TUIRoomEngine, {
@@ -128,7 +128,7 @@
  /**
   * 初始化直播间
   */
-  const handleJoinLive = async (liveId: string) => {
+  const handleJoinLive = async liveId => {
    try {
      await joinLive({ liveId })
      if (currentLive.value) {
@@ -139,7 +139,7 @@
      }
      const res = await getLiveActivityDetail(liveId)
      // status: 0-未开始 1-进行中 2-已结束 3-已取消
-      console.log('活动数据============= ', res.data)
+      console.log('活动数据============= ', currentLive.value)
      if (res?.data && res.data.status === 1) {
        const show = await getLiveActivityRecord(res.data.activityId)
        activityData.value = {
@@ -157,11 +157,11 @@
  }

  /** 监听是否发送活动 */
-  const handleActivity = async (message: any) => {
+  const handleActivity = async message => {
    console.log('收到弹幕========:')
  }

-  function showLeaveLiveDialog(text: string) {
+  function showLeaveLiveDialog(text) {
    if (leaveLiveDialogVisible.value || text.trim().length === 0) {
      return
    }
@@ -189,7 +189,7 @@
    })
  }

-  function preventScroll(event: any) {
+  function preventScroll(event) {
    event.preventDefault()
  }

@@ -204,7 +204,7 @@
    window.scrollTo({ top: 0, behavior: 'instant' })
  }

-  onLoad(async (e: any) => {
+  onLoad(async e => {
    try {
      await setSelfInfo({
        userName: userInfo.value?.userName || userInfo.value?.mobile,
@@ -338,7 +338,14 @@
    <!-- 分享弹框 -->
    <!-- 分享弹窗   :id="productId"
      :cover="viewData.mainImage" -->
-    <share-popup v-model:show="shareDialog" type="1"></share-popup>
+    <share-popup
+      v-model:show="shareDialog"
+      :id="currentLive.liveId"
+      :text="currentLive.liveName"
+      :cover="currentLive.coverUrl"
+      :userLiveData="currentLive.liveOwner"
+      type="1"
+    ></share-popup>
  </UIKitProvider>
 </template>

--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,56 +1,18 @@
 <script setup>
-  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import { ref } from 'vue'
-  import { reLaunch } from '@/utils/router'

-  const indexGo = ref(null)
-
-  onLoad(() => {
-    // 3秒后跳转
-    indexGo.value = setTimeout(() => {
-      reLaunch('/TUIKit/components/TUIConversation/index')
-    }, 3000)
-  })
-
-  onUnload(() => {
-    clearTimeout(indexGo.value)
-  })
  const title = ref('这个是启动页')
 </script>

 <template>
  <view class="content">
-    <image class="logo" src="/static/logo.png"></image>
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
-    </view>
+    <web-view src="https://h5test.cqjcteach.cn/"></web-view>
  </view>
 </template>

-<style>
+<style lang="scss" scoped>
  .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .logo {
-    height: 200rpx;
-    width: 200rpx;
-    margin-top: 200rpx;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 50rpx;
-  }
-
-  .text-area {
-    display: flex;
-    justify-content: center;
-  }
-
-  .title {
-    font-size: 36rpx;
-    color: #8f8f94;
+    background: rgb(136, 135, 135);
+    height: 100vh;
  }
 </style>