|
|
@@ -3,121 +3,129 @@
|
|
|
<div class="logo">
|
|
|
<img :src="logo" alt="logo" @click="goSiteHome">
|
|
|
</div>
|
|
|
- <div class="nav-group">
|
|
|
- <div
|
|
|
- class="nav-item"
|
|
|
- :class="nav.class"
|
|
|
- v-for="(nav, index) in navs"
|
|
|
- :key="index"
|
|
|
- @click="onSelectNav(nav)"
|
|
|
- >
|
|
|
- <template v-if="nav.plugin">
|
|
|
- <navbar-item :badge="nav.badge" :svg="nav.svg" :nav="nav" v-popover:[nav.plugin]></navbar-item>
|
|
|
- </template>
|
|
|
- <navbar-item :badge="nav.badge" :svg="nav.svg" :nav="nav" v-else></navbar-item>
|
|
|
- </div>
|
|
|
- <el-popover
|
|
|
- popper-class="nav-popover"
|
|
|
- ref="navInfo"
|
|
|
- placement="bottom"
|
|
|
- trigger="hover"
|
|
|
- :visible-arrow="false"
|
|
|
- >
|
|
|
- <div class="nav-user-info-group">
|
|
|
- <navbar-item :nav="{ icon: userInfo.avatar }" mode="vertical">
|
|
|
- <div class="info-group">
|
|
|
- <span v-if="userInfo.name">{{userInfo.name}}</span>
|
|
|
- <span v-if="userInfo.phone">{{userInfo.phone}}</span>
|
|
|
- </div>
|
|
|
- </navbar-item>
|
|
|
- <button @click="onClickOut">退出登录</button>
|
|
|
+ <div class="navbar-content-group">
|
|
|
+ <!-- 头部搜索模块 -->
|
|
|
+ <navbar-search class="search-module"></navbar-search>
|
|
|
+ <div class="nav-group">
|
|
|
+ <div
|
|
|
+ class="nav-item"
|
|
|
+ :class="nav.class"
|
|
|
+ v-for="(nav, index) in navs"
|
|
|
+ :key="index"
|
|
|
+ @click="onSelectNav(nav)"
|
|
|
+ >
|
|
|
+ <template v-if="nav.plugin">
|
|
|
+ <navbar-item :badge="nav.badge" :svg="nav.svg" :nav="nav" v-popover:[nav.plugin]></navbar-item>
|
|
|
+ </template>
|
|
|
+ <navbar-item :badge="nav.badge" :svg="nav.svg" :nav="nav" v-else></navbar-item>
|
|
|
</div>
|
|
|
- </el-popover>
|
|
|
- <el-popover
|
|
|
- popper-class="nav-popover"
|
|
|
- ref="navCustomer"
|
|
|
- placement="bottom"
|
|
|
- trigger="hover"
|
|
|
- :visible-arrow="false"
|
|
|
- >
|
|
|
- <div class="nav-custom-info-group">
|
|
|
- <div class="info-item" v-if="hasExclusiveCustomer">
|
|
|
- <div class="after-tag-box recommend-tag">推荐</div>
|
|
|
- <navbar-item :nav="{ label: '专属客服：' + exclusiveCustomerInfo.name, icon: 'icon-weixin_line' }"></navbar-item>
|
|
|
- <navbar-item
|
|
|
- class="qrcode-group"
|
|
|
- :nav="{
|
|
|
+ <el-popover
|
|
|
+ popper-class="nav-popover"
|
|
|
+ ref="navInfo"
|
|
|
+ placement="bottom"
|
|
|
+ trigger="hover"
|
|
|
+ :visible-arrow="false"
|
|
|
+ >
|
|
|
+ <div class="nav-user-info-group">
|
|
|
+ <navbar-item :nav="{ icon: userInfo.avatar }" mode="vertical">
|
|
|
+ <div class="info-group">
|
|
|
+ <span v-if="userInfo.name">{{userInfo.name}}</span>
|
|
|
+ <span v-if="userInfo.phone">{{userInfo.phone}}</span>
|
|
|
+ </div>
|
|
|
+ </navbar-item>
|
|
|
+ <button @click="onClickOut">退出登录</button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ popper-class="nav-popover"
|
|
|
+ ref="navCustomer"
|
|
|
+ placement="bottom"
|
|
|
+ trigger="hover"
|
|
|
+ :visible-arrow="false"
|
|
|
+ >
|
|
|
+ <div class="nav-custom-info-group">
|
|
|
+ <div class="info-item" v-if="hasExclusiveCustomer">
|
|
|
+ <div class="after-tag-box recommend-tag">推荐</div>
|
|
|
+ <navbar-item :nav="{ label: '专属客服：' + exclusiveCustomerInfo.name, icon: 'icon-weixin_line' }"></navbar-item>
|
|
|
+ <navbar-item
|
|
|
+ class="qrcode-group"
|
|
|
+ :nav="{
|
|
|
label: '微信扫一扫',
|
|
|
icon: exclusiveCustomerInfo.qrcode
|
|
|
}"
|
|
|
- mode="vertical"
|
|
|
- >
|
|
|
- </navbar-item>
|
|
|
- </div>
|
|
|
- <div class="info-item" @click="onClickCustomer('在线咨询')">
|
|
|
- <navbar-item :nav="{ label: '在线咨询', icon: 'icon-kefu_xian' }" :svg="true"></navbar-item>
|
|
|
- </div>
|
|
|
- <div class="info-item" @click="onClickCustomer('客服热线')">
|
|
|
- <navbar-item :nav="{ label: '客服热线：400-108-6670', icon: 'icon-telphone_line' }"></navbar-item>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
- <el-popover
|
|
|
- popper-class="nav-popover"
|
|
|
- ref="navMessage"
|
|
|
- placement="bottom"
|
|
|
- trigger="hover"
|
|
|
- :visible-arrow="false"
|
|
|
- >
|
|
|
- <div class="nav-message-group">
|
|
|
- <div class="message-header">
|
|
|
- <div class="title">
|
|
|
- 消息中心 <span>（<span class="highlight-text">{{messageCount}}</span> 条未读）</span>
|
|
|
+ mode="vertical"
|
|
|
+ >
|
|
|
+ </navbar-item>
|
|
|
+ </div>
|
|
|
+ <div class="info-item" @click="onClickCustomer('在线咨询')">
|
|
|
+ <navbar-item :nav="{ label: '在线咨询', icon: 'icon-kefu_xian' }" :svg="true"></navbar-item>
|
|
|
+ </div>
|
|
|
+ <div class="info-item" @click="onClickCustomer('客服热线')">
|
|
|
+ <navbar-item :nav="{ label: '客服热线：400-108-6670', icon: 'icon-telphone_line' }"></navbar-item>
|
|
|
</div>
|
|
|
- <JyIcon @click="closeMessagePopover" name="close"></JyIcon>
|
|
|
</div>
|
|
|
- <div class="message-group" v-if="messageList.length">
|
|
|
- <div
|
|
|
- v-for="(message, index) in messageList"
|
|
|
- :key="index"
|
|
|
- class="message-item"
|
|
|
- @click="onClickMessage(message)"
|
|
|
- >
|
|
|
- <el-badge :isDot="!message.read" class="message-icon">
|
|
|
- <img :src="message.icon" alt="icon">
|
|
|
- </el-badge>
|
|
|
- <div class="message-content">
|
|
|
- <div class="message-content--header">
|
|
|
- <div class="message-content--title ellipsis">
|
|
|
- {{message.title}}
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ popper-class="nav-popover"
|
|
|
+ ref="navMessage"
|
|
|
+ placement="bottom"
|
|
|
+ trigger="hover"
|
|
|
+ :visible-arrow="false"
|
|
|
+ >
|
|
|
+ <div class="nav-message-group">
|
|
|
+ <div class="message-header">
|
|
|
+ <div class="title">
|
|
|
+ 消息中心 <span>（<span class="highlight-text">{{messageCount}}</span> 条未读）</span>
|
|
|
+ </div>
|
|
|
+ <JyIcon @click="closeMessagePopover" name="close"></JyIcon>
|
|
|
+ </div>
|
|
|
+ <div class="message-group" v-if="messageList.length">
|
|
|
+ <div
|
|
|
+ v-for="(message, index) in messageList"
|
|
|
+ :key="index"
|
|
|
+ class="message-item"
|
|
|
+ @click="onClickMessage(message)"
|
|
|
+ >
|
|
|
+ <el-badge :isDot="!message.read" class="message-icon">
|
|
|
+ <img :src="message.icon" alt="icon">
|
|
|
+ </el-badge>
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="message-content--header">
|
|
|
+ <div class="message-content--title ellipsis">
|
|
|
+ {{message.title}}
|
|
|
+ </div>
|
|
|
+ <div class="message-content--time">
|
|
|
+ {{message.time}}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="message-content--time">
|
|
|
- {{message.time}}
|
|
|
+ <div class="message-content--content">
|
|
|
+ {{message.content}}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="message-content--content">
|
|
|
- {{message.content}}
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <empty-tip v-else tip="暂未接收到信息"></empty-tip>
|
|
|
+ <button @click="onClickMessageAll">查看全部</button>
|
|
|
</div>
|
|
|
- <empty-tip v-else tip="暂未接收到信息"></empty-tip>
|
|
|
- <button @click="onClickMessageAll">查看全部</button>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import NavbarItem from './components/item'
|
|
|
+import NavbarSearch from './components/search'
|
|
|
import { mapActions, mapGetters, mapState } from 'vuex'
|
|
|
import EmptyTip from '../Empty'
|
|
|
|
|
|
export default {
|
|
|
name: 'header-navbar',
|
|
|
components: {
|
|
|
+ NavbarSearch,
|
|
|
[NavbarItem.name]: NavbarItem,
|
|
|
+ [NavbarSearch.name]: NavbarSearch,
|
|
|
[EmptyTip.name]: EmptyTip
|
|
|
},
|
|
|
created () {
|
|
|
@@ -543,7 +551,9 @@ export default {
|
|
|
z-index: 50;
|
|
|
@extend .flex-horizontal;
|
|
|
justify-content: space-between;
|
|
|
- padding: 16px 36px;
|
|
|
+ min-height: 64px;
|
|
|
+ min-width: 800px;
|
|
|
+ padding: 0 36px;
|
|
|
box-sizing: border-box;
|
|
|
background-color: #ffffff;
|
|
|
box-shadow: 0px 2px 8px -1px rgba(0,0,0,0.0800);
|
|
|
@@ -567,6 +577,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .navbar-content-group {
|
|
|
+ @extend .flex-horizontal;
|
|
|
+ flex: 1;
|
|
|
+ justify-content: space-between;
|
|
|
+ .search-module {
|
|
|
+ margin-left: 82px;
|
|
|
+ margin-right: 16px;
|
|
|
+ flex: 1;
|
|
|
+ max-width: 440px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.nav-group {
|
|
|
@extend .flex-horizontal;
|
|
|
font-size: 16px;
|
