优化

ghsApp/src/pagesClient/member/detail.vue

@@ -46,60 +46,65 @@
             </view>
 
             <!-- 按钮操作区域：邀请结账 & 下载结账码 -->
-            <view class="header-actions" style="display: flex; justify-content: center; margin-top: 30upx;">
+            <view class="member-action-row">
               <!-- #ifdef MP-WEIXIN -->
-              <button class="admin-button-com middle blue" open-type="share" style="font-size:28upx; height: 72upx; line-height: 72upx; padding: 0 32upx; border-radius: 36upx;margin-right: 80upx;">邀请结账</button>
+              <button class="admin-button-com middle blue member-action-btn member-action-btn--invite" open-type="share">邀请结账</button>
               <!-- #endif -->
               <!-- #ifdef APP-PLUS -->
-              <button class="admin-button-com middle blue" @click="inviteToPay()" style="font-size:28upx; height: 72upx; line-height: 72upx; padding: 0 32upx; border-radius: 36upx;  margin-right: 80upx;">邀请结账</button>
+              <button class="admin-button-com middle blue member-action-btn member-action-btn--invite" @click="inviteToPay()">邀请结账</button>
               <!-- #endif -->
-              <button class="admin-button-com middle blue" @click="downloadCode()" style="font-size:28upx; height: 72upx; line-height: 72upx; padding: 0 32upx; border-radius: 36upx; ">下载结账码</button>
+              <button class="admin-button-com middle blue member-action-btn" @click="downloadCode()">支付宝结账</button>
             </view>
         </view>
       </view>
       <view class="module-com user-address_bx">
-          <!-- 头部标题区域 -->
-          <view class="address-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30upx;">
-            <view class="address-tit" style="font-size: 32upx; font-weight: 600; color: #333;">
-              地址
+          <view class="address-block">
+            <view class="address-block__head">
+              <text class="address-block__title">收货地址</text>
             </view>
-          </view>
-          
-          <!-- 用户信息卡片 -->
-          <view class="user-info-card" style="background: #fff; border-radius: 16upx; padding: 32upx; box-shadow: 0 2upx 12upx rgba(0,0,0,0.08);">
-            <!-- 用户基本信息 -->
-            <view class="user-basic-info" style="margin-bottom: 24upx;">
-              <view class="user-name-section" style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16upx;">
-                <view class="name-info">
-                  <view class="user-name" style="font-size: 36upx; font-weight: 600; color: #333; margin-bottom: 8upx;">
-                    {{userInfo.name}}
+            <view class="address-block__body">
+              <!-- 联系行：左侧姓名手机，右侧打电话 -->
+              <view class="address-block__contact">
+                <view class="address-block__meta">
+                  <view class="address-block__name-row">
+                    <text class="address-block__name">{{ userInfo.name }}</text>
                   </view>
-                  <view class="user-contact" style="font-size: 28upx; color: #666; display: flex; align-items: center;">
-                    <text v-if="userInfo.superInfo && userInfo.superInfo.name" style="margin-right: 16upx; color: #424141;">{{userInfo.superInfo.name}}</text>
-                    <text style="color: #333;">{{userInfo.mobile}}</text>
+                  <view v-if="userInfo.superInfo && userInfo.superInfo.name" class="address-block__sub-row">
+                    <text class="address-block__sub">{{ userInfo.superInfo.name }}</text>
+                    <text class="address-block__mobile">{{ userInfo.mobile }}</text>
                   </view>
+                  <text v-else class="address-block__mobile address-block__mobile--solo">{{ userInfo.mobile }}</text>
                 </view>
-                <view class="icon-group" style="display: flex; align-items: center; gap:56upx;">
-                  <i class="iconfont iconbianji" style="font-size:48upx;color:#3385FF;" @click.stop="pageTo({ url: '/pagesClient/member/modify?id='+userInfo.id+'&name='+userInfo.name })"></i>
-                  <i @click.stop="callUp" class="iconfont icondianhua1" style="font-size:53upx;color:#3385FF;"></i>
-                  <i class="iconfont icondianhua location-icon" :class="(!$util.isEmpty(userInfo.lat) && !$util.isEmpty(userInfo.long)) ? 'active' : 'inactive'" @click.stop="navigate(userInfo.lat,userInfo.long,userInfo.address)"></i>
+                <view class="address-block__action address-block__action--call" @click.stop="callUp">
+                  <i class="iconfont icondianhua1 address-block__icon"></i>
                 </view>
               </view>
-              
-              <!-- 地址信息 -->
-              <view class="address-info" style="background: #f8f9fa; border-radius: 12upx; padding: 20upx; border-left: 4upx solid #3385ff;" v-if="userInfo.address!=''">
-                <view class="main-address" style="font-size: 30upx; color: #333; line-height: 1.5; margin-bottom: 8upx;">
-                  <text v-if="!$util.isEmpty(userInfo.city) || !$util.isEmpty(userInfo.dist)" style="color: #666; margin-right: 8upx;">{{userInfo.city}}{{userInfo.dist}}</text>
-                  {{userInfo.address}}{{userInfo.floor}}
-                </view>
-                <view v-if="userInfo.fullAddress!=userInfo.showAddress && userInfo.showAddress!=''" 
-                      style="font-size: 26upx; color: #999; line-height: 1.4;">
-                  {{ userInfo.showAddress }}
+              <!-- 地址行：左侧地址文案，右下编辑与定位 -->
+              <view class="address-block__addr">
+                <view class="address-block__addr-row">
+                  <view class="address-block__addr-text-col">
+                    <block v-if="userInfo.address!=''">
+                      <text class="address-block__addr-text">
+                        <text v-if="!$util.isEmpty(userInfo.city) || !$util.isEmpty(userInfo.dist)" style="margin-right:10upx;">{{ userInfo.city }}{{ userInfo.dist }}</text>
+                        {{ userInfo.address }}{{ userInfo.floor }}
+                      </text>
+                      <text v-if="userInfo.fullAddress!=userInfo.showAddress && userInfo.showAddress!=''" class="address-block__addr-sub">
+                        {{ userInfo.showAddress }}
+                      </text>
+                    </block>
+                    <text v-else class="address-block__addr-empty">暂无收货地址</text>
+                  </view>
+                  <view class="address-block__actions address-block__actions--addr">
+                    <view class="address-block__action" @click.stop="pageTo({ url: '/pagesClient/member/modify?id='+userInfo.id+'&name='+userInfo.name })">
+                      <i class="iconfont iconbianji address-block__icon"></i>
+                    </view>
+                    <view class="address-block__action address-block__action--nav" @click.stop="navigate(userInfo.lat,userInfo.long,userInfo.address)">
+                      <i class="iconfont icondianhua location-icon address-block__icon" :class="(!$util.isEmpty(userInfo.lat) && !$util.isEmpty(userInfo.long)) ? 'active' : 'inactive'"></i>
+                    </view>
+                  </view>
                 </view>
               </view>
             </view>
-            
-
           </view>
       </view>
 
@@ -998,9 +1003,10 @@ export default {
   z-index: 10;
 }
 .user-info {
-  padding: 60upx 20upx 30upx;
+  padding: 60upx 20upx 20upx;
   position: relative;
   top: 51upx;
+  margin-bottom: 0;
   & .user-info_top {
     position: relative;
     display: flex;
@@ -1061,15 +1067,202 @@ export default {
     }
   }
 }
+/* 收货地址独立分栏：与上方 user-info 卡片拉开间距，形成两块白卡片 */
 .user-address_bx {
   margin-top: 70upx;
-  padding:20upx 0;
-  & .address-tit {
-    color: #999999;
-    font-size: 24upx;
-    font-weight: 600;
-    padding:10upx 0 20upx 20upx;
-    border-bottom: 1upx solid #EEEEEE;
+  padding: 0upx 24upx 32upx;
+}
+
+/* 客户详情：余额下方结账操作按钮 */
+.member-action-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: 32upx;
+  padding-bottom: 16upx;
+}
+
+.member-action-btn {
+  font-size: 28upx;
+  height: 72upx;
+  line-height: 72upx;
+  padding: 0 32upx;
+  border-radius: 36upx;
+  margin: 0;
+}
+
+.member-action-btn--invite {
+  margin-right:120upx;
+}
+
+/* 客户详情：收货地址卡片，与上方客户信息区独立留白 */
+.address-block {
+  &__head {
+    padding-top: 25upx;
+    margin-bottom: 20upx;
+    padding-left: 4upx;
+  }
+
+  &__title {
+    font-size: 30upx;
+    font-weight: 700;
+    color: #303133;
+    line-height: 44upx;
+  }
+
+  &__body {
+    padding: 28upx 26upx;
+    border-radius: 16upx;
+    background: #f7f9fc;
+    border: 1upx solid #e8edf3;
+  }
+
+  &__contact {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+    margin-right: 24upx;
+  }
+
+  &__name-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  &__name {
+    font-size: 32upx;
+    font-weight: 700;
+    color: #303133;
+    line-height: 46upx;
+  }
+
+  &__sub-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 8upx;
+  }
+
+  &__mobile {
+    font-size: 30upx;
+    color: #606266;
+    line-height: 38upx;
+    margin-left: 20upx;
+
+    &--solo {
+      display: block;
+      margin-top: 8upx;
+      margin-left: 0;
+    }
+  }
+
+  &__sub {
+    font-size: 26upx;
+    color: #606266;
+    line-height: 38upx;
+  }
+
+  &__action {
+    width: 68upx;
+    height: 68upx;
+    border-radius: 34upx;
+    background: #fff;
+    border: 1upx solid #dce6f5;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    /* 覆盖全局 iconfont 的 inline-block，保证圆圈内图标十字居中 */
+    .address-block__icon {
+      display: block;
+      line-height: 1;
+    }
+
+    &--call {
+      margin-left: auto;
+    }
+
+    .location-icon {
+      font-size: 36upx;
+    }
+  }
+
+  /* 地址区右下：修改、定位并排靠右 */
+  &__actions--addr {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+    align-self: flex-end;
+    margin-left: 20upx;
+  }
+
+  &__action--nav {
+    margin-left: 20upx;
+  }
+
+  &__icon {
+    font-size: 36upx;
+    color: #3385ff;
+    line-height: 1;
+  }
+
+  &__addr {
+    margin-top: 24upx;
+    padding-top: 22upx;
+    border-top: 1upx solid #e4eaf2;
+  }
+
+  &__addr-row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+
+  &__addr-text-col {
+    flex: 1;
+    min-width: 0;
+    margin-right: 16upx;
+  }
+
+  &__addr-text {
+    display: block;
+    font-size: 28upx;
+    color: #55575a;
+    line-height: 44upx;
+  }
+
+  &__addr-region {
+    color: #909399;
+    margin-right: 10upx;
+  }
+
+  &__addr-sub {
+    display: block;
+    margin-top: 10upx;
+    font-size: 26upx;
+    color: #909399;
+    line-height: 40upx;
+  }
+
+  &__addr-empty {
+    display: block;
+    font-size: 28upx;
+    color: #c0c4cc;
+    line-height: 44upx;
   }
 }
 .tabs-wrap {