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:
@@ -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();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user