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

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>