<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="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> </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: 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位之间') } }, 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.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.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() 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.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) } } ) */ }, }, } </script> <style scoped lang="less"> @import "../styles/mixin"; .header { background-color: #00469c; 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: #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; } </style>