显示

hdApp/src/admin/member/detail.vue

@@ -2,21 +2,23 @@
   <div class="app-content" :style="{ backgroundImage: `url(${constant.imgUrl}/member/bg2.png)` }">
     <div class="module-com user-info">
       <div class="user-wrap">
-        <app-avatar-module :src="data.avatarUrl" />
-        <div class="user-top-right">
-          <div>
-            <div class="flex-center" @click="changeNameFn()">
-              <span class="app-size-32">{{ data.name }}</span> 
-              <i class="iconfont iconbianji" style="font-size:25upx;margin-left:20upx;"></i>
+        <div class="user-avatar">
+          <app-avatar-module :src="data.avatarUrl" />
+        </div>
+        <div class="user-info-content">
+          <div class="user-main-info">
+            <div class="user-name-row" @click="changeNameFn()">
+              <span class="user-name">{{ data.name }}</span> 
+              <i class="iconfont iconbianji edit-icon"></i>
+            </div>
+            <div class="user-detail-info">
+              <span class="user-real-name">{{ data.originName }}</span>
+              <span class="user-id">ID {{ data.id }}</span>
             </div>
-            <div class="app-color-3">{{ data.originName }}</div>
-            <div class="app-color-3">ID：{{ data.id }}</div>
           </div>
-          <div class="source-wrap">
-            <text style="font-weight:bold;font-size:30upx;color:#3385ff;">
-              {{ data.memberName }}
-              <text v-if="Number(data.discount)>0 && Number(data.discount)<1" style="margin-left:10upx;">{{ data.discount*100 }}折</text>
-            </text>
+          <div class="member-level-badge">
+            <text class="member-name">{{ data.memberName }}</text>
+            <text v-if="Number(data.discount)>0 && Number(data.discount)<1" class="discount-tag">{{ data.discount*100 }}折</text>
           </div>
         </div>
       </div>
@@ -45,24 +47,39 @@
     </div>
 -->
 
-    <view class="module-com user-address_bx">
-        <view class="address-tit"> 地址 </view>
-        <view class="address-des_bx">
-          <view @click.stop="pageTo({ url: '/admin/member/modify?id='+data.id+'&name='+data.name })">
-              <view>
-                {{data.name}}
-              </view>
-              <view style="margin-bottom:20upx;color:#333333">{{data.superInfo && data.superInfo.name ? data.superInfo.name : ''}} {{data.mobile}}</view>
-              <view>
-                <text v-if="!$util.isEmpty(data.city)" style="margin-right:15upx;">{{data.city}}</text>
-                {{data.dist}}{{data.address}}{{data.floor}}
-                <text v-if="data.showAddress && !$util.isEmpty(data.showAddress)">（{{data.showAddress}}）</text>
-                <i class="iconfont iconbianji" style="font-size:25upx;margin-left:20upx;"></i>
-              </view>
+    <view class="module-com user-contact-info">
+        <view class="contact-header">
+          <text class="contact-title">地址信息</text>
+          <view class="action-buttons">
+            <i @click.stop="pageTo({ url: '/admin/member/modify?id='+data.id+'&name='+data.name })" class="iconfont iconbianji edit-btn"></i>
+            <i @click="callMobile" class="iconfont icondianhua1 call-btn"></i>
+          </view>
+        </view>
+        
+        <view class="contact-content">
+          <view class="contact-row">
+            <text class="contact-label">店长</text>
+            <text class="contact-value">{{data.name}}</text>
           </view>
-          <view>
-            <i @click="callMobile" class="iconfont icondianhua1" style="font-size:48upx;margin-left:60upx;margin-right:18upx;color:#09C567;"></i>
+          
+          <view class="contact-row">
+            <text class="contact-label">电话</text>
+            <text class="contact-value phone-number" @click="callMobile">
+              <text v-if="data.superInfo && data.superInfo.name" class="super-name">{{data.superInfo.name}} </text>
+              {{data.mobile}}
+            </text>
           </view>
+          
+          <view class="contact-row address-row">
+             <text class="contact-label">地址</text>
+             <view class="contact-value address-text">
+               <text class="address-main">
+                 <text v-if="!$util.isEmpty(data.city)" class="city-name">{{data.city}} </text>
+                 {{data.dist}}{{data.address}}{{data.floor}}
+               </text>
+               <text v-if="data.showAddress && !$util.isEmpty(data.showAddress)" class="show-address">{{data.showAddress}}</text>
+             </view>
+           </view>
         </view>
     </view>
 
@@ -635,75 +652,205 @@ export default {
 }
 // 用户信息
 .user-info {
-  padding: 40upx 30upx 50upx;
+  padding: 30upx 30upx 40upx;
   .user-wrap {
-    @include disFlex(center, space-between);
-    margin-bottom: 50upx;
-    .user-top-right {
+    @include disFlex(flex-start, flex-start);
+    margin-bottom: 40upx;
+    
+    .user-avatar {
+      margin-right: 24upx;
+      flex-shrink: 0;
+    }
+    
+    .user-info-content {
+      flex: 1;
       @include disFlex(flex-start, space-between);
-      width: calc(100% - 120upx);
-      .flex-center {
-        margin-bottom: 14upx;
+      align-items: flex-start;
+      
+      .user-main-info {
+        flex: 1;
+        
+        .user-name-row {
+          @include disFlex(center, flex-start);
+          margin-bottom: 12upx;
+          
+          .user-name {
+            font-size: 32upx;
+            font-weight: 600;
+            color: #333;
+          }
+          
+          .edit-icon {
+            font-size: 22upx;
+            margin-left: 16upx;
+            color: #999;
+          }
+        }
+        
+        .user-detail-info {
+          @include disFlex(flex-start, flex-start);
+          flex-direction: column;
+          gap: 8upx;
+          
+          .user-real-name, .user-id {
+            font-size: 26upx;
+            color: #666;
+            line-height: 1.2;
+          }
+        }
       }
-      .source-wrap {
-        .iconfont {
-          margin-left: 10upx;
+      
+      .member-level-badge {
+        @include disFlex(center, flex-end);
+        flex-direction: column;
+        align-items: flex-end;
+        margin-left: 20upx;
+        
+        .member-name {
+          font-weight: 600;
+          font-size: 28upx;
+          color: #3385ff;
+          text-align: right;
+        }
+        
+        .discount-tag {
+          font-size: 24upx;
+          color: #3385ff;
+          margin-top: 4upx;
+          background-color: #f0f7ff;
+          padding: 2upx 8upx;
+          border-radius: 8upx;
         }
       }
     }
   }
+  
   .user-bottom {
     width: 100%;
     @include disFlex(center, space-around);
+    padding-top: 20upx;
+    border-top: 1upx solid #f5f5f5;
+    
     .data-list {
       text-align: center;
+      
       .app-size-30 {
-        margin-bottom: 14upx;
+        margin-bottom: 8upx;
+        font-weight: 600;
+      }
+      
+      .app-color-3 {
+        font-size: 24upx;
       }
     }
   }
 }
-.user-address_bx {
-  padding:20upx 0;
-  & .address-tit {
-    color: #999999;
-    font-size: 24upx;
-    font-weight: 600;
-    padding:10upx 0 20upx 20upx;
-    border-bottom: 1upx solid #EEEEEE;
-  }
-  & .address-des_bx {
-    display: flex;
-    padding: 20upx 10upx 30upx 20upx;
-    & > view:nth-child(1) {
-      flex: 1;
-      margin-top: 10upx;
-
-      & > view:nth-child(1) {
-        color: #333333;
-        font-size: 28upx;
-        font-weight: bold;
-        display: flex;
-        align-items: center;
-        & .admin-button-com {
-          margin-left: 10upx;
-          border-radius: 25upx;
+// 联系信息
+.user-contact-info {
+  padding: 20upx 0;
+  
+  .contact-header {
+    @include disFlex(center, space-between);
+    padding: 10upx 20upx 15upx;
+    border-bottom: 1upx solid #f0f0f0;
+    
+    .contact-title {
+      font-size: 28upx;
+      font-weight: 600;
+      color: #333;
+    }
+    
+    .action-buttons {
+      @include disFlex(center, center);
+      gap: 30upx;
+      
+      .edit-btn, .call-btn {
+        width: 48upx;
+        height: 48upx;
+        @include disFlex(center, center);
+        border-radius: 50%;
+        font-size: 34upx;
+      }
+      
+      .edit-btn {
+        background-color: #f8f9fa;
+        color: #666;
+        
+        &:active {
+          background-color: #e9ecef;
         }
       }
-      & > view:nth-child(2) {
-          color: #666666;
-          font-size: 28upx;
-          font-weight: 400;
-          margin-top: 20upx; 
+      
+      .call-btn {
+        background-color: #e8f5e8;
+        color: #28a745;
+        font-size: 38upx;
+        
+        &:active {
+          background-color: #d4edda;
+        }
       }
     }
-    & > view:nth-child(2) {
-      display: flex;
-      & .icondianhua1 {
-          font-size: 44upx;
-          color: #3385FF;
-          margin-left: 10upx;
+  }
+  
+  .contact-content {
+    padding: 20upx;
+    
+    .contact-row {
+      @include disFlex(flex-start, flex-start);
+      margin-bottom: 20upx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .contact-label {
+        width: 80upx;
+        font-size: 26upx;
+        color: #666;
+        flex-shrink: 0;
+        margin-right: 20upx;
+        line-height: 1.4;
+      }
+      
+      .contact-value {
+        flex: 1;
+        font-size: 28upx;
+        color: #333;
+        line-height: 1.4;
+        word-break: break-all;
+        
+        &.phone-number {
+          color: #007aff;
+          
+          .super-name {
+            color: #666;
+            font-size: 24upx;
+          }
         }
+        
+        &.address-text {
+          @include disFlex(flex-start, flex-start);
+          flex-direction: column;
+          gap: 8upx;
+          
+          .address-main {
+            .city-name {
+              color: #666;
+            }
+          }
+          
+          .show-address {
+            color: #999;
+            font-size: 24upx;
+            margin-top: 4upx;
+          }
+        }
+      }
+      
+      &.address-row {
+        align-items: flex-start;
+      }
     }
   }
 }