From 10fc7a44eddb262a7a192df63c0065f231ec0ab3 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Tue, 2 Jun 2026 10:35:13 +0800
Subject: [PATCH] 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.
---
 .../components/MineSetting/index.vue          | 63 ++++++++-----------
 .../home/components/DrawerSection/index.vue   |  2 +-
 2 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/src/pages/home/components/DrawerSection/components/MineSetting/index.vue b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
index 96ce02b..1d9236a 100644
--- a/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
+++ b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
@@ -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();
   }
 };
 
diff --git a/src/pages/home/components/DrawerSection/index.vue b/src/pages/home/components/DrawerSection/index.vue
index 622f831..b72d25e 100644
--- a/src/pages/home/components/DrawerSection/index.vue
+++ b/src/pages/home/components/DrawerSection/index.vue
@@ -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" />