This commit is contained in:
dzc committed 2025-04-23 12:21:23 +08:00
commit 347edcab76
2 files changed
+127 -107

No files matched your search

+120 -104
View File
@@ -2,7 +2,11 @@
<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }"> <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange"> <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
<div class="layout-navbars-breadcrumb-user-icon"> <div class="layout-navbars-breadcrumb-user-icon">
<i class="iconfont" :class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('user.title1')"></i> <i
class="iconfont"
:class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'"
:title="$t('user.title1')"
></i>
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
@@ -38,6 +42,18 @@
</template> </template>
</el-popover> </el-popover>
</div> </div>
<div class="layout-navbars-breadcrumb-user-icon">
<el-popover placement="bottom" trigger="click" :persistent="false">
<template #reference>
<el-icon><Phone /></el-icon>
</template>
<template #default>
<div>联系热线:</div>
<div>18367908152</div>
<div>15657370065</div>
</template>
</el-popover>
</div>
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick"> <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
<i <i
class="iconfont" class="iconfont"
@@ -55,9 +71,9 @@
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item command="/home">{{ $t('user.dropdown1') }}</el-dropdown-item> <el-dropdown-item command="/home">{{ $t("user.dropdown1") }}</el-dropdown-item>
<el-dropdown-item command="personal">{{ $t('user.dropdown2') }}</el-dropdown-item> <el-dropdown-item command="personal">{{ $t("user.dropdown2") }}</el-dropdown-item>
<el-dropdown-item divided command="logOut">{{ $t('user.dropdown5') }}</el-dropdown-item> <el-dropdown-item divided command="logOut">{{ $t("user.dropdown5") }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@@ -68,168 +84,168 @@
</template> </template>
<script setup lang="ts" name="layoutBreadcrumbUser"> <script setup lang="ts" name="layoutBreadcrumbUser">
import { logout } from '/@/api/login'; import { logout } from "/@/api/login"
import { ElMessage, ElMessageBox } from 'element-plus'; import { ElMessage, ElMessageBox } from "element-plus"
import screenfull from 'screenfull'; import screenfull from "screenfull"
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n"
import { useUserInfo } from '/@/stores/userInfo'; import { useUserInfo } from "/@/stores/userInfo"
import { useThemeConfig } from '/@/stores/themeConfig'; import { useThemeConfig } from "/@/stores/themeConfig"
import other from '/@/utils/other'; import other from "/@/utils/other"
import mittBus from '/@/utils/mitt'; import mittBus from "/@/utils/mitt"
import { Local, Session } from '/@/utils/storage'; import { Local, Session } from "/@/utils/storage"
import { formatAxis } from '/@/utils/formatTime'; import { formatAxis } from "/@/utils/formatTime"
import { useMsg } from '/@/stores/msg'; import { useMsg } from "/@/stores/msg"
import { fetchUserMessageList } from '/@/api/admin/message'; import { fetchUserMessageList } from "/@/api/admin/message"
// 引入组件 // 引入组件
const GlobalWebsocket = defineAsyncComponent(() => import('/@/components/Websocket/index.vue')); const GlobalWebsocket = defineAsyncComponent(() => import("/@/components/Websocket/index.vue"))
const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue')); const UserNews = defineAsyncComponent(() => import("/@/layout/navBars/breadcrumb/userNews.vue"))
const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue')); const Search = defineAsyncComponent(() => import("/@/layout/navBars/breadcrumb/search.vue"))
const PersonalDrawer = defineAsyncComponent(() => import('/@/views/admin/system/user/personal.vue')); const PersonalDrawer = defineAsyncComponent(() => import("/@/views/admin/system/user/personal.vue"))
// 定义变量内容 // 定义变量内容
const { locale, t } = useI18n(); const { locale, t } = useI18n()
const router = useRouter(); const router = useRouter()
const stores = useUserInfo(); const stores = useUserInfo()
const storesThemeConfig = useThemeConfig(); const storesThemeConfig = useThemeConfig()
const { userInfos } = storeToRefs(stores); const { userInfos } = storeToRefs(stores)
const { themeConfig } = storeToRefs(storesThemeConfig); const { themeConfig } = storeToRefs(storesThemeConfig)
const searchRef = ref(); const searchRef = ref()
const newsRef = ref(); const newsRef = ref()
const personalDrawerRef = ref(); const personalDrawerRef = ref()
interface State { interface State {
[key: string]: boolean | string; [key: string]: boolean | string
isScreenfull: boolean; isScreenfull: boolean
disabledI18n: string; disabledI18n: string
disabledSize: string; disabledSize: string
} }
const state = reactive<State>({ const state = reactive<State>({
isScreenfull: false, isScreenfull: false,
disabledI18n: 'zh-cn', disabledI18n: "zh-cn",
disabledSize: 'large', disabledSize: "large",
}); })
// 是否开启websocket // 是否开启websocket
const websocketEnable = ref(import.meta.env.VITE_WEBSOCKET_ENABLE === 'true'); const websocketEnable = ref(import.meta.env.VITE_WEBSOCKET_ENABLE === "true")
// 设置分割样式 // 设置分割样式
const layoutUserFlexNum = computed(() => { const layoutUserFlexNum = computed(() => {
let num: string | number = ''; let num: string | number = ""
const { layout, isClassicSplitMenu } = themeConfig.value; const { layout, isClassicSplitMenu } = themeConfig.value
const layoutArr: string[] = ['defaults', 'columns']; const layoutArr: string[] = ["defaults", "columns"]
if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1'; if (layoutArr.includes(layout) || (layout === "classic" && !isClassicSplitMenu)) num = "1"
else num = ''; else num = ""
return num; return num
}); })
// 全屏点击时 // 全屏点击时
const onScreenfullClick = () => { const onScreenfullClick = () => {
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {
ElMessage.warning('暂不不支持全屏'); ElMessage.warning("暂不不支持全屏")
return false; return false
} }
screenfull.toggle(); screenfull.toggle()
screenfull.on('change', () => { screenfull.on("change", () => {
if (screenfull.isFullscreen) state.isScreenfull = true; if (screenfull.isFullscreen) state.isScreenfull = true
else state.isScreenfull = false; else state.isScreenfull = false
}); })
}; }
// 布局配置 icon 点击时 // 布局配置 icon 点击时
const onLayoutSetingClick = () => { const onLayoutSetingClick = () => {
mittBus.emit('openSetingsDrawer'); mittBus.emit("openSetingsDrawer")
}; }
// 下拉菜单点击时 // 下拉菜单点击时
const onHandleCommandClick = (path: string) => { const onHandleCommandClick = (path: string) => {
if (path === 'logOut') { if (path === "logOut") {
ElMessageBox({ ElMessageBox({
closeOnClickModal: false, closeOnClickModal: false,
closeOnPressEscape: false, closeOnPressEscape: false,
title: t('user.logOutTitle'), title: t("user.logOutTitle"),
message: t('user.logOutMessage'), message: t("user.logOutMessage"),
showCancelButton: true, showCancelButton: true,
confirmButtonText: t('user.logOutConfirm'), confirmButtonText: t("user.logOutConfirm"),
cancelButtonText: t('user.logOutCancel'), cancelButtonText: t("user.logOutCancel"),
buttonSize: 'default', buttonSize: "default",
beforeClose: (action, instance, done) => { beforeClose: (action, instance, done) => {
if (action === 'confirm') { if (action === "confirm") {
instance.confirmButtonLoading = true; instance.confirmButtonLoading = true
instance.confirmButtonText = t('user.logOutExit'); instance.confirmButtonText = t("user.logOutExit")
setTimeout(() => { setTimeout(() => {
done(); done()
setTimeout(() => { setTimeout(() => {
instance.confirmButtonLoading = false; instance.confirmButtonLoading = false
}, 300); }, 300)
}, 700); }, 700)
} else { } else {
done(); done()
} }
}, },
}) })
.then(async () => { .then(async () => {
// 关闭全部的标签页 // 关闭全部的标签页
mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 3, ...router })); mittBus.emit("onCurrentContextmenuClick", Object.assign({}, { contextMenuClickId: 3, ...router }))
// 调用后台接口 // 调用后台接口
await logout(); await logout()
// 清除缓存/token等 // 清除缓存/token等
Session.clear(); Session.clear()
// 使用 reload 时,不需要调用 resetRoute() 重置路由 // 使用 reload 时,不需要调用 resetRoute() 重置路由
window.location.reload(); window.location.reload()
}) })
.catch(() => {}); .catch(() => {})
} else if (path === 'personal') { } else if (path === "personal") {
// 打开个人页面 // 打开个人页面
personalDrawerRef.value.open(); personalDrawerRef.value.open()
} else { } else {
router.push(path); router.push(path)
} }
}; }
// 菜单搜索点击 // 菜单搜索点击
const onSearchClick = () => { const onSearchClick = () => {
searchRef.value.openSearch(); searchRef.value.openSearch()
}; }
// 语言切换 // 语言切换
const onLanguageChange = (lang: string) => { const onLanguageChange = (lang: string) => {
Local.remove('themeConfig'); Local.remove("themeConfig")
themeConfig.value.globalI18n = lang; themeConfig.value.globalI18n = lang
Local.set('themeConfig', themeConfig.value); Local.set("themeConfig", themeConfig.value)
locale.value = lang; locale.value = lang
other.useTitle(); other.useTitle()
initI18nOrSize('globalI18n', 'disabledI18n'); initI18nOrSize("globalI18n", "disabledI18n")
}; }
// 锁屏 // 锁屏
const onLockClick = () => { const onLockClick = () => {
themeConfig.value.isLockScreen = true; themeConfig.value.isLockScreen = true
themeConfig.value.lockScreenTime = 0; themeConfig.value.lockScreenTime = 0
Local.set('themeConfig', themeConfig.value); Local.set("themeConfig", themeConfig.value)
}; }
// 初始化组件大小/i18n // 初始化组件大小/i18n
const initI18nOrSize = (value: string, attr: string) => { const initI18nOrSize = (value: string, attr: string) => {
state[attr] = Local.get('themeConfig')[value]; state[attr] = Local.get("themeConfig")[value]
}; }
// 获取到消息 // 获取到消息
const rollback = (msg: string) => { const rollback = (msg: string) => {
useMsg().setMsg({ label: 'websocket消息', value: msg, time: formatAxis(new Date()) }); useMsg().setMsg({ label: "websocket消息", value: msg, time: formatAxis(new Date()) })
}; }
// 获取是否显示未读 // 获取是否显示未读
const isDot = ref(false); const isDot = ref(false)
const getIsDot = () => { const getIsDot = () => {
fetchUserMessageList({ category: '1', readFlag: '0' }).then((res) => { fetchUserMessageList({ category: "1", readFlag: "0" }).then((res) => {
isDot.value = res.data.total !== 0; isDot.value = res.data.total !== 0
}); })
}; }
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
if (Local.get('themeConfig')) { if (Local.get("themeConfig")) {
initI18nOrSize('globalComponentSize', 'disabledSize'); initI18nOrSize("globalComponentSize", "disabledSize")
initI18nOrSize('globalI18n', 'disabledI18n'); initI18nOrSize("globalI18n", "disabledI18n")
} }
getIsDot(); getIsDot()
}); })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
+7 -3
View File
@@ -159,10 +159,14 @@
<span>{{ v.spuDetail.specsCapacity }}</span> <span>{{ v.spuDetail.specsCapacity }}</span>
</div> </div>
<!-- <div class="w-full flex items-center justify-between"> <!-- <div class="w-full flex items-center justify-between">
<span>{{ v.spuDetail.specsTaste }}</span> <span>味道:{{ v.spuDetail.specsTaste }}</span>
<span>{{ v.spuDetail.specsWeight }}</span> <span>重量:{{ v.spuDetail.specsWeight }}</span>
<span>{{ v.spuDetail.categoryName }}</span> <span>种类:{{ v.spuDetail.categoryName }}</span>
</div> --> </div> -->
<div class="w-full flex items-center justify-between text-xs">
<span>库存:{{ v.spuDetail.repertoryCount || 0 }}</span>
<span>已售:{{ v.spuDetail.salesCount || 0 }}</span>
</div>
</div> </div>
<div <div
v-else v-else