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

<template>
  <div class="app-container">
    <!-- <div class="setting_title">个人信息</div>
    <el-divider></el-divider> -->
    <div v-if="!isRenew">
		<div class="userInfo">
			<el-row>
				<el-col :span="4">
					<div class="avatar">
						<fileUpload :multiple="true" :fileList="[{url: userInfo.minLogo3}]" :download="false" :viewOnline="false" :limit="1" @getFiles="getFiles" />
						<!-- <el-image style="width: 100px;height: 100px;border-radius: 50%;" :src="userInfo.minLogo3"></el-image> -->
						<!-- <div class="img">
							<i class="el-icon-camera"></i>
						</div> -->
					</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}}</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}}</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;width: 50%;">
			<el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormRules" label-position="left" label-width="80px">
			  <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 slot="footer" class="dialog-footer" style="padding-left: 100px;">
			  <el-button type="primary" @click="submitDialogForm">保存</el-button>
			</div>
		</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();
  },
  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>