sso-parent/sso-manage-console-web/src/components/accounts/users/UserBasicInfo.vue

<template>
  <div class="basic-user-info" style="padding: 30px 0 0;width: 490px;">
    <el-form ref="form" :model="userInfo" label-width="150px">
      <el-form-item label="个人UU">
        <div>{{ userInfo.userUU }}</div>
      </el-form-item>
      <el-form-item label="个人名称">
        <el-input v-model="userInfo.vipName"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="userInfo.mobile"></el-input>
      </el-form-item>
      <el-form-item label="手机认证">
        <el-select v-model="userInfo.mobileValidCode" placeholder="请选择认证状态">
          <el-option label="已认证" :value="2"></el-option>
          <el-option label="未认证" :value="0"></el-option>
          <el-option label="申诉中" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userInfo.email"></el-input>
      </el-form-item>
      <el-form-item label="邮箱认证">
        <el-select v-model="userInfo.emailValidCode" width="340" placeholder="请选择认证状态">
          <el-option label="已认证" :value="2"></el-option>
          <el-option label="未认证" :value="0"></el-option>
          <el-option label="申诉中" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="userInfo.password" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="账号冻结">
        <el-select v-model="userInfo.lock" placeholder="请选择是否冻结账号">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="userInfo.realName"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="userInfo.idCard"></el-input>
      </el-form-item>
      <el-form-item label="实名认证">
        <el-select v-model="userInfo.identityValidCode" placeholder="请选择认证状态">
          <el-option label="已认证" :value="2"></el-option>
          <el-option label="未认证" :value="0"></el-option>
          <el-option label="待认证" :value="1"></el-option>
          <el-option label="未通过" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册时间">
        <div v-text="formatDate(userInfo.registerDate)"></div>
      </el-form-item>
      <el-form-item label="上次登录">
        <div v-text="formatDate(userInfo.lastLoginTime)"></div>
      </el-form-item>
      <el-form-item label="注册来源">
        <div>{{ userInfo.fromApp }}</div>
      </el-form-item>
      <el-form-item>
        <div class="action-form-item">
          <el-button type="primary" @click="onSubmit" :disabled="!isChange">保存修改</el-button>
          <el-button @click="$router.go(-1)">返回</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import _ from 'lodash'
  import axios from '@/assets/js/axios'
  import * as types from '@/store/mutation-types'
  import { formatDate } from '@/assets/js/utils'

  export default {
    name: 'user-basic-info',
    data () {
      return {
        userInfo: {},
        isChange: false
      }
    },
    methods: {
      onSubmit () {
        const data = _.pick(this.userInfo,
          [
            'userUU',
            'vipName',
            'mobile',
            'mobileValidCode',
            'email',
            'emailValidCode',
            'password',
            'lock',
            'realName',
            'idCard',
            'identityValidCode'
          ]
        )

        const success = (userInfo) => {
          this.$store.commit(types.CHOOSE_USER, userInfo)

          this.isChange = false
          this.$message.success('保存成功')
        }
        const error = error => {
          this.$message.error(error)
        }

        axios.put('/api/user//modifyUserInfo', data).then(success).catch(error)
      },
      formatDate (timestamp) {
        return formatDate(null, null, timestamp)
      }
    },
    mounted () {
      if (this.$route.params && this.$route.params.userUU) {
        this.$store.commit(types.CHOOSE_USER, this.$route.params)
      }
      const user = this.$store.state.accounts.savedUser

      this.userInfo = Object.assign({}, this.userInfo, user)
    },
    watch: {
      userInfo: {
        // 监听对象属性变化，触发激活保存修改按钮的行为
        handler (newValue, oldValue) {
          if (oldValue.userUU) {
            this.isChange = !_.isEqual(newValue, this.$route.params)
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>
  .nav-tabs {
    background-color: #E6EDF1;
  }
  .nav-tabs>li {
    height: 60px;
  }
  .nav-tabs>li>img {
    margin: 13px 38px 13px 14px;

    cursor: pointer;
  }
  .nav-tabs>li>a {
    margin: 13px 0;
    border: none;
    height: 34px;
    padding: 9px 8px;
    line-height: 14px;
    background: none;

    color: #646464;
    font-size: 14px;
    font-family: "Microsoft YaHei", sans-serif;
  }
  .nav-tabs>li.active>a {
    color: #323232;
    font-weight: bold;
  }
  .nav-tabs>li.active>a,
  .nav-tabs>li.active>a:focus,
  .nav-tabs>li.active>a:hover {
    cursor: pointer;
    border: none;
    background: none;
  }
  .nav-tabs>li.active .triangle{
    position: absolute;
    width: 24px;
    height: 12px;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    border-bottom: 12px solid #FFFFFF;
    z-index: 99;
    bottom: 0;
    left: 50%;
    margin-left: -12px;
  }
  .action-form-item {
    margin-left: -128px;
  }
  .action-form-item .el-button {
    border-radius: 0;
    padding: 10px 20px;
  }
  .el-button {
    width: 120px;
    height: 34px;
  }
  .el-button--primary {
    background-color: #4E8EFC;
    border-color: #4E8EFC;
  }
  .el-button--primary.is-disabled {
    background-color: #D2D2D2;
    border-color: #D2D2D2;
  }
</style>

<style>
  .basic-user-info .el-input__inner {
    height: 34px;
    width: 340px;
    border-radius: 0;
  }
  .basic-user-info .el-form-item {
    margin-bottom: 12px;
  }
  .basic-user-info .el-form-item__label {
    margin: 0;
    height: 34px;
    padding-left: 26px;
    text-align: left;
    line-height: 34px;

    color: #000000;
    font-size: 14px;
    font-weight: normal;
    font-family: "SimHei", sans-serif;
  }
  .basic-user-info .el-form-item__content {
    height: 34px;
    line-height: 34px;
  }
</style>