style: 个人中心重设计，移除头像

顶部直接显示脱敏手机号；钱包余额升级为主卡（大数字+充值按钮，整卡可点进钱包）；菜单拆分为资产/订单与服务两张分组卡；联系工作时间改副标题展示；未登录态改用logo居中布局；同步清理avatar逻辑

charge-front/src/pages/user/user.vue

@@ -5,84 +5,75 @@
 
   <block v-if="user && user.mobilePhone">
     <view class="container" :style="containerStyle">
-      <view class="header flex-column">
-        <view class="flex-grow flex-center">
-          <image
-            src="/static/images/user/round.png"
-            mode="heightFix"
-            style="height: 100%"
-          />
-        </view>
-        <view class="main flex-shrink">
-          <view
-            class="avatar"
-            @click="toPage(3)"
-            :style="{
-              'background-image': `url(${user.avatar})`,
-            }"
-          ></view>
-          <view class="phone fs-40 fw-500">{{ user.mobilePhoneFormat }}</view>
-          <view class="money flex-align-center pressable" hover-class="pressed" hover-stay-time="80" @click="toPage(-1)">
-            <uni-icons
-              type="wallet-filled"
-              size="24"
-              color="var(--color-primary)"
-            ></uni-icons>
-            <view class="color-primary ml-12" style="font-size: 16px"
-              >钱包 | 充值</view
-            >
-            <view class="fs-40 fw-500 ml-auto mt-12 color-primary">¥</view>
-            <view class="fs-60 fw-500 ml-12 mr-48 color-primary">{{
-              user.balance
-            }}</view>
-          </view>
+      <view class="header">
+        <view class="phone fs-34 color-fff">{{ user.mobilePhoneFormat }}</view>
+      </view>
+
+      <!-- 钱包余额主卡 -->
+      <view
+        class="panel pressable"
+        hover-class="pressed"
+        hover-stay-time="80"
+        @click="toPage(-1)"
+      >
+        <view class="flex-column">
+          <view class="fs-24" style="color: #8c9997">钱包余额（元）</view>
+          <view class="fs-56 fw-600 mt-8 balance-num">{{ user.balance }}</view>
         </view>
+        <view class="recharge-btn flex-center fs-26 fw-500">充值</view>
       </view>
 
-      <view class="body">
-        <block v-for="(item, index) in menu" :key="index">
+      <!-- 功能菜单分组 -->
+      <view class="menu-group" v-for="(group, gi) in menuGroups" :key="gi">
+        <template v-for="idx in group" :key="idx">
           <view
             class="menu flex-align-center pressable"
             hover-class="pressed"
             hover-stay-time="80"
-            v-if="
-              index !== menu.length - 1 || user.mobilePhone === '15986907592'
-            "
-            @click="toPage(index)"
+            v-if="idx !== menu.length - 1 || user.mobilePhone === '15986907592'"
+            @click="toPage(idx)"
           >
             <view class="menu-icon">
-              <uni-icons v-if="item.iconType" :type="item.iconType" size="26" color="rgba(28,43,41,0.65)"></uni-icons>
-              <image v-else :src="item.icon" mode="aspectFit"></image>
+              <uni-icons
+                v-if="menu[idx].iconType"
+                :type="menu[idx].iconType"
+                size="26"
+                color="rgba(28,43,41,0.65)"
+              ></uni-icons>
+              <image v-else :src="menu[idx].icon" mode="aspectFit"></image>
+            </view>
+            <view class="menu-content flex-column flex-grow">
+              <view class="menu-title fs-28">{{ menu[idx].title }}</view>
+              <view class="menu-desc fs-22 mt-4" v-if="menu[idx].desc">{{
+                menu[idx].desc
+              }}</view>
             </view>
-            <view>{{ item.title }}</view>
             <view class="ml-auto">
               <uni-icons
                 type="right"
                 size="12"
-                color="rgba(28,43,41,0.4)"
+                color="rgba(28,43,41,0.3)"
               ></uni-icons>
             </view>
           </view>
-        </block>
+        </template>
       </view>
+
+      <view style="height: 40rpx"></view>
     </view>
   </block>
   <block v-else>
     <view class="container" :style="containerStyle">
-      <view class="header flex-column">
-        <view class="flex-grow flex-center">
-          <image
-            src="/static/images/user/round.png"
-            mode="heightFix"
-            style="height: 100%"
-          />
-        </view>
-        <view class="main flex-shrink flex-column flex-align-center pt-40">
-          <view class="fs-32 color-000-6 mt-40">登录后查看更多功能</view>
-          <view class="mt-32">
-            <button class="login-btn" @click="goToLogin">登录/注册</button>
-          </view>
-        </view>
+      <view class="guest flex-column flex-align-center">
+        <image
+          class="guest-logo"
+          src="/static/images/map-logo.png"
+          mode="aspectFit"
+        />
+        <view class="fs-28 mt-40" style="color: #5c6b69"
+          >登录后查看更多功能</view
+        >
+        <button class="login-btn mt-48" @click="goToLogin">登录/注册</button>
       </view>
     </view>
   </block>
@@ -93,11 +84,9 @@ import { fetchContact } from "@/api";
 import { fetchProfile } from "@/api/user";
 import { isAuthenticated, requireAuth } from "@/utils/auth";
 import { onLoad, onShow } from "@dcloudio/uni-app";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 const containerStyle = ref({});
-const user = ref<any>({
-  avatar: "",
-});
+const user = ref<any>({});
 const service = ref("");
 const menu = ref([
   {
@@ -126,7 +115,8 @@ const menu = ref([
     icon: "/static/images/user/3.png",
   },
   {
-    title: "联系我们（工作时间7:00-24:00）",
+    title: "联系我们",
+    desc: "工作时间 7:00-24:00",
     path: "",
     icon: "/static/images/user/4.png",
   },
@@ -141,6 +131,11 @@ const menu = ref([
     icon: "/static/images/user/1.png",
   },
 ]);
+// 菜单分组渲染：资产/订单 + 服务；索引与 menu 对应（toPage/鉴权依赖原索引）
+const menuGroups = computed(() => [
+  [0, 1, menu.value.length - 1],
+  [2, 3, 4, 5, 6],
+]);
 const AUTH_REQUIRED_INDICES = [0, 1, 2, 3, 4];
 
 const goToLogin = () => {
@@ -188,9 +183,6 @@ onShow(() => {
   fetchProfile().then((res) => {
     res.mobilePhoneFormat =
       res.mobilePhone.slice(0, 3) + "****" + res.mobilePhone.slice(7);
-    res.avatar = res.avatar
-      ? res.avatar
-      : "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
     user.value = res;
   });
 });
@@ -198,20 +190,7 @@ onShow(() => {
 
 <style lang="scss">
 @use "../../styles/dialog.scss";
-.login-btn {
-  width: 480rpx;
-  height: 80rpx;
-  background: var(--color-primary);
-  color: #fff;
-  font-size: 30rpx;
-  border-radius: 40rpx;
-  line-height: 80rpx;
-  transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
-}
 
-.login-btn:active {
-  background: var(--color-primary-deep);
-}
 .bg {
   position: absolute;
   left: 0;
@@ -227,80 +206,108 @@ onShow(() => {
   height: 100vh;
   width: 100%;
   overflow-y: auto;
+  padding: 0 30rpx;
+  box-sizing: border-box;
 }
 
 .header {
-  height: 400rpx;
-  width: 100%;
+  height: 160rpx;
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 32rpx;
+}
 
-  .main {
-    height: 334rpx;
-    background: rgba(254, 255, 255, 0.7);
-    border-radius: 40rpx 40rpx 0 0;
-    position: relative;
-    text-align: center;
+.panel {
+  display: flex;
+  align-items: center;
+  background: #ffffff;
+  border-radius: 20rpx;
+  padding: 36rpx 40rpx;
+  box-shadow: 0 4rpx 16rpx rgba(28, 43, 41, 0.05);
 
-    .avatar {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      top: -50rpx;
-      width: 110rpx;
-      height: 110rpx;
-      border: 2rpx solid #ffffff;
-      filter: drop-shadow(0px 4rpx 8rpx rgba(0, 24, 60, 0.1));
-      background-size: cover;
-      background-repeat: no-repeat;
-      border-radius: 50%;
-    }
+  .balance-num {
+    color: #1c2b29;
+    line-height: normal;
+  }
 
-    .phone {
-      padding-top: 78rpx;
-      color: #1c2b29;
-    }
+  .recharge-btn {
+    flex-shrink: 0;
+    width: 128rpx;
+    height: 56rpx;
+    border-radius: 28rpx;
+    background: var(--color-primary);
+    color: #ffffff;
+    transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+  }
 
-    .money {
-      width: 690rpx;
-      height: 118rpx;
-      background: #ffffff;
-      border-radius: 120rpx;
-      margin: 0 auto;
-      margin-top: 30rpx;
-      color: #1c2b29;
-      padding: 0 24rpx 0 40rpx;
-      box-shadow: 0 4rpx 16rpx rgba(28, 43, 41, 0.05);
-    }
+  &:active .recharge-btn {
+    background: var(--color-primary-deep);
   }
 }
 
-.body {
-  width: 100%;
-  background-color: #fff;
-  padding: 0rpx 30rpx;
+.menu-group {
+  background: #ffffff;
+  border-radius: 20rpx;
+  margin-top: 20rpx;
+  padding: 0 30rpx;
 
   .menu {
-    background-color: #fff;
-    height: 120rpx;
+    height: 112rpx;
     border-bottom: 1rpx solid var(--divider);
 
-    .menu-icon {
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .menu-icon {
+    width: 52rpx;
+    height: 52rpx;
+    margin-right: 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    image {
       width: 52rpx;
       height: 52rpx;
-      margin-right: 20rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-
-      image {
-        width: 52rpx;
-        height: 52rpx;
-      }
     }
+  }
 
-    &:last-child {
-      border-bottom: none;
-    }
+  .menu-title {
+    color: #1c2b29;
+    line-height: 34rpx;
   }
+
+  .menu-desc {
+    color: #8c9997;
+    line-height: 28rpx;
+  }
+}
+
+.guest {
+  padding-top: 200rpx;
+}
+
+.guest-logo {
+  width: 160rpx;
+  height: 160rpx;
+}
+
+.login-btn {
+  width: 400rpx;
+  height: 88rpx;
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 30rpx;
+  font-weight: 500;
+  border-radius: 44rpx;
+  line-height: 88rpx;
+  transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.login-btn:active {
+  background: var(--color-primary-deep);
 }
 </style>