zfire-newmall-admin/src/views/setting/personal/index.vue

<template>
  <div class="app-container">
    <div v-if="!isRenew">
      <div class="userInfo">
        <el-row>
          <el-col :span="4">
            <div class="avatar">
              <fileUpload
                :multiple="true"
                :fileList="[{ url: userInfo.minLogo3 ? userInfo.minLogo3 : '' }]"
                :download="false"
                :viewOnline="false"
                :limit="1"
                @getFiles="getFiles"
              />
            </div>
          </el-col>
          <el-col :span="8">
            <div style="height: 120px; display: flex; flex-direction: column; justify-content: space-around">
              <div>用户名: {{ userInfo.nickName }}</div>
              <div>负责人: {{ userInfo.linkName }}</div>
              <div>开通时间: {{ userInfo.companyOpenTime ? userInfo.companyOpenTime.substring(0, 10) : '' }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div style="height: 120px; display: flex; flex-direction: column; justify-content: space-around">
              <div>账号: {{ userInfo.userName }}</div>
              <div>手机号码: {{ userInfo.linkPhone }}</div>
              <div class="flex">
                <span style="color: #169dff; margin-right: 10px"
                  >到期时间: {{ userInfo.companyExpireTime ? userInfo.companyExpireTime.substring(0, 10) : '' }}</span
                >
                <el-tooltip effect="dark" content="账号到期后将自动停用系统功能，续费后功能恢复使用！" placement="top">
                  <i class="el-icon-question icon-question"></i>
                </el-tooltip>
                <el-button style="margin: 0 20px" size="small" type="primary" @click="renew">续费</el-button>
                <!-- <el-button size="small" plain type="primary" @click="payRecords">购买记录</el-button> -->
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div style="margin-top: 60px">
        <el-card class="goods">
          <h3>修改密码</h3>
          <el-form
            ref="dialogForm"
            :model="dialogForm"
            :rules="dialogFormRules"
            label-position="left"
            label-width="80px"
            style="width: 350px; margin-top: 40px"
          >
            <el-form-item label="原密码" prop="oldPassword">
              <el-input
                v-model="dialogForm.oldPassword"
                ref="password1"
                autocomplete="off"
                placeholder="请输入原密码"
                :type="passwordType1"
              ></el-input>
              <span class="show-pwd" @click="showPwd(1)">
                <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                v-model="dialogForm.newPassword"
                ref="password2"
                autocomplete="off"
                placeholder="请输入新密码"
                :type="passwordType2"
              ></el-input>
              <span class="show-pwd" @click="showPwd(2)">
                <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                v-model="dialogForm.confirmPassword"
                ref="password3"
                autocomplete="off"
                placeholder="请再次输入新密码"
                :type="passwordType3"
              ></el-input>
              <span class="show-pwd" @click="showPwd(3)">
                <svg-icon :icon-class="passwordType3 === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
          </el-form>
          <div style="padding-left: 100px">
            <el-button type="primary" @click="submitDialogForm">保存</el-button>
          </div>
        </el-card>
      </div>
    </div>
    <renew :userInfo="userInfo" @back="getUserInfo" v-if="isRenew"></renew>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserInfo, changePassword } from '@/api/setting'
import uploadFile from '@/utils/upload-file'
import fileUpload from '@/components/file-upload'
import renew from './renew.vue'
import request from '@/utils/request'

export default {
  components: { fileUpload, renew },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value === this.dialogForm.oldPassword) {
        callback(new Error('该密码与原密码一致'))
      } else {
        if (this.dialogForm.confirmPassword !== '') {
          this.$refs.dialogForm.validateField('confirmPassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.dialogForm.newPassword) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      userInfo: {},
      dialogFormVisible: false,
      dialogForm: {
        oldPassword: '', // 原密码
        newPassword: '', // 新密码
        confirmPassword: '' // 确认密码
      },
      dialogFormRules: {
        oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        newPassword: [{ required: true, validator: validatePass, trigger: 'blur' }],
        confirmPassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
      },

      passwordType1: 'password',
      passwordType2: 'password',
      passwordType3: 'password',

      isRenew: false
    }
  },
  computed: {
    ...mapGetters(['userid'])
  },
  created() {
    this.getUserInfo()
    if (this.$route.query.isRenew) {
      this.isRenew = true
    }
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      this.isRenew = false
      getUserInfo({ adminUserId: this.userid }).then(res => {
        this.userInfo = res.data
      })
    },

    // 取消修改密码
    cancelDialogForm() {
      this.dialogFormVisible = false
      this.passwordType1 = 'password'
      this.passwordType2 = 'password'
      this.passwordType3 = 'password'
      this.$refs.dialogForm.resetFields()
    },

    // 提交修改密码
    submitDialogForm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          let params = {
            password: this.dialogForm.oldPassword,
            newPassword: this.dialogForm.newPassword,
            userName: this.userInfo.userName
          }
          changePassword(params).then(res => {
            this.cancelDialogForm()
            this.getUserInfo()
            this.$successMsg()
          })
        }
      })
    },

    // 显示隐藏密码
    showPwd(num) {
      if (num == 1) {
        if (this.passwordType1 === 'password') {
          this.passwordType1 = ''
        } else {
          this.passwordType1 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password1.focus()
        })
      }
      if (num == 2) {
        if (this.passwordType2 === 'password') {
          this.passwordType2 = ''
        } else {
          this.passwordType2 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password2.focus()
        })
      }
      if (num == 3) {
        if (this.passwordType3 === 'password') {
          this.passwordType3 = ''
        } else {
          this.passwordType3 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password3.focus()
        })
      }
    },
    getFiles(e) {
      if (e[0].name) {
        request({
          url: '/admin/user/user/updateCompanyWechat',
          method: 'post',
          data: {
            minLogo3: e[0].url,
            companyWechatId: this.userInfo.companyWechatId
          }
        }).then(res => {
          if (res.code == 200) {
            this.getUserInfo()
            this.$message.success('上传成功！')
          }
        })
      }
    },
    renew() {
      this.isRenew = true
    }
  }
}
</script>

<style scoped lang="scss">
.el-form {
  padding-left: 15px;
}
.userInfo .el-form-item {
  margin-bottom: 10px;
}
.flex {
  display: flex;
  align-items: center;
}
.show-pwd {
  position: absolute;
  right: 15px;
  top: 0;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}
.userInfo {
  padding-left: 30px;
  padding-top: 30px;
  color: #555555;
}
.avatar {
  position: relative;
  cursor: pointer;
  .img {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9;
    text-align: center;
    line-height: 28px;
    background-color: #eeeeee;
    border: 2px solid #ffffff;
    color: #168dff;
    box-sizing: border-box;
  }
}
::v-deep .images .item .img {
  border-radius: 50% !important;
}
</style>