chore: initialize qiming workspace repository
This commit is contained in:
Codex
215
qiming-mobile/subpackages/pages/about-me/about-me.uvue
Normal file
215
qiming-mobile/subpackages/pages/about-me/about-me.uvue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<view class="about-me-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<custom-nav-bar :title="t('Mobile.Profile.title')">
|
||||
<template v-slot:left>
|
||||
<view class="header-icon-box" @tap="jumpNavigateBack">
|
||||
<text class="iconfont icon-a-Chevronleft"></text>
|
||||
</view>
|
||||
</template>
|
||||
</custom-nav-bar>
|
||||
<view class="header">
|
||||
<view class="avatar-box">
|
||||
<image
|
||||
:src="currentAvatar"
|
||||
mode="aspectFill"
|
||||
class="avatar-image"
|
||||
:alt="t('Mobile.Common.avatarAlt')"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
</view>
|
||||
<text class="user-name">{{ userInfo?.nickName }}</text>
|
||||
</view>
|
||||
<view class="user-info-box">
|
||||
<view class="info-section">
|
||||
<text class="label">{{ t("Mobile.Profile.userName") }}</text>
|
||||
<text class="value text-ellipsis">{{ userInfo?.userName }}</text>
|
||||
</view>
|
||||
<view class="info-section">
|
||||
<text class="label">{{ t("Mobile.Profile.phone") }}</text>
|
||||
<text class="value">{{ userInfo?.phone }}</text>
|
||||
</view>
|
||||
<view class="info-section">
|
||||
<text class="label">{{ t("Mobile.Profile.email") }}</text>
|
||||
<text class="value">{{
|
||||
userInfo?.email || t("Mobile.Profile.pendingBind")
|
||||
}}</text>
|
||||
</view>
|
||||
<!-- 语言切换 -->
|
||||
<LanguagePicker />
|
||||
<view class="info-section" v-if="dynamicCode">
|
||||
<text class="label">{{
|
||||
t("Mobile.Profile.dynamicCodeExpire", {
|
||||
expire: dynamicCodeExpire,
|
||||
})
|
||||
}}</text>
|
||||
<text class="value">{{ dynamicCode }}</text>
|
||||
</view>
|
||||
<view class="info-section">
|
||||
<text class="label">{{ t("Mobile.Profile.version") }}</text>
|
||||
<text class="value">{{ VERSION }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { SUCCESS_CODE } from "@/constants/codes.constants.uts";
|
||||
import { apiUserInfo, apiUserDynamicCode } from "@/servers/account";
|
||||
import type { UserInfo } from "@/types/interfaces/login";
|
||||
import defaultAvatar from "@/static/assets/avatar.png";
|
||||
import { jumpNavigateBack } from "@/utils/common";
|
||||
import { VERSION } from "@/constants/config";
|
||||
import { setCurrentPageNavigationBarTitle } from "@/utils/system.uts";
|
||||
import { useI18n } from "@/utils/i18n";
|
||||
import LanguagePicker from "./language-picker/language-picker.uvue";
|
||||
|
||||
const { t, ensureLangList } = useI18n();
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref<UserInfo>(null);
|
||||
|
||||
// 动态认证码
|
||||
const dynamicCode = ref("");
|
||||
// 动态认证码过期时间
|
||||
const dynamicCodeExpire = ref("");
|
||||
|
||||
// 当前显示的头像，默认使用传入的 avatar
|
||||
const currentAvatar = ref<string>(defaultAvatar);
|
||||
|
||||
// 图片加载错误时触发，切换为默认图片
|
||||
const handleImageError = () => {
|
||||
currentAvatar.value = defaultAvatar;
|
||||
};
|
||||
|
||||
// 查询当前登录用户信息
|
||||
const fetchUserInfo = async () => {
|
||||
const res = await apiUserInfo();
|
||||
const { code, data } = res || {};
|
||||
if (code === SUCCESS_CODE) {
|
||||
userInfo.value = data;
|
||||
currentAvatar.value = data?.avatar || defaultAvatar;
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date: Date): string => {
|
||||
const pad = (n: number) => (n < 10 ? `0${n}` : n);
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
|
||||
};
|
||||
|
||||
// 获取动态认证码
|
||||
const fetchDynamicCode = async () => {
|
||||
try {
|
||||
const res = await apiUserDynamicCode();
|
||||
if (res.code === SUCCESS_CODE) {
|
||||
dynamicCode.value = res.data || "";
|
||||
// 过期时间为当前时间 + 5分钟
|
||||
const expireTime = new Date(Date.now() + 5 * 60 * 1000);
|
||||
dynamicCodeExpire.value = formatDate(expireTime);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("获取动态认证码失败", e);
|
||||
}
|
||||
};
|
||||
|
||||
onLoad(() => {
|
||||
fetchUserInfo();
|
||||
fetchDynamicCode();
|
||||
// 确保语言列表已加载，供 H5 端的语言切换功能使用
|
||||
ensureLangList();
|
||||
// 设置当前页面导航栏标题
|
||||
setCurrentPageNavigationBarTitle();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.about-me-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.header-icon-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 400rpx;
|
||||
background-color: #fff;
|
||||
opacity: 0.8;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(150, 136, 230) 0%,
|
||||
rgb(164, 170, 232) 100%
|
||||
);
|
||||
gap: 30rpx;
|
||||
|
||||
.avatar-box {
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-box {
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.info-section {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
border-bottom: 1rpx solid rgba(12, 20, 102, 0.04);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<view class="info-section" v-if="langList.length > 1" @tap="handleOpen">
|
||||
<text class="label">{{ t("Mobile.Profile.language") }}</text>
|
||||
<view class="picker-trigger">
|
||||
<text class="value text-ellipsis">{{ currentLanguageName }}</text>
|
||||
<text class="iconfont icon-a-Chevrondown"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<radio-list-drawer
|
||||
:visible="visible"
|
||||
:title="t('Mobile.Profile.selectLanguage')"
|
||||
:list="languageOptions"
|
||||
:current-value="localCurrentLang"
|
||||
@onClose="handleClose"
|
||||
@onChange="handleLanguageChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { SUCCESS_CODE } from "@/constants/codes.constants.uts";
|
||||
import { useI18n, normalizeLang } from "@/utils/i18n";
|
||||
import { RadioListItem } from "@/types/interfaces/radio";
|
||||
import RadioListDrawer from "@/components/radio-list-drawer/radio-list-drawer.uvue";
|
||||
|
||||
const { t, currentLang, langList, setLanguage, loadI18n } = useI18n();
|
||||
|
||||
const visible = ref(false);
|
||||
const localCurrentLang = ref("");
|
||||
|
||||
const languageOptions = computed((): RadioListItem[] => {
|
||||
return langList.value.map((item): RadioListItem => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: normalizeLang(item.lang || ""), // 统一格式，确保与 currentLang 匹配
|
||||
// tag: item.isDefault ? t("Mobile.Profile.default") : "",
|
||||
disabled: item.status === 0,
|
||||
} as RadioListItem;
|
||||
});
|
||||
});
|
||||
|
||||
const currentLanguageName = computed((): string => {
|
||||
const normCurrent = normalizeLang(currentLang.value);
|
||||
const item = langList.value.find(
|
||||
(item) => normalizeLang(item.lang || "") === normCurrent,
|
||||
);
|
||||
return item?.name || item?.lang || t("Mobile.Profile.languagePlaceholder");
|
||||
});
|
||||
|
||||
const handleOpen = () => {
|
||||
// 移除 await loadI18n() 冗余调用，依赖页面初始化时的加载结果
|
||||
|
||||
// 默认选中后端返回的默认语言
|
||||
const defaultItem = langList.value.find((item) => item.isDefault === 1);
|
||||
if (defaultItem) {
|
||||
localCurrentLang.value = normalizeLang(defaultItem.lang || "");
|
||||
} else {
|
||||
localCurrentLang.value = normalizeLang(currentLang.value);
|
||||
}
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const handleLanguageChange = async (targetLang: string) => {
|
||||
if (!targetLang || targetLang === currentLang.value) return;
|
||||
|
||||
uni.showLoading({
|
||||
title: t("Mobile.Common.switching"),
|
||||
});
|
||||
try {
|
||||
const ok = await setLanguage(targetLang);
|
||||
if (!ok) {
|
||||
uni.showToast({
|
||||
title: t("Mobile.Common.switchFailed"),
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: t("Mobile.Common.switchSuccess"),
|
||||
icon: "success",
|
||||
});
|
||||
|
||||
// 成功切换后刷新页面，确保全局语言包生效
|
||||
setTimeout(() => {
|
||||
// #ifdef H5
|
||||
// 必须跳转到首页（TabBar 页面）再刷新，不能在 about-me（非 TabBar 页面）直接 reload。
|
||||
// 否则 App 重新初始化时 applyTabBarI18n 调用 uni.setTabBarItem 会报错 "not TabBar page"，
|
||||
// 导致导航栏文字无法更新，用户返回首页后依然看到中文 TabBar。
|
||||
window.location.replace("/");
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
uni.reLaunch({
|
||||
url: "/pages/index/index",
|
||||
});
|
||||
// #endif
|
||||
}, 500);
|
||||
} finally {
|
||||
uni.hideLoading();
|
||||
visible.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.info-section {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
border-bottom: 2rpx solid rgba(12, 20, 102, 0.04);
|
||||
|
||||
&:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.picker-trigger {
|
||||
max-width: 260rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user