pwd-forgotten.vue

<template>
  <h-view class="public-style pwd-forgotten">
    <h-header :proportion="[5,1,1]" class="header">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png" >
        <span>忘记密码</span>
      </div>
    </h-header>
    <h-content>
      <div class="description">请使用原注册手机号接收验证码并重新设置密码</div>
      <list-item>
        <item>
          <img slot="left-icon" src="../assets/login/phone.png" class="left-icon">
          <div slot="name" class="required">手机号码</div>
          <input slot="content" v-model="phone_number" placeholder="请输入手机号码">
        </item>
        <item>
          <img slot="left-icon" src="../assets/login/phone_code.png" class="left-icon">
          <div slot="name" class="required">验证码</div>
          <input slot="content" v-model="verifiedCode" type="text" placeholder="请填写验证码">
          <div slot="right-icon" class="verified-code">
            <div v-if="!showTimer" class="verified-code-box" @click="getPhoneCode">点击获取</div>
            <span v-if="showTimer" class="verified-code-des">{{ timerCount }}{{ text }}</span>
          </div>
        </item>
        <item>
          <img slot="left-icon" src="../assets/login/passwordConfirm.png" class="left-icon">
          <div slot="name" class="required">设置密码</div>
          <input
            slot="content" v-model="user_password" type="password" placeholder="请输入6~20位密码"
            maxlength="20" @blur="passwordCheck">
        </item>
        <item :proportion="[2,2]">
          <img slot="left-icon" src="../assets/login/passwordConfirm.png" class="left-icon">
          <div slot="name" class="required">重新输入密码</div>
          <input
            slot="content" v-model="confirm" type="password"
            placeholder="请重新输入密码"
            @blur="confirmCheck">
        </item>
      </list-item>
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="put" @click.native="submit">确认</tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>
var CryptoJS = require('crypto-js')
export default {
  data () {
    return {
      phone_number: '',
      verifiedCode: '',

      username: '',

      user_password: '',
      confirm: '',

      phoneNumberFlag: false,
      verifiedCodeFlag: false,
      passwordFlag: false,
      confirmPassword: false,

      captchaKey: '123456',
      phoneCodeTimeOut: false,
      timer: 120000,
      showTimer: false,
      timerCount: 120,
      text: '获取验证码',
    }
  },
  watch: {
    verifiedCode (value) {
      let vm = this
      if (value.length === 6) {
        vm.verifiedCodeFlag = false
        if (vm.captchaKey.length === 0) {
          hlsPopup.showLongCenter('请先获取验证码')
        } else if (vm.phoneCodeTimeOut) {
          hlsPopup.showLongCenter('验证码已失效，请从新获取')
        } else {
          vm.verifiedCodeFlag = true
        }
      }
    },
    user_password (value) {
      if (value.length > 20) {
        hlsPopup.showLongCenter('密码长度6～20位之间')
      }
    },
    confirm (value) {
      if (value.length > 20) {
        hlsPopup.showLongCenter('密码长度6～20位之间')
      }
    },
  },
  created () {
    let vm = this
    let url = process.env.loginPath + 'admin'
    let param = {}
    vm.$post(url, param).then(function (res) {
      window.localStorage.setItem('access_token', res.access_token)
    })
  },
  methods: {
    checkPhone () {
      let vm = this
      vm.phoneNumberFlag = false
      if (hlsUtil.phoneNumber(vm.phone_number) || hlsUtil.phoneNumber86(vm.phone_number)) {
        vm.phoneNumberFlag = true
      }
    },
    getPhoneCode () {
      let vm = this
      if (!vm.showTimer) {
        if (hlsUtil.phoneNumber(vm.phone_number) || hlsUtil.phoneNumber86(vm.phone_number)) {
          vm.phoneNumberFlag = true
          vm.getVerifiedCode()
          vm.showTimer = true
          vm.text = '秒后失效'
          let counter = setInterval(function () {
            if (vm.timerCount >= 0) { vm.timerCount = vm.timerCount - 1 }
          }, 1000)
          setTimeout(function () {
            vm.text = '获取验证码'
            vm.showTimer = false
            clearInterval(counter)
            vm.showTimer = false
            vm.captchaKey = ('000000' + Math.floor(Math.random() * 999999)).slice(-6)
            hlsPopup.showLongCenter('验证码失效，请重新获取')
            vm.timerCount = vm.timer / 1000
          }, vm.timer)
        } else {
          hlsPopup.showLongCenter('手机号不存在，请重新输入！')
        }
      }
    },
    passwordCheck () {
      let vm = this
      let length = vm.user_password.length
      if (length < 6 || length > 20) {
        hlsPopup.showLongCenter('密码长度6～20位之间')
      } else {
        vm.passwordFlag = true
      }
    },
    confirmCheck () {
      let vm = this
      let length = vm.confirm.length
      if (length < 6 || length > 20) {
        hlsPopup.showLongCenter('密码长度6～20位之间')
      } else if (vm.confirm !== vm.user_password) {
        hlsPopup.showLongCenter('两次输入的密码不一致，请从新输入')
      } else {
        vm.confirmPassword = true
      }
    },
    submit () {
      let vm = this
      if (!vm.phoneNumberFlag) {
        hlsPopup.showLongCenter('请输入手机号!')
      } else if (vm.verifiedCode !== vm.captchaKey) {
        hlsPopup.showLongCenter('验证码错误!')
      } else if (!vm.passwordFlag) {
        hlsPopup.showLongCenter('请输入密码!')
      } else if (!vm.confirmPassword) {
        hlsPopup.showLongCenter('请确认密码!')
      } else {
        let url = process.env.basePath + 'lose_password'
        let md5passwprd = CryptoJS.MD5(vm.user_password).toString().toUpperCase()
        let params = {
          phone: vm.phone_number,
          password: md5passwprd,
        }
        hlsHttp.post(url, params).then(function (res) {
          if (res.result === 'S') {
            hlsPopup.showLongCenter('修改成功')
            setTimeout(function () {
              vm.$router.push('login')
            }, 100)
          }
        })
      }
    },
    getVerifiedCode () {
      let vm = this
      hlsPopup.showLongCenter('测试验证码为123456')
      /* let url = process.env.basePath + 'sms_verify_post'
      let signcode = ('000000' + Math.floor(Math.random() * 999999)).slice(-6)
      vm.captchaKey = signcode
      let param = {
          'phone': vm.phone_number,
          'signcode': signcode,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.hlsPopup.showSuccess('验证码已发送')
        } else {
          vm.hlsPopup.showLongCenter(res.message)
        }
      }) */
    },
  },
}
</script>

<style scoped lang="less">
  @import "../styles/mixin";
  .header {
    background-color: @headerColor;
    color: #fff;
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
      span {
        color: #fff;
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.6px;
        line-height: 24px;
      }
    }
  }
  .description{
    .wh(100%,50px);
    .fja();
    background-color: @headerColor;
    .sc(14px,#fff);
  }
.verified-code{
  .wh(60%,100%);
  text-align: right;
  .verified-code-box{
    margin-left: 14px;
    .border-left;
    color:@headerColor;
    line-height: 30px;
  }
  .verified-code-des{
    font-size: 10px;
    color:@headerColor;
  }
}
  .tab-content{
    background-color: @headerColor;
    margin: 0 2%;
    color: #fff;
  }
</style>