channels_web/src/components/topbar.vue

<template>
  <div class="topbarall flex column">
  <div class="flex align-center topbar">
    <div class="title">
      <i :class="[pageicon, 'iconfont']"></i>
      {{pageTitle}}
      </div>
    <el-dropdown class="ml20">
      <span class="el-dropdown-link flex align-center">
        {{userName}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <!-- <el-dropdown-item @click.native="resetPassword">修改密码</el-dropdown-item> -->
        <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <!-- 修改密码 -->
    <dialog-tel
      dialogTitle="修改密码"
      :visible.sync="dialogVisible"
      @closeDialog="handleClose"
      @saveDialog="submit"
      dialogWidth="500px"
    >
      <el-form :model="form" ref="form" label-width="100px">
        <el-form-item label="原密码" prop="oldPassword" :rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
          <el-input v-model="form.oldPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password" :rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="请重复密码" prop="copyPassword" :rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
          <el-input v-model="form.copyPassword" type="password"></el-input>
        </el-form-item>
      </el-form>
    </dialog-tel>
  </div>
  <div class="line"></div>
  </div>
</template>

<script>
  import store from '@/store/index'
  import dialogTel from '@/components/dialog.vue';
  import {
    logout
  } from "@/api/login";
  export default {
    name: "index",
    computed:{
        pageTitle() {
          if(store.getters?.getMenuInfo?.meta?.title){
            return store.getters.getMenuInfo.meta.title
          }else{
            return '商品管理'
          }
        },
        pageicon() {
          if(store.getters?.getMenuInfo?.meta?.icon){
            return store.getters.getMenuInfo.meta.icon
          }else{
            return "icon-shangpinguanli"
          }
        },
        userName(){
          if(store.getters?.getUserInfo?.name){
            return store.getters.getUserInfo.name
          }else{
            return "admin"
          }
        }
    },
    components: {
      dialogTel
    },
    data() {
      return {
        dialogVisible: false,
        loginUser: null,
        form:{
          oldPassword: '',
          password: ''
        },
      };
    },
    created() {
      if(localStorage.getItem("loginUser")){
        this.loginUser = JSON.parse(localStorage.getItem("loginUser"));
      }
    },
    methods: {
      // 退出
      loginOut(){
        logout().then(()=>{
          this.$router.push('/');
          store.commit('CLEAR')
        })
      },
      // 修改密码
      resetPassword(){
        this.dialogVisible = true;
        this.form = {
          oldPassword: '',
          password: ''
        }
      },
      checkPassWord(pass){
        var ls = 0;
        if(pass.match(/([a-z])+/)){  
          ls++; 
        }  
        if(pass.match(/([0-9])+/)){  
          ls++; 
        }  
        if(pass.match(/([A-Z])+/)){   
          ls++; 
        }  
        if(pass.match(/[^a-zA-Z0-9]+/)){ 
          ls++;
        }  
        return ls;
      },  
      validate(){
        if(!this.form.oldPassword){
          this.$message.closeAll();
          this.$message.warning('原密码不能为空！');
          return;
        }
        if(!this.form.password){
          this.$message.closeAll();
          this.$message.warning('新密码不能为空！');
          return;
        }
        if(this.checkPassWord(this.form.password) < 3){
          this.$message.closeAll();
          this.$message.warning('新密码需包含大小写、数字，请重新设置！');
          return;
        }
        if(this.form.password.length > 20 || this.form.password.length < 6){
          this.$message.closeAll();
          this.$message.warning('新密码长度为6-20位，请重新设置！');
          return;
        }
        if(this.form.password === this.form.oldPassword){
          this.$message.closeAll();
          this.$message.warning('新密码不可以与原密码相同！');
          return;
        }
        if(this.form.password != this.form.copyPassword){
          this.$message.closeAll();
          this.$message.warning('新密码与重复密码不一致！');
          return;
        }
        return true;
      },
      // 取消设置密码
      handleClose(){
        this.dialogVisible = false;
      },
      // 确定设置密码
      submit(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            if(this.validate()){
              let params = {
                oldPassword: this.form.oldPassword,
                password: this.form.password,
              }
              // resetPwd(params).then(response => {
              //   if(response.code == 200){
              //     this.$router.push('/');
              //     this.$message.closeAll();
              //     this.$message.success('修改成功');
              //     this.dialogVisible = false;
              //     localStorage.removeItem('loginUser');
              //     localStorage.removeItem('token');
              //     localStorage.removeItem('status');
              //   }
              // });
            }
          }
        });
      }
    }
  };
</script>
<style lang="less" scoped>
.topbarall{
  background:white;
}
  .line{
    background:#DEDEDE;
    height: 1px;
    width: 100%;
    margin-top: 20px;
  }
  .topbar{
    background: #fff;
    font-size:14px;
    color: #333;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px 0px 0;
    .title{
      color: #ababab;
    }
    .iconfont{
      margin-right: 5px;
      font-size: 22px;
      margin-left: 20px;
    }
    &>*{
      cursor:pointer;
    }
    a{
      color: #333;
      text-decoration: none;
    }
  }
</style>