settle_down_web/src/views/components/updatePassword.vue

<template>
  <div class="updatePass">
    <el-form ref="form" :model="form" :rules="rules">
      <el-row>
        <el-col style="padding-bottom: 10px">
          <el-card shadow="hover" style="padding: 20px">
            <el-row v-if="info" style="height: 40px">
              <el-col :span="24" class="tc f-normal"><span>{{ info }}</span></el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>原密码</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item prop="oldPwd">
                  <el-input v-model="form.oldPwd" type="password" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>新密码</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item prop="newPwd">
                  <el-input v-model="form.newPwd" type="password" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>再次输入</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item prop="newPwdConfirm">
                  <el-input v-model="form.newPwdConfirm" type="password" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

    </el-form>
    <div class="el-dialog__footer">
      <el-button @click="closeUpdate">取 消</el-button>
      <el-button type="primary" @click="passwordUpdate()">确 定</el-button>
    </div>
  </div>
</template>

<script>
/* common function */
import channel from '@/static/utils/channel'
import { isPassword } from '../../static/utils/validate'

export default {
    props: {
        info: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            // 密码修改
            form: {
                oldPwd: '',
                newPwd: '',
                newPwdConfirm: ''
            },
            rules: {
                oldPwd: [
                    { required: true, message: '请输入原密码', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请输入原密码'))
                            } else if (this.$md5(this.$md5(value)) !== this.$common.currUser().password) {
                                callback(new Error('原密码不正确'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                newPwd: [
                    { required: true, trigger: 'blur', validator: isPassword }
                ],
                newPwdConfirm: [
                    { required: true, message: '确认密码', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请再次输入密码'))
                            } else if (value !== this.form.newPwd) {
                                callback(new Error('两次输入密码不一致'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    mounted() {
    },
    methods: {
        passwordUpdate: function() {
            const _this = this

            this.$refs.form.validate(valid => {
                if (valid) {
                    const doing = this.$notify({
                        title: '正在修改,请稍等',
                        type: 'warning'
                    })
                    const postData = {
                        password: _this.$md5(_this.form.newPwd),
                        id: _this.$common.currUser().id
                    }
                    const userType = _this.$common.currUserType()

                    //console.log('userType:', userType)
                    channel.globeRequest(
                        userType === '2' ? 'BizUserController' : 'UserController',
                        'editPwd',
                        postData,
                        'Update Pwd'
                    ).then((res) => {
                        doing.close()
                        _this.$notify({
                            title: '修改成功，请重新登录',
                            type: 'info'
                        })
                        _this.logout()
                        _this.closeUpdate()
                    }).catch((err, x) => {
                        doing.close()
                        _this.$alert(err)
                    })
                } else {
                    //console.log('error submit!!')
                    return false
                }
            })
        },
        closeUpdate: function() {
            this.form.oldPwd = ''
            this.form.newPwd = ''
            this.form.newPwdConfirm = ''
            this.$emit('closeUpdate')
        },
        async logout() {
            await this.$store.dispatch('user/logout')
            const userType = this.$common.currUserType()
            if (userType === '2') {
                this.$router.push(`/bizLogin`)
            } else {
                this.$router.push(`/login`)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .updatePass{
        .col-txt{
            font-size: 0.8vw;
        }
        .el-button{
            font-size: 0.8vw;
            padding: 0.6vw 1.1vw;
            border-radius: 0.3vw;
        }
    }
</style>