refactor(DrawerSection): inline standalone MineSetting component
delete the separate MineSetting component file and move all its template and logic directly into the parent DrawerSection component, maintaining existing functionality.
This commit is contained in:
DEV_DSW
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div class="p-[12px] bg-[#f6f6f6] flex-1">
|
||||
<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>
|
||||
<span class="text-[14px] text-[#666]">{{ userInfo.phone }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 中间功能入口（循环渲染） -->
|
||||
<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>
|
||||
|
||||
<!-- 底部退出按钮 -->
|
||||
<span class="flex items-center justify-center h-[42px] mt-[40px] bg-white text-[#333] rounded-[4px] border-none"
|
||||
@click="handleLogout">退出登录</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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({
|
||||
phone: "",
|
||||
});
|
||||
|
||||
// 功能菜单列表（带 type 区分操作类型）
|
||||
const menuList = ref([
|
||||
{
|
||||
label: "账号注销",
|
||||
type: "action",
|
||||
url: "cancelAccount",
|
||||
},
|
||||
]);
|
||||
|
||||
const getLoginUserPhoneInfo = async () => {
|
||||
const res = await getLoginUserPhone();
|
||||
|
||||
if (res.code === 0) {
|
||||
userInfo.value.phone = res.data;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理菜单点击
|
||||
const handleMenuClick = (item) => {
|
||||
if (item.action === "cancelAccount") {
|
||||
handleLogout();
|
||||
}
|
||||
};
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => { };
|
||||
|
||||
defineExpose({ getLoginUserPhoneInfo });
|
||||
</script>
|
||||
@@ -1,25 +1,57 @@
|
||||
<template>
|
||||
<van-popup v-model:show="show" ref="drawerRef" position="left" :style="{ height: '100%' }">
|
||||
<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" />
|
||||
</div>
|
||||
<div class="p-[12px] bg-[#f6f6f6] flex-1">
|
||||
<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>
|
||||
<span class="text-[14px] text-[#666]">{{ userInfo.phone }}</span>
|
||||
</div>
|
||||
|
||||
<MineSetting ref="mineSettingRef" @close="close" />
|
||||
<!-- 中间功能入口（循环渲染） -->
|
||||
<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>
|
||||
|
||||
<!-- 底部退出按钮 -->
|
||||
<span class="flex items-center justify-center h-[42px] mt-[40px] bg-white text-[#333] rounded-[4px] border-none"
|
||||
@click="handleLogout">退出登录</span>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineExpose } from "vue";
|
||||
import { computed, ref, defineEmits, defineExpose } from "vue";
|
||||
import { checkToken } from "@/hooks/useGoLogin";
|
||||
import MineSetting from "./components/MineSetting/index.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 drawerRef = ref(null);
|
||||
|
||||
// 监听抽屉显示事件
|
||||
const mineSettingRef = ref(null);
|
||||
const show = ref(false);
|
||||
|
||||
const open = async () => {
|
||||
@@ -28,7 +60,11 @@ const open = async () => {
|
||||
show.value = true;
|
||||
|
||||
try {
|
||||
await mineSettingRef.value?.getLoginUserPhoneInfo?.();
|
||||
const res = await getLoginUserPhone();
|
||||
|
||||
if (res.code === 0) {
|
||||
userInfo.value.phone = res.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("获取登录用户手机号失败:", error);
|
||||
}
|
||||
@@ -37,6 +73,38 @@ const open = async () => {
|
||||
// 监听抽屉隐藏事件
|
||||
const close = () => show.value = false;
|
||||
|
||||
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({
|
||||
phone: "",
|
||||
});
|
||||
|
||||
// 功能菜单列表（带 type 区分操作类型）
|
||||
const menuList = ref([
|
||||
{
|
||||
label: "账号注销",
|
||||
type: "action",
|
||||
url: "cancelAccount",
|
||||
},
|
||||
]);
|
||||
|
||||
// 处理菜单点击
|
||||
const handleMenuClick = (item) => {
|
||||
if (item.action === "cancelAccount") {
|
||||
handleLogout();
|
||||
}
|
||||
};
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => { };
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
|
||||
Reference in New Issue
Block a user