132 lines
3.7 KiB
Vue
132 lines
3.7 KiB
Vue
<template>
|
|
<!-- 语言 -->
|
|
<div class="name-box font12">
|
|
<el-dropdown trigger="click" class="triangle-box" @command="handleCommand" :max-height="300">
|
|
<div>
|
|
{{ name }}
|
|
<el-icon class="triangle">
|
|
<i-ep-arrow-down />
|
|
</el-icon>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item v-for="(item, index) in langs" :key="index" :command="item.id" :value="item.country_name">
|
|
{{ item.country_name }}
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
<!-- 用户名 -->
|
|
<div class="name-box font12">
|
|
<el-dropdown trigger="click" class="triangle-box">
|
|
<div>
|
|
{{ userStore.username }}
|
|
<el-icon class="triangle">
|
|
<i-ep-arrow-down />
|
|
</el-icon>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="logout">
|
|
<el-icon> <i-ep-switch-button /> </el-icon>重新登录
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { logoutApi } from "@/api/modules/login";
|
|
import { useMsg } from "@/hooks/useMsg";
|
|
import { useUserStore } from "@/stores/modules/user";
|
|
import { ElMessageBox } from "element-plus";
|
|
import { outLogin } from "@/utils/outLogin";
|
|
import { getLanguageListApi, getLanguageCutoverApi } from "@/api/modules/global";
|
|
|
|
const userStore = useUserStore();
|
|
document.cookie = `lang=zh_cn`;
|
|
const langs = ref<any>([]);
|
|
const name = ref("");
|
|
|
|
// 站点列表
|
|
const getLanguageList = async () => {
|
|
const result = await getLanguageListApi();
|
|
if (result?.code === 0) {
|
|
const { data } = result;
|
|
langs.value = data;
|
|
let id = userStore?.languageType ? userStore?.languageType : data[0]?.id;
|
|
getLanguageCutover(id);
|
|
}
|
|
};
|
|
getLanguageList();
|
|
|
|
// 站点切换接口
|
|
const getLanguageCutover = async (id: any) => {
|
|
const result = await getLanguageCutoverApi(id);
|
|
if (result?.code === 0) {
|
|
userStore.setLanguageType(id);
|
|
let names = langs?.value?.filter((item: any) => {
|
|
return item.id === id;
|
|
});
|
|
name.value = names[0]?.country_name;
|
|
}
|
|
};
|
|
|
|
// 站点切换事件
|
|
const handleCommand = (val: string) => {
|
|
getLanguageCutover(val);
|
|
};
|
|
|
|
// 退出登录
|
|
const logout = () => {
|
|
ElMessageBox.confirm("您是否确认重新登录?", "温馨提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
}).then(async () => {
|
|
// 1. 退出登录
|
|
const result: any = await logoutApi();
|
|
if (result?.code === 0) {
|
|
outLogin();
|
|
} else {
|
|
useMsg("error", result.message);
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.name-box {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #303133;
|
|
cursor: pointer;
|
|
::v-deep(.el-dropdown) {
|
|
color: #303133;
|
|
}
|
|
}
|
|
.name-box::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
display: block;
|
|
height: 20px;
|
|
content: "";
|
|
border-left: 1px solid #e4e7ed;
|
|
transform: translateY(-50%);
|
|
}
|
|
.triangle-box {
|
|
margin: 0 10px;
|
|
}
|
|
.triangle {
|
|
margin-left: 3px;
|
|
transition: transform 0.3s ease; /* 添加动画过渡效果 */
|
|
}
|
|
.triangle-box:hover .triangle {
|
|
transform: rotate(180deg); /* 鼠标悬停时旋转180度 */
|
|
}
|
|
</style>
|