dy-admin-manager/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="left-menu">
      <i class='el-icon-location-information topIcon'></i>

      <el-popover placement="top-start"
                  width="300"
                  trigger="hover">
        <div class="popover-container">
          <!-- <p style="color: red">{{ organName }}</p> -->
          <el-tag class="navbar_tag" type="info" v-for="item in organNameList" :key="item">{{ item }}</el-tag>
        </div>
        <span slot="reference">{{ organName.length > 10 ? organName.substr(0, 10) + '...' : organName}}</span>
      </el-popover>
    </div>
    <div class="right-menu">
      <div class="msginfo"
           v-permission="'/journals'"
           @click="gotoRecode">
       <img src='@/assets/images/base/base-bell.svg'/>
        <!-- <div class="active"></div> -->
      </div>
      <el-dropdown class="avatar-container"
                   trigger="click">

        <div class="avatar-wrapper">
          <img v-if="$store.getters.avatar"
               :src="$store.getters.avatar"
               class="user-avatar" />
          <img v-else
          class="user-avatar"
               src="@/assets/images/base/placehorder-icon.png" />
          <!-- <i class="el-icon-caret-bottom" /> -->
          <span>{{ username }}</span>
        </div>
        <el-dropdown-menu slot="dropdown"
                          class="user-dropdown">
          <!-- divided -->

          <el-dropdown-item>
            <span style="display:block;"
                  @click="resetPassWord">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span style="display:block;"
                  @click="logout">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>

      </el-dropdown>
    </div>
    <el-dialog title="修改密码"
               width="500px"
               append-to-body
               :visible.sync="resetVisible">
      <el-form :model="resetForm"
               label-position='right'
               label-width="100px"
               ref='pwdForm'>
        <el-form-item label="手机号"
                      prop="phone">
          <div>{{this.$store.getters.phone}}</div>
        </el-form-item>
        <el-form-item label="新密码"
                      :rules="[{ required: true, message: '密码不能为空',trigger: 'blur'},{pattern:/^[\w]{6,20}$/,message:'密码为6-20位',trigger: 'blur'}]"
                      prop="password">
          <el-input v-model.trim="resetForm.password"
                    type='password'
                    style="width:180px"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="再次输入"
                      :rules="[{ required: true, message: '密码不能为空',trigger: 'blur'},{pattern:/^[\w]{6,20}$/,message:'密码为6-20位',trigger: 'blur'}]"
                      prop="password2">
          <el-input v-model.trim="resetForm.password2"
                    type='password'
                    style="width:180px"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码"
                      :rules="[{ required: true, message: '验证码不能为空',trigger: 'blur'}]"
                      prop="authCode"
                      style="">
          <el-input v-model.trim="resetForm.authCode"
                    style="width:180px"
                    autocomplete="off"></el-input>
          <el-button :disabled="isDisable"
                     @click="getCode">{{ btnName }}</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="resetVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitResetPassWord">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import { mapGetters } from "vuex";
// import Breadcrumb from '@/components/Breadcrumb'
// import Hamburger from '@/components/Hamburger'
import { resetPassword } from '@/api/buildTeam'
export default {
  data () {
    return {
      username: '',
      organName: this.$store.getters.organName,
      organNameList: [],
      resetVisible: false,
      resetForm: {
        phone: '',
        authCode: '',
        password: '',
        password2: ''
      },
      isDisable: false, // 是否允许发送验证码
      timerCount: 60,
      btnName: '获取验证码'
    }
  },
  components: {
    // Breadcrumb,
    // Hamburger
  },
  computed: {
    ...mapGetters(["sidebar", "avatar"])
  },
  mounted () {
    // 手动加入
    this.toggleSideBar();
    this.username = this.$store.getters.name;
    this.organNameList = this.organName.split(',')
  },
  methods: {
    toggleSideBar () {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout () {
      await this.$store.dispatch("user/logout");
      // await this.$store.dispatch("permission/removePermission")
      this.$router.push(`/login`);
      window.location.reload()

    },
    gotoRecode () {
      this.$router.push('/journal/journal')
    },
    resetPassWord () {
      this.resetVisible = true;
    },
    submitResetPassWord () {
      if (this.resetForm.password !== this.resetForm.password2) {
        this.$message.error('两次密码必须相同')
        return
      }
      this.$refs['pwdForm'].validate(res => {
        if (res) {
          // 发请求
          resetPassword({ authCode: this.resetForm.authCode, mobile: this.$store.getters.phone, newPassword: this.resetForm.password }).then(res => {
            if (res.code == 200) {
              // 修改成功
              this.$message.success('修改成功')
              this.logout()
            }
          })
        }
      })
    },
    getCode () {
      // 获取验证码
      if (!this.$store.getters.phone) {
        this.$message.error('请输入正确的手机号')
        return
      }
      if (!this.isDisable) {
        this.isDisable = true;
        // 发请求成功后开启定时器
        // 发送验证码
        axios.post('/api-web/code/sendSms', qs.stringify({ mobile: this.$store.getters.phone })).then(res => {
          if (res.data.code == 200) {
            let timer = setInterval(res => {
              if (this.timerCount <= 0) {
                clearInterval(timer)
                this.isDisable = false;
                this.btnName = '获取验证码';
                this.timerCount = 60;
              } else {
                this.timerCount--;
                this.btnName = `${this.timerCount}s后重试`
              }
            }, 1000)
          }
        })

      }
    }
  },
  watch: {
    resetVisible (val) {
      if (!val) {
        this.resetForm = {
          phone: '',
          authCode: '',
          password: '',
          password2: ''
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.navbar_tag {
  margin: 0 5px 8px;
}
.popover-container {
  max-height: 350px;
  overflow-y: scroll;
}
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 60px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
  h2 {
    font-size: 18px;
    line-height: 60px;
    margin: 0 0 0 30px;
    display: inline-block;
  }
  .hamburger-container {
    line-height: 60px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }
  .left-menu {
    line-height: 60px;
    padding-left: 22px;
    font-size: 16px;
    color: #444;
    .topIcon {
      width: 20px;
      height: 25px;
    }
  }
  .right-menu {
    min-width: 204px;
    float: right;
    height: 100%;
    line-height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    &:focus {
      outline: none;
    }
    .msginfo {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-right: 34px;
      position: relative;
      cursor: pointer;
      img {
        width: 23px;
        height: 30px;
      }
      .active {
        position: absolute;
        width: 7px;
        height: 7px;
        background-color: #f97215;
        border-radius: 50%;
        top: 20px;
        right: -4px;
      }
    }
    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 14px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      height: 60px;
      margin-right: 42px;
      cursor: pointer;

      .avatar-wrapper {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        span {
          margin-left: 15px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
        }

        .user-avatar {
          cursor: pointer;
          width: 32px;
          height: 32px;
          border: 2px solid #f0f2f5;
          border-radius: 50%;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>