sso-ssr/components/mobile/reset/stepAppeal.vue

<template>
  <div class="f-main">
    <div class="content-top">
      <p>密码重置</p>
      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
    </div>
    <div class="f-form">
      <div class="page-part">
        <mt-field placeholder="新手机号码"
                  v-model="valid.mobile"
                  :state="state.mobile"
                  type="tel"
                  @blur.native.capture="validateMobile"
        ></mt-field>
      </div>
      <div class="page-part">
        <mt-field auto-complete="off"
                  placeholder="短信验证码"
                  v-model="valid.token"
                  :state="state.token"
                  @blur.native.capture="validateCode">
          <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
        </mt-field>
      </div>
      <div class="page-part">
        <mt-field placeholder="新密码"
                  v-model="valid.password"
                  :attr="{maxlength: 20}"
                  :state="state.password"
                  @input.native="validatePassword"
                  @blur.native.capture="validatePasswordTip"></mt-field>
        <template v-if="valid.password">
          <p class="pwd">密码强度 <em :class="{sm:progress === '弱', md: progress === '中', ld:progress === '强'}"></em> <em :class="{md: progress === '中', ld:progress === '强'}"></em> <em :class="{ld:progress === '强'}"></em> <span :class="{smstep:progress === '弱', mdstep: progress === '中', ldstep:progress === '强'}" v-text="progress">强</span></p>
          <p class="pwd">密码须为8-20字符的英文、数字混合</p>
        </template>
      </div>
      <div class="page-part">
        <mt-field placeholder="确认密码"
                  v-model="valid.confirm"
                  auto-complete="off"
                  :state="state.confirm"
                  @blur.native.capture="validateConfirm"
        ></mt-field>
      </div>
      <div class="page-part">
        <mt-field placeholder="申诉说明"
                  type="textarea"
                  rows="4"
                  v-model="valid.description"></mt-field>
        <p class="pwd">请描述您申诉的原因，并尽可能多地列举出证明此 账号为您所有的证据</p>
      </div>
      <div class="page-part">
        <mt-field placeholder="姓名"
                  v-model="valid.contactName"
                  :state="state.contactName"
                  @blur.native.capture="validateContactName"
        ></mt-field>
      </div>
      <div class="page-part">
        <mt-field placeholder="联系电话"
                  v-model="valid.contactTel"
                  :state="state.contactTel"
                  type="tel"
                  @blur.native.capture="validateContactTel"
        ></mt-field>
      </div>
      <div class="page-part">
        <mt-field placeholder="电子邮箱"
                  v-model="valid.contactEmail"
                  :state="state.contactEmail"
                  type="email"
                  @blur.native.capture="validateContactEmail"
        ></mt-field>
      </div>
      <div class="page-part">
        <mt-button size="large" type="primary" @click="sureAccount('last')">提 交</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'step-one',
      data () {
        return {
          state: {
            mobile: 'error',
            token: 'error',
            password: 'error',
            confirm: 'error',
            contactName: 'error',
            contactTel: 'error',
            contactEmail: 'error'
          },
          valid: {
            mobile: '',
            token: '',
            password: '',
            confirm: '',
            description: '',
            contactName: '',
            contactTel: '',
            contactEmail: ''
          },
          tokenCode: '',
          tokenTime: 60,
          tokenText: '获取验证码',
          progress: '弱'
        }
      },
      methods: {
        jump (type) {
          this.$emit('stepEvent', type)
        },
        // 弹窗处理
        downToast (type) {
          this.$toast({
            message: type,
            iconClass: 'el-icon-warning'
          })
        },
        // 验证手机号
        validateMobile () {
          let reg = /^1[0-9]{10}$/
          if (!this.valid.mobile) {
            this.downToast('请先填写手机号')
            this.state.mobile = 'error'
          } else {
            if (!reg.test(this.valid.mobile)) {
              this.downToast('请填写正确的手机号')
              this.state.mobile = 'warning'
            } else {
              this.state.mobile = 'success'
            }
          }
        },
        // 验证正确的验证码
        validateCode () {
          if (!this.valid.token) {
            this.downToast('请先填写验证码')
            this.state.token = 'error'
          } else {
            if (!this.valid.mobile) {
              this.downToast('请先填写正确的手机号码')
              this.state.token = 'warning'
            } else {
              if (this.tokenCode) {
                let param = new FormData()
                param.append('mobile', this.valid.mobile)
                param.append('token', this.tokenCode)
                param.append('code', this.valid.token)
                let config = {
                  headers: {'Content-Type': 'multipart/form-data'}
                }
                this.$http.post('/appeal/check/mobile', param, config)
                  .then(response => {
                    if (response.data.success) {
                      this.state.token = 'success'
                    } else {
                      this.$toast({
                        message: response.data.errMsg,
                        iconClass: 'el-icon-error'
                      })
                    }
                  }).catch(() => {
                    this.downToast('请检查网络是否正常或联系服务商')
                  })
              } else {
                this.downToast('请点击先获取验证码信息')
                this.state.token = 'warning'
              }
            }
          }
        },
        // 获取验证码
        getCheckCode () {
          if (this.tokenTime > 0 && this.tokenTime < 60) {
            this.downToast('请稍后再点击，我在倒计时')
          } else {
            if (this.state.mobile !== 'success') {
              this.downToast('请先输入正确的手机号')
            } else {
              this.$indicator.open('获取中...')
              let _this = this
              this.$http.get('/sso/personal/register/checkCode', {params: {mobile: this.valid.mobile}})
                .then(response => {
                  this.$indicator.close()
                  if (response.data) {
                    this.tokenCode = response.data.token
                    this.$toast({
                      message: '验证码已经发送到您的手机，请注意查收',
                      iconClass: 'el-icon-success'
                    })
                    this.tokenText = '已发送(' + this.tokenTime + 'S)'
                    let setTime = setInterval(() => {
                      _this.tokenTime--
                      this.tokenText = '已发送(' + this.tokenTime + 'S)'
                      if (this.tokenTime <= 0) {
                        clearInterval(setTime)
                        _this.tokenText = '获取验证码'
                        _this.tokenTime = 60
                      }
                    }, 1000)
                  }
                }).catch(() => {
                  this.$indicator.close()
                  this.downToast('请检查网络是否正常或联系服务商')
                })
            }
          }
        },
        // 验证密码强度
        validatePassword () {
          let reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
          let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
          let count = this.valid.password.length
          if (count >= 20) {
            this.downToast('密码须为8-20字符的英文、数字混合')
          } else {
            if (reg1.test(this.valid.password)) {
              this.progress = '强'
            } else if (reg2.test(this.valid.password)) {
              this.progress = '中'
            } else {
              this.progress = '弱'
            }
          }
        },
        // 验证密码
        validatePasswordTip () {
          let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
          if (!this.valid.password) {
            this.downToast('请输入密码')
            this.state.password = 'error'
          } else {
            if (!reg2.test(this.valid.password)) {
              this.downToast('密码须为8-20字符的英文、数字混合')
              this.state.password = 'warning'
            } else {
              this.state.password = 'success'
              if (this.valid.confirm) {
                this.validateConfirm()
              }
            }
          }
        },
        // 验证二次密码
        validateConfirm () {
          if (!this.valid.confirm) {
            this.downToast('请再次输入密码')
            this.state.confirm = 'error'
          } else {
            if (this.valid.confirm === this.valid.password) {
              this.state.confirm = 'success'
            } else {
              this.state.confirm = 'warning'
              this.downToast('两次输入密码不一致，请重新输入')
            }
          }
        },
        // 验证姓名
        validateContactName () {
          if (!this.valid.contactName) {
            this.downToast('请填写您的姓名')
            this.state.contactName = 'error'
          } else {
            if (this.valid.contactName.length > 20) {
              this.downToast('输入长度过长，限定20个字符以内')
              this.state.contactName = 'warning'
            } else {
              this.state.contactName = 'success'
            }
          }
        },
        // 验证电话
        validateContactTel () {
          let reg = /^1[0-9]{10}$/
          if (!this.valid.contactTel) {
            this.downToast('请填写联系电话')
            this.state.contactTel = 'error'
          } else {
            if (!reg.test(this.valid.contactTel)) {
              this.downToast('请填写正确的联系电话')
              this.state.contactTel = 'warning'
            } else {
              this.state.contactTel = 'success'
            }
          }
        },
        // 验证邮箱
        validateContactEmail () {
          let reg = /^([\w-])+(\.\w+)*@([\w-])+((\.\w{2,3}){1,3})$/
          if (!this.valid.contactEmail) {
            this.downToast('请填写联系电子邮箱')
            this.state.contactEmail = 'error'
          } else {
            if (!reg.test(this.valid.contactEmail)) {
              this.downToast('请输入正确的邮箱地址格式')
              this.state.contactEmail = 'warning'
            } else {
              this.state.contactEmail = 'success'
            }
          }
        },
        sureAccount (type) {
          if (this.state.mobile !== 'success' &&
            this.state.token !== 'success' &&
            this.state.password !== 'success' &&
            this.state.confirm !== 'success' &&
            this.state.contactName !== 'success' &&
            this.state.contactTel !== 'success' &&
            this.state.contactEmail !== 'success') {
            this.downToast('请确认填写部分是否有误')
          } else {
            this.$indicator.open('验证过程中...')
            let param = new FormData()
            param.append('mobile', this.valid.mobile)
            param.append('code', this.valid.token)
            param.append('password', this.valid.password)
            param.append('description', this.valid.description)
            param.append('contactName', this.valid.contactName)
            param.append('contactTel', this.valid.contactTel)
            param.append('contactEmail', this.valid.contactEmail)
            param.append('token', this.tokenCode)
            let config = {
              headers: {'Content-Type': 'multipart/form-data'}
            }
            this.$http.post('/appeal/resetPwd', param, config)
              .then(response => {
                this.$indicator.close()
                if (response.data.success) {
                  this.$emit('stepEvent', type)
                  this.$emit('lastEvent', 'appeal')
                } else {
                  this.downToast(response.data.errMsg)
                }
              }).catch(() => {
                this.$indicator.close()
                this.downToast('请检查网络是否正常或联系服务商')
              })
          }
        }
      }
    }
</script>