更新

hdApp/src/admin/home/member.vue

@@ -1,15 +1,16 @@
 <template>
   <view class="member-page app-content">
-    <view class="page-header">
-      <view class="status-space" :style="{ height: statusBarHeight + 'px' }"></view>
-      <view class="custom-nav">
-        <view class="nav-side"></view>
-        <view class="nav-title">客户</view>
-        <view class="nav-side"></view>
+    <view class="top-sticky">
+      <view class="page-header">
+        <view class="status-space" :style="{ height: statusBarHeight + 'px' }"></view>
+        <view class="custom-nav">
+          <view class="nav-side"></view>
+          <view class="nav-title">客户</view>
+          <view class="nav-side"></view>
+        </view>
       </view>
-    </view>
 
-    <view class="hero-panel">
+      <view class="hero-panel">
       <view class="toolbar">
         <view class="search-style-btn" @click="changeSearchStyle">
           <image class="toolbar-icon" :src="iconSrc('order-switch')" mode="aspectFit" />
@@ -50,8 +51,8 @@
             <zui-svg-icon
               v-if="item.icon"
               :icon="item.icon"
-              :width="30"
-              :height="30"
+              :width="20"
+              :height="20"
               :color="tabIndex == index ? '#09c567' : '#858b94'"
             />
           </view>
@@ -60,6 +61,7 @@
         </view>
       </view>
     </view>
+    </view>
 
     <view class="list-wrap">
       <block v-if="!$util.isEmpty(list.data)">
@@ -74,20 +76,11 @@
             <view v-else class="avatar-placeholder">
               <image class="avatar-icon" :src="iconSrc('client-all')" mode="aspectFit" />
             </view>
-            <image
-              v-if="Number(item.vip) == 1 && Number(item.member) > 0"
-              class="mini-member-badge"
-              :src="memberBadgeSrc(item.member)"
-              mode="aspectFit"
-            ></image>
           </view>
 
-          <view class="member-info">
+          <view class="member-info" :class="{ 'with-level-badge': showMemberBadge(item) }">
             <view class="name-row">
               <view class="member-name">{{ item.name }}</view>
-              <!-- <view v-if="Number(item.vip) == 1 && Number(item.member) > 0" class="level-badge">
-                <image class="level-badge-icon" :src="memberBadgeSrc(item.member)" mode="aspectFit"></image>
-              </view> -->
             </view>
             <view class="meta-row">
               <view class="meta-item">
@@ -95,16 +88,23 @@
                 <text>{{ shortDateTime(item.visitTime) }}</text>
               </view>
               <view class="meta-item" :class="item.amountClass">
-                <image class="meta-icon" :src="iconSrc('client-balance')" mode="aspectFit" />
+                <image class="meta-icon meta-icon-balance" :src="iconSrc('client-balance')" mode="aspectFit" />
                 <text>{{ amountText(item) }}</text>
               </view>
-              <view v-if="statusText(item)" class="status-pill">
+              <view
+                v-if="statusText(item)"
+                class="status-pill"
+                :class="{ 'audit-pill': item.passStatus != 1 }"
+              >
                 <image class="meta-icon" :src="iconSrc(statusIcon(item))" mode="aspectFit" />
                 <text>{{ statusText(item) }}</text>
               </view>
             </view>
           </view>
 
+          <view v-if="showMemberBadge(item)" class="level-badge">
+            <image class="level-badge-icon" :src="memberBadgeSrc(item.member)" mode="aspectFit" />
+          </view>
           <text class="arrow">›</text>
         </view>
       </block>
@@ -258,6 +258,9 @@ export default {
     memberBadgeSrc (member) {
       return `/static/member-icons/member-${Number(member)}.svg`;
     },
+    showMemberBadge (item) {
+      return Number(item.vip) == 1 && Number(item.member) > 0;
+    },
     shortDateTime (value) {
       return value ? value.substr(5, 11) : "";
     },
@@ -269,7 +272,10 @@ export default {
       if (balance < 0) {
         return `-${this.formatNumber(Math.abs(balance))}`;
       }
-      return `${this.formatNumber(balance)}`;
+      if (balance > 0) {
+        return `余额${this.formatNumber(balance)}`;
+      }
+      return "0";
     },
     decorateMemberList () {
       this.list.data.forEach(item => {
@@ -319,6 +325,13 @@ export default {
   background: #f5f8f6;
 }
 
+.top-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: #fff;
+}
+
 .page-header {
   padding: 0 22upx;
   background: linear-gradient(180deg, #e9f8ef 0%, #edf9f2 62%, #f4fbf7 100%);
@@ -429,9 +442,9 @@ export default {
 
 .stat-tabs {
   display: flex;
-  margin: 28upx -22upx 0;
+  margin: 24upx -22upx 0;
   padding: 4upx 0 0;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 24upx, #ffffff 100%);
+  background: #fff;
   border-radius: 0;
   box-shadow: none;
 }
@@ -464,8 +477,8 @@ export default {
 }
 
 .tab-icon {
-  width: 40upx;
-  height: 40upx;
+  width: 28upx;
+  height: 28upx;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -493,22 +506,28 @@ export default {
   height: 28upx;
 }
 
+.meta-icon-balance {
+  width: 24upx;
+  height: 24upx;
+}
+
 .toolbar-icon-white {
   filter: brightness(0) invert(1);
 }
 
 .tab-name {
-  margin-top: 8upx;
+  margin-top: 16upx;
   color: #33383f;
-  font-size: 28upx;
-  line-height: 34upx;
+  font-size: 22upx;
+  line-height: 32upx;
 }
 
 .tab-value {
-  margin-top: 8upx;
+  margin-top: 6upx;
   margin-bottom: 14upx;
   color: #858b94;
-  font-size: 25upx;
+  font-size: 22upx;
+  line-height: 28upx;
 }
 
 .stat-tab.active .tab-name,
@@ -517,18 +536,19 @@ export default {
 }
 
 .list-wrap {
-  padding: 12upx 12upx 14upx;
+  padding: 10upx 12upx 14upx;
 }
 
 .member-card {
+  position: relative;
   display: flex;
   align-items: center;
-  min-height: 128upx;
-  margin-bottom: 8upx;
-  padding: 24upx 26upx;
-  border-radius: 18upx;
+  min-height: 132upx;
+  margin-bottom: 10upx;
+  padding: 22upx 52upx 22upx 24upx;
+  border-radius: 20upx;
   background: #fff;
-  box-shadow: 0 10upx 28upx rgba(24, 37, 30, 0.06);
+  box-shadow: 0 8upx 24upx rgba(24, 37, 30, 0.05);
   box-sizing: border-box;
 }
 
@@ -558,19 +578,15 @@ export default {
   background: linear-gradient(135deg, #e5faee 0%, #d6f5e3 100%);
 }
 
-.mini-member-badge {
-  position: absolute;
-  right: -4upx;
-  bottom: -6upx;
-  width: 30upx;
-  height: 30upx;
-}
-
 .member-info {
   flex: 1;
   min-width: 0;
 }
 
+.member-info.with-level-badge {
+  padding-right: 58upx;
+}
+
 .name-row {
   display: flex;
   align-items: center;
@@ -578,43 +594,60 @@ export default {
 }
 
 .member-name {
-  max-width: 360upx;
+  max-width: 100%;
   color: #111416;
-  font-size: 34upx;
+  font-size: 36upx;
   line-height: 42upx;
-  font-weight: 800;
+  font-weight: 400;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 .level-badge {
-  margin-left: 16upx;
+  position: absolute;
+  right: 46upx;
+  top: 54%;
+  z-index: 1;
   display: flex;
   align-items: center;
+  transform: translate(-10upx, -50%);
+  pointer-events: none;
 }
 
 .level-badge-icon {
-  width: 54upx;
-  height: 54upx;
+  width: 56upx;
+  height: 56upx;
+}
+
+.arrow {
+  position: absolute;
+  right: 18upx;
+  top: 50%;
+  color: #b8bdc7;
+  font-size: 54upx;
+  line-height: 1;
+  transform: translateY(-50%);
 }
 
 .meta-row {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 18upx;
+  flex-wrap: nowrap;
   margin-top: 14upx;
+  overflow: hidden;
 }
 
 .meta-item,
 .status-pill {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+  margin-right: 18upx;
   min-width: 0;
   color: #828892;
-  font-size: 25upx;
-  line-height: 32upx;
+  font-size: 24upx;
+  line-height: 30upx;
 }
 
 .meta-item text,
@@ -637,11 +670,8 @@ export default {
   background: #eaf8ef;
 }
 
-.arrow {
-  margin-left: 16upx;
-  color: #b8bdc7;
-  font-size: 54upx;
-  line-height: 1;
-  flex-shrink: 0;
+.audit-pill {
+  color: #147cff;
+  background: #edf4ff;
 }
 </style>