web/buyer/src/pages/home/memberCenter/ModifyPwd.vue

<template>
  <div class="wrapper">
    <card _Title="账户安全"/>
    <!--  手机号验证  -->
    <Form ref="formData" :model="formData" label-position="left" :label-width="100" :rules="ruleInLines"
          v-if="(status == 2 || status == 3) && !showPwd">
      <FormItem label="手机号">
        <div class="phone">1234567890</div>
      </FormItem>
      <FormItem label="图片验证码" prop="picture" style="width: 350px">
        <i-input v-model="formData.picture" size="large" maxlength="4"></i-input>
      </FormItem>
      <FormItem label="短信验证码" prop="msg">
        <i-input v-model="formData.msg" size="large" maxlength="6" style="width: 250px">
          <span slot="append">输入验证码</span>
        </i-input>
      </FormItem>
    </Form>
    <div slot="footer" v-if="(status == 2 || status == 3) && !showPwd" style="text-align: center;width: 50%">
      <Button type="primary" class="ml_10" @click="submitRegister">下一步</Button>
    </div>

    <!--  修改  -->
    <Form ref="formRegister" :model="formRegister" :rules="ruleInline" :label-width="80" v-if="status == 1 && !showPwd">
      <FormItem label="旧密码" prop="password">
        <i-input type="password" v-model="formRegister.password" clearable size="large" placeholder="请输入旧密码"
                 style="width: 300px"
                 maxlength="12">
          <Icon type="md-lock" slot="prepend"></Icon>
        </i-input>
      </FormItem>
      <FormItem label="新密码" prop="newPassword">
        <i-input type="password" v-model="formRegister.newPassword" clearable size="large" placeholder="请输入新密码"
                 style="width: 300px"
                 maxlength="12">
          <Icon type="md-lock" slot="prepend"></Icon>
        </i-input>
      </FormItem>
      <FormItem label="确认密码" prop="againPassword">
        <i-input type="password" v-model="formRegister.againPassword" clearable size="large" placeholder="请输入确认密码"
                 style="width: 300px"
                 maxlength="12">
          <Icon type="md-lock" slot="prepend"></Icon>
        </i-input>
      </FormItem>

    </Form>
    <div slot="footer" v-if="status == 1 && !showPwd" style="width: 50%;text-align: center">
      <Button type="primary" class="ml_10" @click="handleRegist">修改</Button>
    </div>
    <!-- 设置&修改的第二种情况   -->
    <Form ref="formDataUpdate" :model="formDataUpdate" label-position="left" :label-width="100" :rules="ruleIn"
          v-if="showPwd">
      <FormItem label="新密码" prop="newPassword">
        <i-input type="password" v-model="formDataUpdate.newPassword" clearable size="large" placeholder="请输入新密码"
                 style="width: 300px"
                 maxlength="12">
          <Icon type="md-lock" slot="prepend"></Icon>
        </i-input>
      </FormItem>
      <FormItem label="确认密码" prop="againPassword">
        <i-input type="password" v-model="formDataUpdate.againPassword" clearable size="large" placeholder="请输入确认密码"
                 style="width: 300px"
                 maxlength="12">
          <Icon type="md-lock" slot="prepend"></Icon>
        </i-input>
      </FormItem>
    </Form>
    <div slot="footer" v-if="showPwd" style="text-align: center;width: 50%">
      <Button type="primary" class="ml_10" @click="setPassword">设置</Button>
    </div>
  </div>
</template>

<script>
import {
  setPwd,
  editPwd
} from '@/api/account';
import {md5} from '@/plugins/md5.js'

export default {
  name: 'modifyPwd',
  data () {
    return {
      // 1为修改    2为设置     3为提交校验的下一步
      status: '',
      showPwd: false, // 显示密码
      formData: { // 验证表单
        picture: '',
        msg: ''
      },
      formDataUpdate: { // 直接输入新密码表单
        newPassword: '',
        againPassword: ''
      },
      formRegister: { // 第三步 新密码表单
        password: '',
        againPassword: '',
        newPassword: ''
      },
      ruleInLines: { // 验证规则
        picture: [
          {required: true, message: '请输入图片验证码', trigger: 'blur'}
        ],
        msg: [
          {required: true, message: '请输入短信验证码', trigger: 'blur'}
        ]
      },
      ruleIn: { // 验证规则
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {type: 'string', min: 6, message: '密码不能少于6位'}
        ],
        againPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {type: 'string', min: 6, message: '密码不能少于6位'}
        ]
      },
      ruleInline: { // 验证规则
        password: [
          {required: true, message: '请输入旧密码', trigger: 'blur'}
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {type: 'string', min: 6, message: '密码不能少于6位'}
        ],
        againPassword: [
          {required: true, message: '请确认新密码', trigger: 'blur'},
          {type: 'string', min: 6, message: '密码不能少于6位'}
        ]
      }
    }
  },
  mounted () {
    this.status = this.$route.query.status
  },
  methods: {
    // 修改
    handleRegist () {
      this.$refs['formRegister'].validate((valid) => {
        if (valid) {
          const {newPassword, againPassword, password} = this.formRegister
          if (newPassword !== againPassword) {
            this.$Message.error({
              content: '新旧密码不一致'
            });
            return
          }
          const params = {newPassword, password}
          params.newPassword = md5(newPassword)
          params.password = md5(password)
          editPwd(params).then(res => {
            if (res.message === 'success' && res.result) {
              this.$Message.success('修改密码成功');
              this.$router.push('/home')
            }
          });
        }
      })
    },
    // 提交验证
    submitRegister () {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.showPwd = true
        }
      })
    },
    // 设置密码
    setPassword () {
      this.$refs['formDataUpdate'].validate((valid) => {
        if (valid) {
          const {newPassword, againPassword} = this.formDataUpdate
          if (newPassword === '') {
            this.$Message.error({
              content: '请输入密码'
            });
            return
          }
          if (newPassword !== againPassword) {
            this.$Message.error({
              content: '新旧密码不一致'
            });
            return
          }
          const params = {password: newPassword}
          params.password = md5(newPassword)
          setPwd(params).then(res => {
            if (res.message === 'success' && res.result) {
              this.$Message.success('支付密码设置成功');
              this.$router.push('/home')
            }
          });
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .wrapper {
    text-align: center;
  }
  .phone {
    text-align: left;
  }
</style>