订单和发布适配移动端

frontend/src/views/mobile/MobileProfileView.vue

@@ -1,14 +1,30 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { useSessionStore } from "@/stores/session";
 
 const session = useSessionStore();
 const router = useRouter();
+const route = useRoute();
+
+/** 判断当前底部导航是否激活 */
+function isNavActive(path: string) {
+  if (path === "/m") return route.path === "/m";
+  return route.path.startsWith(path);
+}
+
 const isLoggedIn = computed(() => Boolean(session.token));
-const displayName = computed(() => session.phone ? `用户${session.phone.slice(-6)}` : `用户${session.userId || 883099}`);
+const displayName = computed(() =>
+  session.phone
+    ? `用户${session.phone.slice(-6)}`
+    : `用户${session.userId || 883099}`
+);
 const displayId = computed(() => session.userId || 138865);
-const maskedPhone = computed(() => session.phone ? `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}` : "登录后查看手机号");
+const maskedPhone = computed(() =>
+  session.phone
+    ? `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}`
+    : "登录后查看手机号"
+);
 
 const sellerOrders = [
   { label: "商品管理", icon: "🛍️", to: "/m/seller/listings/create" },
@@ -22,7 +38,17 @@ const buyerOrders = [
   { label: "已完成", icon: "☑️", to: "/m/orders" },
   { label: "退款/售后", icon: "🧾", to: "/m/orders" },
 ];
-const serviceItems = ["收款账户", "余额明细", "提现记录", "商务合作", "我的代练", "我的代肝", "我的收藏", "我的打赏", "我的邀请"];
+const serviceItems = [
+  "收款账户",
+  "余额明细",
+  "提现记录",
+  "商务合作",
+  "我的代练",
+  "我的代肝",
+  "我的收藏",
+  "我的打赏",
+  "我的邀请",
+];
 const serviceIcons = ["👥", "🪙", "💸", "💼", "⚔️", "💎", "⭐", "💰", "🎁"];
 
 function logout() {
@@ -42,7 +68,13 @@ function goToLogin() {
         <div class="guest-logo">锤</div>
         <h1>登录大锤商行</h1>
         <p>登录后查看订单、管理发布、提现余额，并享受平台担保交易服务。</p>
-        <van-button type="primary" block round class="guest-login-btn" @click="goToLogin">
+        <van-button
+          type="primary"
+          block
+          round
+          class="guest-login-btn"
+          @click="goToLogin"
+        >
           立即登录
         </van-button>
         <div class="guest-benefits">
@@ -57,13 +89,7 @@ function goToLogin() {
     <template v-else>
       <!-- 头像区 -->
       <section class="profile-header">
-        <van-image
-          round
-          width="64px"
-          height="64px"
-          src=""
-          class="avatar-image"
-        >
+        <van-image round width="64px" height="64px" src="" class="avatar-image">
           <template #error>
             <div class="avatar-fallback">👤</div>
           </template>
@@ -87,10 +113,19 @@ function goToLogin() {
         </van-cell>
         <van-cell class="balance-actions">
           <template #title>
-            <van-button size="mini" plain hairline type="warning" class="detail-btn">查看明细</van-button>
+            <van-button
+              size="mini"
+              plain
+              hairline
+              type="warning"
+              class="detail-btn"
+              >查看明细</van-button
+            >
           </template>
           <template #value>
-            <van-button type="primary" size="small" round class="withdraw-btn">提现</van-button>
+            <van-button type="primary" size="small" round class="withdraw-btn"
+              >提现</van-button
+            >
           </template>
         </van-cell>
       </van-cell-group>
@@ -137,10 +172,7 @@ function goToLogin() {
     <!-- 服务菜单 -->
     <van-cell-group inset class="service-group">
       <van-grid :column-num="4" :border="false" class="service-grid">
-        <van-grid-item
-          v-for="(item, index) in serviceItems"
-          :key="item"
-        >
+        <van-grid-item v-for="(item, index) in serviceItems" :key="item">
           <template #icon>
             <span class="menu-icon">{{ serviceIcons[index] }}</span>
           </template>
@@ -165,11 +197,19 @@ function goToLogin() {
 
     <!-- 底部导航 - 手写原生，和首页一致 -->
     <nav class="bottom-nav">
-      <RouterLink to="/m" class="nav-item">
+      <RouterLink
+        to="/m"
+        class="nav-item"
+        :class="{ active: isNavActive('/m') }"
+      >
         <van-icon name="home-o" :size="22" />
         <span>首页</span>
       </RouterLink>
-      <RouterLink to="/m/listings" class="nav-item">
+      <RouterLink
+        to="/m/listings"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/listings') }"
+      >
         <van-icon name="search" :size="22" />
         <span>租号</span>
       </RouterLink>
@@ -177,11 +217,19 @@ function goToLogin() {
         <div class="publish-pill">+</div>
         <span>发布</span>
       </RouterLink>
-      <RouterLink to="/m/orders" class="nav-item">
+      <RouterLink
+        to="/m/orders"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/orders') }"
+      >
         <van-icon name="orders-o" :size="22" />
         <span>订单</span>
       </RouterLink>
-      <RouterLink to="/m/profile" class="nav-item active">
+      <RouterLink
+        to="/m/profile"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/profile') }"
+      >
         <van-icon name="manager-o" :size="22" />
         <span>我的</span>
       </RouterLink>