显示优化

ghsApp/src/pagesClient/member/detail.vue

@@ -52,36 +52,68 @@
         </view>
       </view>
       <view class="module-com user-address_bx">
-          <view class="address-tit" style="position: relative;">
-            地址 
-              <button class="admin-button-com middle blue" @click="downloadCode()" style="position:absolute;right:200upx;top:-15upx;font-size:29upx;">下载结账码</button>
+          <!-- 头部标题和操作按钮区域 -->
+          <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>
+            <view class="header-actions" style="display: flex; gap: 20upx;">
+              <button class="admin-button-com middle blue" @click="downloadCode()" style="font-size:29upx;">下载结账码</button>
               <!-- #ifdef MP-WEIXIN -->
-              <button class="admin-button-com middle blue" open-type="share" style="position: absolute;right:16upx;top:-15upx;font-size:29upx;">邀请结账</button>
+              <button class="admin-button-com middle blue" open-type="share" style="font-size:29upx;margin-right:20upx;">邀请结账</button>
               <!-- #endif -->
               <!-- #ifdef APP-PLUS -->
-              <button class="admin-button-com middle blue" @click="inviteToPay()" style="position: absolute;right:16upx;top:-15upx;font-size:29upx;">邀请结账</button>
+              <button class="admin-button-com middle blue" @click="inviteToPay()" style="font-size:29upx;margin-right:20upx;">邀请结账</button>
               <!-- #endif -->
+            </view>
           </view>
-          <view class="address-des_bx">
-            <view @click.stop="pageTo({ url: '/pagesClient/member/modify?id='+userInfo.id+'&name='+userInfo.name })">
-                <view>
-                  {{userInfo.name}}
-                </view>
-                <view style="margin-bottom:20upx;color:#333333">{{userInfo.superInfo && userInfo.superInfo.name ? userInfo.superInfo.name : ''}} {{userInfo.mobile}}</view>
-                <view style="position: relative; padding-right: 60upx;">
-                  <view style="margin-bottom: 10upx;">
-                    <text v-if="!$util.isEmpty(userInfo.city) || !$util.isEmpty(userInfo.dist)" style="margin-right:15upx;">{{userInfo.city}}{{userInfo.dist}}</text>
-                    {{userInfo.address}}{{userInfo.floor}}
+          
+          <!-- 用户信息卡片 -->
+          <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;" @click.stop="pageTo({ url: '/pagesClient/member/modify?id='+userInfo.id+'&name='+userInfo.name })">
+              <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>
-                  <view v-if="userInfo.fullAddress!=userInfo.showAddress && userInfo.showAddress!=''" style="color:#5f5b5b;">
-                    {{ userInfo.showAddress }}
+                  <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: #999;">{{userInfo.superInfo.name}}</text>
+                    <text style="color: #333;">{{userInfo.mobile}}</text>
                   </view>
-                  <i class="iconfont iconbianji" style="font-size:38upx; position: absolute; right: 10upx; top: 50%; transform: translateY(-50%); color: #999;"></i>
                 </view>
+                <i class="iconfont iconbianji" style="font-size: 42upx; color: #ccc; margin-top: 8upx;"></i>
+              </view>
+              
+              <!-- 地址信息 -->
+              <view class="address-info" style="background: #f8f9fa; border-radius: 12upx; padding: 20upx; border-left: 4upx solid #3385ff;">
+                <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>
+              </view>
             </view>
-            <view style="display: flex; align-items: center; height: 100upx; margin-top: 20upx;">
-              <i @click="callUp" class="iconfont icondianhua1" style="font-size:52upx; color: #28a745; margin-right: 60upx;"></i>
-              <i @click.stop="navigate(userInfo.lat,userInfo.long,userInfo.address)" v-if="!$util.isEmpty(userInfo.lat) && !$util.isEmpty(userInfo.long)" class="iconfont icondianhua" style="font-size:54upx; color:#3385ff;"></i>
+            
+            <!-- 操作按钮区域 -->
+            <view class="action-buttons" style="display: flex; gap: 32upx; padding-top: 24upx; border-top: 1upx solid #f0f0f0;">
+              <view class="action-item" style="display: flex; flex-direction: column; align-items: center; flex: 1;" @click="callUp">
+                <view class="icon-wrapper" style="width: 88upx; height: 88upx; border-radius: 50%; background: linear-gradient(135deg, #28a745, #20c997); display: flex; align-items: center; justify-content: center; margin-bottom: 12upx; box-shadow: 0 4upx 12upx rgba(40, 167, 69, 0.3);">
+                  <i class="iconfont icondianhua1" style="font-size: 40upx; color: #fff;"></i>
+                </view>
+                <text style="font-size: 24upx; color: #666;">拨打电话</text>
+              </view>
+              
+              <view class="action-item" style="display: flex; flex-direction: column; align-items: center; flex: 1;" 
+                    @click.stop="navigate(userInfo.lat,userInfo.long,userInfo.address)">
+                <view class="icon-wrapper" style="width: 88upx; height: 88upx; border-radius: 50%; background: linear-gradient(135deg, #3385ff, #0056b3); display: flex; align-items: center; justify-content: center; margin-bottom: 12upx; box-shadow: 0 4upx 12upx rgba(51, 133, 255, 0.3);">
+                  <i class="iconfont icondianhua" style="font-size: 40upx; color: #fff;"></i>
+                </view>
+                <text style="font-size: 24upx; color: #666;">导航到达</text>
+              </view>
             </view>
           </view>
       </view>
@@ -571,7 +603,11 @@ export default {
     addStaff(){
       this.$util.pageTo({url: '/admin/custom/addStaff?id='+this.userInfo.id})
     },
-		navigate(latitude, longitude, address) {   
+		navigate(latitude, longitude, address) {
+      if(this.$util.isEmpty(latitude) || this.$util.isEmpty(longitude)){
+        this.$msg('地址无效，请修改')
+        return false
+      }
 			// 将经纬度转换成Number
 			let latituded = Number(latitude)
 			let longituded = Number(longitude)