移动端-首页和我的

2026-05-22 19:51:05 +08:00
parent a7011668ff
commit 5f1a7f46a8
6 changed files with 442 additions and 17 deletions
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { useSessionStore } from "@/stores/session";
+
+const session = useSessionStore();
+const isLoggedIn = computed(() => Boolean(session.token));
+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 sellerOrders = [
+  { label: "商品管理", icon: "🛍️", to: "/m/seller/listings/create" },
+  { label: "交易中", icon: "📦", to: "/m/orders" },
+  { label: "已完成", icon: "✈️", to: "/m/orders" },
+  { label: "退款/售后", icon: "💴", to: "/m/orders" },
+];
+const buyerOrders = [
+  { label: "未支付", icon: "💳", to: "/m/orders" },
+  { label: "交易中", icon: "🪙", to: "/m/orders" },
+  { label: "已完成", icon: "☑️", to: "/m/orders" },
+  { label: "退款/售后", icon: "🧾", to: "/m/orders" },
+];
+const serviceItems = ["收款账户", "余额明细", "提现记录", "商务合作", "我的代练", "我的代肝", "我的收藏", "我的打赏", "我的邀请"];
+const serviceIcons = ["👥", "🪙", "💸", "💼", "⚔️", "💎", "⭐", "💰", "🎁"];
+
+function logout() {
+  session.logout();
+}
+</script>
+
+<template>
+  <main class="mobile-profile-shell">
+    <template v-if="!isLoggedIn">
+      <section class="guest-card">
+        <div class="guest-logo">锤</div>
+        <h1>登录大锤商行</h1>
+        <p>登录后查看订单、管理发布、提现余额，并享受平台担保交易服务。</p>
+        <RouterLink to="/m/login" class="guest-login">立即登录</RouterLink>
+        <div class="guest-benefits"><span>担保交易</span><span>订单留痕</span><span>安全交接</span></div>
+      </section>
+    </template>
+
+    <template v-else>
+      <section class="profile-header">
+        <div class="avatar">👤</div>
+        <div class="profile-user">
+          <h1>{{ displayName }}<span>✎</span></h1>
+          <p>ID:{{ displayId }} · {{ maskedPhone }}</p>
+        </div>
+        <button class="setting-btn" type="button">⚙</button>
+      </section>
+
+      <section class="balance-card">
+        <div><span>账户余额(元)</span><strong>¥0.00</strong><button type="button">查看明细</button></div>
+        <button class="withdraw-btn" type="button">提现</button>
+      </section>
+    </template>
+
+    <section class="menu-card">
+      <h2>我的订单</h2>
+      <div class="icon-grid four">
+        <RouterLink v-for="item in sellerOrders" :key="item.label" :to="item.to"><span>{{ item.icon }}</span><em>{{ item.label }}</em></RouterLink>
+      </div>
+    </section>
+
+    <section class="menu-card">
+      <h2>我买的</h2>
+      <div class="icon-grid four">
+        <RouterLink v-for="item in buyerOrders" :key="item.label" :to="item.to"><span>{{ item.icon }}</span><em>{{ item.label }}</em></RouterLink>
+      </div>
+    </section>
+
+    <section class="menu-card service-card">
+      <div class="icon-grid service-grid">
+        <button v-for="(item, index) in serviceItems" :key="item" type="button"><span>{{ serviceIcons[index] }}</span><em>{{ item }}</em></button>
+      </div>
+    </section>
+
+    <button v-if="isLoggedIn" class="logout-btn" type="button" @click="logout">退出登录</button>
+
+    <nav class="profile-tabbar" aria-label="底部导航">
+      <RouterLink to="/m" class="tab-item">首页</RouterLink>
+      <RouterLink to="/m/listings" class="tab-item">租号</RouterLink>
+      <RouterLink to="/m/seller/listings/create" class="publish-tab">发布</RouterLink>
+      <RouterLink to="/m/orders" class="tab-item">订单</RouterLink>
+      <RouterLink to="/m/profile" class="tab-item active">我的</RouterLink>
+    </nav>
+  </main>
+</template>
+
+<style scoped>
+.mobile-profile-shell { min-height: 100vh; background: linear-gradient(180deg, #fbfaff 0, #fbfaff 210px, #f7f7f7 210px); color: #1a202c; padding: 28px 18px 96px; }
+.profile-header { display: flex; align-items: center; gap: 14px; min-height: 120px; }
+.avatar { display: grid; width: 62px; height: 62px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #fff; font-size: 32px; box-shadow: 0 10px 24px rgba(24,30,45,.08); }
+.profile-user { min-width: 0; flex: 1; }
+.profile-user h1 { overflow: hidden; margin: 0; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
+.profile-user h1 span { margin-left: 4px; color: #b7bcc6; font-size: 14px; }
+.profile-user p { margin: 7px 0 0; color: #666f7c; font-size: 13px; }
+.setting-btn { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 50%; background: #fff; font-size: 20px; }
+.balance-card, .menu-card, .guest-card { border-radius: 16px; background: #fff; box-shadow: 0 8px 26px rgba(24,30,45,.06); }
+.balance-card { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 24px 28px; }
+.balance-card span, .balance-card strong { display: block; }
+.balance-card span { color: #8b8f99; font-weight: 700; }
+.balance-card strong { margin-top: 14px; font-size: 34px; line-height: 1; }
+.balance-card button { border: 0; border-radius: 6px; font-weight: 800; }
+.balance-card div button { margin-top: 14px; background: #fff5ee; color: #ff5f00; padding: 6px 8px; box-shadow: inset 0 0 0 1px #ff8a42; }
+.withdraw-btn { background: #050505; color: #fff; padding: 12px 18px; }
+.menu-card { margin-top: 12px; padding: 16px 14px; }
+.menu-card h2 { margin: 0 0 12px; font-size: 18px; }
+.icon-grid { display: grid; gap: 14px 8px; }
+.icon-grid.four, .service-grid { grid-template-columns: repeat(4, 1fr); }
+.icon-grid a, .icon-grid button { display: grid; gap: 7px; place-items: center; border: 0; background: none; color: #5f6671; text-align: center; }
+.icon-grid span { font-size: 25px; line-height: 1; }
+.icon-grid em { font-size: 13px; font-style: normal; font-weight: 700; }
+.service-card { padding-top: 18px; padding-bottom: 18px; }
+.guest-card { margin-top: 18px; padding: 34px 26px; text-align: center; }
+.guest-logo { display: grid; width: 74px; height: 74px; margin: 0 auto 18px; place-items: center; border-radius: 22px; background: linear-gradient(145deg, #1777ff, #5ed7ff); color: #fff; font-size: 30px; font-weight: 900; }
+.guest-card h1 { margin: 0; font-size: 24px; }
+.guest-card p { margin: 12px 0 22px; color: #667386; font-size: 14px; line-height: 1.7; }
+.guest-login { display: block; border-radius: 13px; background: #050505; color: #fff; padding: 14px; font-weight: 900; }
+.guest-benefits { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
+.guest-benefits span { border-radius: 999px; background: #eef6ff; color: #1777ff; padding: 6px 9px; font-size: 12px; font-weight: 800; }
+.logout-btn { width: 100%; margin-top: 14px; border: 0; border-radius: 14px; background: #fff; color: #ef4444; padding: 14px; font-weight: 900; box-shadow: 0 8px 26px rgba(24,30,45,.06); }
+.profile-tabbar { position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 20; display: flex; height: 60px; align-items: center; justify-content: space-around; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 16px 36px rgba(23,35,61,.16); backdrop-filter: blur(14px); }
+.tab-item { color: #708097; font-size: 12px; font-weight: 800; }
+.tab-item.active { color: #5b6ee1; }
+.publish-tab { display: grid; width: 58px; height: 58px; place-items: center; border: 5px solid #f7f7f7; border-radius: 50%; background: #536dc8; color: #fff; font-size: 13px; font-weight: 900; transform: translateY(-18px); box-shadow: 0 10px 24px rgba(83,109,200,.35); }
+@media (min-width: 520px) { .mobile-profile-shell { max-width: 430px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(23,35,61,.08); } .profile-tabbar { right: calc((100vw - 430px) / 2 + 12px); left: calc((100vw - 430px) / 2 + 12px); } }
+</style>