移动端-首页和我的
This commit is contained in:
yml
+13
-7
@@ -1,13 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { RouterView } from "vue-router";
|
||||
import { computed } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import AdminLayout from './layouts/AdminLayout.vue'
|
||||
import AppLayout from './layouts/AppLayout.vue'
|
||||
import AdminLayout from "./layouts/AdminLayout.vue";
|
||||
import AppLayout from "./layouts/AppLayout.vue";
|
||||
|
||||
const route = useRoute()
|
||||
const layout = computed(() => route.meta.layout || 'app')
|
||||
const route = useRoute();
|
||||
const layout = computed(() => {
|
||||
if (route.path === "/m" || route.path.startsWith("/m/")) {
|
||||
return "blank";
|
||||
}
|
||||
|
||||
return route.meta.layout || "app";
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
+10
-8
@@ -1,11 +1,13 @@
|
||||
import 'element-plus/dist/index.css'
|
||||
import './styles/base.css'
|
||||
import "element-plus/dist/index.css";
|
||||
import "./styles/base.css";
|
||||
|
||||
import ElementPlus from 'element-plus'
|
||||
import { createPinia } from 'pinia'
|
||||
import { createApp } from 'vue'
|
||||
import ElementPlus from "element-plus";
|
||||
import { createPinia } from "pinia";
|
||||
import { createApp } from "vue";
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
createApp(App).use(createPinia()).use(router).use(ElementPlus).mount('#app')
|
||||
const app = createApp(App);
|
||||
app.use(createPinia()).use(router).use(ElementPlus);
|
||||
router.isReady().then(() => app.mount("#app"));
|
||||
|
||||
@@ -27,7 +27,13 @@ const router = createRouter({
|
||||
{
|
||||
path: "/m/login",
|
||||
name: "mobile-login",
|
||||
component: () => import("@/views/account/LoginView.vue"),
|
||||
component: () => import("@/views/mobile/MobileLoginView.vue"),
|
||||
meta: { layout: "blank" },
|
||||
},
|
||||
{
|
||||
path: "/m/profile",
|
||||
name: "mobile-profile",
|
||||
component: () => import("@/views/mobile/MobileProfileView.vue"),
|
||||
meta: { layout: "blank" },
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user