340 lines
9.1 KiB
Vue
340 lines
9.1 KiB
Vue
<template>
|
||
<div class="layout-header-warp">
|
||
<div class="layout-header">
|
||
<div class="layout-header-top">
|
||
<div class="layout-header-top-left">
|
||
<span class="welcome-msg">您好，欢迎来到现代农业产业运营平台</span>
|
||
<!-- <div class="left-link">
|
||
<div class="iconfont icon-bigScreen"></div>
|
||
<span>数据大屏</span>
|
||
</div>
|
||
<div class="left-link">
|
||
<div class="iconfont icon-operation" style="font-size: 12px"></div>
|
||
<span>产业运营管理</span>
|
||
</div> -->
|
||
</div>
|
||
<div class="layout-header-top-right">
|
||
<el-badge :hidden="goodNum < 1" :value="goodNum" :max="99" class="item" :offset="[-3, 10]">
|
||
<div style="display: flex" @click="toCart">
|
||
<div class="iconfont icon-shopcar" style="font-size: 14px; margin: 0 5px; color: #25bf82; font-weight: bold"></div>
|
||
<div>采购车</div>
|
||
</div>
|
||
</el-badge>
|
||
<el-badge :hidden="true" :value="0" :max="99" class="item" :offset="[-3, 10]">
|
||
<span>商家中心</span>
|
||
</el-badge>
|
||
<span @click="toUserCenter">个人中心</span>
|
||
<span class="block-icon" style="line-height: 28px" @click="toHome">
|
||
<el-tooltip effect="dark" content="退出" placement="bottom">
|
||
<img src="@/assets/images/quit.svg" style="width: 20px" alt="" />
|
||
</el-tooltip>
|
||
<!-- <div class="iconfont icon-home" style="font-size: 12px"></div>
|
||
<span>返回首页</span> -->
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="layout-header-bottom">
|
||
<div class="layout-header-bottom-left">
|
||
<div class="layout-header-bottom-search">
|
||
<div class="title">
|
||
<img :src="getAssetsFile('images/logo3.png')" />
|
||
</div>
|
||
<div class="search-warp">
|
||
<el-input v-model="keyword" placeholder="请输入关键词进行搜索"></el-input>
|
||
<el-button type="primary" @click="Search">搜索</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layout-header-bottom-right">
|
||
<div class="layout-header-bottom-right-qr">
|
||
<div class="layout-header-bottom-right-qr-img">
|
||
<img :src="getAssetsFile('images/basic/QRCodeZWY.png')" alt="" />
|
||
<p>政务云App</p>
|
||
</div>
|
||
<div class="layout-header-bottom-right-qr-img">
|
||
<img :src="getAssetsFile('images/basic/QRCodeYYY.png')" alt="" />
|
||
<p>运营云APP</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layout-header-menu">
|
||
<el-menu ellipsis class="layout-header-bottom-menu" mode="horizontal">
|
||
<app-link v-for="(item, index) in meuns" :key="index" :to="item.path" @click="clickMenu(item)">
|
||
<el-menu-item :style="{ color: activeLabel == item.label ? '#25BF82' : '' }">{{ item.label }}</el-menu-item>
|
||
</app-link>
|
||
</el-menu>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="layout-header">
|
||
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
|
||
import { qrImg } from './base64img';
|
||
import AppLink from '../Menu/Link.vue';
|
||
import { useRouter } from 'vue-router';
|
||
import { getAssetsFile } from '@/utils';
|
||
import { getGoodNum } from '@/apis/agricultural.js';
|
||
import { useMethodsStore } from '@/store/modules/methods';
|
||
import { useMenuStore } from '@/store/modules/menuStore';
|
||
|
||
const router = useRouter();
|
||
|
||
const keyword = ref('');
|
||
|
||
import menuList from './menu.js';
|
||
const meuns = ref(menuList);
|
||
|
||
const menuStore = useMenuStore();
|
||
const activeLabel = ref(menuStore.activeMenuLabel);
|
||
const clickMenu = (item) => {
|
||
menuStore.setMenuLabel(item.label);
|
||
menuStore.setMenuPath(item.path);
|
||
activeLabel.value = item.label;
|
||
};
|
||
watch(
|
||
() => menuStore.getMenuLabel(),
|
||
(newValue) => {
|
||
console.log('menuStore.getMenuLabel()', newValue);
|
||
activeLabel.value = newValue;
|
||
}
|
||
);
|
||
|
||
const goodNum = ref(0);
|
||
|
||
const methodsStore = useMethodsStore();
|
||
|
||
const getGoods = () => {
|
||
getGoodNum().then((res) => {
|
||
goodNum.value = res.data ? res.data : 0;
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
getGoods();
|
||
methodsStore.registerOuterMethod(getGoods);
|
||
});
|
||
|
||
// 组件卸载时清除方法
|
||
onBeforeUnmount(() => {
|
||
methodsStore.registerOuterMethod(null);
|
||
});
|
||
|
||
function Search() {
|
||
console.log(keyword.value, 'search');
|
||
}
|
||
|
||
const toHome = () => {
|
||
console.info('toHome', router);
|
||
window.location.href = '/';
|
||
};
|
||
|
||
const toUserCenter = () => {
|
||
console.info('toUserCenter', router);
|
||
router.push('/sub-operation-service/userCenter?from=userCenter');
|
||
};
|
||
|
||
const toCart = () => {
|
||
router.push('/sub-operation-service/shoppingCarts');
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.layout-header-warp {
|
||
width: 100%;
|
||
text-align: center;
|
||
background: $color-fff;
|
||
.layout-header-menu {
|
||
height: 50px;
|
||
width: 100%;
|
||
::v-deep() {
|
||
.el-menu {
|
||
justify-content: space-around;
|
||
border: none !important;
|
||
}
|
||
.el-menu-item {
|
||
font-size: 20px;
|
||
}
|
||
.el-menu-item:hover {
|
||
color: $color-main;
|
||
background: none !important;
|
||
}
|
||
.el-menu-item:active {
|
||
color: $color-main;
|
||
background: none !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.layout {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// box-sizing: border-box;
|
||
&-header {
|
||
overflow: hidden;
|
||
margin: auto;
|
||
width: 1200px;
|
||
// height: 206px;
|
||
&-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 32px;
|
||
height: 44px;
|
||
&-left {
|
||
line-height: 36px;
|
||
.welcome-msg {
|
||
font-size: 12px;
|
||
color: $color-5a;
|
||
}
|
||
.left-link {
|
||
display: inline-block;
|
||
margin: 0 10px;
|
||
font-size: 12px;
|
||
color: $color-main;
|
||
cursor: pointer;
|
||
.iconfont {
|
||
display: inline-block;
|
||
margin-right: 2px;
|
||
color: $color-main;
|
||
}
|
||
.iconfont,
|
||
span {
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
&-right {
|
||
span {
|
||
margin-left: 25px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
color: $color-000;
|
||
line-height: 36px;
|
||
cursor: pointer;
|
||
&:nth-child(1) {
|
||
margin-left: 0;
|
||
}
|
||
&.block-icon {
|
||
.iconfont {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
color: $color-main;
|
||
&.icon-shopcar {
|
||
font-size: 16px !important;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
span {
|
||
display: inline-block;
|
||
margin-left: 6px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
color: $color-main;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&-bottom {
|
||
display: flex;
|
||
padding: 0px 32px 0;
|
||
&-left {
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: calc(100% - 300px);
|
||
.layout-header-bottom-search {
|
||
display: flex;
|
||
align-items: center;
|
||
.title {
|
||
font-size: 45px;
|
||
white-space: nowrap;
|
||
img {
|
||
height: 70px;
|
||
}
|
||
}
|
||
.search-warp {
|
||
position: relative;
|
||
padding-left: 36px;
|
||
width: 80%;
|
||
.el-input {
|
||
width: 76%;
|
||
height: 50px;
|
||
font-size: 18px;
|
||
flex-grow: 1;
|
||
border-radius: 14px;
|
||
:deep(.el-input__wrapper) {
|
||
padding-right: 100px;
|
||
border-radius: 14px;
|
||
border: 1px solid rgb(49, 202, 141);
|
||
box-shadow: none !important; /* 移除默认的阴影边框 */
|
||
}
|
||
}
|
||
.el-button {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 11.8%;
|
||
border-radius: 12px;
|
||
padding: 0 24px;
|
||
height: 43px;
|
||
font-size: 18px;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
}
|
||
.layout-header-bottom-menu {
|
||
justify-content: space-around;
|
||
border: none;
|
||
.el-menu-item {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
&-right {
|
||
margin-top: -10px;
|
||
padding-left: 20px;
|
||
width: 240px;
|
||
p {
|
||
text-align: center;
|
||
}
|
||
&-qr {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
&-img {
|
||
img {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
p {
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&-main {
|
||
width: 100%;
|
||
height: calc(100% - 206px);
|
||
background-color: #f8f8f8;
|
||
}
|
||
}
|
||
.layout-header-bottom-right {
|
||
margin-top: 0;
|
||
}
|
||
.layout-header-top-right {
|
||
display: flex;
|
||
.item {
|
||
margin-left: 25px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
color: $color-000;
|
||
line-height: 36px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
</style>
|