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

<template>
    <div>
        <!-- <img src="../../assets/images/logoHeader.png" /> -->
        <img src="../../assets/images/headLogo.jpg" />
        <span>云融</span>
        <!-- <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"
                          readonly
                          placeholder="请输入代码/名称"
                          @pressEnter="search">
            </a-input-search>-->
            <!-- <a-icon type="search" /> -->
        </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"
                        @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-yonghu4" />
                        </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 } 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';

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

    return { visible, setMenu, chooseSetMenu };
};

// 搜索
const onSearch = () => {
    function search(value: string) {}
    return { search };
};
export default defineComponent({
    components: {
        UserOutlined,
        Setting,
    },
    props: {
        collapsed: {
            default: true,
            type: Boolean,
        },
    },
    setup() {
        const { openAction: openNotice } = openModal('notice');
        const { getUnReadNoticeLength } = handleNotice();
        return {
            openNotice,
            getUserName,
            getUnReadNoticeLength,
            ...setFn(),
            ...onSearch(),
        };
    },
});
</script>