更新

hdApp/src/admin/home/me.vue

@@ -4,55 +4,48 @@
       <view class="status-space" :style="{ height: statusBarHeight + 'px' }"></view>
 
       <view class="hero-panel">
-      <view class="profile-card">
-        <view
-          class="profile-main"
-          @click="isLoggedIn ? pageTo({ url: '/admin/staff/admin' }) : pageTo({ url: '/admin/home/login' })"
-        >
-          <image v-if="myInfo.shopImg" class="shop-avatar" :src="myInfo.shopImg" mode="aspectFill"></image>
-          <view v-else class="shop-avatar avatar-placeholder">
-            <zui-svg-icon icon="home-flour" :width="48" :height="48" />
-          </view>
-          <view class="profile-text">
-            <view class="shop-title">{{ isLoggedIn ? shopTitle : '登录/注册' }}</view>
-            <view class="admin-name">{{ isLoggedIn ? adminName : '点击登录花店账号' }}</view>
+        <view class="profile-card">
+          <view
+            class="profile-main"
+            @click="isLoggedIn ? pageTo({ url: '/admin/staff/admin' }) : pageTo({ url: '/admin/home/login' })"
+          >
+            <image v-if="myInfo.shopImg" class="shop-avatar" :src="myInfo.shopImg" mode="aspectFill"></image>
+            <view v-else class="shop-avatar avatar-placeholder">
+              <zui-svg-icon icon="home-flour" :width="56" :height="56" />
+            </view>
+            <view class="profile-text">
+              <view class="shop-title">{{ isLoggedIn ? shopTitle : '登录/注册' }}</view>
+              <view class="admin-name">{{ adminLineText }}</view>
+            </view>
           </view>
-          <text v-if="isLoggedIn" class="profile-chevron">›</text>
-        </view>
 
-        <view class="quick-actions" v-if="isLoggedIn">
-          <view class="quick-action" @click.stop="changeShop">
-            <view class="quick-action-icon-wrap">
+          <view class="quick-actions" v-if="isLoggedIn">
+            <view class="quick-action" @click.stop="changeShop">
               <image class="quick-action-icon" :src="iconSrc('my-switch-shop')" mode="aspectFit" />
+              <text>切换门店</text>
             </view>
-            <text>切换门店</text>
-          </view>
-          <view class="quick-action" @click.stop="suggest">
-            <view class="quick-action-icon-wrap">
+            <view class="quick-action" @click.stop="suggest">
               <image class="quick-action-icon" :src="iconSrc('my-service')" mode="aspectFit" />
+              <text>专属客服</text>
             </view>
-            <text>专属客服</text>
-          </view>
-          <view class="quick-action" @click.stop="pageTo({ url: '/admin/shop/sk' })">
-            <view class="quick-action-icon-wrap">
+            <view class="quick-action" @click.stop="pageTo({ url: '/admin/shop/sk' })">
               <image class="quick-action-icon" :src="iconSrc('my-settings-outline')" mode="aspectFit" />
+              <text>设置</text>
             </view>
-            <text>设置</text>
           </view>
         </view>
-      </view>
 
-      <view class="expire-card" v-if="isLoggedIn" @click="goRenew">
-        <view class="expire-main">
-          <text class="expire-label">到期时间</text>
-          <text class="expire-date">{{ deadlineText }}</text>
-        </view>
-        <view class="renew-link">
-          <text class="renew-text">去续费</text>
-          <view class="renew-arrow">›</view>
+        <view class="expire-card" v-if="isLoggedIn" @click="goRenew">
+          <view class="expire-main">
+            <text class="expire-label">到期时间</text>
+            <text class="expire-date">{{ deadlineText }}</text>
+          </view>
+          <view class="renew-link">
+            <text class="renew-text">去续费</text>
+            <view class="renew-arrow">›</view>
+          </view>
         </view>
       </view>
-      </view>
     </view>
 
     <view class="content-wrap" v-if="isLoggedIn">
@@ -155,8 +148,19 @@ export default {
       }
       return `${sjName}·${shopName}`;
     },
-    adminName () {
-      return this.myInfo.adminName || "";
+    adminLineText () {
+      if (!this.isLoggedIn) {
+        return "点击登录花店账号";
+      }
+      const name = this.myInfo.adminName || "";
+      const mobile = this.myInfo.adminMobile || "";
+      if (name && mobile) {
+        if (name === mobile) {
+          return name;
+        }
+        return `${name} ${mobile}`;
+      }
+      return name || mobile;
     },
     deadlineText () {
       const deadline = this.myInfo.deadline || "";
@@ -374,19 +378,17 @@ export default {
 .me-page {
   min-height: 100vh;
   padding-bottom: 32upx;
-  background: #f5f8f6;
+  background: #f2f7f4;
 }
 
 .page-hero {
-  padding: 0 24upx 24upx;
-  background: linear-gradient(180deg, #dff5e8 0%, #eaf8f0 38%, #f0faf4 72%, #f5f8f6 100%);
+  padding: 0 24upx 20upx;
+  background: linear-gradient(180deg, #e8f5ed 0%, #ecf6f0 72%, #f2f7f4 100%);
 }
 
 .hero-panel {
-  padding: 20upx 20upx 22upx;
-  border-radius: 24upx;
-  background: #fff;
-  box-shadow: 0 10upx 32upx rgba(24, 37, 30, 0.06);
+  padding: 12upx 0 0;
+  background: transparent;
 }
 
 .status-space {
@@ -394,7 +396,7 @@ export default {
 }
 
 .profile-card {
-  padding: 4upx 0 0;
+  padding: 0;
 }
 
 .profile-main {
@@ -405,8 +407,8 @@ export default {
 
 .shop-avatar,
 .avatar-placeholder {
-  width: 108upx;
-  height: 108upx;
+  width: 120upx;
+  height: 120upx;
   border-radius: 50%;
   flex-shrink: 0;
   border: 4upx solid #fff;
@@ -432,8 +434,8 @@ export default {
 
 .shop-title {
   color: #111416;
-  font-size: 34upx;
-  line-height: 44upx;
+  font-size: 38upx;
+  line-height: 48upx;
   font-weight: 800;
   overflow: hidden;
   white-space: nowrap;
@@ -441,15 +443,15 @@ export default {
 }
 
 .admin-name {
-  margin-top: 10upx;
+  margin-top: 12upx;
   color: #8a9199;
-  font-size: 26upx;
-  line-height: 32upx;
+  font-size: 30upx;
+  line-height: 36upx;
 }
 
 .profile-chevron {
-  margin-left: 12upx;
-  color: #c5cad1;
+  margin-left: 8upx;
+  color: #b5bcc4;
   font-size: 44upx;
   line-height: 1;
   flex-shrink: 0;
@@ -459,18 +461,12 @@ export default {
   display: flex;
   align-items: flex-start;
   justify-content: space-around;
-  margin-top: 24upx;
-  padding: 20upx 8upx 4upx;
+  margin-top: 22upx;
+  padding: 22upx 12upx 14upx;
   border-radius: 18upx;
-  background: #f5faf7;
+  background: rgba(255, 255, 255, 0.58);
 }
 
-/* #ifdef MP-WEIXIN */
-.quick-actions {
-  margin-top: 24upx;
-}
-/* #endif */
-
 .quick-action {
   display: flex;
   flex-direction: column;
@@ -479,28 +475,21 @@ export default {
   min-width: 0;
   color: #33383f;
   font-size: 24upx;
-  line-height: 30upx;
+  line-height: 28upx;
 }
 
-.quick-action-icon-wrap {
-  width: 72upx;
-  height: 72upx;
-  border-radius: 50%;
-  background: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 6upx 16upx rgba(24, 37, 30, 0.06);
+.quick-action + .quick-action {
+  margin-left: 0;
 }
 
 .quick-action-icon {
-  width: 40upx;
-  height: 40upx;
+  width: 44upx;
+  height: 44upx;
   display: block;
 }
 
 .quick-action text {
-  margin-top: 12upx;
+  margin-top: 10upx;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
@@ -511,15 +500,15 @@ export default {
   position: relative;
   overflow: hidden;
   min-height: 92upx;
-  margin-top: 18upx;
+  margin-top: 22upx;
   padding: 20upx 24upx;
-  border-radius: 16upx;
+  border-radius: 18upx;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #f0faf4;
-  border: 1upx solid #dcefe4;
-  box-shadow: none;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1upx solid rgba(255, 255, 255, 0.9);
+  box-shadow: 0 6upx 18upx rgba(9, 197, 103, 0.08);
 }
 
 .expire-card::after {
@@ -584,13 +573,13 @@ export default {
 }
 
 .content-wrap {
-  padding: 4upx 24upx 28upx;
+  padding: 8upx 24upx 28upx;
 }
 
 .finance-card {
   display: flex;
   align-items: stretch;
-  margin-top: 8upx;
+  margin-top: 0;
   padding: 28upx 24upx;
   border-radius: 20upx;
   background: #fff;