274 lines
7.0 KiB
Vue
274 lines
7.0 KiB
Vue
<template>
|
|
<div class="pageHeader">
|
|
<div class="routes-case">
|
|
<SvgIcon class="sidebar-icon" :name="storeConfigure.configure.collapse ? 'Expand' : 'Fold'" size="20" color="#555"
|
|
@click="changeSidebar"></SvgIcon>
|
|
<el-breadcrumb separator="/">
|
|
<!-- <transition-group name="breadcrumb"> -->
|
|
<el-breadcrumb-item v-for="item in storeRoutes.breadcrumb" :key="item.path">
|
|
<span style="color: #333;">{{ item?.meta?.title || item.path
|
|
}}</span></el-breadcrumb-item>
|
|
<!-- </transition-group> -->
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="info-case">
|
|
<!-- <SvgIcon class="info-icon" name="Operation" @click="operationFunction('operation')"></SvgIcon> -->
|
|
<SvgIcon class="info-icon" name="Refresh" @click="operationFunction('refresh')"></SvgIcon>
|
|
<el-popover :width="400">
|
|
<template #reference>
|
|
<div class="bell_wrap">
|
|
<div class="dot" v-if="storeUser.notices.num">
|
|
{{ storeUser.notices.num > 99 ? '99+' : storeUser.notices.num }}
|
|
</div>
|
|
<svg-icon class="bell" name="Bell" />
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<div class="bell_container">
|
|
<div class="header">
|
|
<el-text size="large">通知</el-text>
|
|
</div>
|
|
<div class="content">
|
|
<div class="list">
|
|
<div class="item" :class="{ active: item.typefirst == 1 && item.typesecond }"
|
|
v-for="item in storeUser.notices.list" :key="item.id" @click="toDetail(item)">
|
|
<!-- <div class="title">
|
|
<el-text size="large">{{ item.title }}</el-text>
|
|
</div> -->
|
|
<div class="conetnt">
|
|
<el-text :type="item.isdeal == 1 ? 'info' : ''">
|
|
{{ `[${title1[item.typefirst]}-${title2[item.typesecond]}] ${item.conrtent}` }}
|
|
</el-text>
|
|
</div>
|
|
<div class="time">
|
|
<el-text size="small" type="info">{{ dayjs(item.createdt).format('YYYY-MM-DD') }}</el-text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<RouterLink :to="{ name: 'noticeIndex' }">
|
|
<el-link type="primary">前往通知中心</el-link>
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
<el-dropdown style="cursor: pointer" @visible-change="changeDropdownVisible">
|
|
<div class="flex align-center" style="gap: 0 10px">
|
|
<!-- <img class="info-avatar" :src="storeUser.userInfo.avatar" alt="" srcset="" /> -->
|
|
<p class="info-name">{{ storeUser.userInfo.loginName }}</p>
|
|
<SvgIcon color="#333" name="arrow-down"></SvgIcon>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<!-- <el-dropdown-item>个人中心</el-dropdown-item> -->
|
|
<el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { dayjs } from "element-plus";
|
|
import { useConfigure } from "@/store/configure.js";
|
|
import { useUser } from "@/store/user.js";
|
|
import { useRoutes } from "@/store/routes.js";
|
|
import { useRouter } from "vue-router"
|
|
|
|
import { unread } from '@/api/home.js'
|
|
|
|
const router = useRouter()
|
|
|
|
const storeUser = useUser();
|
|
const storeRoutes = useRoutes();
|
|
|
|
import { title1, title2 } from '@/views/notice/noticeEnum.js'
|
|
|
|
// 获取配置
|
|
const storeConfigure = useConfigure();
|
|
|
|
// 侧边栏导航的收起与展开
|
|
function changeSidebar() {
|
|
storeConfigure.change("collapse", !storeConfigure.configure.collapse);
|
|
}
|
|
|
|
// 下拉菜单
|
|
let showDropdown = ref(false);
|
|
let rotateUserIcon = ref("0deg");
|
|
function changeDropdownVisible() {
|
|
showDropdown.value = !showDropdown.value;
|
|
rotateUserIcon.value = showDropdown.value ? "180deg" : "0deg";
|
|
}
|
|
|
|
// info 中的按钮操作
|
|
const emits = defineEmits(["operation"]);
|
|
function operationFunction(type) {
|
|
emits("operation", type);
|
|
}
|
|
|
|
// 跳转详细详情
|
|
function toDetail(item) {
|
|
if (item.typefirst == 1 && item.typesecond == 1) {
|
|
router.push({
|
|
name: 'shop_detail',
|
|
query: {
|
|
id: item.userid,
|
|
type: 'msg1'
|
|
}
|
|
})
|
|
if (!item.isdeal) {
|
|
unread({ noticecode: item.noticecode })
|
|
storeUser.getNotices()
|
|
}
|
|
}
|
|
}
|
|
|
|
// 退出登录
|
|
function logOut() {
|
|
// 清除缓存 / token 等
|
|
_hook.useLocalStorage.clear();
|
|
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
|
// 且刷新页面时 pinia 数据会重置
|
|
window.location.reload();
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 面包屑的动画
|
|
.breadcrumb-enter-active,
|
|
.breadcrumb-leave-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.breadcrumb-enter-from,
|
|
.breadcrumb-leave-active {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.breadcrumb-leave-active {
|
|
position: absolute;
|
|
z-index: -1;
|
|
transition: all 0s ease;
|
|
}
|
|
|
|
.pageHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
height: 60px;
|
|
// border-bottom: 1px solid #efefef;
|
|
}
|
|
|
|
.routes-case {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.sidebar-icon {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.info-case {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0 16px;
|
|
|
|
.info-icon {
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
color: #333;
|
|
transition: all 0.3s;
|
|
|
|
&:hover {
|
|
color: var(--el-color-primary);
|
|
transform: scale(1.2, 1.2);
|
|
}
|
|
}
|
|
|
|
.bell_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
.bell {
|
|
color: var(--el-color-primary);
|
|
transform: scale(1.2, 1.2);
|
|
}
|
|
}
|
|
|
|
.dot {
|
|
display: flex;
|
|
border-radius: 20px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
padding: 1px 6px;
|
|
background-color: #DC362E;
|
|
position: absolute;
|
|
top: -8px;
|
|
left: 40%;
|
|
}
|
|
|
|
.bell {
|
|
color: #333;
|
|
font-size: 16px;
|
|
transition: all 0.3s;
|
|
}
|
|
}
|
|
|
|
.info-avatar {
|
|
border-radius: 2px;
|
|
width: 35px;
|
|
height: 35px;
|
|
}
|
|
|
|
.info-name {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.bell_container {
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #ececec;
|
|
}
|
|
|
|
.content {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
|
|
.list {
|
|
padding: 14px 0;
|
|
}
|
|
|
|
.item {
|
|
padding: 14px;
|
|
border-radius: 8px;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
background-color: #efefef;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
padding-top: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-top: 1px solid #ececec;
|
|
}
|
|
}
|
|
</style>
|