feat(drawer): add language switcher and update UI

Adjust drawer width from 280px to 300px for better layout.
Remove outdated avatar and nickname display sections.
Add i18n language switching support for zh-CN, en-US and th-TH locales.
Clean up unused user info mock data.
This commit is contained in:
DEV_DSW
2026-06-02 10:35:13 +08:00
parent 3031a7fd3b
commit 10fc7a44ed
2 changed files with 28 additions and 37 deletions

View File

@@ -1,29 +1,30 @@
<template>
<div class="p-[12px] bg-[#f6f6f6] flex-1">
<!-- 顶部用户信息 -->
<div class="bg-white rounded-[6px] pl-[12px] mb-[10px]">
<div class="bg-white rounded-control pl-[12px]">
<!-- 顶部用户信息 -->
<div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
<span class="text-[14px] text-[#333]">头像 </span>
<van-icon name="contact" size="20" color="#ccc"></van-icon>
</div>
<div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
<span class="text-[14px] text-[#333]">昵称</span>
<span class="text-[14px] text-[#666]">{{ userInfo.nickname }}</span>
</div>
<div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
<span class="text-[14px] text-[#333]">手机号</span>
<span class="text-[14px] text-[#333]">账号</span>
<span class="text-[14px] text-[#666]">{{ userInfo.phone }}</span>
</div>
</div>
<!-- 中间功能入口循环渲染 -->
<div class="bg-white rounded-[6px] pl-[12px] mb-[10px]">
<!-- 中间功能入口循环渲染 -->
<div v-for="(item, index) in menuList" :key="index"
class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0"
@click="handleMenuClick(item)">
<span class="text-[14px] text-[#333]">{{ item.label }}</span>
<van-icon type="right" size="14" color="#ccc"></van-icon>
</div>
<div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
<span class="text-[14px] text-[#333]">语言</span>
<div class="flex items-center gap-3">
<span v-for="lang in languageOptions" :key="lang.locale" class="text-[14px] transition-colors duration-200"
:class="currentLocale === lang.locale ? 'text-[#00C853] font-medium' : 'text-[#666]'"
@click="switchLanguage(lang.locale)">
{{ lang.label }}
</span>
</div>
</div>
</div>
<!-- 底部退出按钮 -->
@@ -33,32 +34,35 @@
</template>
<script setup>
import { ref, defineEmits, defineExpose } from "vue";
import { computed, ref, defineEmits, defineExpose } from "vue";
import { getLoginUserPhone } from "@/api/login";
import { NOTICE_EVENT_LOGOUT } from "@/constants/constant";
import { getCurrentLocale, setLocale } from "@/i18n";
import { useAppStore } from "@/store";
const appStore = useAppStore();
const emits = defineEmits(["close"]);
const languageOptions = [
{ locale: "zh-CN", label: "中" },
{ locale: "en-US", label: "EN" },
{ locale: "th-TH", label: "TH" },
];
const currentLocale = computed(() => getCurrentLocale());
const switchLanguage = (locale) => setLocale(locale);
// 假数据
const userInfo = ref({
avatar: "/static/default-avatar.png",
nickname: "微信用户",
phone: "",
});
// 功能菜单列表(带 type 区分操作类型)
const menuList = ref([
// { label: '修改手机号', type: 'navigate', url: '/pages/change-phone/change-phone' },
{
label: "账号注销",
type: "action",
url: "cancelAccount",
},
// { label: '营业资质&协议', type: 'navigate', url: '/pages/agreement/agreement' },
// { label: "联系客服", type: "action", action: "contactService" },
// { label: "订阅消息", type: "action", action: "subscribeMessage" },
]);
const getLoginUserPhoneInfo = async () => {
@@ -71,21 +75,8 @@ const getLoginUserPhoneInfo = async () => {
// 处理菜单点击
const handleMenuClick = (item) => {
if (item.type === "navigate" && item.url) {
uni.navigateTo({ url: item.url });
} else if (item.type === "action") {
if (item.action === "contactService") {
showToast("联系客服功能待实现");
} else if (item.action === "cancelAccount") {
handleLogout();
} else if (item.action === "subscribeMessage") {
uni.requestSubscribeMessage({
tmplIds: ["fMIt1q9GgM3Ep0DJSNgVPm4C3lCpQdz2TediETcv3iM"],
success(res) {
console.log(res);
},
});
}
if (item.action === "cancelAccount") {
handleLogout();
}
};

View File

@@ -1,6 +1,6 @@
<template>
<van-popup v-model:show="show" ref="drawerRef" position="left" :style="{ height: '100%' }">
<div class="w-[280px] bg-white flex flex-col h-full">
<div class="w-[300px] bg-white flex flex-col h-full">
<div class="relative p-3 flex justify-center items-center">
<span class="flex-1 text-[18px] text-center text-[#333]">设置</span>
<van-icon name="cross" size="22" color="#333333" class="absolute right-0" @click="close" />