422 lines
11 KiB
Vue
422 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<!-- menu缩进按钮 -->
|
|
<div class="w-50px h-50px fc l" id="menuTabB" @click="handleCollapse">
|
|
<i
|
|
class="iconfont f-s-26"
|
|
:class="isCollapse ? 'icon-a-yousuojin3x' : 'icon-a-zuosuojin3x'"
|
|
></i>
|
|
</div>
|
|
<!-- 面包屑 -->
|
|
<Breadcrumb class="l l-h-50 m-l-5" />
|
|
<!-- 头像 -->
|
|
<div class="right-menu m-r-5">
|
|
<el-dropdown class="avatar-container" trigger="click">
|
|
<div class="avatar-wrapper">
|
|
<img
|
|
v-if="
|
|
avatar.indexOf('.jpg') !== -1 ||
|
|
avatar.indexOf('.gif') !== -1 ||
|
|
avatar.indexOf('.png') !== -1
|
|
"
|
|
:src="avatar + '?imageView2/1/w/80/h/80'"
|
|
class="user-avatar"
|
|
/>
|
|
<el-avatar v-else size="medium" icon="el-icon-user-solid"></el-avatar>
|
|
<i class="el-icon-caret-bottom"></i>
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
|
<el-dropdown-item divided @click.native="logout">
|
|
<span style="display: block">退出登录</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
<!-- 页面刷新 -->
|
|
<div class="l-h-50 p-r-15 r">
|
|
<el-button
|
|
size="small"
|
|
icon="iconfont icon-shuaxin"
|
|
@click="refreshPage"
|
|
circle
|
|
></el-button>
|
|
</div>
|
|
<!-- 订单信息按钮 -->
|
|
<el-badge
|
|
:hidden="
|
|
pendingCount + processingCount + shippedCount + requestedCount == 0
|
|
? true
|
|
: false
|
|
"
|
|
:value="pendingCount + processingCount + shippedCount + requestedCount"
|
|
class="navbarBadge l-h-50 p-r-15 r"
|
|
>
|
|
<el-button
|
|
:type="
|
|
pendingCount + processingCount + shippedCount + requestedCount !== 0
|
|
? 'primary'
|
|
: ''
|
|
"
|
|
@click="drawer = true"
|
|
size="small"
|
|
:icon="orderIcon"
|
|
circle
|
|
></el-button>
|
|
</el-badge>
|
|
<el-drawer
|
|
:custom-class="$store.state.app.isWideScreen ? 'el-drawer-small' : 'el-drawer-large'"
|
|
:visible.sync="drawer"
|
|
:size="$store.state.app.isWideScreen ? '90%' : '60%'"
|
|
:append-to-body="true"
|
|
:modal-append-to-body="false"
|
|
:direction="$store.state.app.isWideScreen ? 'btt' : 'rtl'"
|
|
>
|
|
<template slot="title">
|
|
<div>
|
|
<i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i>
|
|
<h3>待处理订单</h3>
|
|
</div>
|
|
</template>
|
|
<el-button-group class="m-l-20 m-b-15">
|
|
<SelectionShopId v-model="shop_id" />
|
|
</el-button-group>
|
|
<el-tabs type="border-card">
|
|
<el-tab-pane>
|
|
<template slot="label">
|
|
<span>未接单</span>
|
|
<el-badge
|
|
:hidden="pendingCount == 0 ? true : false"
|
|
:value="pendingCount"
|
|
>
|
|
</el-badge>
|
|
</template>
|
|
<QuestTabs :list="pendingList" type = "未接单"/>
|
|
</el-tab-pane>
|
|
<el-tab-pane>
|
|
<template slot="label">
|
|
<span>已接单</span>
|
|
<el-badge
|
|
:hidden="processingCount == 0 ? true : false"
|
|
:value="processingCount"
|
|
>
|
|
</el-badge>
|
|
</template>
|
|
<QuestTabs :list="processingList" type = "已接单"/>
|
|
</el-tab-pane>
|
|
<el-tab-pane>
|
|
<template slot="label">
|
|
<span>已发货</span>
|
|
<el-badge
|
|
:hidden="shippedCount == 0 ? true : false"
|
|
:value="shippedCount"
|
|
>
|
|
</el-badge>
|
|
</template>
|
|
<QuestTabs :list="shippedList" type = "已发货" @close-drawer="drawer = false"/>
|
|
</el-tab-pane>
|
|
<el-tab-pane>
|
|
<template slot="label">
|
|
<span>退款申请中</span>
|
|
<el-badge
|
|
:hidden="requestedCount == 0 ? true : false"
|
|
:value="requestedCount"
|
|
>
|
|
</el-badge>
|
|
</template>
|
|
<QuestTabs :list="requestedList" type = "退款申请中"/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-drawer>
|
|
<!-- mqtt状态灯 -->
|
|
<div class="l-h-50 p-r-15 r">
|
|
<el-button
|
|
size="small"
|
|
:type="mqttState === true ? 'success' : 'danger'"
|
|
:icon="
|
|
mqttState === true
|
|
? 'iconfont icon-yaokong2'
|
|
: 'iconfont icon-yaokong2-copy'
|
|
"
|
|
circle
|
|
@click="
|
|
mqttState === true
|
|
? $message.success('指令服务器链接正常')
|
|
: $message.error('未链接到指令服务器')
|
|
"
|
|
></el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Breadcrumb from '@/components/Breadcrumb'
|
|
import QuestTabs from '@/components/QuestTabs'
|
|
import SelectionShopId from '@/components/SelectionShopId'
|
|
import { speakText } from '@/utils/index'
|
|
import mqtt from '@/utils/mqtt'
|
|
|
|
export default {
|
|
name: 'Headbar',
|
|
data () {
|
|
return {
|
|
shop_id: this.$store.state.user.shop_id, // 商铺id(默认为本店) 过滤条件
|
|
drawer: false,
|
|
getQuestInterval: null, // 用于销毁时间轴
|
|
animationTrumpet: true // 喇叭动画
|
|
}
|
|
},
|
|
components: {
|
|
Breadcrumb,
|
|
QuestTabs,
|
|
SelectionShopId
|
|
},
|
|
computed: {
|
|
/**
|
|
* @description: 侧边栏显隐
|
|
*/
|
|
isCollapse () {
|
|
return this.$store.state.app.isCollapse
|
|
},
|
|
/**
|
|
* @description: mqtt服务器连接状态
|
|
*/
|
|
mqttState () {
|
|
return this.$store.state.app.mqttState
|
|
},
|
|
/**
|
|
* @description: 用户头像地址
|
|
*/
|
|
avatar () {
|
|
return this.$store.state.settings.photoPath + this.$store.state.user.photo
|
|
},
|
|
/**
|
|
* @description: 获取 已付款 和已退款但是发货状态为 已发货 订单列表
|
|
*/
|
|
paidOrderList () {
|
|
return this.$store.state.paidOrderList.filter(
|
|
(item) => item.shop_id === this.shop_id
|
|
)
|
|
},
|
|
/**
|
|
* @description: 过滤 未接单 并且没有申请退款的 订单
|
|
*/
|
|
pendingList () {
|
|
return this.paidOrderList.filter(
|
|
(item) =>
|
|
item.main_status === '已付款' &&
|
|
item.shipment_status === '未接单' &&
|
|
item.refund_status !== '申请中'
|
|
)
|
|
},
|
|
/**
|
|
* @description: 未接单 总数
|
|
*/
|
|
pendingCount () {
|
|
return this.pendingList.length
|
|
},
|
|
/**
|
|
* @description: 过滤 已接单 并且没有申请退款的 订单
|
|
*/
|
|
processingList () {
|
|
return this.paidOrderList.filter(
|
|
(item) =>
|
|
item.main_status === '已付款' &&
|
|
item.shipment_status === '已接单' &&
|
|
item.refund_status !== '申请中'
|
|
)
|
|
},
|
|
/**
|
|
* @description: 已接单 总数
|
|
*/
|
|
processingCount () {
|
|
return this.processingList.length
|
|
},
|
|
/**
|
|
* @description: 过滤 已发货 并且没有申请退款的 订单
|
|
*/
|
|
shippedList () {
|
|
return this.paidOrderList.filter(
|
|
(item) =>
|
|
item.shipment_status === '已发货'
|
|
)
|
|
},
|
|
/**
|
|
* @description: 已发货 总数
|
|
*/
|
|
shippedCount () {
|
|
return this.shippedList.length
|
|
},
|
|
/**
|
|
* @description: 过滤 退款申请中 订单
|
|
*/
|
|
requestedList () {
|
|
return this.paidOrderList.filter(
|
|
(item) => item.refund_status === '申请中'
|
|
)
|
|
},
|
|
/**
|
|
* @description: 退款申请中 总数
|
|
*/
|
|
requestedCount () {
|
|
return this.requestedList.length
|
|
},
|
|
/**
|
|
* @description: 面包条 订单图标动画
|
|
* @return {*} 图标样式
|
|
*/
|
|
orderIcon () {
|
|
if (
|
|
this.pendingCount +
|
|
this.processingCount +
|
|
this.shippedCount +
|
|
this.requestedCount ===
|
|
0
|
|
) {
|
|
return 'iconfont icon-meiyoudingdan-01'
|
|
} else {
|
|
if (this.animationTrumpet) {
|
|
return 'iconfont icon-tongzhi'
|
|
} else {
|
|
return 'iconfont icon-jinjidingdan'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
speakText,
|
|
/**
|
|
* @description: 切换侧边栏 显隐
|
|
*/
|
|
handleCollapse () {
|
|
this.$store.commit('app/setCollapse')
|
|
},
|
|
/**
|
|
* @description: 计算订单数量 订单变化播放声音 显示在图标右上角小红圈内
|
|
*/
|
|
computeQuestList () {},
|
|
/**
|
|
* @description: 刷新当前页面
|
|
*/
|
|
refreshPage () {
|
|
/* init 数据接口 */
|
|
this.$store.commit('app/setIsMobile') // 获取客户端平台类型
|
|
this.$store.dispatch('fetchAirList') // 获取飞机列表
|
|
this.$store.dispatch('fetchShopList') // 获取商铺列表
|
|
this.$store.dispatch('fetchAdminList') // 获取管理员列表
|
|
this.$store.dispatch('fetchSiteList') // 获取站点列表
|
|
this.$store.dispatch('fetchRouteList') // 获取航线列表
|
|
this.$store.dispatch('fetchCategoryList') // 获取分类列表（小程序）
|
|
this.$store.dispatch('fetchPaidOrderList') // 获取订单列表
|
|
/* 向飞发送 让飞控刷新各种请求 */
|
|
this.$store.state.airList.forEach(item => {
|
|
mqtt.publishFun(`cmd/${item.macadd}`, '{"refreshRequest":1}')
|
|
})
|
|
},
|
|
/**
|
|
* @description: 登出
|
|
*/
|
|
logout () {
|
|
this.$store
|
|
.dispatch('user/destroyUserAsync')
|
|
.then(this.$router.push('/login'))
|
|
}
|
|
},
|
|
watch: {
|
|
paidOrderList: {
|
|
handler (newVal, oldVal) {
|
|
// 面包条订单图标跳动
|
|
if (this.getQuestInterval !== null) {
|
|
clearInterval(this.getQuestInterval)
|
|
}
|
|
if (newVal.length > 0) {
|
|
// 订单更新时 订单数大于0 面包条订单图标跳动
|
|
this.getQuestInterval = setInterval(() => {
|
|
this.animationTrumpet = !this.animationTrumpet // 面包条订单图标跳动
|
|
}, 500)
|
|
}
|
|
// 播报新的订单
|
|
if (newVal.length > oldVal.length) {
|
|
this.speakText('有新的订单')
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
requestedCount: {
|
|
handler (newVal, oldVal) {
|
|
// 播报退款订单
|
|
if (newVal.length > oldVal.length) {
|
|
this.speakText('有订单申请退款')
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created () {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/styles/theme.scss';
|
|
|
|
#menuTabB:hover {
|
|
background-color: $white-color;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.el-dropdown-menu {
|
|
span {
|
|
color: $maintext-color;
|
|
}
|
|
}
|
|
|
|
.right-menu {
|
|
float: right;
|
|
height: 100%;
|
|
line-height: 50px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.right-menu-item {
|
|
display: inline-block;
|
|
padding: 0 8px;
|
|
height: 100%;
|
|
font-size: 18px;
|
|
vertical-align: text-bottom;
|
|
|
|
&.hover-effect {
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.025);
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-container {
|
|
margin-right: 30px;
|
|
|
|
.avatar-wrapper {
|
|
margin-top: 5px;
|
|
position: relative;
|
|
|
|
.user-avatar {
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.el-icon-caret-bottom {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 25px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|