yikangyang-web/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb class="breadcrumb-container" />

    <div class="right-menu">
      <el-dropdown
              class="message-container"
              trigger="click"
              :hide-on-click="false"
            >
              <div class="message-wrapper">
                <el-badge :value="noticeData.length>0?noticeData.length:''" :max="99" class="item">
                  <i class="el-icon-chat-dot-square" />
                  <span>消息中心</span>
                </el-badge>

              </div>
              <template v-slot:dropdown>
                <el-dropdown-menu class="message-dropdown">
                  <template v-if="noticeData.length > 0">
                    <template v-for="(item, index) in noticeData">
                      <el-dropdown-item :divided="!index">
                        <div style="display: flex; align-items: center">
                            <div>
                              {{item.created_at}}-用户下单
                            </div>
                            <div>
                              <Button
                                style="margin-left: 10px;"
                                size="small"
                                :type="'primary'"
                                @click="goOrder(item)"
                              >查看订单</Button>
                            </div>
                          <!-- <Button
                            style="margin-left: 10px;"
                            size="small"
                            :type="'primary'"
                            @click="goOrder(value)"
                          >查看订单</Button> -->
                          <div>
                            <Button
                              style="margin-left: 10px;"
                              size="small"
                              :type="item.read_at ? 'success' : 'primary'"
                              :icon="item.read_at ? 'md-checkmark' : 'ios-create-outline'"
                              @click="toggleMessage(item)"
                            >{{ item.read_at ? "已读" : "标为已读" }}</Button
                            >
                          </div>

                        </div>
                      </el-dropdown-item>
                    </template>
                    <!-- <li>查看更多消息</li> -->
                  </template>
                  <template v-else>
                    <div style="text-align: center;color: rgb(140,140,140);padding: 10px 0;">暂无通知</div>
                  </template>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img src="../../assets/face.jpg" class="user-avatar">
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/">
            <el-dropdown-item>
              系统首页
            </el-dropdown-item>
          </router-link>
          <router-link to="/info/password">
            <el-dropdown-item>
              个人信息
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import Breadcrumb from '@/components/Breadcrumb'
  import Hamburger from '@/components/Hamburger'
import { getNotice, toggleRead } from "@/api/notice";
  export default {
    components: {
      Breadcrumb,
      Hamburger
    },
    data(){
      return{
        noticeData:[]
      }
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'avatar'
      ])
    },
    mounted() {
      this.getNotice();
    },
    methods: {
      toggleSideBar() {
        this.$store.dispatch('app/toggleSideBar')
      },
      async logout() {
        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      },
      toggleMessage(item){
        if(item.read_at) return
        toggleRead({
          id:item.id
        }).then(res => {
          this.$message({
            type:'success',
            message:res?.msg || "成功"
          })
          this.getNotice()
        })
      },

      async getNotice() {
        let res = await getNotice({
          page:1,
          page_size:99,
        });
        console.log(res);
        this.noticeData = res.list.data;
      },
      goOrder(item){
        this.$router.push("/accompany-order?order_id="+item.data.order_id);
      }
    }
  }
</script>
<style scoped>
  /deep/ .el-badge__content.is-fixed{
    top:13px;
  }
  .el-dropdown-menu.el-popper.message-dropdown{
      max-height:400px;
      overflow: auto;
  }
</style>
<style lang="scss" scoped>
  .navbar {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

    .hamburger-container {
      line-height: 46px;
      height: 100%;
      float: left;
      cursor: pointer;
      transition: background .3s;
      -webkit-tap-highlight-color: transparent;

      &:hover {
        background: rgba(0, 0, 0, .025)
      }
    }

    .breadcrumb-container {
      float: left;
    }

    .right-menu {
      float: right;
      height: 100%;
      line-height: 50px;
      display: flex;
      align-items: center;
      &:focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #5a5e66;
        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;
          }
        }
      }
      .message-container {
        margin-right: 20px;

        .message-wrapper {
          height: 100%;

          padding: 0 6px;
          i {
            font-weight: 600;
          }
          span {
            font-weight: 600;

            padding-left: 6px;
          }
        }
      }
    }
  }
</style>