yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移动端-首页和我的

Browse Source
This commit is contained in:
yml
2026-05-22 19:51:05 +08:00
parent a7011668ff
commit 5f1a7f46a8
6 changed files with 442 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/mobile/MobileHomeView.vue
+1 -1
View File
@@ -269,7 +269,7 @@ function formatRatio(item: Listing) {
>发布</RouterLink
>
<RouterLink to="/m/orders" class="tab-item">订单</RouterLink>
<RouterLink to="/m/login" class="tab-item">我的</RouterLink>
<RouterLink to="/m/profile" class="tab-item">我的</RouterLink>
</nav>
</main>
</template>
frontend/src/views/mobile/MobileLoginView.vue
+281
View File
@@ -0,0 +1,281 @@
<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { sendSmsCode } from "@/api/auth";
import { useSessionStore } from "@/stores/session";
const router = useRouter();
const session = useSessionStore();
const loading = ref(false);
const sending = ref(false);
const agreed = ref(false);
const form = reactive({
phone: "",
code: "",
});
const maskedPhone = computed(() =>
form.phone.length >= 7
? `${form.phone.slice(0, 3)}****${form.phone.slice(-4)}`
: "手机号"
);
async function handleSendCode() {
sending.value = true;
try {
await sendSmsCode(form.phone);
window.alert("验证码已发送，开发环境请查看后端日志");
} catch {
window.alert("验证码发送失败，请稍后重试");
} finally {
sending.value = false;
}
}
async function handleLogin() {
if (!agreed.value) {
window.alert("请先阅读并同意用户协议和隐私政策");
return;
}
loading.value = true;
try {
await session.login(form.phone, form.code);
await router.push("/m/profile");
} catch {
window.alert("登录失败，请检查手机号和验证码");
} finally {
loading.value = false;
}
}
</script>
<template>
<main class="mobile-login-shell">
<section class="login-brand-card">
<div class="monster-logo">锤</div>
<p>大锤商行</p>
<small>平台担保 · 安全租号</small>
</section>
<section class="login-panel">
<p class="login-eyebrow">SMS LOGIN</p>
<h1>登录</h1>
<p class="login-subtitle">使用手机号验证码登录，当前开发环境验证码会打印在后端日志。</p>
<label class="field-card">
<span>手机号</span>
<input v-model="form.phone" maxlength="11" inputmode="tel" placeholder="请输入手机号" />
</label>
<label class="field-card">
<span>验证码</span>
<div class="code-line">
<input v-model="form.code" maxlength="6" inputmode="numeric" placeholder="6 位验证码" />
<button type="button" :disabled="sending" @click="handleSendCode">
{{ sending ? "发送中" : "发送" }}
</button>
</div>
</label>
<div class="login-links">
<button type="button">忘记密码</button>
<span>当前输入：{{ maskedPhone }}</span>
</div>
<label class="agreement-row">
<input v-model="agreed" type="checkbox" />
<span>我已阅读并同意 <b>《用户协议》</b> 和 <b>《隐私政策》</b></span>
</label>
<button class="primary-login" type="button" :disabled="loading" @click="handleLogin">
{{ loading ? "登录中..." : "登录" }}
</button>
<button class="sms-login" type="button" @click="handleSendCode">
使用手机验证码登录
</button>
</section>
</main>
</template>
<style scoped>
.mobile-login-shell {
min-height: 100vh;
background: radial-gradient(circle at 50% 0, #f0fffb 0, #f7fbff 34%, #ffffff 78%);
color: #151c28;
padding: 48px 26px 32px;
}
.login-brand-card {
display: grid;
place-items: center;
margin-bottom: 42px;
text-align: center;
}
.monster-logo {
display: grid;
width: 72px;
height: 72px;
place-items: center;
border-radius: 22px;
background: linear-gradient(145deg, #1777ff, #5fd4ff);
color: #ffffff;
font-size: 28px;
font-weight: 900;
box-shadow: 0 14px 36px rgba(23, 119, 255, 0.24);
}
.login-brand-card p {
margin: 12px 0 2px;
font-size: 24px;
font-weight: 900;
}
.login-brand-card small,
.login-subtitle {
color: #667386;
}
.login-panel {
border-radius: 22px;
}
.login-eyebrow {
margin: 0 0 8px;
color: #02846e;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.04em;
}
.login-panel h1 {
margin: 0;
font-size: 30px;
line-height: 1.2;
}
.login-subtitle {
margin: 12px 0 28px;
font-size: 14px;
line-height: 1.7;
}
.field-card {
display: block;
margin-top: 14px;
border: 1px solid #e1e6ee;
border-radius: 13px;
background: rgba(255, 255, 255, 0.88);
padding: 14px;
}
.field-card span {
display: block;
margin-bottom: 10px;
color: #5d6674;
font-size: 13px;
font-weight: 700;
}
.field-card input {
width: 100%;
box-sizing: border-box;
border: 0;
outline: 0;
background: #eaf2ff;
color: #151c28;
padding: 11px 12px;
font-size: 16px;
}
.code-line {
display: grid;
grid-template-columns: 1fr 86px;
gap: 8px;
}
.code-line button,
.sms-login,
.primary-login,
.login-links button {
border: 0;
background: none;
font-weight: 800;
}
.code-line button {
border-radius: 8px;
background: #ffffff;
color: #3f4652;
box-shadow: inset 0 0 0 1px #d6dce6;
}
.login-links,
.agreement-row {
display: flex;
align-items: center;
}
.login-links {
justify-content: space-between;
margin: 18px 0 26px;
color: #566274;
font-size: 13px;
}
.login-links button {
color: #08b86f;
}
.agreement-row {
gap: 10px;
color: #333b48;
font-size: 13px;
line-height: 1.5;
}
.agreement-row input {
width: 16px;
height: 16px;
}
.agreement-row b {
color: #e63145;
font-weight: 500;
}
.primary-login,
.sms-login {
width: 100%;
height: 52px;
margin-top: 22px;
border-radius: 11px;
font-size: 16px;
}
.primary-login {
background: #050505;
color: #ffffff;
}
.primary-login:disabled {
opacity: 0.7;
}
.sms-login {
background: #ffffff;
color: #151c28;
box-shadow: inset 0 0 0 1px #e1e6ee;
}
@media (min-width: 520px) {
.mobile-login-shell {
max-width: 430px;
margin: 0 auto;
box-shadow: 0 0 0 1px rgba(23, 35, 61, 0.08);
}
}
</style>
frontend/src/views/mobile/MobileProfileView.vue
+130
View File
@@ -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>