MTP2.0_WEB/src/layout/components/header.vue

<template>
    <!-- 风险管理 -->

    <div v-if="isOemByEnum(OemType.manager)">
        <img src="../../assets/images/logoHeader.png" />
        <span>深圳市多元世纪信息技术股份有限公司</span>
    </div>
    <!-- 云融 -->

    <div v-else-if="isOemByEnum(OemType.wrspot)">
        <img src="../../assets/images/headLogo.jpg" />
        <span>云融</span>
    </div>
    <div v-else>
        <img src="../../assets/images/logoHeader.png" />
        <span>深圳市多元世纪信息技术股份有限公司</span>
    </div>
    <div class="m-layout-header-right">
        <div @click="openDrawer">
            <span>{{ getUserName() }}，您好！</span>
        </div>
        <div class="relative">
            <!-- <a-input-search ref="userNameInput"
                          class="searchInput"
                          placeholder="请输入代码/名称"
                          @pressEnter="search">
                          readonly
            </a-input-search>-->
            <!-- <a-icon type="search" /> -->
        </div>
        <div v-if="isOemByEnum(OemType.wrspot)">
            <a-popover trigger="click" placement="bottom" overlayClassName="friendPopover">
                <template #content>
                    <Friend />
                </template>
                <span class="friendIcon">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-pengyou1" />
                    </svg>
                </span>
            </a-popover>
        </div>
        <div class="news-container">
            <a-badge @click="openNotice" :dot="getUnReadNoticeLength() > 0">
                <svg class="icon svg-icon" aria-hidden="true">
                    <use xlink:href="#icon-xiaoxi" />
                </svg>
            </a-badge>
        </div>
        <div>
            <a-popover v-model:visible="visible" trigger="click" placement="bottomRight">
                <template #content>
                    <div
                        v-for="item in setMenu"
                        class="popItem"
                        @click="chooseSetMenu(item.path)"
                        :key="item.path"
                    >{{ item.name }}</div>
                </template>
                <a-avatar :size="24">
                    <template #icon>
                        <SettingFilled />
                        <!-- <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-yonghu1" />
                        </svg>-->
                    </template>
                </a-avatar>
            </a-popover>
            <Setting />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, provide } from 'vue';
import { openModal } from '@/common/setup/modal/index';
import { UserOutlined, SettingFilled } from '@ant-design/icons-vue';
import Setting from '@/views/setting/index.vue';
import { getUserName } from '@/services/bus/user';
import { logout } from '@/services/bus/login';
import APP from '@/services';
import Router from '@/router';
import { handleNotice } from '@/views/setting/notice/setup';
import { isOemByEnum, OemType } from '@/common/config/projectName';
import { changeTheme, ThemeEnum } from '@/common/config/theme';
import { initData } from '@/common/methods';
import Friend from '@/views/setting/friends/index.vue';

// 设置
const setFn = () => {
    const visible = ref<boolean>(false);
    const chooseSetupItem = ref<string>('');
    provide('ControlModal', chooseSetupItem);
    const setMenu = ref([{ name: '退出', path: 'logout' }]);
    // const setMenu = [
    //     // { name: '修改密码', path: 'password' },
    //     // { name: '收货地址', path: 'addresss' },
    //     // // {name: '发票', path: 'setup-password'},
    //     // { name: '手机号码绑定/解绑', path: 'phone' },
    //     // { name: '关于我们', path: 'aboutUs' },
    //     { name: '白主题', path: ThemeEnum.light },
    //     { name: '黑主题', path: ThemeEnum.dark },
    //     { name: '退出', path: 'logout' },
    // ];
    initData(() => {
        if (isOemByEnum(OemType.wrspot)) {
            const theme = [
                { name: '白主题', path: ThemeEnum.light },
                { name: '黑主题', path: ThemeEnum.dark },
            ];
            setMenu.value = [...theme, ...setMenu.value];
        }
    });
    const { openAction } = openModal('logout');
    function chooseSetMenu(path: string) {
        if (path === 'logout') {
            logout();
            APP.closeServer();
            Router.replace('/login');
        } else {
            changeTheme(path as ThemeEnum);
            // openAction();
        }
        visible.value = false;
    }

    return { visible, setMenu, chooseSetMenu };
};

// 搜索
const onSearch = () => {
    function search(value: string) {}
    return { search };
};
export default defineComponent({
    components: {
        UserOutlined,
        Setting,
        Friend,
        SettingFilled,
    },
    props: {
        collapsed: {
            default: true,
            type: Boolean,
        },
    },
    setup() {
        const { openAction: openNotice } = openModal('notice');
        const { getUnReadNoticeLength } = handleNotice();
        return {
            openNotice,
            getUserName,
            getUnReadNoticeLength,
            ...setFn(),
            ...onSearch(),
            isOemByEnum,
            OemType,
        };
    },
});
</script>
<style lang="less">
.friendIcon {
    .icon {
        font-size: 20px;
        line-height: 32px;
        margin: 6px 5px;
    }
}
</style>