regiester.vue 7.6 KB
Newer Older
李晓兵's avatar
李晓兵 committed
1
<template>
李晓兵's avatar
李晓兵 committed
2 3
  <h-view class="public-style pwd-forgotten">
    <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 15 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
    <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="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>
linxin's avatar
linxin committed
49
var CryptoJS = require('crypto-js')
李晓兵's avatar
李晓兵 committed
50 51 52 53 54 55 56
export default {
  data () {
    return {
      phone_number: '',
      verifiedCode: '',
      user_password: '',
      confirm: '',
李晓兵's avatar
李晓兵 committed
57

李晓兵's avatar
李晓兵 committed
58 59 60 61
      phoneNumberFlag: false,
      verifiedCodeFlag: false,
      passwordFlag: false,
      confirmPassword: false,
李晓兵's avatar
李晓兵 committed
62

李晓兵's avatar
李晓兵 committed
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
      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
        }
李晓兵's avatar
李晓兵 committed
83 84
      }
    },
李晓兵's avatar
李晓兵 committed
85 86 87 88 89 90 91 92 93 94 95 96 97
    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
李晓兵's avatar
李晓兵 committed
98
    let url = process.env.loginPath + 'admin'
李晓兵's avatar
李晓兵 committed
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
    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
115
        if (hlsUtil.phoneNumber(vm.phone_number) || hlsUtil.phoneNumber86(vm.phone_number)) {
李晓兵's avatar
李晓兵 committed
116 117 118 119 120 121 122 123 124 125 126 127 128 129
          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
130
        } else {
李晓兵's avatar
李晓兵 committed
131
          hlsPopup.showLongCenter('手机号不存在,请重新输入!')
李晓兵's avatar
李晓兵 committed
132
        }
李晓兵's avatar
李晓兵 committed
133 134 135 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
      }
    },
    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 + 'register'
        let md5passwprd = CryptoJS.MD5(vm.user_password).toString().toUpperCase()
        let params = {
          phone: vm.phone_number,
linxin's avatar
linxin committed
170
          password: md5passwprd,
李晓兵's avatar
李晓兵 committed
171
        }
李晓兵's avatar
李晓兵 committed
172 173 174 175 176 177
        hlsHttp.post(url, params).then(function (res) {
          if (res.result === 'S') {
            hlsPopup.showLongCenter('注册成功')
            setTimeout(function () {
              vm.$router.push('login')
            }, 100)
李晓兵's avatar
李晓兵 committed
178
          }
李晓兵's avatar
李晓兵 committed
179 180 181 182 183 184 185
        })
      }
    },
    getVerifiedCode () {
      let vm = this
      hlsPopup.showLongCenter('测试验证码为123456')
      /* let url = process.env.rootPath + '/aliyun/sms'
李晓兵's avatar
李晓兵 committed
186 187 188
        let params = {
          phoneNumber: vm.phone_number,
          signName: '车租易',
李晓兵's avatar
李晓兵 committed
189
          templateCode: 'SMS_154585462',
李晓兵's avatar
李晓兵 committed
190 191
        }
        hlsHttp.post(url, params).then(function (res) {
李晓兵's avatar
李晓兵 committed
192 193 194 195 196 197 198 199
          if (res.code == 'OK') {
            vm.captchaKey = res.captchaKey
            vm.phoneCodeTimeOut = false
            setTimeout(function () {
              vm.captchaKey = ''
              vm.phoneCodeTimeOut = true
            }, 300000)
            hlsPopup.showLongBottom('验证码发送成功!')
李晓兵's avatar
李晓兵 committed
200
          } else {
李晓兵's avatar
李晓兵 committed
201
            hlsPopup.showLongBottom(res.message)
李晓兵's avatar
李晓兵 committed
202 203
          }
        }
李晓兵's avatar
李晓兵 committed
204
        ) */
李晓兵's avatar
李晓兵 committed
205
    },
李晓兵's avatar
李晓兵 committed
206 207
  },
}
李晓兵's avatar
李晓兵 committed
208 209 210
</script>

<style scoped lang="less">
李晓兵's avatar
李晓兵 committed
211 212 213 214 215 216 217 218 219
  @import "../styles/mixin";
  .header {
    background-color: #00469c;
    color: #fff;
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
李晓兵's avatar
李晓兵 committed
220
      }
李晓兵's avatar
李晓兵 committed
221 222 223 224 225 226 227
      span {
        color: #fff;
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.6px;
        line-height: 24px;
李晓兵's avatar
李晓兵 committed
228 229 230
      }
    }
  }
李晓兵's avatar
李晓兵 committed
231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255
  .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
256
</style>