feat(mini-user): show masked phone under nickname on mine page

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/mini-user/src/pages/mine/index.tsx

@@ -23,24 +23,33 @@ import {
 } from '../../lib/mini-wechat-profile';
 import { isLoggedIn, logout, request, toast, type UserProfile } from '../../lib/api';
 import { isWechatEnv } from '../../lib/weixin';
+import { maskPhone } from '../../lib/phone';
 import {
   DEFAULT_SHARE_DESC,
   DEFAULT_SHARE_TITLE,
   toWeappShareMessage,
 } from '../../lib/wechat-share';
+import iconPendingPay from '../../assets/icons/待付款.png';
+import iconPaid from '../../assets/icons/已付款.png';
+import iconCompleted from '../../assets/icons/已完成.png';
+import iconAddress from '../../assets/icons/地址管理.png';
+import iconStores from '../../assets/icons/可用门店.png';
+import iconCs from '../../assets/icons/联系客服.png';
+import iconQualification from '../../assets/icons/资质公示.png';
+import iconAbout from '../../assets/icons/关于我们.png';
 
 const ORDER_SHORTCUTS = [
-  { tab: 'pending_pay', icon: '付', label: '待付款' },
-  { tab: 'paid', icon: '包', label: '已付款' },
-  { tab: 'completed', icon: '成', label: '已完成' },
+  { tab: 'pending_pay', icon: iconPendingPay, label: '待付款' },
+  { tab: 'paid', icon: iconPaid, label: '已付款' },
+  { tab: 'completed', icon: iconCompleted, label: '已完成' },
 ] as const;
 
 const SERVICES = [
-  { icon: '址', label: '地址管理', url: '/pages/addresses/index' },
-  { icon: '店', label: '可用门店', tab: '/pages/stores/index' },
-  { icon: '服', label: '联系客服', url: '/pages/customer-service/index' },
-  { icon: '资', label: '资质公示', action: 'qualification' as const },
-  { icon: '关', label: '关于我们', action: 'about' as const },
+  { icon: iconAddress, label: '地址管理', url: '/pages/addresses/index' },
+  { icon: iconStores, label: '可用门店', tab: '/pages/stores/index' },
+  { icon: iconCs, label: '联系客服', url: '/pages/customer-service/index' },
+  { icon: iconQualification, label: '资质公示', action: 'qualification' as const },
+  { icon: iconAbout, label: '关于我们', action: 'about' as const },
 ] as const;
 
 const isWeapp = process.env.TARO_ENV === 'weapp';
@@ -341,13 +350,12 @@ export default function MinePage() {
   const nickname = display.nickname || '用户';
   const needProfileFill = isWeapp && needsWxProfileFill(display);
   const avatarProfileReady = isWeapp ? !needProfileFill : hasWechat;
+  const maskedPhone = profile?.phone ? maskPhone(String(profile.phone)) : '';
   const memberLabel = needProfileFill
     ? '点击头像完善资料'
-    : isWeapp || hasWechat
-      ? '好客会员'
-      : canWxAuth
-        ? '点击头像授权'
-        : '好客会员';
+    : !isWeapp && !hasWechat && canWxAuth
+      ? '点击头像授权'
+      : maskedPhone || '未绑定手机';
   const avatarClickable = isWeapp || (!hasWechat && canWxAuth);
   const previewAvatar = draftAvatarUrl || display.avatarUrl;
 
@@ -455,7 +463,7 @@ export default function MinePage() {
                   }
                 >
                   <View className="mine-order-icon">
-                    <Text>{item.icon}</Text>
+                    <Image className="mine-order-icon-img" src={item.icon} mode="aspectFit" />
                   </View>
                   {count > 0 ? (
                     <Text className="mine-order-badge">{count > 99 ? '99+' : count}</Text>
@@ -479,7 +487,7 @@ export default function MinePage() {
                 onClick={() => handleService(item)}
               >
                 <View className="mine-service-icon">
-                  <Text>{item.icon}</Text>
+                  <Image className="mine-service-icon-img" src={item.icon} mode="aspectFit" />
                 </View>
                 <Text className="mine-service-label">{item.label}</Text>
               </View>

apps/mini-user/src/styles/mine.css

@@ -255,16 +255,18 @@
 .mine-order-icon {
   width: 36px;
   height: 36px;
-  border-radius: 10px;
-  background: rgba(166, 29, 36, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-heritage-red);
-  font-size: 16px;
   margin-bottom: 4px;
 }
 
+.mine-order-icon-img {
+  width: 28px;
+  height: 28px;
+  display: block;
+}
+
 .mine-order-badge {
   position: absolute;
   top: 2px;
@@ -300,18 +302,20 @@
 }
 
 .mine-service-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: var(--color-surface-container-low);
+  width: 36px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-heritage-red);
-  font-size: 14px;
   margin-bottom: 4px;
 }
 
+.mine-service-icon-img {
+  width: 28px;
+  height: 28px;
+  display: block;
+}
+
 .mine-service-label {
   font-size: 11px;
   color: var(--color-on-surface);