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>
|
<template>
|
||||||
<div class="p-[12px] bg-[#f6f6f6] flex-1">
|
<div class="p-[12px] bg-[#f6f6f6] flex-1">
|
||||||
<!-- 顶部用户信息 -->
|
<div class="bg-white rounded-control pl-[12px]">
|
||||||
<div class="bg-white rounded-[6px] pl-[12px] mb-[10px]">
|
<!-- 顶部用户信息 -->
|
||||||
<div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
|
<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>
|
||||||
<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-[#666]">{{ userInfo.phone }}</span>
|
<span class="text-[14px] text-[#666]">{{ userInfo.phone }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 中间功能入口(循环渲染) -->
|
<!-- 中间功能入口(循环渲染) -->
|
||||||
<div class="bg-white rounded-[6px] pl-[12px] mb-[10px]">
|
|
||||||
<div v-for="(item, index) in menuList" :key="index"
|
<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"
|
class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0"
|
||||||
@click="handleMenuClick(item)">
|
@click="handleMenuClick(item)">
|
||||||
<span class="text-[14px] text-[#333]">{{ item.label }}</span>
|
<span class="text-[14px] text-[#333]">{{ item.label }}</span>
|
||||||
<van-icon type="right" size="14" color="#ccc"></van-icon>
|
<van-icon type="right" size="14" color="#ccc"></van-icon>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- 底部退出按钮 -->
|
<!-- 底部退出按钮 -->
|
||||||
@@ -33,32 +34,35 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineEmits, defineExpose } from "vue";
|
import { computed, ref, defineEmits, defineExpose } from "vue";
|
||||||
import { getLoginUserPhone } from "@/api/login";
|
import { getLoginUserPhone } from "@/api/login";
|
||||||
import { NOTICE_EVENT_LOGOUT } from "@/constants/constant";
|
import { NOTICE_EVENT_LOGOUT } from "@/constants/constant";
|
||||||
|
import { getCurrentLocale, setLocale } from "@/i18n";
|
||||||
import { useAppStore } from "@/store";
|
import { useAppStore } from "@/store";
|
||||||
|
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const emits = defineEmits(["close"]);
|
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({
|
const userInfo = ref({
|
||||||
avatar: "/static/default-avatar.png",
|
|
||||||
nickname: "微信用户",
|
|
||||||
phone: "",
|
phone: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
// 功能菜单列表(带 type 区分操作类型)
|
// 功能菜单列表(带 type 区分操作类型)
|
||||||
const menuList = ref([
|
const menuList = ref([
|
||||||
// { label: '修改手机号', type: 'navigate', url: '/pages/change-phone/change-phone' },
|
|
||||||
{
|
{
|
||||||
label: "账号注销",
|
label: "账号注销",
|
||||||
type: "action",
|
type: "action",
|
||||||
url: "cancelAccount",
|
url: "cancelAccount",
|
||||||
},
|
},
|
||||||
// { label: '营业资质&协议', type: 'navigate', url: '/pages/agreement/agreement' },
|
|
||||||
// { label: "联系客服", type: "action", action: "contactService" },
|
|
||||||
// { label: "订阅消息", type: "action", action: "subscribeMessage" },
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const getLoginUserPhoneInfo = async () => {
|
const getLoginUserPhoneInfo = async () => {
|
||||||
@@ -71,21 +75,8 @@ const getLoginUserPhoneInfo = async () => {
|
|||||||
|
|
||||||
// 处理菜单点击
|
// 处理菜单点击
|
||||||
const handleMenuClick = (item) => {
|
const handleMenuClick = (item) => {
|
||||||
if (item.type === "navigate" && item.url) {
|
if (item.action === "cancelAccount") {
|
||||||
uni.navigateTo({ url: item.url });
|
handleLogout();
|
||||||
} 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);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<van-popup v-model:show="show" ref="drawerRef" position="left" :style="{ height: '100%' }">
|
<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">
|
<div class="relative p-3 flex justify-center items-center">
|
||||||
<span class="flex-1 text-[18px] text-center text-[#333]">设置</span>
|
<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" />
|
<van-icon name="cross" size="22" color="#333333" class="absolute right-0" @click="close" />
|
||||||
|
|||||||
Reference in New Issue
Block a user