rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改部分样式

Browse Source
This commit is contained in:
rain
2026-07-27 17:29:58 +08:00
parent 04287e6777
commit 1e9e25fe67
53 changed files with 11562 additions and 2617 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/profile/m02-edit-profile.vue
+271 -51
View File
@@ -2,9 +2,13 @@
<template>
<view class="profile-edit-page">
<ModulePageBackground module="profile" />
<view class="page-header"><PageHeader title="编辑资料" custom-back @back="backToProfile" /></view>
<view class="page-header"
><PageHeader title="编辑资料" custom-back @back="backToProfile"
/></view>
<view class="page-content">
<view v-if="loading" class="state-card"><text>正在读取个人资料…</text></view>
<view v-if="loading" class="state-card"
><text>正在读取个人资料…</text></view
>
<view v-else-if="loadError" class="state-card">
<text>个人资料暂时无法读取</text>
<text>{{ loadError }}</text>
@@ -13,23 +17,78 @@
<template v-else>
<view class="form-panel">
<view class="avatar-row">
<view><text>头像</text><text>{{ avatarMessage }}</text></view>
<button class="upload-button" :disabled="uploading || saving" @click="uploadAvatar">{{ uploading ? "上传中…" : "选择图片" }}</button>
<view
><text>头像</text><text>{{ avatarMessage }}</text></view
>
<button
class="upload-button"
:disabled="uploading || saving"
@click="uploadAvatar"
>
{{ uploading ? "上传中…" : "选择图片" }}
</button>
</view>
<text v-if="avatarError" class="field-error">{{ avatarError }}</text>
<view class="form-row"><text>昵称</text><input v-model.trim="form.nickName" maxlength="30" placeholder="请输入昵称" placeholder-class="placeholder" :disabled="saving || uploading" /></view>
<view class="form-row"><text>真实姓名</text><input v-model.trim="form.realName" maxlength="30" placeholder="请输入真实姓名" placeholder-class="placeholder" :disabled="saving || uploading" /></view>
<view class="form-row form-row--readonly"><text>性别</text><view class="readonly-value"><text>{{ form.sex ? "待确认" : "未设置" }}</text><text>选项待提供</text></view></view>
<view class="form-row"
><text>昵称</text
><input
v-model.trim="form.nickName"
maxlength="30"
placeholder="请输入昵称"
placeholder-class="placeholder"
:disabled="saving || uploading"
/></view>
<view class="form-row"
><text>真实姓名</text
><input
v-model.trim="form.realName"
maxlength="30"
placeholder="请输入真实姓名"
placeholder-class="placeholder"
:disabled="saving || uploading"
/></view>
<view class="form-row form-row--readonly"
><text>性别</text
><view class="readonly-value"
><text>{{ form.sex ? "待确认" : "未设置" }}</text
><text>选项待提供</text></view
></view
>
<view class="form-row">
<text>生日</text>
<picker mode="date" :value="form.birthday" :disabled="saving || uploading" @change="changeBirthday"><view class="picker-value" :class="{ 'picker-value--placeholder': !form.birthday }">{{ form.birthday || "请选择生日" }}</view></picker>
<picker
mode="date"
:value="form.birthday"
:disabled="saving || uploading"
@change="changeBirthday"
><view
class="picker-value"
:class="{ 'picker-value--placeholder': !form.birthday }"
>{{ form.birthday || "请选择生日" }}</view
></picker
>
</view>
<view class="form-row"><text>邮箱</text><input v-model.trim="form.email" maxlength="100" placeholder="请输入邮箱" placeholder-class="placeholder" :disabled="saving || uploading" /></view>
<view class="form-row"
><text>邮箱</text
><input
v-model.trim="form.email"
maxlength="100"
placeholder="请输入邮箱"
placeholder-class="placeholder"
:disabled="saving || uploading"
/></view>
</view>
<text class="form-note">资料字段均可按需填写；留空不会提交为修改。</text>
<text class="form-note"
>资料字段均可按需填写；留空不会提交为修改。</text
>
<text v-if="saveError" class="save-error">{{ saveError }}</text>
<AppButton block :disabled="saving || uploading" :label="saving ? '保存中…' : '保存资料'" @click="saveProfile" />
<AppButton
block
:disabled="saving || uploading"
:label="saving ? '保存中…' : '保存资料'"
@click="saveProfile"
/>
</template>
</view>
<AppToast :visible="feedbackVisible" :message="feedbackMessage" />
@@ -43,12 +102,33 @@ import AppButton from "@/components/AppButton.vue";
import AppToast from "@/components/AppToast.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
import { isImagePickCancelled, pickAndUploadImage, toConsumerOssId } from "@/utils/resumable-image-upload.js";
import {
appApi,
createRequestController,
isRequestCancelled,
} from "@/utils/api.js";
import {
isImagePickCancelled,
pickAndUploadImage,
toConsumerOssId,
} from "@/utils/resumable-image-upload.js";
import { finishPage, returnTo } from "@/utils/navigation.js";
const form = reactive({ nickName: "", realName: "", sex: "", birthday: "", email: "" });
const original = reactive({ nickName: "", realName: "", sex: "", birthday: "", email: "", avatar: null });
const form = reactive({
nickName: "",
realName: "",
sex: "",
birthday: "",
email: "",
});
const original = reactive({
nickName: "",
realName: "",
sex: "",
birthday: "",
email: "",
avatar: null,
});
const avatarId = ref(null);
const avatarFileName = ref("");
const loading = ref(true);
@@ -78,7 +158,8 @@ const showFeedback = (message) => {
}, 2200);
};
const toBirthdayDate = (value) => /^\d{4}-\d{2}-\d{2}/.test(value) ? value.slice(0, 10) : "";
const toBirthdayDate = (value) =>
/^\d{4}-\d{2}-\d{2}/.test(value) ? value.slice(0, 10) : "";
const loadProfile = async () => {
if (loading.value === false && (uploading.value || saving.value)) return;
@@ -98,7 +179,8 @@ const loadProfile = async () => {
avatarId.value = profile.avatar;
avatarFileName.value = "";
} catch (error) {
if (pageActive && !isRequestCancelled(error)) loadError.value = error?.message || "请稍后重试";
if (pageActive && !isRequestCancelled(error))
loadError.value = error?.message || "请稍后重试";
} finally {
if (pageActive) loading.value = false;
}
@@ -118,7 +200,11 @@ const uploadAvatar = async () => {
avatarId.value = toConsumerOssId(receipt.ossId);
avatarFileName.value = receipt.fileName || "新头像";
} catch (error) {
if (pageActive && !isImagePickCancelled(error) && !isRequestCancelled(error)) {
if (
pageActive &&
!isImagePickCancelled(error) &&
!isRequestCancelled(error)
) {
avatarError.value = error?.message || "头像上传失败，请稍后重试";
}
} finally {
@@ -129,10 +215,13 @@ const uploadAvatar = async () => {
const buildUpdatePayload = () => {
const data = {};
for (const field of ["nickName", "realName", "sex", "email"]) {
if (form[field] && form[field] !== original[field]) data[field] = form[field];
if (form[field] && form[field] !== original[field])
data[field] = form[field];
}
if (form.birthday && form.birthday !== original.birthday) data.birthday = form.birthday;
if (avatarId.value && avatarId.value !== original.avatar) data.avatar = avatarId.value;
if (form.birthday && form.birthday !== original.birthday)
data.birthday = form.birthday;
if (avatarId.value && avatarId.value !== original.avatar)
data.avatar = avatarId.value;
return data;
};
@@ -148,9 +237,14 @@ const saveProfile = async () => {
try {
await appApi.updateProfile(payload, { requestController });
if (!pageActive) return;
await finishPage("M01", {}, { operation: "profile-updated", refresh: true });
await finishPage(
"M01",
{},
{ operation: "profile-updated", refresh: true },
);
} catch (error) {
if (pageActive && !isRequestCancelled(error)) saveError.value = error?.message || "保存失败，请稍后重试";
if (pageActive && !isRequestCancelled(error))
saveError.value = error?.message || "保存失败，请稍后重试";
} finally {
if (pageActive) saving.value = false;
}
@@ -171,32 +265,158 @@ onUnload(() => {
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.profile-edit-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
.page-header, .page-content { z-index: 1; }
.page-content { flex: 1; padding: 24rpx 30rpx 72rpx; }
.state-card, .form-panel { @include adaptive.adaptive-profile-content; }
.state-card { box-sizing: border-box; min-height: 340rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
.state-card text { display: block; }
.state-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
.state-card text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
.state-card .app-button { margin-top: 28rpx; }
.form-panel { padding: 16rpx 30rpx 22rpx; }
.avatar-row, .form-row { display: grid; grid-template-columns: 142rpx minmax(0, 1fr); min-height: 92rpx; align-items: center; gap: 16rpx; border-bottom: 1rpx solid rgba(181, 137, 63, .42); }
.avatar-row > view text { display: block; }
.avatar-row > view text:first-child, .form-row > text { color: $ink; font-size: 23rpx; font-weight: 700; }
.avatar-row > view text:last-child { margin-top: 4rpx; color: $ink-muted; font-size: 19rpx; overflow-wrap: anywhere; }
.upload-button { display: flex; min-height: 88rpx; align-items: center; justify-content: center; border: 0; background: transparent; color: $brand-red; font-size: 22rpx; text-align: right; }
.form-row input, .picker-value { width: auto; min-width: 0; min-height: 68rpx; color: $ink; font-size: 23rpx; text-align: right; }
.picker-value { display: flex; align-items: center; justify-content: flex-end; }
.readonly-value { display:flex; min-height:68rpx; align-items:center; justify-content:flex-end; gap:12rpx; color:$ink-muted; }
.readonly-value text:first-child { color:$ink; font-size:23rpx; }
.readonly-value text:last-child { color:$ink-muted; font-size:19rpx; }
.picker-value--placeholder, .placeholder { color: #ab9a86; }
.field-error, .save-error, .form-note { display: block; color: $ink-muted; font-size: 20rpx; line-height: 1.5; }
.field-error, .save-error { color: #b42318; }
.field-error { margin-top: 8rpx; text-align: right; }
.form-note { margin: 16rpx 4rpx 0; }
.save-error { margin: 12rpx 4rpx 0; }
.page-content > .app-button { margin-top: 24rpx; }
@media (max-width: 340px) { .page-content { padding-right: 22rpx; padding-left: 22rpx; } .form-panel { padding-right: 24rpx; padding-left: 24rpx; } .avatar-row, .form-row { grid-template-columns: 116rpx minmax(0, 1fr); gap: 12rpx; } }
.profile-edit-page {
display: flex;
min-height: 100vh;
flex-direction: column;
background: $paper;
}
.page-header,
.page-content {
z-index: 1;
}
.page-content {
flex: 1;
padding: 24rpx 30rpx 72rpx;
}
.state-card,
.form-panel {
@include adaptive.adaptive-profile-content;
}
.state-card {
box-sizing: border-box;
min-height: 340rpx;
padding: 78rpx 52rpx 50rpx;
text-align: center;
}
.state-card text {
display: block;
}
.state-card text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 35rpx;
font-weight: 700;
}
.state-card text:nth-child(2) {
margin-top: 18rpx;
color: $ink-muted;
font-size: 24rpx;
line-height: 1.65;
}
.state-card .app-button {
margin-top: 28rpx;
}
.form-panel {
padding: 16rpx 30rpx 22rpx;
}
.avatar-row,
.form-row {
display: grid;
grid-template-columns: 142rpx minmax(0, 1fr);
min-height: 92rpx;
align-items: center;
gap: 16rpx;
border-bottom: 1rpx solid rgba(181, 137, 63, 0.42);
}
.avatar-row > view text {
display: block;
}
.avatar-row > view text:first-child,
.form-row > text {
color: $ink;
font-size: 23rpx;
font-weight: 700;
}
.avatar-row > view text:last-child {
margin-top: 4rpx;
color: $ink-muted;
font-size: 19rpx;
overflow-wrap: anywhere;
}
.upload-button {
display: flex;
min-height: 88rpx;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: $brand-red;
font-size: 22rpx;
text-align: right;
}
.form-row input,
.picker-value {
width: auto;
min-width: 0;
min-height: 68rpx;
color: $ink;
font-size: 23rpx;
text-align: right;
}
.picker-value {
display: flex;
align-items: center;
justify-content: flex-end;
}
.readonly-value {
display: flex;
min-height: 68rpx;
align-items: center;
justify-content: flex-end;
gap: 12rpx;
color: $ink-muted;
}
.readonly-value text:first-child {
color: $ink;
font-size: 23rpx;
}
.readonly-value text:last-child {
color: $ink-muted;
font-size: 19rpx;
}
.picker-value--placeholder,
.placeholder {
color: #ab9a86;
}
.field-error,
.save-error,
.form-note {
display: block;
color: $ink-muted;
font-size: 20rpx;
line-height: 1.5;
}
.field-error,
.save-error {
color: #b42318;
}
.field-error {
margin-top: 8rpx;
text-align: right;
}
.form-note {
margin: 16rpx 4rpx 0;
}
.save-error {
margin: 12rpx 4rpx 0;
}
.page-content > .app-button {
margin-top: 24rpx;
}
@media (max-width: 340px) {
.page-content {
padding-right: 22rpx;
padding-left: 22rpx;
}
.form-panel {
padding-right: 24rpx;
padding-left: 24rpx;
}
.avatar-row,
.form-row {
grid-template-columns: 116rpx minmax(0, 1fr);
gap: 12rpx;
}
}
</style>