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

2026-02-03 00:45:33 +08:00
parent 10ceb6b476
commit ae36c4cf10
393 changed files with 753 additions and 147 deletions
--- a/TUIKit/components/TUIChat/message-input-toolbar/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
@@ -64,7 +64,7 @@
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          /> -->
          <!-- 红包 -->
-          <RedEnvelope />
+          <RedEnvelope @onDialogPopupShowOrHide="handleSwiperDotShow" />

          <!-- 直播按钮 -->

--- a/TUIKit/components/TUIChat/message-input-toolbar/live-stream/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/live-stream/index.vue
@@ -4,7 +4,7 @@
  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
  import { isUniFrameWork } from '../../../../utils/env'
  import { navigateTo } from '../../../../../utils/router'
-  import { getAnchorDetail } from '../../../../../api/tui-kit'
+  import { getAnchorDetail, getLiveId } from '../../../../../api/tui-kit'
  import { useUI } from '../../../../../utils/use-ui'

  const { showDialog } = useUI()
@@ -44,11 +44,13 @@
      return
    }
    if (stateData.value === 1) {
+      const { data } = await getLiveId()
      // 跳转到开播页面
+      uni.$liveID = data
      uni.navigateTo({
        url: `/pages/anchor/index?groupId=${encodeURIComponent(
          props.groupId
-        )}&creatorType=1`
+        )}&creatorType=1&roomId=${data}`
      })
      return
    }
--- a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
@@ -22,6 +22,8 @@
  import { sendRedEnvelope } from '../../../../../api/tui-kit'
  import { useUserStore } from '../../../../../stores/user'

+  const emits = defineEmits(['onDialogPopupShowOrHide']);
+
  const { showDialog, showToast } = useUI()

  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #a9a9a9; font-size: 32rpx; font-style: normal; text-transform: none;`
@@ -114,10 +116,12 @@
    formData.num = ''
    errorData.integralShow = false
    errorData.numShow = false
+    emits('onDialogPopupShowOrHide', true);
  }

  const onDialogClose = () => {
    console.log('关闭窗口')
+    emits('onDialogPopupShowOrHide', false);
  }

  const closeDialog = () => {
@@ -261,6 +265,7 @@
          @click.stop="closeDialog"
        ></uni-icons>
      </view>
+      <input />
      <!-- 红包个数 -->
      <view v-if="isGroup" class="group-box">
        <view
--- a/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
@@ -116,6 +116,41 @@
        </view>
      </view>
    </template>
+    <!-- 直播信息 -->
+    <template
+      v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.LIVE"
+    >
+      <view @click="onLive" class="live-box">
+        <!-- 直播状态 -->
+        <view class="top-state">
+          <uni-icons
+            type="circle-filled"
+            color="#fff"
+            size="36rpx"
+          ></uni-icons>
+          <text class="state">直播间</text>
+        </view>
+        <image
+          :src="goodsData.cover"
+          mode="scaleToFill"
+          class="live-img"
+        />
+        <view class="live-text">
+          <view class="live_box">
+            <view class="avatar">
+              <image
+                v-if="goodsData.userLiveData?.avatarUrl"
+                :src="goodsData.userLiveData?.avatarUrl"
+                mode="scaleToFill"
+                class="avatar-img"
+              />
+              <uni-icons v-else type="contact" size="76rpx"></uni-icons>
+            </view>
+            <text class="text-box">{{ goodsData.title }}</text>
+          </view>
+        </view>
+      </view>
+    </template>
    <template v-else>
      <span v-html="content.custom" />
    </template>
@@ -141,7 +176,7 @@
  import star from '../../../../assets/icon/star-light.png'
  import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
  import kaiEnvelope from '../../../../assets/icon/kai-unopened-envelope.svg'
-import { navigateTo } from '../../../../../utils/router'
+  import { navigateTo } from '../../../../../utils/router'

  interface Props {
    messageItem: IMessageModel
@@ -200,6 +235,21 @@ import { navigateTo } from '../../../../../utils/router'
    navigateTo('/pages/mall/detail', { productId: goodsData.value.id })
  }

+  /** 点击跳转直播间 */
+  const onLive = () => {
+    // #ifdef APP-PLUS
+    navigateTo('/pages/audience/index', {
+      liveID: goodsData.value.id
+    })
+    // #endif
+
+    // #ifdef H5
+    navigateTo('/pages/discover/livelist/h5-live-player', {
+      liveId: goodsData.value.id
+    })
+    // #endif
+  }
+
  watchEffect(() => {
    custom.value = props.content
    message.value = props.messageItem
@@ -359,4 +409,62 @@ import { navigateTo } from '../../../../../utils/router'
      }
    }
  }
+
+  .live-box {
+    width: 300rpx;
+    height: 380rpx;
+    position: relative;
+    .top-state {
+      position: absolute;
+      z-index: 1;
+      top: 20rpx;
+      left: 20rpx;
+      background: #e15636;
+      padding: 6rpx 18rpx 6rpx 10rpx;
+      border-radius: 50rpx;
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      .state {
+        font-size: 26rpx;
+        color: #fff;
+        margin-left: 6rpx;
+      }
+    }
+    .live-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 20rpx;
+    }
+    .live-text {
+      position: absolute;
+      z-index: 1;
+      width: 100%;
+      bottom: 20rpx;
+      .live_box {
+        padding: 0 20rpx;
+        display: flex;
+        align-items: center;
+        .avatar {
+          flex-shrink: 0;
+          width: 56rpx;
+          height: 56rpx;
+          .avatar-img {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+          }
+        }
+        .text-box {
+          margin-left: 10rpx;
+          width: calc(100% - 64rpx);
+          color: #fff;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 26rpx;
+        }
+      }
+    }
+  }
 </style>
--- a/TUIKit/components/TUIChat/message-list/message-tool/index.vue
+++ b/TUIKit/components/TUIChat/message-list/message-tool/index.vue
@@ -75,7 +75,7 @@
  const emits = defineEmits<IEmits>()
  const props = withDefaults(defineProps<IProps>(), {
    isMultipleSelectMode: false,
-    messageItem: () => ({}) as IMessageModel
+    messageItem: () => ({} as IMessageModel)
  })
  const featureConfig = TUIChatConfig.getFeatureConfig()

@@ -119,6 +119,15 @@
      renderCondition() {
        if (!featureConfig.RevokeMessage || !message.value) return false
        if (isRedEnvelopeMessage(message.value)) return false
+
+        // console.log(message.value.conversationType === 'GROUP', '====')
+        console.log(message.value, '====')
+        // if (message.value.conversationType === 'GROUP') {
+        //   TUIGroupService.getGroupAttributes({
+        //     groupID: 'group1',
+        //     keyList: ['key1', 'key2']
+        //   })
+        // }
        return (
          message.value.flow === 'out' &&
          message.value.status === 'success'
--- a/TUIKit/components/TUIContact/contact-list/components/FriendList.vue
+++ b/TUIKit/components/TUIContact/contact-list/components/FriendList.vue
@@ -42,6 +42,7 @@
    TUIStore
  } from '@tencentcloud/chat-uikit-engine-lite'
  import { FriendListData } from '../../../../interface'
+  import { setFriendList } from '../../../../../utils/storage'

  const emits = defineEmits(['enterConversation'])

@@ -58,6 +59,9 @@
        friend.remark || friend.profile?.nick || friend.userID || ''
    )

+    // #ifdef APP-PLUS
+    setFriendList(friendList)
+    // #endif
    friendListData.value.map = groupedList
  }

--- a/TUIKit/components/TUIContact/contact-list/index.vue
+++ b/TUIKit/components/TUIContact/contact-list/index.vue
@@ -134,6 +134,7 @@
    FriendApplication
  } from '@tencentcloud/chat-uikit-engine-lite'
  import { navigateTo } from '../../../../utils/router'
+  import { setGroupList } from '../../../../utils/storage'

  const currentContactListKey = ref<keyof IContactList>('')
  const currentContactInfo = ref<IContactInfoType>({} as IContactInfoType)
@@ -358,6 +359,9 @@
  }

  function onGroupListUpdated(groupList: IGroupModel[]) {
+    // #ifdef APP-PLUS
+    setGroupList(groupList)
+    // #endif
    updateContactListMap('groupList', groupList)
  }

--- a/TUIKit/components/TUIConversation/conversation-list/index.vue
+++ b/TUIKit/components/TUIConversation/conversation-list/index.vue
@@ -397,6 +397,13 @@
          return `[商品信息]:${data.title}`
        }
      }
+      if (data.businessID === CHAT_MSG_CUSTOM_TYPE.LIVE) {
+        if (isText) {
+          return `${text[0]}:[直播信息] ${data.title}`
+        } else {
+          return `[直播信息]:${data.title}`
+        }
+      }
      if (data.content === 'Create Group' && item.type === 'GROUP') {
        return `${item.getLastMessage('text')?.split(':')[0]}:创建群聊`
      }