需要监听弹幕来显示弹框签到效果！！

manifest.json

@@ -24,7 +24,12 @@
             }
         },
         /* 模块配置 */
-        "modules" : {},
+        "modules" : {
+            "Barcode" : {},
+            "Camera" : {},
+            "LivePusher" : {},
+            "Record" : {}
+        },
         /* 应用发布信息 */
         "distribute" : {
             /* android打包配置 */

package.json

@@ -10,11 +10,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@tencentcloud/chat-uikit-engine-lite": "1.0.3",
-    "@tencentcloud/chat-uikit-uniapp": "3.1.0",
+    "@tencentcloud/chat-uikit-engine-lite": "^1.0.4",
+    "@tencentcloud/chat-uikit-uniapp": "^3.1.0",
     "@tencentcloud/tui-core-lite": "1.0.0",
+    "@tencentcloud/tuiroom-engine-js": "^3.6.2",
+    "@tencentcloud/uikit-base-component-vue3": "^1.3.5",
     "@tencentcloud/universal-api": "^2.4.0",
     "dayjs": "^1.11.10",
-    "unplugin-vue2-script-setup": "^0.11.4"
+    "tuikit-atomicx-vue3": "^5.2.0"
   }
 }

pages.json

@@ -434,6 +434,22 @@
       }
     },
     // #endif
+    // #ifdef H5
+    {
+      "path": "pages/discover/livelist/h5-list",
+      "style": {
+        "navigationBarTitleText": "直播列表",
+        "navigationBarBackgroundColor": "#ffffff"
+      }
+    },
+    {
+      "path": "pages/discover/livelist/h5-live-player",
+      "style": {
+        "navigationBarTitleText": "直播间",
+        "navigationStyle": "custom"
+      }
+    },
+    // #endif
     {
       "path": "pages/adduser/index",
       "style": {

pages/discover/discover.vue

@@ -13,9 +13,7 @@
     { name: '线上商城', icon: 'mall' },
     { name: '我的拼团', icon: 'team' },
     { name: '项目入口', icon: 'project' },
-    // #ifdef APP-PLUS
     { name: '直播列表', icon: 'liveStream' }
-    // #endif
   ]
 
   const onGo = item => {
@@ -48,7 +46,15 @@
       return
     }
     if (item === 'liveStream') {
-      navigateTo('/pages/discover/livelist/index')
+      let url = ''
+      // #ifdef APP-PLUS
+      url = '/pages/discover/livelist/index'
+      // #endif
+
+      // #ifdef H5
+      url = '/pages/discover/livelist/h5-list'
+      // #endif
+      navigateTo(url)
       return
     }
   }
@@ -122,7 +128,9 @@
           margin-right: 16rpx;
         }
         text {
-          font-family: PingFang SC, PingFang SC;
+          font-family:
+            PingFang SC,
+            PingFang SC;
           font-weight: 500;
           font-size: 32rpx;
           color: #333333;

pages/discover/livelist/components/drawer.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import {
+    TUIIcon,
+    IconArrowStrokeBack
+  } from '@tencentcloud/uikit-base-component-vue3'
+
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    height: {
+      type: String,
+      default: '60%'
+    },
+    position: {
+      type: String as () => 'bottom' | 'right',
+      default: 'bottom'
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: Number,
+      default: 1000
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const emits = defineEmits(['update:visible'])
+
+  const onMaskClick = () => {
+    if (props.maskClosable) {
+      emits('update:visible', false)
+    }
+  }
+  const onBackClick = () => {
+    emits('update:visible', false)
+  }
+
+  const panelStyle = computed(() => {
+    if (props.position === 'bottom') {
+      return {
+        height: props.height,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        borderTopLeftRadius: '12px',
+        borderTopRightRadius: '12px',
+        position: 'fixed' as const,
+        background: '#22262E',
+        zIndex: props.zIndex + 1,
+        transition: 'transform 0.3s cubic-bezier(.4,0,.2,1)',
+        transform: props.visible ? 'translateY(0)' : 'translateY(100%)',
+        boxShadow: '0 -2px 8px rgba(0,0,0,0.08)',
+        display: 'flex' as const,
+        flexDirection: 'column' as const
+      }
+    }
+    return {}
+  })
+</script>
+
+<template>
+  <div v-if="visible" class="drawer-mask" @click="onMaskClick">
+    <transition name="drawer-slide-up">
+      <div
+        class="drawer-panel"
+        :style="panelStyle"
+        @click.stop
+        v-show="visible"
+      >
+        <div class="drawer-header">
+          <TUIIcon
+            color="#fff"
+            size="48px"
+            :icon="IconArrowStrokeBack"
+            class="drawer-back"
+            @click="onBackClick"
+          />
+          <div class="drawer-title">{{ title }}</div>
+        </div>
+        <div class="drawer-content">
+          <slot></slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .drawer-mask {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: v-bind('props.zIndex');
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
+  .drawer-panel {
+    width: 100%;
+    max-width: 100vw;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    background-color: #22262e;
+  }
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    color: #fff;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    font-size: 17px;
+    font-weight: 500;
+    position: relative;
+    box-sizing: border-box;
+  }
+  .drawer-back {
+    height: 100%;
+  }
+  .drawer-title {
+    height: 100%;
+    line-height: 48px;
+    margin-right: 48px;
+    flex: 1;
+    text-align: center;
+    font-size: 17px;
+    font-weight: 500;
+    color: #fff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .drawer-content {
+    flex: 1;
+    overflow-y: auto;
+    color: #fff;
+    padding: 16px;
+  }
+  .drawer-slide-up-enter-active,
+  .drawer-slide-up-leave-active {
+    transition:
+      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .drawer-slide-up-enter-from,
+  .drawer-slide-up-leave-to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  .drawer-slide-up-enter-to,
+  .drawer-slide-up-leave-from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+</style>

pages/discover/livelist/h5-list.vue

@@ -0,0 +1,22 @@
+<script setup>
+  import { LiveList } from 'tuikit-atomicx-vue3'
+  import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3'
+  import { navigateTo } from '../../../utils/router'
+
+  function handleLiveRoomClick(liveInfo) {
+    // console.log('handleLiveRoomClick', liveInfo)
+    navigateTo('/pages/discover/livelist/h5-live-player', {
+      liveId: liveInfo.liveId
+      // liveId: 'live_17623802651'
+    })
+  }
+</script>
+
+<template>
+  <UIKitProvider language="zh-CN">
+    <div @click="handleLiveRoomClick()">点击</div>
+    <LiveList @live-room-click="handleLiveRoomClick" />
+  </UIKitProvider>
+</template>
+
+<style scoped lang="scss"></style>

pages/discover/livelist/h5-live-player.vue

@@ -0,0 +1,521 @@
+<script setup lang="ts">
+  import { onLoad, onBackPress } from '@dcloudio/uni-app'
+  import { ref, computed, watch, Teleport } from 'vue'
+  import TUIRoomEngine, {
+    TUIRoomEvents
+  } from '@tencentcloud/tuiroom-engine-js'
+  import {
+    UIKitProvider,
+    TUIButton,
+    IconClose,
+    TUIDialog,
+    useUIKit,
+    TUIMessageBox
+  } from '@tencentcloud/uikit-base-component-vue3'
+  import {
+    LiveAudienceList,
+    LiveCoreView,
+    BarrageInput,
+    BarrageList,
+    LiveGift,
+    useLiveAudienceState,
+    useLiveListState,
+    Avatar,
+    useLiveSeatState,
+    useRoomEngine,
+    LiveListEvent,
+    useLoginState,
+    useBarrageState
+  } from 'tuikit-atomicx-vue3'
+  import Drawer from './components/drawer.vue'
+  import { navigateBack } from '../../../utils/router'
+  import { useAuthUser } from '../../../composables/useAuthUser'
+  import {
+    getLiveActivityDetail,
+    getLiveActivityRecord
+  } from '../../../api/tui-kit'
+
+  const { t } = useUIKit()
+
+  const { messageList } = useBarrageState()
+  const { userInfo } = useAuthUser()
+  const { setSelfInfo } = useLoginState()
+  const { audienceList, fetchAudienceList } = useLiveAudienceState()
+  const {
+    currentLive,
+    joinLive,
+    leaveLive,
+    subscribeEvent,
+    unsubscribeEvent
+  } = useLiveListState()
+  const isInLive = computed(() => !!currentLive.value?.liveId)
+  const { canvas } = useLiveSeatState()
+  const roomEngine = useRoomEngine()
+  TUIRoomEngine.once('ready', () => {
+    roomEngine.instance?.on(
+      TUIRoomEvents.onAutoPlayFailed,
+      handleAutoPlayFailed
+    )
+  })
+  const audienceListPanelVisible = ref(false)
+  const leaveLiveDialogVisible = ref(false)
+  /** 直播结束状态 */
+  const liveEndVisible = ref(false)
+  const leaveLiveText = ref('')
+  const liveOwnerName = ref('')
+  const liveOwnerAvatar = ref('')
+  const autoPlayFailedHandled = ref(false)
+  /** 活动信息 */
+  const activityData = ref({})
+  /** 是否显示活动按钮 */
+  const isShowActivity = ref(false)
+
+  const audienceListTitle = computed(
+    () => `在线人数 (${audienceList.value.length})`
+  )
+
+  const emit = defineEmits(['leaveLive'])
+
+  const handleKickedOutOfLive = () => {
+    showLeaveLiveDialog('您已被踢出房间')
+  }
+
+  watch(messageList, (newVal, oldVal) => {
+    console.log('收到弹幕消息====:', newVal) // 实时更新的全量消息列表
+  })
+
+  watch(
+    () => currentLive.value?.liveId,
+    liveId => {
+      if (!liveId) {
+        liveEndVisible.value = true
+      }
+    }
+  )
+
+  onBackPress(async () => {
+    if (currentLive.value?.liveId) {
+      await leaveLive()
+    }
+    unsubscribeEvent(
+      LiveListEvent.onKickedOutOfLive,
+      handleKickedOutOfLive
+    )
+    roomEngine.instance?.off(
+      TUIRoomEvents.onAutoPlayFailed,
+      handleAutoPlayFailed
+    )
+  })
+
+  /**
+   * 离开直播
+   */
+  const handleLeaveLive = () => {
+    leaveLiveDialogVisible.value = false
+    // navigateBack()
+  }
+
+  /**
+   * 初始化直播间
+   */
+  const handleJoinLive = async (liveId: string) => {
+    try {
+      await joinLive({ liveId })
+      if (currentLive.value) {
+        liveOwnerName.value =
+          currentLive.value?.liveOwner.userName ||
+          currentLive.value?.liveOwner.userId
+        liveOwnerAvatar.value = currentLive.value?.liveOwner.avatarUrl
+      }
+      const res = await getLiveActivityDetail(liveId)
+      // status: 0-未开始 1-进行中 2-已结束 3-已取消
+      console.log('活动数据============= ', res.data)
+      if (res?.data && res.data.status === 1) {
+        const show = await getLiveActivityRecord(res.data.activityId)
+        activityData.value = {
+          ...res.data,
+          isParticipated: show.data
+        }
+        isShowActivity.value = !show.data
+      } else {
+        isShowActivity.value = false
+      }
+    } catch (error) {
+      console.error('Failed to join live room, error:', error)
+      showLeaveLiveDialog('没有直播间')
+    }
+  }
+
+  /** 监听是否发送活动 */
+  const handleActivity = async (message: any) => {
+    console.log('收到弹幕========:')
+  }
+
+  function showLeaveLiveDialog(text: string) {
+    if (leaveLiveDialogVisible.value || text.trim().length === 0) {
+      return
+    }
+
+    leaveLiveText.value = text
+    leaveLiveDialogVisible.value = true
+  }
+
+  /**
+   * 显示观众列表
+   */
+  const showAudienceList = async () => {
+    await fetchAudienceList()
+    audienceListPanelVisible.value = true
+  }
+
+  function handleAutoPlayFailed() {
+    if (!currentLive.value?.liveId || autoPlayFailedHandled.value) {
+      return
+    }
+    autoPlayFailedHandled.value = true
+    TUIMessageBox.alert({
+      content: t('Content is ready. Click the button to start playback'),
+      confirmText: t('Play')
+    })
+  }
+
+  function preventScroll(event: any) {
+    event.preventDefault()
+  }
+
+  function handleBarrageInputFocus() {
+    window.addEventListener('touchmove', preventScroll, {
+      passive: false
+    })
+  }
+
+  function handleBarrageInputBlur() {
+    window.removeEventListener('touchmove', preventScroll)
+    window.scrollTo({ top: 0, behavior: 'instant' })
+  }
+
+  onLoad(async (e: any) => {
+    await setSelfInfo({
+      userName: userInfo.value?.userName || userInfo.value?.mobile,
+      avatarUrl: userInfo.value?.avatar || ''
+    })
+    subscribeEvent(LiveListEvent.onKickedOutOfLive, handleKickedOutOfLive)
+    await handleJoinLive(e.liveId)
+  })
+</script>
+
+<template>
+  <UIKitProvider language="zh-CN" theme="dark">
+    <div id="liveContainer" class="live-player-h5">
+      <div class="top">
+        <div class="top-left">
+          <Avatar
+            :src="currentLive?.liveOwner.avatarUrl"
+            :size="24"
+            :style="{ border: '1px solid rgba(0, 0, 0, 0.1)' }"
+          />
+          <span>
+            {{
+              currentLive?.liveOwner.userName ||
+              currentLive?.liveOwner.userId
+            }}
+          </span>
+        </div>
+        <div class="top-right">
+          <div class="audience-list-header" @click="showAudienceList">
+            <Avatar
+              v-for="item in audienceList.slice(0, 3)"
+              :key="item.userId"
+              :src="item.avatarUrl"
+              :size="24"
+            />
+            <div class="audience-count">
+              <span>{{ audienceList.length }}</span>
+            </div>
+          </div>
+          <IconClose :size="14" @click="handleLeaveLive" />
+        </div>
+      </div>
+      <div v-show="canvas" class="stream-view">
+        <LiveCoreView />
+      </div>
+
+      <Drawer
+        v-model:visible="audienceListPanelVisible"
+        :title="audienceListTitle"
+        height="90%"
+        :z-index="1000"
+      >
+        <LiveAudienceList />
+      </Drawer>
+
+      <!-- 消息列表 -->
+      <div class="message-list">
+        <BarrageList />
+      </div>
+
+      <!-- 底部互动区域 -->
+      <div class="bottom">
+        <div class="message-input">
+          <BarrageInput
+            width="158px"
+            :autoFocus="false"
+            :disabled="!isInLive"
+            :placeholder="isInLive ? '' : '说点什么'"
+            @focus="handleBarrageInputFocus"
+            @blur="handleBarrageInputBlur"
+          />
+        </div>
+        <div class="bottom-operate-button">
+          <image
+            v-if="isShowActivity"
+            class="action-button-icon"
+            src="/static/images/activity.png"
+            mode="aspectFit"
+          />
+          <!-- <LiveGift class="bottom-operate-button-icon" /> -->
+        </div>
+      </div>
+      <!-- 直播结束显示 -->
+      <Teleport to="#app">
+        <div v-if="liveEndVisible" class="live-end">
+          <div class="close-icon">
+            <IconClose :size="20" @click="handleLeaveLive" />
+          </div>
+          <div class="title">
+            <span>直播已结束</span>
+          </div>
+          <Avatar
+            :src="liveOwnerAvatar"
+            :size="85"
+            :style="{ border: '1px solid rgba(0, 0, 0, 0.1)' }"
+          />
+          <span>{{ liveOwnerName }}</span>
+        </div>
+      </Teleport>
+    </div>
+    <!--  离开直播弹窗 -->
+    <TUIDialog
+      :visible="leaveLiveDialogVisible"
+      :center="true"
+      :content="leaveLiveText"
+      @close="handleLeaveLive"
+    >
+      <template #footer>
+        <div class="leave-live-dialog">
+          <TUIButton size="small" @click="handleLeaveLive">
+            确认
+          </TUIButton>
+        </div>
+      </template>
+    </TUIDialog>
+  </UIKitProvider>
+</template>
+
+<style lang="scss" scoped>
+  .live-player-h5 {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: #000000;
+  }
+
+  .action-button-icon {
+    width: 56rpx;
+    height: 56rpx;
+  }
+
+  .top {
+    position: absolute;
+    width: 100%;
+    height: 50px;
+    top: 10px;
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+    z-index: 100;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 400;
+
+    .top-left {
+      display: flex;
+      gap: 5px;
+      max-width: 55%;
+      margin-left: 10px;
+      padding: 5px;
+      overflow: hidden;
+      align-items: center;
+      border-radius: 25px;
+      background-color: rgb(27, 27, 27);
+
+      span {
+        max-width: 60%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .top-right {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      gap: 5px;
+      margin-right: 10px;
+
+      .audience-list-header {
+        display: flex;
+        gap: 1px;
+
+        .audience-count {
+          display: flex;
+          width: 24px;
+          height: 24px;
+          overflow: hidden;
+          border-radius: 50%;
+          text-align: center;
+          align-items: center;
+          color: #ffffff;
+          background-color: rgb(27, 27, 27);
+
+          span {
+            flex: 1;
+          }
+        }
+      }
+    }
+  }
+
+  .live-end {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    gap: 10px;
+    color: #fff;
+    z-index: 1000;
+    background-color: rgb(63, 62, 62);
+
+    .close-icon {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+      height: 40px;
+    }
+
+    .title {
+      padding-top: 100px;
+      padding-bottom: 50px;
+
+      span {
+        font-size: 24px;
+        font-weight: 500;
+      }
+    }
+
+    span {
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+
+  .bottom-operate-button {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex: 1 0 auto;
+    padding: 0 8px;
+
+    .bottom-operate-button-icon {
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+  @media screen and (orientation: landscape) {
+    .stream-view {
+      width: 100%;
+      height: 100%;
+    }
+
+    .message-list {
+      position: absolute;
+      width: 400px;
+      height: 100px;
+      overflow: hidden;
+      left: 0px;
+      bottom: 60px;
+      z-index: 99;
+      .message-group-tip-action {
+        color: #fff !important;
+      }
+    }
+
+    .bottom {
+      position: absolute;
+      display: flex;
+      width: 100%;
+      height: 48px;
+      bottom: 10px;
+      align-items: center;
+      justify-content: space-between;
+      .message-input {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  @media screen and (orientation: portrait) {
+    .stream-view {
+      width: 100%;
+      height: 100%;
+    }
+
+    .message-list {
+      position: absolute;
+      width: 260px;
+      height: 180px;
+      left: 0px;
+      bottom: 60px;
+      z-index: 99;
+      .message-group-tip-action {
+        color: #fff !important;
+      }
+    }
+
+    .bottom {
+      position: absolute;
+      display: flex;
+      width: 100%;
+      height: 48px;
+      bottom: 10px;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 0 20px;
+      .bottom-operate-button {
+        padding: 0;
+      }
+    }
+  }
+
+  .leave-live-dialog {
+    padding: 10px;
+  }
+</style>
+
+<style lang="scss">
+  .message-list {
+    :deep(.message-group-tip-action) {
+      color: #ffffff !important;
+    }
+  }
+</style>

stores/user.js

@@ -14,6 +14,9 @@ import {
 // #ifdef APP-PLUS
 import { useLoginState } from '@/uni_modules/tuikit-atomic-x/state/LoginState'
 // #endif
+// #ifdef H5
+import { useLoginState } from 'tuikit-atomicx-vue3'
+// #endif
 import { useTokenStore } from './token'
 import { getUserData, userLogout, updateUserData } from '@/api'
 import { ref } from 'vue'
@@ -97,16 +100,24 @@ export const useUserStore = defineStore('user', () => {
       userSig: tencentUserSig.value.userSig,
       useUploadPlugin: true // 使用文件上传插件
     })
+    // #ifdef H5
+    await useLoginState().login({
+      SDKAppID: tencentUserSig.value.sdkappID,
+      userID: tencentUserSig.value.userId,
+      userSig: tencentUserSig.value.userSig
+    })
+    // #endif
+
     // #ifdef APP-PLUS
     await useLoginState().login({
-      sdkAppID: tencentUserSig.value.sdkappID,
+      SDKAppID: tencentUserSig.value.sdkappID,
       userID: tencentUserSig.value.userId,
       userSig: tencentUserSig.value.userSig
     })
 
     uni.$TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit')
     uni.$TUICallKit.login({
-      sdkAppID: tencentUserSig.value.sdkappID,
+      SDKAppID: tencentUserSig.value.sdkappID,
       userID: tencentUserSig.value.userId,
       userSig: tencentUserSig.value.userSig
     })

vue.config.js

@@ -1,15 +0,0 @@
-const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;
-module.exports = {
-  parallel: false,
-  configureWebpack: {
-    plugins: [
-      ScriptSetup({
-        /* options */
-      }),
-    ],
-  },
-  chainWebpack(config) {
-    // disable type check and let `vue-tsc` handles it
-    config.plugins.delete('fork-ts-checker');
-  },
-};