UI优化，红包领取后缺少头像，名称字段

TUIKit/components/TUIContact/contact-list/components/FriendList.vue

@@ -1,28 +1,34 @@
 <template>
-  <div
-    v-if="Object.keys(friendListData.map).length > 0"
-    class="friend-list"
-  >
-    <ul
-      v-for="(groupData, groupKey) in friendListData.map"
-      :key="groupKey"
+  <view>
+    <view
+      v-if="Object.keys(friendListData.map).length > 0"
+      class="friend-list"
     >
-      <div class="friend-group-title">
-        {{ groupKey }} ({{ groupData.length }})
-      </div>
-      <li
-        v-for="contactListItem in groupData"
-        :key="contactListItem.renderKey"
-        class="friend-item"
-        @click="enterConversation(contactListItem)"
+      <ul
+        v-for="(groupData, groupKey) in friendListData.map"
+        :key="groupKey"
       >
-        <ContactListItem
+        <div class="friend-group-title">
+          {{ groupKey }} ({{ groupData.length }})
+        </div>
+        <li
+          v-for="contactListItem in groupData"
           :key="contactListItem.renderKey"
-          :item="deepCopy(contactListItem)"
-        />
-      </li>
-    </ul>
-  </div>
+          class="friend-item"
+          @click="enterConversation(contactListItem)"
+        >
+          <ContactListItem
+            :key="contactListItem.renderKey"
+            :item="deepCopy(contactListItem)"
+          />
+        </li>
+      </ul>
+    </view>
+    <cb-empty
+      v-if="Object.keys(friendListData.map).length === 0"
+      name="您还没有好友"
+    ></cb-empty>
+  </view>
 </template>
 
 <script setup lang="ts">
@@ -83,7 +89,7 @@
 
   .friend-group-title {
     padding: 8px 16px;
-    background-color: #f8f9fa;
+    background-color: #ffffff;
     font-size: 14px;
     font-weight: 500;
     color: #666;

TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue

@@ -3,7 +3,7 @@
     <div class="tui-contact-list-card-left">
       <Avatar
         useSkeletonAnimation
-        size="30px"
+        size="62rpx"
         :url="generateAvatar(props.item)"
       />
       <div

TUIKit/components/TUIContact/contact-list/index.vue

@@ -3,9 +3,9 @@
     v-if="!contactSearchingStatus"
     :class="['tui-contact-list', !isPC && 'tui-contact-list-h5']"
   >
-    <div v-if="!currentContactListKey">
-      <ul>
-        <li
+    <view v-if="!currentContactListKey">
+      <view class="top-list_box">
+        <view
           v-for="(contactListObj, key) in contactListMap"
           :key="key"
           class="tui-contact-list-item"
@@ -14,11 +14,11 @@
             class="tui-contact-list-item-header"
             @click="toggleCurrentContactList(key)"
           >
-            <div class="tui-contact-list-item-header-left">
+            <view class="tui-contact-list-item-header-left">
               <Icon
                 v-if="contactListObj.icon"
                 :file="contactListObj.icon"
-                size="30px"
+                size="96rpx"
               />
               <span
                 v-if="contactListObj.unreadCount"
@@ -26,25 +26,21 @@
               >
                 {{ contactListObj.unreadCount }}
               </span>
-            </div>
-            <div class="tui-contact-list-item-header-right">
-              <div>
-                {{
-                  TUITranslateService.t(
-                    `TUIContact.${contactListObj.title}`
-                  )
-                }}
-              </div>
-              <Icon
+            </view>
+            <view class="tui-contact-list-item-header-right">
+              <text>
+                {{ contactListObj.title }}
+              </text>
+              <!-- <Icon
                 :file="currentContactListKey === key ? downSVG : rightSVG"
                 size="20px"
-              />
-            </div>
+              /> -->
+            </view>
           </header>
-        </li>
-      </ul>
+        </view>
+      </view>
       <FriendList @enterConversation="selectFriend" />
-    </div>
+    </view>
     <template v-else>
       <li
         v-for="contactListItem in contactListMap[currentContactListKey]
@@ -119,9 +115,10 @@
 
   import downSVG from '../../../assets/icon/down-icon.svg'
   import rightSVG from '../../../assets/icon/right-icon.svg'
-  import newContactsSVG from '../../../assets/icon/new-contacts.svg'
-  import groupSVG from '../../../assets/icon/groups.svg'
-  import blackListSVG from '../../../assets/icon/black-list.svg'
+  import newContactsSVG from '../../../assets/icon/friend-request-icon.svg'
+  import groupSVG from '../../../assets/icon/my-group-chat.svg'
+  import blackListSVG from '../../../assets/icon/blacklist-icon.svg'
+  import addFrienIcon from '../../../assets/icon/add-frien-icon.svg'
 
   import type {
     IContactList,
@@ -143,10 +140,16 @@
     friendApplicationList: {
       icon: newContactsSVG,
       key: 'friendApplicationList',
-      title: '新的联系人',
+      title: '好友请求',
       list: [] as FriendApplication[],
       unreadCount: 0
     },
+    currentContactSearchingStatus: {
+      icon: addFrienIcon,
+      key: 'currentContactSearchingStatus',
+      title: '添加好友',
+      list: [] as IGroupModel[]
+    },
     groupList: {
       icon: groupSVG,
       key: 'groupList',
@@ -233,6 +236,10 @@
   })
 
   function toggleCurrentContactList(key: keyof IContactList) {
+    if (key === 'currentContactSearchingStatus') {
+      TUIStore.update(StoreName.CUSTOM, key, true)
+      return
+    }
     if (currentContactListKey.value === key) {
       currentContactListKey.value = ''
       currentContactInfo.value = {} as IContactInfoType
@@ -465,4 +472,31 @@
     height: 100% !important;
     overflow: hidden;
   }
+
+  .tui-contact-search-list-title {
+    padding: 16rpx 0;
+  }
+
+  .tui-contact-list-item-header {
+    &::after {
+      display: none !important;
+    }
+  }
+
+  .top-list_box {
+    display: flex;
+    justify-content: space-between;
+    padding: 32rpx 50rpx;
+    .tui-contact-list-item {
+      .tui-contact-list-item-header {
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        &:active {
+          background: none !important;
+        }
+      }
+    }
+  }
 </style>