food/src/views/layout/components/headbar.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 :visible.sync="drawer" size="60%" :append-to-body="true" :modal-append-to-body="false">
      <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" />
        </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" />
        </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" />
        </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" />
        </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'

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.main_status === '已付款' && item.shipment_status === '已发货' && item.refund_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')// 获取订单列表
    },
    /**
     * @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: $border4-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 .3s;

      &:hover {
        background: rgba(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>