|
|
@@ -0,0 +1,312 @@
|
|
|
+<template>
|
|
|
+ <a-layout class="layout-top">
|
|
|
+ <a-layout-header class="m-layout-header">
|
|
|
+ <div>深圳市多元世纪信息技术股份有限公司</div>
|
|
|
+ <div class="m-layout-header-right">
|
|
|
+ <div>
|
|
|
+ <span>{{ username }}（2500000001），您好！</span>
|
|
|
+ </div>
|
|
|
+ <div class="relative">
|
|
|
+ <a-input-search ref="userNameInput"
|
|
|
+ class="searchInput"
|
|
|
+ placeholder="请输入代码/名称"
|
|
|
+ @pressEnter="search">
|
|
|
+ </a-input-search>
|
|
|
+ <!-- <a-icon type="search" /> -->
|
|
|
+ </div>
|
|
|
+ <div class="news-container">
|
|
|
+ <a-badge dot
|
|
|
+ @click="chooseSetMenu('notice')">
|
|
|
+ <svg class="icon svg-icon"
|
|
|
+ aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xiaoxi"></use>
|
|
|
+ </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>
|
|
|
+ <UserOutlined />
|
|
|
+ </template>
|
|
|
+ </a-avatar>
|
|
|
+ </a-popover>
|
|
|
+ <Setting />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-layout-header>
|
|
|
+ <a-layout class="middleLayout">
|
|
|
+ <a-layout-sider class="m-layout-left"
|
|
|
+ width="180"
|
|
|
+ v-model:collapsed="collapsed"
|
|
|
+ @collapse="collapse"
|
|
|
+ collapsible>
|
|
|
+ <a-menu theme="dark"
|
|
|
+ mode="inline"
|
|
|
+ class="left-menu"
|
|
|
+ v-model:selectedKeys="selectedKeys"
|
|
|
+ v-model:openKeys="openKeys"
|
|
|
+ @click="menuClick">
|
|
|
+ <a-sub-menu v-for="item in menuList"
|
|
|
+ :key="item.code">
|
|
|
+ <template #title>
|
|
|
+ <span>
|
|
|
+ <svg class="icon svg-icon"
|
|
|
+ aria-hidden="true">
|
|
|
+ <use :xlink:href="fontIcon(item.code)"></use>
|
|
|
+ </svg>
|
|
|
+ <span class="menu-item_title"
|
|
|
+ v-show="!collapsed">{{ item.title }}</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <a-menu-item :key="subItem.code"
|
|
|
+ v-for="subItem in item.children">
|
|
|
+ <span>{{ subItem.title }}</span>
|
|
|
+ </a-menu-item>
|
|
|
+ </a-sub-menu>
|
|
|
+ </a-menu>
|
|
|
+ </a-layout-sider>
|
|
|
+ <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
|
|
|
+ <router-view />
|
|
|
+ </a-layout-content>
|
|
|
+ </a-layout>
|
|
|
+ <div class="sliderLayout">
|
|
|
+ <div class="shortLine"></div>
|
|
|
+ </div>
|
|
|
+ <a-layout class="bottomLayout">
|
|
|
+ <a-layout-sider class="m-layout-left"
|
|
|
+ width="180">
|
|
|
+ <!-- 这里左边需要加上资金信息 capital-info -->
|
|
|
+ <CapitalInfo></CapitalInfo>
|
|
|
+ </a-layout-sider>
|
|
|
+ <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
|
|
|
+ </a-layout-content>
|
|
|
+ </a-layout>
|
|
|
+ </a-layout>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+import { UserOutlined } from '@ant-design/icons-vue';
|
|
|
+import { defineComponent, ref, provide } from 'vue';
|
|
|
+import Setting from '@/views/setting/index.vue';
|
|
|
+import CapitalInfo from '@/components/capitalInfo/index.vue';
|
|
|
+import SecondMenu from '@/components/secondeMenu/index.vue';
|
|
|
+import APP from '@/services';
|
|
|
+
|
|
|
+// 菜单栏
|
|
|
+const handleMenu = () => {
|
|
|
+ const collapsed = ref<boolean>(false);
|
|
|
+ const selectedKeys = ref<string[]>(['1-1']);
|
|
|
+ const openKeys = ref<string[]>(['1']);
|
|
|
+ const preOpenKeys = ref<string[]>(['1']);
|
|
|
+ const menuList = APP.getRef('menus');
|
|
|
+ // 控制菜单是否隐藏
|
|
|
+ function collapse(collapsed: boolean) {
|
|
|
+ if (collapsed) {
|
|
|
+ preOpenKeys.value = openKeys.value;
|
|
|
+ openKeys.value = [];
|
|
|
+ } else {
|
|
|
+ openKeys.value = preOpenKeys.value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function menuClick(value: any) {
|
|
|
+ console.log(value);
|
|
|
+ }
|
|
|
+ // 一级菜单图标
|
|
|
+ function fontIcon(code: string): string {
|
|
|
+ let result = 'icon-jinrongfenxi';
|
|
|
+ switch (code) {
|
|
|
+ case 'market':
|
|
|
+ result = 'icon-jinrongfenxi';
|
|
|
+ break;
|
|
|
+ case 'info':
|
|
|
+ result = 'icon-zhangdan';
|
|
|
+ break;
|
|
|
+ case 'business':
|
|
|
+ result = 'icon-renwu';
|
|
|
+ break;
|
|
|
+ case 'manage':
|
|
|
+ result = 'icon-quanxian';
|
|
|
+ break;
|
|
|
+ case 'search':
|
|
|
+ result = 'icon-chazhaojilu';
|
|
|
+ break;
|
|
|
+ case 'report':
|
|
|
+ result = 'icon-bingtu';
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return '#' + result;
|
|
|
+ }
|
|
|
+ return { collapsed, selectedKeys, menuList, openKeys, collapse, menuClick, fontIcon };
|
|
|
+};
|
|
|
+
|
|
|
+// 设置
|
|
|
+const setFn = () => {
|
|
|
+ const visible = ref<boolean>(false);
|
|
|
+ const chooseSetupItem = ref<string>('');
|
|
|
+ provide('setting', chooseSetupItem);
|
|
|
+ const setMenu = [
|
|
|
+ { name: '修改密码', path: 'password' },
|
|
|
+ { name: '收货地址', path: 'addresss' },
|
|
|
+ // {name: '发票', path: 'setup-password'},
|
|
|
+ { name: '手机号码绑定/解绑', path: 'phone' },
|
|
|
+ { name: '关于我们', path: 'aboutUs' },
|
|
|
+ { name: '退出', path: 'logout' },
|
|
|
+ ];
|
|
|
+ function chooseSetMenu(path: string) {
|
|
|
+ chooseSetupItem.value = path;
|
|
|
+ console.log(path);
|
|
|
+ visible.value = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ return { visible, setMenu, chooseSetMenu };
|
|
|
+};
|
|
|
+// 搜索
|
|
|
+const onSearch = () => {
|
|
|
+ function search(value: string) {
|
|
|
+ console.log(value);
|
|
|
+ }
|
|
|
+ return { search };
|
|
|
+};
|
|
|
+export default defineComponent({
|
|
|
+ name: 'layout-top',
|
|
|
+ components: {
|
|
|
+ Setting,
|
|
|
+ UserOutlined,
|
|
|
+ CapitalInfo,
|
|
|
+ SecondMenu,
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const { collapsed, selectedKeys, openKeys, menuList, collapse, menuClick, fontIcon } = handleMenu();
|
|
|
+
|
|
|
+ const { visible, setMenu, chooseSetMenu } = setFn();
|
|
|
+ const username = APP.get('username');
|
|
|
+ const { search } = onSearch();
|
|
|
+ const searchName = ref<string[]>(['']);
|
|
|
+ return {
|
|
|
+ collapsed,
|
|
|
+ collapse,
|
|
|
+ selectedKeys,
|
|
|
+ openKeys,
|
|
|
+ menuClick,
|
|
|
+ username,
|
|
|
+ menuList,
|
|
|
+ visible,
|
|
|
+ setMenu,
|
|
|
+ chooseSetMenu,
|
|
|
+ fontIcon,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+.layout-top {
|
|
|
+ .flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ .m-layout-header {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background: @m-grey0;
|
|
|
+ color: @m-grey1;
|
|
|
+ padding: 0 20px;
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ .searchInput.ant-input-affix-wrapper {
|
|
|
+ width: 240px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ background: @m-grey9;
|
|
|
+ border: 0;
|
|
|
+ vertical-align: middle;
|
|
|
+ padding-left: 40px;
|
|
|
+ position: relative;
|
|
|
+ .rounded-corners(15px);
|
|
|
+ .ant-input {
|
|
|
+ background: @m-grey9;
|
|
|
+ color: @m-white0;
|
|
|
+ }
|
|
|
+ .ant-input-suffix {
|
|
|
+ margin-left: -215px;
|
|
|
+ .ant-input-search-icon {
|
|
|
+ color: @m-grey10;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .m-layout-header-right {
|
|
|
+ .flex();
|
|
|
+ .news-container {
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 16px;
|
|
|
+ .ant-badge {
|
|
|
+ margin-top: 7px;
|
|
|
+ cursor: pointer;
|
|
|
+ > svg {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ .ant-badge-dot {
|
|
|
+ box-shadow: 0 0 0 1px @m-red0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-avatar-icon {
|
|
|
+ margin-top: -3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .middleLayout {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ .inlineflex;
|
|
|
+ border-bottom: 1px solid @m-black2;
|
|
|
+ .m-layout-left {
|
|
|
+ position: relative;
|
|
|
+ background: @m-black4;
|
|
|
+ }
|
|
|
+ .left-menu {
|
|
|
+ height: 100%;
|
|
|
+ .menu-item_title {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ant-layout-sider-trigger {
|
|
|
+ position: absolute;
|
|
|
+ background: @m-black0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sliderLayout {
|
|
|
+ width: 100%;
|
|
|
+ height: 4px;
|
|
|
+ background: #242a2e;
|
|
|
+ border-top: 1px solid @m-grey5;
|
|
|
+ border-bottom: 1px solid @m-grey5;
|
|
|
+ position: relative;
|
|
|
+ .shortLine {
|
|
|
+ width: 30px;
|
|
|
+ height: 2px;
|
|
|
+ background: #4b5861;
|
|
|
+ border-radius: 1px;
|
|
|
+ .position(absolute, 50%, auto, auto, 50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottomLayout {
|
|
|
+ width: 100%;
|
|
|
+ flex: none;
|
|
|
+ height: @bottomHeight;
|
|
|
+ .inlineflex;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
huangbin