<template> <h-view id="register" class="public-style"> <h-content> <div class="right-logo"> <img src="@/assets/login/return.png" @click="returnLogin"> <img src="@/assets/login/right.png" > </div> <div class="box"> <div class="box-content"> <img class="register-title" src="../assets/login/reg-logo.png" > <div class="reg-item"> <img src="../assets/login/reg-user.png" class="left-icon" > <input v-model="phone_number" placeholder="请输入手机号码" > <img v-if="phone_number" class="right-icon" src="@/assets/login/reg-de.png" @click="clearAccount" > </div> <div class="reg-item"> <img src="../assets/login/check.png" class="left-icon" > <input v-model="verifiedCode" type="text" placeholder="请填写验证码" > <div 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> </div> <div class="reg-item"> <img src="../assets/login/pass.png" class="left-icon" > <input v-model="user_password" :type="pwdType" placeholder="请输入6~20位密码" maxlength="20" @blur="passwordCheck" > <img v-if="user_password" :src="openEye" class="right-icon" @click="changeType" > </div> <div class="reg-item"> <img src="../assets/login/pass.png" class="left-icon" > <input v-model="confirm" :type="pwdType" placeholder="请重新输入密码" @blur="confirmCheck" > <img v-if="confirm" :src="openEye" class="right-icon" @click="changeType" > </div> <div class="button submit" @click="submit">注册</div> </div> </div> </h-content> </h-view> </template> <script> var CryptoJS = require('crypto-js') export default { data () { return { pwdType: 'password', // 密码类型 openEye: require('@/assets/login/passNoShow.png'), // 图片地址 phone_number: '', verifiedCode: '', 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: { clearAccount: function () { this.phone_number = '' this.verifiedCode = '' this.user_password = '' this.confirm = '' }, changeType () { this.pwdType = this.pwdType === 'password' ? 'text' : 'password' this.openEye = this.pwdType === 'password' ? require('@/assets/login/passNoShow.png') : require('@/assets/login/passShow.png') }, 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 + 'register' let md5passwprd = CryptoJS.MD5(vm.user_password) .toString() .toUpperCase() let params = { master: { 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) } else { hlsPopup.showLongCenter(res.message) } }) } }, returnLogin () { this.$router.go(-1) }, 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 = { 'info': { '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) } }) /* 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 lang="less"> @import "../styles/mixin"; @import "../styles/vue-1px"; #register { .content { background: url("../assets/login/register.png"); background-size: 100% 100%; } .box { width: 327px; height: 512px; margin: 0 auto; margin-top:80px; background: #1d3fff; border-radius: 8px; .box-content { width: 279px; margin: 0 auto; .register-title { width: 156px; } .reg-item { position: relative; width: 100%; height: 40px; margin-top: 30px; line-height: 30px; img { width: 28px; height: 28px; } .left-icon { position: absolute; } .right-icon { width: 24px; height: 24px; position: absolute; right: 0px; top: 5px; } .verified-code { position: absolute; right: 0px; top: 0px; .verified-code-box { padding-left: 12px; border-left: 1px solid #ffffff; color: #fff; font-family: PingFangSC-Regular; font-size: 14px; line-height: 30px; } .verified-code-des { font-size: 10px; color: #fff; } } input { width: 100%; text-indent: 30px; background-color: #1d3fff; font-family: PingFangSC-Regular; padding-bottom: 8px; font-size: 14px; color: #ffffff; line-height: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } input::placeholder { font-family: PingFangSC-Regular; font-size: 14px; color: rgba(255, 255, 255, 0.6); } input:focus { border-bottom: 1px solid #fff; } } } } .right-logo { width: 327px; margin: 0 auto; margin-top:10%; img:last-child{ float: right; width: 50px; } img:first-child{ float:left; width: 20px; } // img { // width: 50px; // } } .register-title { margin-top: 16%; // margin-left: 10%; img { width: 180px; } } .hls-list-item { width: 90%; margin-left: 8%; margin-top: 6%; background: #1d3fff; } .hls-item .contents { //.setBottomLine(rgba(29,63,255,0.25)) border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .hls-item .contents .add-name .left-icon { width: 26px; } .hls-item .contents .add-content input { text-align: left; background-color: #1d3fff; font-family: PingFangSC-Regular; font-size: 14px; color: #ffffff; } .hls-item .contents .add-content input::placeholder { font-family: PingFangSC-Regular; font-size: 14px; color: rgba(255, 255, 255, 0.6); } .add-content { .right-icon { width: 14px; } } .submit { background: #ffffff; border-radius: 4px; color: @headerColor; width: 279px; height: 40px; margin-top: 50px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; &.activated { opacity: 0.8; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } .return { opacity: 1; background: #fff; border-radius: 8px 0 0 8px; height: 50px; margin: 0 0 6% 12%; font-size: 16px; color: #000000; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; &.activated { opacity: 0.8; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } } </style>