pwd-forgotten.vue 7.58 KB
Newer Older
李晓兵's avatar
李晓兵 committed
1 2
<template>
  <h-view class="public-style pwd-forgotten">
李晓兵's avatar
李晓兵 committed
3
    <h-header :proportion="[5,1,1]" class="header">
李晓兵's avatar
李晓兵 committed
4
      <div slot="left" class="h-header-btn" @click="$routeGo()">
李晓兵's avatar
李晓兵 committed
5 6
        <img src="@/assets/userBind/arrow.png" >
        <span>忘记密码</span>
李晓兵's avatar
李晓兵 committed
7 8
      </div>
    </h-header>
李晓兵's avatar
李晓兵 committed
9 10 11 12 13 14
    <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>
李晓兵's avatar
李晓兵 committed
15
          <input slot="content" v-model="phone_number" placeholder="请输入手机号码">
李晓兵's avatar
李晓兵 committed
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
        </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="text" 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="text" placeholder="请重新输入密码"
            @blur="confirmCheck">
        </item>
      </list-item>
李晓兵's avatar
李晓兵 committed
41
    </h-content>
李晓兵's avatar
李晓兵 committed
42 43 44
    <bottom-tab class="footer-button">
      <tab-button class="put" @click.native="submit">确认</tab-button>
    </bottom-tab>
李晓兵's avatar
李晓兵 committed
45 46 47 48
  </h-view>
</template>

<script>
李晓兵's avatar
李晓兵 committed
49 50 51 52
  var CryptoJS = require('crypto-js')
export default {
  data () {
    return {
李晓兵's avatar
李晓兵 committed
53
      phone_number: '',
李晓兵's avatar
李晓兵 committed
54
      verifiedCode: '',
李晓兵's avatar
李晓兵 committed
55

李晓兵's avatar
李晓兵 committed
56
      username: '',
李晓兵's avatar
李晓兵 committed
57

李晓兵's avatar
李晓兵 committed
58 59
      user_password: '',
      confirm: '',
李晓兵's avatar
李晓兵 committed
60

李晓兵's avatar
李晓兵 committed
61 62 63 64
      phoneNumberFlag: false,
      verifiedCodeFlag: false,
      passwordFlag: false,
      confirmPassword: false,
李晓兵's avatar
李晓兵 committed
65

李晓兵's avatar
李晓兵 committed
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
      captchaKey: '123456',
      phoneCodeTimeOut: false,
      timer: 60000,
      showTimer: false,
      timerCount: 60,
      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位之间')
李晓兵's avatar
李晓兵 committed
91 92
      }
    },
李晓兵's avatar
李晓兵 committed
93 94 95 96 97 98 99 100
    confirm (value) {
      if (value.length > 20) {
        hlsPopup.showLongCenter('密码长度6~20位之间')
      }
    },
  },
  created () {
    let vm = this
李晓兵's avatar
李晓兵 committed
101
    let url = process.env.loginPath + 'admin'
李晓兵's avatar
李晓兵 committed
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
    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) {
李晓兵's avatar
李晓兵 committed
118
        if (hlsUtil.phoneNumber(vm.phone_number) || hlsUtil.phoneNumber86(vm.phone_number)) {
李晓兵's avatar
李晓兵 committed
119 120 121 122 123 124 125 126 127 128 129 130 131 132
          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.timerCount = vm.timer / 1000
          }, vm.timer)
李晓兵's avatar
李晓兵 committed
133
        } else {
李晓兵's avatar
李晓兵 committed
134
          hlsPopup.showLongCenter('手机号不存在,请重新输入!')
李晓兵's avatar
李晓兵 committed
135
        }
李晓兵's avatar
李晓兵 committed
136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170
      }
    },
    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.verifiedCodeFlag) {
        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()
李晓兵's avatar
李晓兵 committed
171
        let params = {
李晓兵's avatar
李晓兵 committed
172 173
          phone: vm.phone_number,
          password: md5passwprd
李晓兵's avatar
李晓兵 committed
174 175
        }
        hlsHttp.post(url, params).then(function (res) {
李晓兵's avatar
李晓兵 committed
176 177 178 179 180
          if (res.result === 'S') {
            hlsPopup.showLongCenter('修改成功')
            setTimeout(function () {
              vm.$router.push('login')
            }, 100)
李晓兵's avatar
李晓兵 committed
181
          }
李晓兵's avatar
李晓兵 committed
182
        })
李晓兵's avatar
李晓兵 committed
183 184
      }
    },
李晓兵's avatar
李晓兵 committed
185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204
    getVerifiedCode () {
      let vm = this
      hlsPopup.showLongCenter('测试验证码为123456')
      /* let url = process.env.rootPath + '/aliyun/sms'
      let params = {
        phoneNumber: vm.phone_number,
        signName: '车租易',
        templateCode: 'SMS_154585462',
      }
      hlsHttp.post(url, params).then(function (res) {
        if (res.code == 'OK') {
          vm.captchaKey = res.captchaKey
          vm.phoneCodeTimeOut = false
          setTimeout(function () {
            vm.captchaKey = ''
            vm.phoneCodeTimeOut = true
          }, 300000)
          hlsPopup.showLongBottom('验证码发送成功!')
        } else {
          hlsPopup.showLongBottom(res.message)
李晓兵's avatar
李晓兵 committed
205 206
        }
      }
李晓兵's avatar
李晓兵 committed
207
      ) */
李晓兵's avatar
李晓兵 committed
208
    },
李晓兵's avatar
李晓兵 committed
209 210
  },
}
李晓兵's avatar
李晓兵 committed
211 212 213
</script>

<style scoped lang="less">
李晓兵's avatar
李晓兵 committed
214 215 216 217 218 219 220 221 222
  @import "../styles/mixin";
  .header {
    background-color: #00469c;
    color: #fff;
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
李晓兵's avatar
李晓兵 committed
223
      }
李晓兵's avatar
李晓兵 committed
224 225 226 227 228 229 230
      span {
        color: #fff;
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.6px;
        line-height: 24px;
李晓兵's avatar
李晓兵 committed
231 232 233
      }
    }
  }
李晓兵's avatar
李晓兵 committed
234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258
  .description{
    .wh(100%,50px);
    .fja();
    background-color: #00469c;
    .sc(14px,#fff);
  }
.verified-code{
  .wh(60%,100%);
  text-align: right;
  .verified-code-box{
    margin-left: 14px;
    .border-left;
    color:#0057C3;
    line-height: 30px;
  }
  .verified-code-des{
    font-size: 10px;
    color:#0057C3;
  }
}
  .tab-content{
    background-color: #00469c;
    margin: 0 2%;
    color: #fff;
  }
李晓兵's avatar
李晓兵 committed
259
</style>