增加用户资料修改
This commit is contained in:
yml2213
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import { showDialog, showToast } from "vant";
|
||||
@@ -10,6 +10,12 @@ const route = useRoute();
|
||||
|
||||
/** 设置面板 */
|
||||
const showSettings = ref(false);
|
||||
const showProfileEditor = ref(false);
|
||||
const savingProfile = ref(false);
|
||||
const profileForm = reactive({
|
||||
nickname: "",
|
||||
avatar_url: "",
|
||||
});
|
||||
|
||||
const settingsGroups = [
|
||||
{
|
||||
@@ -17,7 +23,6 @@ const settingsGroups = [
|
||||
items: [
|
||||
{ label: "资料更改", icon: "edit", action: "profile" },
|
||||
{ label: "实名认证", icon: "idcard", action: "realname" },
|
||||
{ label: "登录密码管理", icon: "lock", action: "password" },
|
||||
{ label: "注销账号", icon: "delete-o", action: "cancel-account" },
|
||||
],
|
||||
},
|
||||
@@ -34,14 +39,11 @@ function onSettingClick(action: string) {
|
||||
showSettings.value = false;
|
||||
switch (action) {
|
||||
case "profile":
|
||||
showToast({ message: "资料更改功能开发中", icon: "info-o" });
|
||||
openProfileEditor();
|
||||
break;
|
||||
case "realname":
|
||||
router.push("/m/realname");
|
||||
break;
|
||||
case "password":
|
||||
showToast({ message: "密码管理功能开发中", icon: "info-o" });
|
||||
break;
|
||||
case "cancel-account":
|
||||
showDialog({
|
||||
title: "注销账号",
|
||||
@@ -65,6 +67,44 @@ function onSettingClick(action: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function openProfileEditor() {
|
||||
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();
|
||||
if (!nickname) {
|
||||
showToast({ message: "请输入昵称", icon: "warning-o" });
|
||||
return;
|
||||
}
|
||||
if (nickname.length > 24) {
|
||||
showToast({ message: "昵称不能超过 24 个字符", icon: "warning-o" });
|
||||
return;
|
||||
}
|
||||
|
||||
savingProfile.value = true;
|
||||
try {
|
||||
await session.updateProfile({ nickname, avatar_url: avatarURL });
|
||||
showProfileEditor.value = false;
|
||||
showToast({ message: "资料已更新", icon: "passed" });
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, "资料更新失败"), icon: "cross" });
|
||||
} finally {
|
||||
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;
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function confirmLogout() {
|
||||
showSettings.value = false;
|
||||
showDialog({
|
||||
@@ -77,6 +117,7 @@ function confirmLogout() {
|
||||
})
|
||||
.then(() => {
|
||||
session.logout();
|
||||
router.replace("/m");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
@@ -95,17 +136,19 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
|
||||
const displayName = computed(() =>
|
||||
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);
|
||||
const maskedPhone = computed(() =>
|
||||
session.phone
|
||||
? `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}`
|
||||
: "登录后查看手机号"
|
||||
);
|
||||
const avatarText = computed(() => displayName.value.slice(0, 1));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -117,7 +160,10 @@ const maskedPhone = computed(() =>
|
||||
<div class="hero-bg"></div>
|
||||
<div class="profile-hero-content">
|
||||
<div class="avatar-wrap">
|
||||
<div class="avatar-circle">👤</div>
|
||||
<div class="avatar-circle">
|
||||
<img v-if="session.avatarUrl" :src="session.avatarUrl" alt="" />
|
||||
<span v-else>{{ avatarText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-user">
|
||||
<h1>{{ displayName }}</h1>
|
||||
@@ -197,6 +243,63 @@ const maskedPhone = computed(() =>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<van-popup
|
||||
v-model:show="showProfileEditor"
|
||||
position="bottom"
|
||||
round
|
||||
:style="{ maxWidth: '430px', margin: '0 auto', left: 0, right: 0 }"
|
||||
>
|
||||
<section class="profile-editor">
|
||||
<header class="profile-editor-header">
|
||||
<h2>资料更改</h2>
|
||||
<button type="button" @click="showProfileEditor = false">
|
||||
<van-icon name="cross" :size="20" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="profile-preview">
|
||||
<div class="profile-preview-avatar">
|
||||
<img v-if="profileForm.avatar_url" :src="profileForm.avatar_url" alt="" />
|
||||
<span v-else>{{ (profileForm.nickname || defaultName).slice(0, 1) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{{ profileForm.nickname || defaultName }}</strong>
|
||||
<p>{{ maskedPhone }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="editor-field">
|
||||
<span>昵称</span>
|
||||
<input
|
||||
v-model="profileForm.nickname"
|
||||
maxlength="24"
|
||||
placeholder="请输入昵称"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="editor-field">
|
||||
<span>头像地址</span>
|
||||
<input
|
||||
v-model="profileForm.avatar_url"
|
||||
maxlength="512"
|
||||
placeholder="可填写图片 URL，留空使用文字头像"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<van-button
|
||||
type="primary"
|
||||
block
|
||||
round
|
||||
class="profile-save-btn"
|
||||
:loading="savingProfile"
|
||||
loading-text="保存中..."
|
||||
@click="saveProfile"
|
||||
>
|
||||
保存资料
|
||||
</van-button>
|
||||
</section>
|
||||
</van-popup>
|
||||
|
||||
<!-- 底部导航 - 手写原生，和首页一致 -->
|
||||
<nav class="bottom-nav">
|
||||
<RouterLink
|
||||
@@ -280,9 +383,17 @@ const maskedPhone = computed(() =>
|
||||
height: 54px;
|
||||
place-items: center;
|
||||
border-radius: 16px;
|
||||
background: #fff3e8;
|
||||
color: #ff6a00;
|
||||
font-size: 26px;
|
||||
overflow: hidden;
|
||||
background: #eaf2ff;
|
||||
color: #1477ff;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.avatar-circle img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hero-user {
|
||||
@@ -427,6 +538,121 @@ const maskedPhone = computed(() =>
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
/* ========== 资料修改 ========== */
|
||||
.profile-editor {
|
||||
padding: 16px 16px max(18px, env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.profile-editor-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.profile-editor-header h2 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.profile-editor-header button {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: #f4f6f8;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.profile-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 18px 0;
|
||||
padding: 14px;
|
||||
border-radius: 14px;
|
||||
background: #f7faff;
|
||||
}
|
||||
|
||||
.profile-preview-avatar {
|
||||
display: grid;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
background: #1477ff;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.profile-preview-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-preview strong {
|
||||
display: block;
|
||||
max-width: 230px;
|
||||
overflow: hidden;
|
||||
color: #17233d;
|
||||
font-size: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-preview p {
|
||||
margin: 4px 0 0;
|
||||
color: #7b8798;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.editor-field {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.editor-field span {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: #697386;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.editor-field input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
border: 1px solid #e1e7ef;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.editor-field input:focus {
|
||||
border-color: #1477ff;
|
||||
box-shadow: 0 0 0 3px rgba(20, 119, 255, 0.1);
|
||||
}
|
||||
|
||||
.profile-save-btn {
|
||||
height: 44px;
|
||||
margin-top: 6px;
|
||||
background: #1477ff;
|
||||
border-color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ========== 底部导航 - 手写原生 ========== */
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user