更新通讯录页面样式

components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     Notification: typeof import('./src/components/notification/index.vue')['default']
     NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
     NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
+    NutBadge: typeof import('@nutui/nutui-taro')['Badge']
     NutButton: typeof import('@nutui/nutui-taro')['Button']
     NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
     NutCell: typeof import('@nutui/nutui-taro')['Cell']

src/components/contact/index.scss

@@ -23,3 +23,12 @@
 .vip > .badge {
   line-height: normal;
 }
+.nut-elevator__list__item__name--highcolor {
+  color: #333333
+}
+.nut-elevator__list__item__name {
+  padding: 0;
+}
+.item-hover {
+  background-color: #EEE;
+}

src/components/contact/index.vue

@@ -21,32 +21,33 @@ const clickItem = (key: string, item: ContactData)  => {
 //   elevatorHeight.value = calcElevatorHeight
 // })
 
-
 </script>
 
 <template>
   <nut-elevator :index-list="props.items" is-sticky style="height: 100%" :height="100" @click-item="clickItem">
   <template #default="{ item }">
-      <view class="d-flex flex-row pb-2">
+      <view class="d-flex flex-row pl-3 pr-3 pb-2 w-100" @tap="onItemTap(this)" hover-class="item-hover">
         <view class="pr-4 pt-2 h6">
-          <nut-avatar size="normal" color="white" :bg-color="BjxHelper.mbString2RgbHex(item.name)" class="overflow-hidden">
-            <img  v-if="item.avatar" :src="item.avatar" />
-            <view v-else-if="BjxHelper.getBJXFirstChar(item.name)">{{BjxHelper.getBJXFirstChar(item.name)}}</view>
-            <view v-else>
-              <Text className='fas fa-user fa-lg'/>
-            </view>
-          </nut-avatar>
+          <NutBadge :value="item.isVIP?'VIP':''">
+            <NutAvatar size="normal" color="white" :bg-color="BjxHelper.mbString2RgbHex(item.name)" class="overflow-hidden">
+              <img  v-if="item.avatar" :src="item.avatar" />
+              <view v-else-if="BjxHelper.getBJXFirstChar(item.name)">{{BjxHelper.getBJXFirstChar(item.name)}}</view>
+              <view v-else>
+                <Text className='fas fa-user fa-lg'/>
+              </view>
+            </NutAvatar>
+          </NutBadge>
         </view>
-        <view>
+        <view class="flex-grow-1">
           <view class="d-flex flex-row pt-2">
             <view v-if="item.name" class="name">{{item.name}}</view>
             <view v-else class="text-black-50 name">
               <Text className='text-info fas fa-exclamation-circle'/> 无姓名
             </view>
-            <view class="pl-2 vip pt-1">
-              <view v-if="item.isVIP" class="badge badge-pill badge-danger">VIP</view>
-              <view v-else></view>
-            </view>
+<!--            <view class="pl-2 vip pt-1">-->
+<!--              <view v-if="item.isVIP" class="badge badge-pill badge-danger">VIP</view>-->
+<!--              <view v-else></view>-->
+<!--            </view>-->
           </view>
           <view class="company">
             <view v-if="item.company">{{item.company}}</view>
@@ -55,6 +56,15 @@ const clickItem = (key: string, item: ContactData)  => {
             </view>
           </view>
         </view>
+        <view class="pr-4 d-flex justify-content-end">
+          <h5 class="pt-3" v-if="item.isBlock" style="line-height: unset !important;">
+            <view class="badge badge-pill badge-light text-danger">
+              <Text className="fas fa-ban text-danger"></Text>
+              已阻止
+            </view>
+          </h5>
+          <view v-else></view>
+        </view>
       </view>
 
   </template>