fire_control/src/view/layout/top/index.vue

<template>
  <div class="top" :class="{system: isSystem}">
    <div class="title">
      <img src="@/assets/image/img_login_logo.png">
      <h2>广东省消防救援总队火场三维数据平台<span>Three-dimensional data platform of fire scene of Guangdong Fire Rescue</span></h2>
    </div>
    <div class="oper-btns" v-if="!isSystem && info">
        <div class="user-menu">
          <img :src="info.avatar ? info.avatar : defAvatar">
          <span>{{info.department && info.department.name}}</span>
          <el-dropdown>
            <div style="outline: none;">
              <span class="oper-down">{{info.nickName}}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
          <template v-slot:dropdown>
            <el-dropdown-menu class="menu-items-user">
              <el-dropdown-item @click="data.show = true">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout"><span style="color:#FA5555">退出登录</span></el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        </div>

      <!-- <div class="info">
        <img src="@/assets/image/top_my.png">
        <span>{{info.nickName}}</span>
        <span>{{info.userName}}</span>
      </div>
      <span @click="data.show = true"><img src="@/assets/image/top_set.png"></span>
      <span @click="logout"><img src="@/assets/image/top_exit.png"></span> -->
    </div>
  </div>
  
  <com-dialog title="修改密码" v-model:show="data.show" @submit="updatePsw" enterText="确 定" width="486">
    <el-form ref="form" :model="data" label-width="90px">
      
      <div class="stop-psw">
        <input type="text">
        <input type="password" name="" id="">
      </div>
      
      <el-form-item label="手机号：" class="mandatory">
        <el-input v-model="data.phone" placeholder="请输入手机号码" disabled></el-input>
      </el-form-item>
      <el-form-item label="验证码：" class="mandatory">
        <el-input v-model="data.code" placeholder="请输入验证码">
        <template v-slot:suffix>
          <el-button type="primary" plain class="input-inner-btn" @click="sendCode" :disabled="msgStatus.status !== 0">
            {{msgStatus.status === 2 ? `${msgStatus.miss}S后可重新发送` : '获取验证码' }}
          </el-button>
        </template>
      </el-input>
      </el-form-item>
      <el-form-item label="新密码：" class="mandatory">
        <el-input v-model="data.password" type="password" placeholder="请输入8-16位数字、英文大小写组合"></el-input>
      </el-form-item>
      <el-form-item label="密码确认：" class="mandatory">
        <el-input v-model="data.confimPsw" type="password" placeholder="请输入8-16位数字、英文大小写组合"></el-input>
      </el-form-item>
    </el-form>

  </com-dialog>

</template>
<script>
import { encryption } from '@/util'
import comDialog from "@/components/dialog";
import axios from 'axios';
import { updatePsw, userLogout } from '@/request/config'
import { sendUserMsg } from '@/request/config'
import { setToken, setPermission, setInfo } from '@/state/user'
import { computed, ref, reactive, watch } from 'vue'
import user from '@/state/user'
import {PSW} from '@/constant/REG'
import { openErrorMsg } from '@/request/errorMsg.js'
import defAvatar from '@/assets/image/top_my.png'

export default {
  props: ['isSystem'],
  setup() {
    const info = computed(() => user.value.info)
    const data = ref({show: false, oldPassword: '', password: '', confimPsw: '', phone: info.value.userName, code: ''})
    const msgStatus = reactive({status: 0, miss: 0})

    watch(info, () => {
      data.value.phone = info.value.userName
    })

    return { data, info, defAvatar, msgStatus }
  },
  methods: {
    async updatePsw() {
      if (this.data.password !== this.data.confimPsw) {
        return this.$message.error('两次密码不一致！', '提示')
      }
      if (!PSW.REG.test(this.data.password)) {
        return this.$message.error(PSW.tip, '提示')
      }
      
      let psw = encryption(this.data.password)

      await axios.post(updatePsw, {
          userName: this.data.phone,
          code: this.data.code,
          password: psw,
          confirmPwd: psw
      })

      this.data.show = false
      this.data.oldPassword = this.data.password = this.data.confimPsw = ''

      openErrorMsg('密码修改成功，请重新登录。')

      this._loginout()
    },
    async _loginout() {
      await axios.post(userLogout)
      setToken('')
      setPermission()
      console.log('----------')
      setInfo({})
      this.$router.replace({name: 'login'})
    },
    async logout() {
      if (await this.$confirm('确定要退出登录吗？', '提示')) {
        this._loginout()
      }
    },
    async sendCode() {
      if (this.msgStatus.status !== 0) {
        return;
      }

      this.msgStatus.status = 1
      try {
        await axios.get(sendUserMsg, {
          params: {
            areaNum: 86,
            phoneNum: this.data.phone,
            type: 2
          }
        })
        this.msgStatus.status = 2
        this.msgStatus.miss = 60
        let interval = setInterval(() => {
          if (--this.msgStatus.miss < 0) {
            clearInterval(interval)
            this.msgStatus.status = 0
          }
        }, 1000)

      } catch {
        this.msgStatus.status = 0
      }
    }
  },
  components: {
    "com-dialog": comDialog,
  },
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>

<style>
.menu-items-user {
  transform: translate(-38px, -15px);
}
</style>