增加前端格式检查配置
This commit is contained in:
yml2213
@@ -26,9 +26,12 @@ export interface LoginData {
|
||||
}
|
||||
|
||||
export async function sendSmsCode(phone: string) {
|
||||
const { data } = await apiClient.post<ApiResponse<{ phone: string; expires_in: number }>>('/auth/sms/send', {
|
||||
phone,
|
||||
})
|
||||
const { data } = await apiClient.post<ApiResponse<{ phone: string; expires_in: number }>>(
|
||||
'/auth/sms/send',
|
||||
{
|
||||
phone,
|
||||
}
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
|
||||
@@ -15,9 +15,12 @@ export interface NotificationItem {
|
||||
}
|
||||
|
||||
export async function fetchNotifications(page = 1, pageSize = 20) {
|
||||
const { data } = await apiClient.get<ApiResponse<PaginatedResult<NotificationItem>>>('/notifications', {
|
||||
params: { page, page_size: pageSize },
|
||||
})
|
||||
const { data } = await apiClient.get<ApiResponse<PaginatedResult<NotificationItem>>>(
|
||||
'/notifications',
|
||||
{
|
||||
params: { page, page_size: pageSize },
|
||||
}
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
|
||||
@@ -1,79 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ChatLineRound, Iphone } from "@element-plus/icons-vue";
|
||||
import { onUnmounted, reactive, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ChatLineRound, Iphone } from '@element-plus/icons-vue'
|
||||
import { onUnmounted, reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { sendSmsCode } from "@/features/auth/api/auth";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import { sendSmsCode } from '@/features/auth/api/auth'
|
||||
import { useSessionStore } from '@/stores/session'
|
||||
|
||||
const router = useRouter();
|
||||
const session = useSessionStore();
|
||||
const loading = ref(false);
|
||||
const sending = ref(false);
|
||||
const countDown = ref(0);
|
||||
const router = useRouter()
|
||||
const session = useSessionStore()
|
||||
const loading = ref(false)
|
||||
const sending = ref(false)
|
||||
const countDown = ref(0)
|
||||
const form = reactive({
|
||||
phone: "",
|
||||
code: "",
|
||||
});
|
||||
phone: '',
|
||||
code: '',
|
||||
})
|
||||
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
let timer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
function startCountDown() {
|
||||
countDown.value = 60;
|
||||
countDown.value = 60
|
||||
timer = setInterval(() => {
|
||||
countDown.value--;
|
||||
countDown.value--
|
||||
if (countDown.value <= 0) {
|
||||
clearInterval(timer!);
|
||||
timer = null;
|
||||
clearInterval(timer!)
|
||||
timer = null
|
||||
}
|
||||
}, 1000);
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
async function handleSendCode() {
|
||||
if (!form.phone.trim()) {
|
||||
ElMessage.warning("请输入手机号");
|
||||
return;
|
||||
ElMessage.warning('请输入手机号')
|
||||
return
|
||||
}
|
||||
sending.value = true;
|
||||
sending.value = true
|
||||
try {
|
||||
await sendSmsCode(form.phone);
|
||||
ElMessage.success("验证码已发送，请注意查收");
|
||||
startCountDown();
|
||||
await sendSmsCode(form.phone)
|
||||
ElMessage.success('验证码已发送，请注意查收')
|
||||
startCountDown()
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, "验证码发送失败"));
|
||||
ElMessage.error(readError(error, '验证码发送失败'))
|
||||
} finally {
|
||||
sending.value = false;
|
||||
sending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleLogin() {
|
||||
loading.value = true;
|
||||
loading.value = true
|
||||
try {
|
||||
await session.login(form.phone, form.code);
|
||||
ElMessage.success("登录成功");
|
||||
await router.push("/");
|
||||
await session.login(form.phone, form.code)
|
||||
ElMessage.success('登录成功')
|
||||
await router.push('/')
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, "登录失败"));
|
||||
ElMessage.error(readError(error, '登录失败'))
|
||||
} finally {
|
||||
loading.value = false;
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function readError(error: unknown, fallback: string) {
|
||||
if (typeof error === "object" && error && "response" in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } })
|
||||
.response;
|
||||
return response?.data?.message || fallback;
|
||||
if (typeof error === 'object' && error && 'response' in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } }).response
|
||||
return response?.data?.message || fallback
|
||||
}
|
||||
return fallback;
|
||||
return fallback
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -131,13 +130,7 @@ function readError(error: unknown, fallback: string) {
|
||||
:loading="sending"
|
||||
@click="handleSendCode"
|
||||
>
|
||||
{{
|
||||
countDown > 0
|
||||
? `${countDown}s`
|
||||
: sending
|
||||
? "发送中"
|
||||
: "发送验证码"
|
||||
}}
|
||||
{{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@@ -179,7 +172,8 @@ function readError(error: unknown, fallback: string) {
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: 0 24px 80px rgba(17, 24, 39, 0.08),
|
||||
box-shadow:
|
||||
0 24px 80px rgba(17, 24, 39, 0.08),
|
||||
0 1px 0 rgba(255, 255, 255, 0.6) inset;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -190,16 +184,9 @@ function readError(error: unknown, fallback: string) {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 40px 36px;
|
||||
background: radial-gradient(
|
||||
circle at 30% 20%,
|
||||
rgba(20, 119, 255, 0.08),
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 90%,
|
||||
rgba(109, 40, 217, 0.06),
|
||||
transparent 50%
|
||||
),
|
||||
background:
|
||||
radial-gradient(circle at 30% 20%, rgba(20, 119, 255, 0.08), transparent 50%),
|
||||
radial-gradient(circle at 80% 90%, rgba(109, 40, 217, 0.06), transparent 50%),
|
||||
linear-gradient(160deg, rgba(20, 119, 255, 0.06), rgba(109, 40, 217, 0.03));
|
||||
}
|
||||
|
||||
@@ -298,14 +285,17 @@ function readError(error: unknown, fallback: string) {
|
||||
box-shadow: 0 0 0 1px #e2e8f0 inset;
|
||||
border-radius: 10px;
|
||||
padding: 0 12px;
|
||||
transition: box-shadow 0.2s, background 0.2s;
|
||||
transition:
|
||||
box-shadow 0.2s,
|
||||
background 0.2s;
|
||||
}
|
||||
.user-form :deep(.el-input__wrapper:hover) {
|
||||
background: #ffffff;
|
||||
}
|
||||
.user-form :deep(.el-input__wrapper.is-focus) {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 1px rgba(20, 119, 255, 0.45) inset,
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(20, 119, 255, 0.45) inset,
|
||||
0 0 0 3px rgba(20, 119, 255, 0.08);
|
||||
}
|
||||
.user-form :deep(.el-input__inner) {
|
||||
@@ -337,7 +327,9 @@ function readError(error: unknown, fallback: string) {
|
||||
border-color: #1477ff;
|
||||
color: #1477ff;
|
||||
box-shadow: none;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
transition:
|
||||
background 0.2s,
|
||||
color 0.2s;
|
||||
}
|
||||
.user-code-row .el-button:hover:not(:disabled) {
|
||||
background: #1477ff;
|
||||
@@ -360,7 +352,9 @@ function readError(error: unknown, fallback: string) {
|
||||
background: linear-gradient(135deg, #1477ff, #2f8dff);
|
||||
border: none;
|
||||
box-shadow: 0 10px 28px rgba(20, 119, 255, 0.22);
|
||||
transition: transform 0.15s, box-shadow 0.2s;
|
||||
transition:
|
||||
transform 0.15s,
|
||||
box-shadow 0.2s;
|
||||
}
|
||||
.user-login-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
|
||||
@@ -1,41 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { RouterLink, useRoute, useRouter } from "vue-router";
|
||||
import { showToast, showDialog } from "vant";
|
||||
import { reactive, ref } from 'vue'
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router'
|
||||
import { showToast, showDialog } from 'vant'
|
||||
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import { useSmsCountdown } from "@/shared/composables/useSmsCountdown";
|
||||
import { useSessionStore } from '@/stores/session'
|
||||
import { useSmsCountdown } from '@/shared/composables/useSmsCountdown'
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const session = useSessionStore();
|
||||
const loading = ref(false);
|
||||
const agreed = ref(false);
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const session = useSessionStore()
|
||||
const loading = ref(false)
|
||||
const agreed = ref(false)
|
||||
const form = reactive({
|
||||
phone: "",
|
||||
code: "",
|
||||
});
|
||||
phone: '',
|
||||
code: '',
|
||||
})
|
||||
|
||||
const { countDown, sending, handleSendCode, readError } = useSmsCountdown();
|
||||
const { countDown, sending, handleSendCode, readError } = useSmsCountdown()
|
||||
|
||||
async function handleLogin() {
|
||||
if (!agreed.value) {
|
||||
showDialog({
|
||||
title: "提示",
|
||||
message: "请先阅读并同意用户协议和隐私政策",
|
||||
});
|
||||
return;
|
||||
title: '提示',
|
||||
message: '请先阅读并同意用户协议和隐私政策',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
loading.value = true
|
||||
try {
|
||||
await session.login(form.phone, form.code);
|
||||
const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/m/profile";
|
||||
await router.replace(redirect);
|
||||
await session.login(form.phone, form.code)
|
||||
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/m/profile'
|
||||
await router.replace(redirect)
|
||||
} catch {
|
||||
showToast({ message: "登录失败，请检查手机号和验证码", icon: "cross" });
|
||||
showToast({ message: '登录失败，请检查手机号和验证码', icon: 'cross' })
|
||||
} finally {
|
||||
loading.value = false;
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -58,12 +58,7 @@ async function handleLogin() {
|
||||
<h1>登录</h1>
|
||||
|
||||
<label class="auth-input-row">
|
||||
<input
|
||||
v-model="form.phone"
|
||||
type="tel"
|
||||
maxlength="11"
|
||||
placeholder="手机号"
|
||||
/>
|
||||
<input v-model="form.phone" type="tel" maxlength="11" placeholder="手机号" />
|
||||
</label>
|
||||
|
||||
<label class="auth-input-row code-row">
|
||||
@@ -83,13 +78,7 @@ async function handleLogin() {
|
||||
class="code-btn"
|
||||
@click="handleSendCode(form.phone)"
|
||||
>
|
||||
{{
|
||||
countDown > 0
|
||||
? `${countDown}s`
|
||||
: sending
|
||||
? "发送中"
|
||||
: "发送验证码"
|
||||
}}
|
||||
{{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
|
||||
</van-button>
|
||||
</span>
|
||||
</label>
|
||||
@@ -116,9 +105,7 @@ async function handleLogin() {
|
||||
登录
|
||||
</van-button>
|
||||
|
||||
<RouterLink to="/m/register" class="secondary-entry">
|
||||
还没有账号，创建一个
|
||||
</RouterLink>
|
||||
<RouterLink to="/m/register" class="secondary-entry"> 还没有账号，创建一个 </RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -1,256 +1,256 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import { showDialog, showToast } from "vant";
|
||||
import MobileBottomNav from "@/components/MobileBottomNav.vue";
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useSessionStore } from '@/stores/session'
|
||||
import { showDialog, showToast } from 'vant'
|
||||
import MobileBottomNav from '@/components/MobileBottomNav.vue'
|
||||
|
||||
import { fetchWalletBalance, fetchWalletLedger, type WalletLedger } from "@/features/wallet/api/wallet";
|
||||
import { fetchPostRentalNotice, type PostRentalNotice } from "@/features/orders/api/orders";
|
||||
import { formatDateMinute } from "@/utils/time";
|
||||
import { uploadFile } from "@/shared/api/files";
|
||||
import {
|
||||
fetchWalletBalance,
|
||||
fetchWalletLedger,
|
||||
type WalletLedger,
|
||||
} from '@/features/wallet/api/wallet'
|
||||
import { fetchPostRentalNotice, type PostRentalNotice } from '@/features/orders/api/orders'
|
||||
import { formatDateMinute } from '@/utils/time'
|
||||
import { uploadFile } from '@/shared/api/files'
|
||||
|
||||
const session = useSessionStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const session = useSessionStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
/** 数据项 */
|
||||
const balance = ref(0);
|
||||
const showSettings = ref(false);
|
||||
const showProfileEditor = ref(false);
|
||||
const savingProfile = ref(false);
|
||||
const balance = ref(0)
|
||||
const showSettings = ref(false)
|
||||
const showProfileEditor = ref(false)
|
||||
const savingProfile = ref(false)
|
||||
const profileForm = reactive({
|
||||
nickname: "",
|
||||
avatar_url: "",
|
||||
});
|
||||
nickname: '',
|
||||
avatar_url: '',
|
||||
})
|
||||
|
||||
const avatarFileInput = ref<HTMLInputElement | null>(null);
|
||||
const uploadingAvatar = ref(false);
|
||||
const avatarFileInput = ref<HTMLInputElement | null>(null)
|
||||
const uploadingAvatar = ref(false)
|
||||
|
||||
function triggerAvatarUpload() {
|
||||
avatarFileInput.value?.click();
|
||||
avatarFileInput.value?.click()
|
||||
}
|
||||
|
||||
async function handleAvatarFileChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
input.value = "";
|
||||
if (!file) return;
|
||||
const input = event.target as HTMLInputElement
|
||||
const file = input.files?.[0]
|
||||
input.value = ''
|
||||
if (!file) return
|
||||
|
||||
uploadingAvatar.value = true;
|
||||
uploadingAvatar.value = true
|
||||
const toast = showToast({
|
||||
type: "loading",
|
||||
message: "上传中...",
|
||||
type: 'loading',
|
||||
message: '上传中...',
|
||||
forbidClick: true,
|
||||
duration: 0,
|
||||
});
|
||||
})
|
||||
|
||||
try {
|
||||
const uploaded = await uploadFile(file, "avatar");
|
||||
profileForm.avatar_url = uploaded.url;
|
||||
showToast({ message: "上传成功", icon: "passed" });
|
||||
const uploaded = await uploadFile(file, 'avatar')
|
||||
profileForm.avatar_url = uploaded.url
|
||||
showToast({ message: '上传成功', icon: 'passed' })
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, "上传失败"), icon: "cross" });
|
||||
showToast({ message: readError(error, '上传失败'), icon: 'cross' })
|
||||
} finally {
|
||||
uploadingAvatar.value = false;
|
||||
uploadingAvatar.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 收支明细列表
|
||||
const showLedgers = ref(false);
|
||||
const loadingLedgers = ref(false);
|
||||
const ledgers = ref<WalletLedger[]>([]);
|
||||
const showLedgers = ref(false)
|
||||
const loadingLedgers = ref(false)
|
||||
const ledgers = ref<WalletLedger[]>([])
|
||||
|
||||
// 租后须知
|
||||
const showPostRentalNotice = ref(false);
|
||||
const loadingPostRentalNotice = ref(false);
|
||||
const postRentalNotice = ref<PostRentalNotice | null>(null);
|
||||
const showPostRentalNotice = ref(false)
|
||||
const loadingPostRentalNotice = ref(false)
|
||||
const postRentalNotice = ref<PostRentalNotice | null>(null)
|
||||
|
||||
const settingsGroups = [
|
||||
{
|
||||
title: "账号与安全",
|
||||
title: '账号与安全',
|
||||
items: [
|
||||
{ label: "资料更改", icon: "edit", action: "profile" },
|
||||
{ label: "实名认证", icon: "idcard", action: "realname" },
|
||||
{ label: "注销账号", icon: "delete-o", action: "cancel-account" },
|
||||
{ label: '资料更改', icon: 'edit', action: 'profile' },
|
||||
{ label: '实名认证', icon: 'idcard', action: 'realname' },
|
||||
{ label: '注销账号', icon: 'delete-o', action: 'cancel-account' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "法律与隐私",
|
||||
title: '法律与隐私',
|
||||
items: [
|
||||
{ label: "隐私政策", icon: "shield-o", action: "privacy" },
|
||||
{ label: "用户协议", icon: "description", action: "terms" },
|
||||
{ label: '隐私政策', icon: 'shield-o', action: 'privacy' },
|
||||
{ label: '用户协议', icon: 'description', action: 'terms' },
|
||||
],
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
if (!isLoggedIn.value) {
|
||||
router.replace({ path: "/m/login", query: { redirect: route.fullPath } });
|
||||
router.replace({ path: '/m/login', query: { redirect: route.fullPath } })
|
||||
} else {
|
||||
loadBalance();
|
||||
loadBalance()
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
async function loadBalance() {
|
||||
try {
|
||||
const wallet = await fetchWalletBalance();
|
||||
balance.value = wallet.available_balance;
|
||||
const wallet = await fetchWalletBalance()
|
||||
balance.value = wallet.available_balance
|
||||
} catch {
|
||||
// 失败静默处理，显示为默认0
|
||||
}
|
||||
}
|
||||
|
||||
async function openLedgers() {
|
||||
showLedgers.value = true;
|
||||
loadingLedgers.value = true;
|
||||
showLedgers.value = true
|
||||
loadingLedgers.value = true
|
||||
try {
|
||||
const res = await fetchWalletLedger(1, 20);
|
||||
ledgers.value = res.items;
|
||||
const res = await fetchWalletLedger(1, 20)
|
||||
ledgers.value = res.items
|
||||
} catch {
|
||||
showToast({ message: "无法获取账单明细", icon: "cross" });
|
||||
showToast({ message: '无法获取账单明细', icon: 'cross' })
|
||||
} finally {
|
||||
loadingLedgers.value = false;
|
||||
loadingLedgers.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function openPostRentalNotice() {
|
||||
showPostRentalNotice.value = true;
|
||||
showPostRentalNotice.value = true
|
||||
if (!postRentalNotice.value) {
|
||||
loadingPostRentalNotice.value = true;
|
||||
loadingPostRentalNotice.value = true
|
||||
try {
|
||||
postRentalNotice.value = await fetchPostRentalNotice();
|
||||
postRentalNotice.value = await fetchPostRentalNotice()
|
||||
} catch {
|
||||
showToast({ message: "无法获取租后须知", icon: "cross" });
|
||||
showToast({ message: '无法获取租后须知', icon: 'cross' })
|
||||
} finally {
|
||||
loadingPostRentalNotice.value = false;
|
||||
loadingPostRentalNotice.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleWithdraw() {
|
||||
showDialog({
|
||||
title: "提现提示",
|
||||
message: "为了您的资金安全，提现请前往电脑端网页版进行操作。",
|
||||
});
|
||||
title: '提现提示',
|
||||
message: '为了您的资金安全，提现请前往电脑端网页版进行操作。',
|
||||
})
|
||||
}
|
||||
|
||||
function goOrders(tabKey: string) {
|
||||
router.push({ path: "/m/orders", query: { tab: tabKey } });
|
||||
router.push({ path: '/m/orders', query: { tab: tabKey } })
|
||||
}
|
||||
|
||||
function onSettingClick(action: string) {
|
||||
showSettings.value = false;
|
||||
showSettings.value = false
|
||||
switch (action) {
|
||||
case "profile":
|
||||
openProfileEditor();
|
||||
break;
|
||||
case "realname":
|
||||
router.push("/m/realname");
|
||||
break;
|
||||
case "cancel-account":
|
||||
case 'profile':
|
||||
openProfileEditor()
|
||||
break
|
||||
case 'realname':
|
||||
router.push('/m/realname')
|
||||
break
|
||||
case 'cancel-account':
|
||||
showDialog({
|
||||
title: "注销账号",
|
||||
message: "注销后账号数据将无法恢复，确认注销吗？",
|
||||
title: '注销账号',
|
||||
message: '注销后账号数据将无法恢复，确认注销吗？',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "确认注销",
|
||||
confirmButtonColor: "#ee0a24",
|
||||
cancelButtonText: "再想想",
|
||||
confirmButtonText: '确认注销',
|
||||
confirmButtonColor: '#ee0a24',
|
||||
cancelButtonText: '再想想',
|
||||
})
|
||||
.then(() => {
|
||||
showToast({ message: "注销功能开发中", icon: "info-o" });
|
||||
showToast({ message: '注销功能开发中', icon: 'info-o' })
|
||||
})
|
||||
.catch(() => {});
|
||||
break;
|
||||
case "privacy":
|
||||
showToast({ message: "隐私政策页面开发中", icon: "info-o" });
|
||||
break;
|
||||
case "terms":
|
||||
showToast({ message: "用户协议页面开发中", icon: "info-o" });
|
||||
break;
|
||||
.catch(() => {})
|
||||
break
|
||||
case 'privacy':
|
||||
showToast({ message: '隐私政策页面开发中', icon: 'info-o' })
|
||||
break
|
||||
case 'terms':
|
||||
showToast({ message: '用户协议页面开发中', icon: 'info-o' })
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function openProfileEditor() {
|
||||
profileForm.nickname = session.nickname || defaultName.value;
|
||||
profileForm.avatar_url = session.avatarUrl || "";
|
||||
showProfileEditor.value = true;
|
||||
profileForm.nickname = session.nickname || defaultName.value
|
||||
profileForm.avatar_url = session.avatarUrl || ''
|
||||
showProfileEditor.value = true
|
||||
}
|
||||
|
||||
async function saveProfile() {
|
||||
const nickname = profileForm.nickname.trim();
|
||||
const avatarURL = profileForm.avatar_url.trim();
|
||||
const nickname = profileForm.nickname.trim()
|
||||
const avatarURL = profileForm.avatar_url.trim()
|
||||
if (!nickname) {
|
||||
showToast({ message: "请输入昵称", icon: "warning-o" });
|
||||
return;
|
||||
showToast({ message: '请输入昵称', icon: 'warning-o' })
|
||||
return
|
||||
}
|
||||
if (nickname.length > 24) {
|
||||
showToast({ message: "昵称不能超过 24 个字符", icon: "warning-o" });
|
||||
return;
|
||||
showToast({ message: '昵称不能超过 24 个字符', icon: 'warning-o' })
|
||||
return
|
||||
}
|
||||
|
||||
savingProfile.value = true;
|
||||
savingProfile.value = true
|
||||
try {
|
||||
await session.updateProfile({ nickname, avatar_url: avatarURL });
|
||||
showProfileEditor.value = false;
|
||||
showToast({ message: "资料已更新", icon: "passed" });
|
||||
await loadBalance();
|
||||
await session.updateProfile({ nickname, avatar_url: avatarURL })
|
||||
showProfileEditor.value = false
|
||||
showToast({ message: '资料已更新', icon: 'passed' })
|
||||
await loadBalance()
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, "资料更新失败"), icon: "cross" });
|
||||
showToast({ message: readError(error, '资料更新失败'), icon: 'cross' })
|
||||
} finally {
|
||||
savingProfile.value = false;
|
||||
savingProfile.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function readError(error: unknown, fallback: string) {
|
||||
if (typeof error === "object" && error && "response" in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } }).response;
|
||||
return response?.data?.message || fallback;
|
||||
if (typeof error === 'object' && error && 'response' in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } }).response
|
||||
return response?.data?.message || fallback
|
||||
}
|
||||
return fallback;
|
||||
return fallback
|
||||
}
|
||||
|
||||
function confirmLogout() {
|
||||
showSettings.value = false;
|
||||
showSettings.value = false
|
||||
showDialog({
|
||||
title: "退出登录",
|
||||
message: "确定要退出当前账号吗？",
|
||||
title: '退出登录',
|
||||
message: '确定要退出当前账号吗？',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "退出",
|
||||
confirmButtonColor: "#ee0a24",
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: '退出',
|
||||
confirmButtonColor: '#ee0a24',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
.then(() => {
|
||||
session.logout();
|
||||
router.replace("/m");
|
||||
session.logout()
|
||||
router.replace('/m')
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const isLoggedIn = computed(() => Boolean(session.token));
|
||||
const isRealnameVerified = computed(() => session.realnameStatus === "verified");
|
||||
const isRealnamePending = computed(() => session.realnameStatus === "pending");
|
||||
const isLoggedIn = computed(() => Boolean(session.token))
|
||||
const isRealnameVerified = computed(() => session.realnameStatus === 'verified')
|
||||
const isRealnamePending = computed(() => session.realnameStatus === 'pending')
|
||||
|
||||
const defaultName = computed(() =>
|
||||
session.phone
|
||||
? `用户${session.phone.slice(-6)}`
|
||||
: `用户${session.userId || 883099}`
|
||||
);
|
||||
const displayName = computed(() => session.nickname || defaultName.value);
|
||||
const displayId = computed(() => session.userId || 138865);
|
||||
session.phone ? `用户${session.phone.slice(-6)}` : `用户${session.userId || 883099}`
|
||||
)
|
||||
const displayName = computed(() => session.nickname || defaultName.value)
|
||||
const displayId = computed(() => session.userId || 138865)
|
||||
const maskedPhone = computed(() =>
|
||||
session.phone
|
||||
? `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}`
|
||||
: "登录后查看手机号"
|
||||
);
|
||||
const avatarText = computed(() => displayName.value.slice(0, 1));
|
||||
session.phone ? `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}` : '登录后查看手机号'
|
||||
)
|
||||
const avatarText = computed(() => displayName.value.slice(0, 1))
|
||||
|
||||
function resolveAvatarURL(url: string | undefined | null) {
|
||||
if (!url) return "";
|
||||
if (url.includes("/api/files/object?key=avatar/")) {
|
||||
return url.replace("/api/files/object", "/api/public/files/object");
|
||||
if (!url) return ''
|
||||
if (url.includes('/api/files/object?key=avatar/')) {
|
||||
return url.replace('/api/files/object', '/api/public/files/object')
|
||||
}
|
||||
return url;
|
||||
return url
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -276,13 +276,32 @@ function resolveAvatarURL(url: string | undefined | null) {
|
||||
<div class="hero-user">
|
||||
<div class="name-row">
|
||||
<h1 class="user-nickname">{{ displayName }}</h1>
|
||||
<van-tag v-if="isRealnameVerified" type="success" size="medium" round class="verified-tag">
|
||||
<van-tag
|
||||
v-if="isRealnameVerified"
|
||||
type="success"
|
||||
size="medium"
|
||||
round
|
||||
class="verified-tag"
|
||||
>
|
||||
<van-icon name="shield" /> 已实名
|
||||
</van-tag>
|
||||
<van-tag v-else-if="isRealnamePending" type="warning" size="medium" round class="verified-tag">
|
||||
<van-tag
|
||||
v-else-if="isRealnamePending"
|
||||
type="warning"
|
||||
size="medium"
|
||||
round
|
||||
class="verified-tag"
|
||||
>
|
||||
审核中
|
||||
</van-tag>
|
||||
<van-tag v-else type="danger" size="medium" round class="unverified-tag" @click="router.push('/m/realname')">
|
||||
<van-tag
|
||||
v-else
|
||||
type="danger"
|
||||
size="medium"
|
||||
round
|
||||
class="unverified-tag"
|
||||
@click="router.push('/m/realname')"
|
||||
>
|
||||
未实名
|
||||
</van-tag>
|
||||
</div>
|
||||
@@ -416,7 +435,9 @@ function resolveAvatarURL(url: string | undefined | null) {
|
||||
<button class="popup-close" @click="showPostRentalNotice = false">✕</button>
|
||||
</header>
|
||||
<div class="popup-body">
|
||||
<van-loading v-if="loadingPostRentalNotice" class="center-loading" vertical>加载中...</van-loading>
|
||||
<van-loading v-if="loadingPostRentalNotice" class="center-loading" vertical
|
||||
>加载中...</van-loading
|
||||
>
|
||||
<div v-else-if="postRentalNotice" class="notice-content">
|
||||
{{ postRentalNotice.content }}
|
||||
</div>
|
||||
@@ -438,11 +459,7 @@ function resolveAvatarURL(url: string | undefined | null) {
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div
|
||||
v-for="group in settingsGroups"
|
||||
:key="group.title"
|
||||
class="settings-group"
|
||||
>
|
||||
<div v-for="group in settingsGroups" :key="group.title" class="settings-group">
|
||||
<h3 class="settings-group-title">{{ group.title }}</h3>
|
||||
<van-cell-group :border="false">
|
||||
<van-cell
|
||||
@@ -457,9 +474,7 @@ function resolveAvatarURL(url: string | undefined | null) {
|
||||
</div>
|
||||
|
||||
<div class="settings-logout">
|
||||
<van-button plain type="danger" block round @click="confirmLogout">
|
||||
退出登录
|
||||
</van-button>
|
||||
<van-button plain type="danger" block round @click="confirmLogout"> 退出登录 </van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
@@ -481,7 +496,11 @@ function resolveAvatarURL(url: string | undefined | null) {
|
||||
|
||||
<div class="profile-preview">
|
||||
<div class="profile-preview-avatar clickable" @click="triggerAvatarUpload">
|
||||
<img v-if="profileForm.avatar_url" :src="resolveAvatarURL(profileForm.avatar_url)" alt="" />
|
||||
<img
|
||||
v-if="profileForm.avatar_url"
|
||||
:src="resolveAvatarURL(profileForm.avatar_url)"
|
||||
alt=""
|
||||
/>
|
||||
<span v-else>{{ (profileForm.nickname || defaultName).slice(0, 1) }}</span>
|
||||
<div class="avatar-upload-overlay">
|
||||
<van-icon name="photograph" :size="16" />
|
||||
@@ -516,11 +535,7 @@ function resolveAvatarURL(url: string | undefined | null) {
|
||||
|
||||
<label class="editor-field">
|
||||
<span>昵称</span>
|
||||
<input
|
||||
v-model="profileForm.nickname"
|
||||
maxlength="24"
|
||||
placeholder="请输入昵称"
|
||||
/>
|
||||
<input v-model="profileForm.nickname" maxlength="24" placeholder="请输入昵称" />
|
||||
</label>
|
||||
|
||||
<label class="editor-field">
|
||||
@@ -640,7 +655,8 @@ function resolveAvatarURL(url: string | undefined | null) {
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.verified-tag, .unverified-tag {
|
||||
.verified-tag,
|
||||
.unverified-tag {
|
||||
font-size: 10px !important;
|
||||
height: 18px;
|
||||
padding: 0 6px;
|
||||
@@ -660,7 +676,9 @@ function resolveAvatarURL(url: string | undefined | null) {
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.02);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.02),
|
||||
0 1px 4px rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid rgba(243, 244, 246, 0.9);
|
||||
}
|
||||
|
||||
@@ -699,7 +717,9 @@ function resolveAvatarURL(url: string | undefined | null) {
|
||||
padding: 0 16px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
transition:
|
||||
background 0.15s,
|
||||
color 0.15s;
|
||||
}
|
||||
|
||||
.withdraw-btn:active {
|
||||
@@ -732,7 +752,9 @@ function resolveAvatarURL(url: string | undefined | null) {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.02);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.02),
|
||||
0 1px 4px rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid rgba(243, 244, 246, 0.9);
|
||||
}
|
||||
|
||||
@@ -801,13 +823,34 @@ function resolveAvatarURL(url: string | undefined | null) {
|
||||
}
|
||||
|
||||
/* Vibrant pastel colors for menu icon wraps */
|
||||
.icon-wrap.warning { color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
|
||||
.icon-wrap.info { color: #2563eb; background: rgba(37, 99, 235, 0.08); }
|
||||
.icon-wrap.primary { color: #1477ff; background: rgba(20, 119, 255, 0.08); }
|
||||
.icon-wrap.success { color: #10b981; background: rgba(16, 185, 129, 0.08); }
|
||||
.icon-wrap.orange { color: #ff5f00; background: rgba(255, 95, 0, 0.08); }
|
||||
.icon-wrap.purple { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }
|
||||
.icon-wrap.teal { color: #0d9488; background: rgba(13, 148, 136, 0.08); }
|
||||
.icon-wrap.warning {
|
||||
color: #f59e0b;
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
}
|
||||
.icon-wrap.info {
|
||||
color: #2563eb;
|
||||
background: rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
.icon-wrap.primary {
|
||||
color: #1477ff;
|
||||
background: rgba(20, 119, 255, 0.08);
|
||||
}
|
||||
.icon-wrap.success {
|
||||
color: #10b981;
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
}
|
||||
.icon-wrap.orange {
|
||||
color: #ff5f00;
|
||||
background: rgba(255, 95, 0, 0.08);
|
||||
}
|
||||
.icon-wrap.purple {
|
||||
color: #8b5cf6;
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
}
|
||||
.icon-wrap.teal {
|
||||
color: #0d9488;
|
||||
background: rgba(13, 148, 136, 0.08);
|
||||
}
|
||||
|
||||
.grid-item span {
|
||||
font-size: 11px;
|
||||
|
||||
@@ -1,81 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { showToast, showDialog } from "vant";
|
||||
import {
|
||||
getRealnameStatus,
|
||||
startRealname,
|
||||
type RealnameStatus,
|
||||
} from "@/features/auth/api/realname";
|
||||
import { realnameStatusLabel } from "@/utils/statusLabels";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import { formatDateTime } from "@/utils/time";
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { showToast, showDialog } from 'vant'
|
||||
import { getRealnameStatus, startRealname, type RealnameStatus } from '@/features/auth/api/realname'
|
||||
import { realnameStatusLabel } from '@/utils/statusLabels'
|
||||
import { useSessionStore } from '@/stores/session'
|
||||
import { formatDateTime } from '@/utils/time'
|
||||
|
||||
const session = useSessionStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const loading = ref(false);
|
||||
const status = ref<RealnameStatus | null>(null);
|
||||
const session = useSessionStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const loading = ref(false)
|
||||
const status = ref<RealnameStatus | null>(null)
|
||||
const form = reactive({
|
||||
name: "",
|
||||
idNo: "",
|
||||
});
|
||||
name: '',
|
||||
idNo: '',
|
||||
})
|
||||
|
||||
onMounted(loadStatus);
|
||||
onMounted(loadStatus)
|
||||
|
||||
function redirectAfterVerified() {
|
||||
const redirect =
|
||||
typeof route.query.redirect === "string" ? route.query.redirect : "";
|
||||
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : ''
|
||||
if (redirect) {
|
||||
router.replace(redirect);
|
||||
router.replace(redirect)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStatus() {
|
||||
if (!session.token) return;
|
||||
if (!session.token) return
|
||||
try {
|
||||
status.value = await getRealnameStatus();
|
||||
if (status.value.status === "verified") {
|
||||
await session.loadMe();
|
||||
redirectAfterVerified();
|
||||
status.value = await getRealnameStatus()
|
||||
if (status.value.status === 'verified') {
|
||||
await session.loadMe()
|
||||
redirectAfterVerified()
|
||||
}
|
||||
} catch {
|
||||
status.value = null;
|
||||
status.value = null
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.name.trim()) {
|
||||
showToast({ message: "请输入真实姓名", icon: "warning-o" });
|
||||
return;
|
||||
showToast({ message: '请输入真实姓名', icon: 'warning-o' })
|
||||
return
|
||||
}
|
||||
if (!form.idNo.trim() || form.idNo.length < 15) {
|
||||
showToast({ message: "请输入有效的证件号", icon: "warning-o" });
|
||||
return;
|
||||
showToast({ message: '请输入有效的证件号', icon: 'warning-o' })
|
||||
return
|
||||
}
|
||||
loading.value = true;
|
||||
loading.value = true
|
||||
try {
|
||||
status.value = await startRealname(form.name, form.idNo);
|
||||
await session.loadMe();
|
||||
status.value = await startRealname(form.name, form.idNo)
|
||||
await session.loadMe()
|
||||
showDialog({
|
||||
title: "认证成功",
|
||||
message: "实名认证已通过",
|
||||
confirmButtonText: "好的",
|
||||
title: '认证成功',
|
||||
message: '实名认证已通过',
|
||||
confirmButtonText: '好的',
|
||||
}).then(() => {
|
||||
redirectAfterVerified();
|
||||
});
|
||||
redirectAfterVerified()
|
||||
})
|
||||
} catch (error: unknown) {
|
||||
const msg =
|
||||
typeof error === "object" && error && "response" in error
|
||||
typeof error === 'object' && error && 'response' in error
|
||||
? (
|
||||
error as {
|
||||
response?: { data?: { message?: string } };
|
||||
response?: { data?: { message?: string } }
|
||||
}
|
||||
).response?.data?.message || "实名认证失败"
|
||||
: "实名认证失败";
|
||||
showToast({ message: msg, icon: "cross" });
|
||||
).response?.data?.message || '实名认证失败'
|
||||
: '实名认证失败'
|
||||
showToast({ message: msg, icon: 'cross' })
|
||||
} finally {
|
||||
loading.value = false;
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -91,31 +86,19 @@ async function handleSubmit() {
|
||||
</header>
|
||||
|
||||
<!-- 未登录提示 -->
|
||||
<van-empty
|
||||
v-if="!session.token"
|
||||
description="请先登录后再实名认证"
|
||||
image="search"
|
||||
/>
|
||||
<van-empty v-if="!session.token" description="请先登录后再实名认证" image="search" />
|
||||
|
||||
<template v-else>
|
||||
<!-- 认证状态 -->
|
||||
<section v-if="status" class="status-card">
|
||||
<div class="status-row">
|
||||
<span class="status-label">当前状态</span>
|
||||
<van-tag
|
||||
:type="status.status === 'verified' ? 'success' : 'warning'"
|
||||
size="medium"
|
||||
round
|
||||
>
|
||||
<van-tag :type="status.status === 'verified' ? 'success' : 'warning'" size="medium" round>
|
||||
{{ realnameStatusLabel(status.status) }}
|
||||
</van-tag>
|
||||
</div>
|
||||
<p v-if="status.masked_name" class="status-detail">
|
||||
姓名：{{ status.masked_name }}
|
||||
</p>
|
||||
<p v-if="status.masked_id_no" class="status-detail">
|
||||
证件号：{{ status.masked_id_no }}
|
||||
</p>
|
||||
<p v-if="status.masked_name" class="status-detail">姓名：{{ status.masked_name }}</p>
|
||||
<p v-if="status.masked_id_no" class="status-detail">证件号：{{ status.masked_id_no }}</p>
|
||||
<p v-if="status.verified_at" class="status-detail">
|
||||
通过时间：{{ formatDateTime(status.verified_at) }}
|
||||
</p>
|
||||
@@ -124,9 +107,7 @@ async function handleSubmit() {
|
||||
<!-- 认证表单 -->
|
||||
<section v-if="status?.status !== 'verified'" class="form-card">
|
||||
<h2>提交认证</h2>
|
||||
<p class="form-hint">
|
||||
号主发布前必须完成实名认证，提交合法姓名和身份证号即可认证。
|
||||
</p>
|
||||
<p class="form-hint">号主发布前必须完成实名认证，提交合法姓名和身份证号即可认证。</p>
|
||||
<van-field
|
||||
v-model="form.name"
|
||||
label="姓名"
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { RouterLink, useRoute, useRouter } from "vue-router";
|
||||
import { showToast } from "vant";
|
||||
import { reactive, ref } from 'vue'
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router'
|
||||
import { showToast } from 'vant'
|
||||
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import { useSmsCountdown } from "@/shared/composables/useSmsCountdown";
|
||||
import { useSessionStore } from '@/stores/session'
|
||||
import { useSmsCountdown } from '@/shared/composables/useSmsCountdown'
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const session = useSessionStore();
|
||||
const loading = ref(false);
|
||||
const agreed = ref(false);
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const session = useSessionStore()
|
||||
const loading = ref(false)
|
||||
const agreed = ref(false)
|
||||
const form = reactive({
|
||||
phone: "",
|
||||
code: "",
|
||||
inviteCode: "",
|
||||
});
|
||||
phone: '',
|
||||
code: '',
|
||||
inviteCode: '',
|
||||
})
|
||||
|
||||
const { countDown, sending, handleSendCode, readError } = useSmsCountdown();
|
||||
const { countDown, sending, handleSendCode, readError } = useSmsCountdown()
|
||||
|
||||
async function handleRegister() {
|
||||
if (!agreed.value) {
|
||||
showToast({
|
||||
message: "请先阅读并同意用户协议和隐私政策",
|
||||
icon: "warning-o",
|
||||
});
|
||||
return;
|
||||
message: '请先阅读并同意用户协议和隐私政策',
|
||||
icon: 'warning-o',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
loading.value = true
|
||||
try {
|
||||
await session.login(form.phone, form.code);
|
||||
const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/m/profile";
|
||||
await router.replace(redirect);
|
||||
await session.login(form.phone, form.code)
|
||||
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/m/profile'
|
||||
await router.replace(redirect)
|
||||
} catch {
|
||||
showToast({ message: "注册失败，请检查手机号和验证码", icon: "cross" });
|
||||
showToast({ message: '注册失败，请检查手机号和验证码', icon: 'cross' })
|
||||
} finally {
|
||||
loading.value = false;
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -85,23 +85,13 @@ async function handleRegister() {
|
||||
class="code-btn"
|
||||
@click="handleSendCode(form.phone)"
|
||||
>
|
||||
{{
|
||||
countDown > 0
|
||||
? `${countDown}s`
|
||||
: sending
|
||||
? "发送中"
|
||||
: "发送验证码"
|
||||
}}
|
||||
{{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
|
||||
</van-button>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="auth-input-row">
|
||||
<input
|
||||
v-model="form.inviteCode"
|
||||
maxlength="16"
|
||||
placeholder="邀请码（选填）"
|
||||
/>
|
||||
<input v-model="form.inviteCode" maxlength="16" placeholder="邀请码（选填）" />
|
||||
</label>
|
||||
|
||||
<div class="assist-row">
|
||||
@@ -126,9 +116,7 @@ async function handleRegister() {
|
||||
注册并登录
|
||||
</van-button>
|
||||
|
||||
<RouterLink to="/m/login" class="secondary-entry">
|
||||
返回登录
|
||||
</RouterLink>
|
||||
<RouterLink to="/m/login" class="secondary-entry"> 返回登录 </RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -2,7 +2,11 @@
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import { fetchNotifications, markNotificationRead, type NotificationItem } from '@/features/auth/api/notifications'
|
||||
import {
|
||||
fetchNotifications,
|
||||
markNotificationRead,
|
||||
type NotificationItem,
|
||||
} from '@/features/auth/api/notifications'
|
||||
import { formatDateTime } from '@/utils/time'
|
||||
|
||||
const loading = ref(false)
|
||||
@@ -46,7 +50,12 @@ async function markRead(id: number) {
|
||||
|
||||
<el-empty v-if="!loading && notifications.length === 0" description="暂无站内信" />
|
||||
<div v-else v-loading="loading" class="notification-list">
|
||||
<div v-for="item in notifications" :key="item.id" class="notification-item" :class="{ unread: !item.read_at }">
|
||||
<div
|
||||
v-for="item in notifications"
|
||||
:key="item.id"
|
||||
class="notification-item"
|
||||
:class="{ unread: !item.read_at }"
|
||||
>
|
||||
<div>
|
||||
<span>{{ item.type }}</span>
|
||||
<h2>{{ item.title }}</h2>
|
||||
@@ -54,10 +63,15 @@ async function markRead(id: number) {
|
||||
<small>{{ formatDateTime(item.created_at) }}</small>
|
||||
</div>
|
||||
<div class="notification-actions">
|
||||
<RouterLink v-if="item.biz_type === 'order' && item.biz_id" :to="`/orders/${item.biz_id}`">
|
||||
<RouterLink
|
||||
v-if="item.biz_type === 'order' && item.biz_id"
|
||||
:to="`/orders/${item.biz_id}`"
|
||||
>
|
||||
<el-button size="small">查看订单</el-button>
|
||||
</RouterLink>
|
||||
<el-button v-if="!item.read_at" size="small" type="primary" @click="markRead(item.id)">已读</el-button>
|
||||
<el-button v-if="!item.read_at" size="small" type="primary" @click="markRead(item.id)"
|
||||
>已读</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -35,10 +35,30 @@ const form = reactive({
|
||||
avatar_url: '',
|
||||
})
|
||||
const buyerServices = [
|
||||
{ label: '待支付', icon: Coin, tone: 'warning', to: { path: '/orders', query: { tab: 'pending_payment' } } },
|
||||
{ label: '待交接', icon: Van, tone: 'info', to: { path: '/orders', query: { tab: 'pending_handoff' } } },
|
||||
{ label: '使用中', icon: VideoPlay, tone: 'primary', to: { path: '/orders', query: { tab: 'renting' } } },
|
||||
{ label: '已完成', icon: Finished, tone: 'success', to: { path: '/orders', query: { tab: 'completed' } } },
|
||||
{
|
||||
label: '待支付',
|
||||
icon: Coin,
|
||||
tone: 'warning',
|
||||
to: { path: '/orders', query: { tab: 'pending_payment' } },
|
||||
},
|
||||
{
|
||||
label: '待交接',
|
||||
icon: Van,
|
||||
tone: 'info',
|
||||
to: { path: '/orders', query: { tab: 'pending_handoff' } },
|
||||
},
|
||||
{
|
||||
label: '使用中',
|
||||
icon: VideoPlay,
|
||||
tone: 'primary',
|
||||
to: { path: '/orders', query: { tab: 'renting' } },
|
||||
},
|
||||
{
|
||||
label: '已完成',
|
||||
icon: Finished,
|
||||
tone: 'success',
|
||||
to: { path: '/orders', query: { tab: 'completed' } },
|
||||
},
|
||||
]
|
||||
const sellerServices = [
|
||||
{ label: '发布商品', icon: CirclePlus, tone: 'orange', to: '/seller/listings/create' },
|
||||
@@ -146,8 +166,15 @@ function readError(error: unknown, fallback: string) {
|
||||
<h1>个人资料</h1>
|
||||
<p>{{ displayName }} · {{ maskedPhone }}</p>
|
||||
</div>
|
||||
<button class="hero-realname" :class="`is-${realnameTone}`" type="button" @click="router.push('/realname')">
|
||||
<el-icon><CircleCheckFilled v-if="session.realnameStatus === 'verified'" /><WarningFilled v-else /></el-icon>
|
||||
<button
|
||||
class="hero-realname"
|
||||
:class="`is-${realnameTone}`"
|
||||
type="button"
|
||||
@click="router.push('/realname')"
|
||||
>
|
||||
<el-icon
|
||||
><CircleCheckFilled v-if="session.realnameStatus === 'verified'" /><WarningFilled v-else
|
||||
/></el-icon>
|
||||
<span>{{ realnameStatusLabel(session.realnameStatus) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -168,19 +195,35 @@ function readError(error: unknown, fallback: string) {
|
||||
<button class="avatar-preview" type="button" @click="triggerAvatarUpload">
|
||||
<img v-if="form.avatar_url" :src="resolveAvatarURL(form.avatar_url)" alt="" />
|
||||
<span v-else>{{ avatarText }}</span>
|
||||
<i><el-icon><Camera /></el-icon></i>
|
||||
<i
|
||||
><el-icon><Camera /></el-icon
|
||||
></i>
|
||||
</button>
|
||||
<div class="avatar-actions">
|
||||
<strong>{{ form.nickname || displayName }}</strong>
|
||||
<p>支持上传本地图片，也可以直接填写头像 URL。</p>
|
||||
<el-button :icon="Camera" :loading="uploadingAvatar" @click="triggerAvatarUpload">上传头像</el-button>
|
||||
<input ref="avatarFileInput" type="file" accept="image/*" hidden @change="handleAvatarFileChange" />
|
||||
<el-button :icon="Camera" :loading="uploadingAvatar" @click="triggerAvatarUpload"
|
||||
>上传头像</el-button
|
||||
>
|
||||
<input
|
||||
ref="avatarFileInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
hidden
|
||||
@change="handleAvatarFileChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form class="profile-form" label-position="top">
|
||||
<el-form-item label="昵称">
|
||||
<el-input v-model="form.nickname" :prefix-icon="User" maxlength="24" placeholder="请输入昵称" size="large" />
|
||||
<el-input
|
||||
v-model="form.nickname"
|
||||
:prefix-icon="User"
|
||||
maxlength="24"
|
||||
placeholder="请输入昵称"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="头像地址">
|
||||
<el-input
|
||||
@@ -193,7 +236,14 @@ function readError(error: unknown, fallback: string) {
|
||||
</el-form-item>
|
||||
<div class="form-actions">
|
||||
<el-button size="large" :icon="RefreshRight" @click="resetForm">重置</el-button>
|
||||
<el-button type="primary" size="large" :icon="EditPen" :loading="saving" @click="saveProfile">保存资料</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:icon="EditPen"
|
||||
:loading="saving"
|
||||
@click="saveProfile"
|
||||
>保存资料</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
</section>
|
||||
@@ -231,7 +281,12 @@ function readError(error: unknown, fallback: string) {
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="service-grid buyer-grid">
|
||||
<RouterLink v-for="item in buyerServices" :key="item.label" class="service-item" :to="item.to">
|
||||
<RouterLink
|
||||
v-for="item in buyerServices"
|
||||
:key="item.label"
|
||||
class="service-item"
|
||||
:to="item.to"
|
||||
>
|
||||
<span class="service-icon" :class="`is-${item.tone}`">
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
</span>
|
||||
@@ -249,7 +304,12 @@ function readError(error: unknown, fallback: string) {
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="service-grid seller-grid">
|
||||
<RouterLink v-for="item in sellerServices" :key="item.label" class="service-item" :to="item.to">
|
||||
<RouterLink
|
||||
v-for="item in sellerServices"
|
||||
:key="item.label"
|
||||
class="service-item"
|
||||
:to="item.to"
|
||||
>
|
||||
<span class="service-icon" :class="`is-${item.tone}`">
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
</span>
|
||||
@@ -275,9 +335,7 @@ function readError(error: unknown, fallback: string) {
|
||||
padding: 30px 34px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 106, 0, 0.12), rgba(37, 99, 235, 0.08)),
|
||||
#ffffff;
|
||||
background: linear-gradient(135deg, rgba(255, 106, 0, 0.12), rgba(37, 99, 235, 0.08)), #ffffff;
|
||||
box-shadow: 0 16px 36px rgba(23, 35, 61, 0.08);
|
||||
}
|
||||
|
||||
@@ -486,7 +544,9 @@ function readError(error: unknown, fallback: string) {
|
||||
}
|
||||
|
||||
.profile-form :deep(.el-input__wrapper.is-focus) {
|
||||
box-shadow: 0 0 0 1px #ff6a00 inset, 0 0 0 4px rgba(255, 106, 0, 0.08);
|
||||
box-shadow:
|
||||
0 0 0 1px #ff6a00 inset,
|
||||
0 0 0 4px rgba(255, 106, 0, 0.08);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
|
||||
@@ -150,7 +150,13 @@ function readError(error: unknown, fallback: string) {
|
||||
</div>
|
||||
<div>
|
||||
<h2>{{ currentStatus === 'verified' ? '实名信息' : '提交认证' }}</h2>
|
||||
<p>{{ currentStatus === 'verified' ? '实名信息已完成脱敏展示。' : '请使用本人真实身份信息完成核验。' }}</p>
|
||||
<p>
|
||||
{{
|
||||
currentStatus === 'verified'
|
||||
? '实名信息已完成脱敏展示。'
|
||||
: '请使用本人真实身份信息完成核验。'
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -160,13 +166,20 @@ function readError(error: unknown, fallback: string) {
|
||||
</div>
|
||||
<div class="verified-copy">
|
||||
<strong>认证通过</strong>
|
||||
<span>{{ status?.verified_at ? formatDateTime(status.verified_at) : '已完成实名核验' }}</span>
|
||||
<span>{{
|
||||
status?.verified_at ? formatDateTime(status.verified_at) : '已完成实名核验'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form v-else class="verify-form" label-position="top">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" :prefix-icon="User" placeholder="请输入真实姓名" size="large" />
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
:prefix-icon="User"
|
||||
placeholder="请输入真实姓名"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input
|
||||
@@ -248,7 +261,12 @@ function readError(error: unknown, fallback: string) {
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 106, 0, 0.12) 0%, rgba(22, 163, 74, 0.08) 52%, rgba(37, 99, 235, 0.08) 100%),
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 106, 0, 0.12) 0%,
|
||||
rgba(22, 163, 74, 0.08) 52%,
|
||||
rgba(37, 99, 235, 0.08) 100%
|
||||
),
|
||||
#ffffff;
|
||||
box-shadow: 0 16px 36px rgba(23, 35, 61, 0.08);
|
||||
}
|
||||
@@ -420,7 +438,9 @@ function readError(error: unknown, fallback: string) {
|
||||
}
|
||||
|
||||
.verify-form :deep(.el-input__wrapper.is-focus) {
|
||||
box-shadow: 0 0 0 1px #ff6a00 inset, 0 0 0 4px rgba(255, 106, 0, 0.08);
|
||||
box-shadow:
|
||||
0 0 0 1px #ff6a00 inset,
|
||||
0 0 0 4px rgba(255, 106, 0, 0.08);
|
||||
}
|
||||
|
||||
.verify-form .el-button {
|
||||
|
||||
Reference in New Issue
Block a user