需新增：添加好友页面，优化各模块页面

TUIKit/components/TUIConversation/conversation-header/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div :ref="convHeaderRef" class="tui-conversation-header">
-    <Navigation title="消息">
+    <Navigation
+      :title="`消息${props.topCount ? `(${props.topCount})` : ''}`"
+    >
       <template #right>
         <div v-show="!isGlobalSearching" class="menu-container">
           <ul v-if="menuList.length > 0" class="list">
@@ -60,6 +62,16 @@
   import Server, { IMenuItem } from './server'
   import type { ISearchingStatus } from '../../TUISearch/type'
   import { navigateTo } from '../../../../utils/router'
+  import { useUI } from '../../../../utils/use-ui'
+
+  const { showDialog } = useUI()
+
+  const props = defineProps({
+    topCount: {
+      type: String,
+      default: ''
+    }
+  })
 
   const showChildren = ref<IMenuItem[]>([])
   const convHeaderRef = ref<HTMLElement | undefined>()
@@ -96,7 +108,18 @@
       listener = { onClicked: () => {} }
     } = item
     if (children) {
-      let listData = children
+      const addUserItem = {
+        data: { name: 'isAddUser' },
+        icon: '/TUIKit/assets/icon/user-add.svg',
+        text: '添加好友',
+        listener: {
+          onClicked: () => {}
+        }
+      }
+      let listData = [
+        addUserItem,
+        ...children.filter(c => c.data.name !== 'isC2C')
+      ]
 
       // #ifdef APP-PLUS
       // 扫一扫
@@ -110,9 +133,11 @@
       }
       listData = [scanItem, ...listData]
       // #endif
+
       showChildren.value = showChildren.value.length > 0 ? [] : listData
     } else {
       if (item.data.name === 'isScan') {
+        // 扫一扫
         uni.scanCode({
           onlyFromCamera: false,
           scanType: ['qrCode'],
@@ -120,6 +145,9 @@
             navigateTo(res.result)
           }
         })
+      } else if (item.data.name === 'isAddUser') {
+        console.log('添加好友')
+        showDialog('提示', '开发中...')
       } else {
         listener.onClicked(item)
       }

TUIKit/components/TUIConversation/conversation-list/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="conversationListInnerDomRef" class="tui-conversation-list">
+  <view ref="conversationListInnerDomRef" class="tui-conversation-list">
     <ActionsMenu
       v-if="isShowOverlay"
       :selectedConversation="currentConversation"
@@ -7,11 +7,35 @@
       :selectedConversationDomRect="currentConversationDomRect"
       @closeConversationActionMenu="closeConversationActionMenu"
     />
-    <cb-empty
+    <!-- <cb-empty
       v-if="conversationList.length === 0"
       name="您还没有好友"
-    ></cb-empty>
-    <div
+    ></cb-empty> -->
+    <view
+      class="tui-conversation-item"
+      @click="navigateTo('/pages/my-index/set-up/message/index')"
+    >
+      <aside class="left">
+        <Avatar url="/static/images/message.svg" size="40px" />
+        <!-- 通知数量 -->
+        <!-- <span class="num">2</span> -->
+        <!-- <span class="num-notify" /> -->
+      </aside>
+      <view class="content">
+        <view class="content-header">
+          <view class="content-header-label">
+            <text class="name">消息通知</text>
+          </view>
+          <view class="middle-box">
+            <div class="middle-box-content">[系统消息]</div>
+          </view>
+        </view>
+        <!-- <view class="content-footer">
+          <span class="time">20秒前</span>
+        </view> -->
+      </view>
+    </view>
+    <view
       v-for="(conversation, index) in conversationList"
       :id="`convlistitem-${index}`"
       :key="index"
@@ -73,17 +97,17 @@
             class="num-notify"
           />
         </aside>
-        <div class="content">
-          <div class="content-header">
+        <view class="content">
+          <view class="content-header">
             <label class="content-header-label">
               <p class="name">{{ conversation.getShowName() }}</p>
             </label>
-            <div v-if="isRedEnvelope(conversation)" class="middle-box">
+            <view v-if="isRedEnvelope(conversation)" class="middle-box">
               <div class="middle-box-content">
                 {{ redEnvelopeText(conversation) }}
               </div>
-            </div>
-            <div v-else class="middle-box">
+            </view>
+            <view v-else class="middle-box">
               <span
                 v-if="
                   conversation.draftText &&
@@ -103,12 +127,12 @@
               >
                 {{ conversation.getGroupAtInfo() }}
               </span>
-              <div class="middle-box-content">
+              <view class="middle-box-content">
                 {{ conversation.getLastMessage('text') }}
-              </div>
-            </div>
-          </div>
-          <div class="content-footer">
+              </view>
+            </view>
+          </view>
+          <view class="content-footer">
             <span class="time">
               {{ conversation.getLastMessage('time') }}
             </span>
@@ -117,11 +141,11 @@
               :file="muteIcon"
               size="16px"
             />
-          </div>
-        </div>
+          </view>
+        </view>
       </div>
-    </div>
-  </div>
+    </view>
+  </view>
 </template>
 
 <script lang="ts" setup>
@@ -158,6 +182,7 @@
     isMobile
   } from '../../../utils/env'
   import { CHAT_MSG_CUSTOM_TYPE } from '../../../constant'
+  import { navigateTo } from '../../../../utils/router'
 
   const emits = defineEmits(['handleSwitchConversation', 'getPassingRef'])
   const currentConversation = ref<IConversationModel>()
@@ -326,7 +351,10 @@
 
   /** 是否红包 */
   const isRedEnvelope = (item: IConversationModel) => {
-    if (item?.lastMessage?.payload?.data) {
+    if (
+      item?.lastMessage?.payload?.data &&
+      item?.lastMessage?.type === 'TIMCustomElem'
+    ) {
       const businessID = JSON?.parse(
         item?.lastMessage?.payload?.data
       )?.businessID

TUIKit/components/TUIConversation/index.vue

@@ -5,7 +5,7 @@
     @touchstart="handleTouchStart"
     @touchend="handleTouchEnd"
   >
-    <ConversationHeader>
+    <ConversationHeader :topCount="totalUnreadCount">
       <TUISearch searchType="global" />
     </ConversationHeader>
     <ConversationNetwork />
@@ -28,7 +28,7 @@
   import ConversationList from './conversation-list/index.vue'
   import ConversationHeader from './conversation-header/index.vue'
   import ConversationNetwork from './conversation-network/index.vue'
-  import { onHide } from '@dcloudio/uni-app'
+  import { onHide, onShow } from '@dcloudio/uni-app'
   // #ifdef MP-WEIXIN
   // uniapp packaged mini-programs are integrated by default, and the default initialization entry file is imported here
   // TUIChatKit init needs to be encapsulated because uni vue2 will report an error when compiling H5 directly through conditional compilation
@@ -37,7 +37,7 @@
 
   const emits = defineEmits(['handleSwitchConversation'])
 
-  const totalUnreadCount = ref(0)
+  const totalUnreadCount = ref('')
   const headerRef = ref<typeof ConversationHeader>()
   const conversationListDomRef = ref<typeof ConversationList>()
   const touchX = ref<number>(0)
@@ -117,24 +117,24 @@
     }
   }
 
-  TUIStore.watch(StoreName.CONV, {
-    totalUnreadCount: (count: number) => {
-      totalUnreadCount.value = count
-      const tabBarIndex = getTabBarIndex() ?? -1
-      if (tabBarIndex >= 0) {
-        if (count > 0) {
-          uni.setTabBarBadge({
-            index: tabBarIndex,
-            text: count > 99 ? '99+' : count.toString()
-          })
-        } else {
-          uni.removeTabBarBadge({
-            index: tabBarIndex
-          })
-        }
-      }
-    }
-  })
+  // TUIStore.watch(StoreName.CONV, {
+  //   totalUnreadCount: (count: number) => {
+  //     totalUnreadCount.value = count
+  //     const tabBarIndex = getTabBarIndex() ?? -1
+  //     if (tabBarIndex >= 0) {
+  //       if (count > 0) {
+  //         uni.setTabBarBadge({
+  //           index: tabBarIndex,
+  //           text: count > 99 ? '99+' : count.toString()
+  //         })
+  //       } else {
+  //         uni.removeTabBarBadge({
+  //           index: tabBarIndex
+  //         })
+  //       }
+  //     }
+  //   }
+  // })
 
   TUIStore.watch(StoreName.CUSTOM, {
     isShowConversationHeader: (showStatus: boolean) => {
@@ -198,6 +198,25 @@
   const getPassingRef = ref => {
     ref.value = conversationListDomRef.value
   }
+
+  onShow(async () => {
+    TUIStore.watch(StoreName.CONV, {
+      totalUnreadCount: (count: number) => {
+        if (count > 0) {
+          totalUnreadCount.value = count > 99 ? '99+' : String(count)
+          uni.setTabBarBadge({
+            index: 0,
+            text: count > 99 ? '99+' : count.toString()
+          })
+        } else {
+          totalUnreadCount.value = ''
+          uni.removeTabBarBadge({
+            index: 0
+          })
+        }
+      }
+    })
+  })
 </script>
 
 <style lang="scss" scoped src="./style/index.scss"></style>