|
|
@@ -6,30 +6,37 @@
|
|
|
<div autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required">
|
|
|
<ul class="login-form login-form-1">
|
|
|
<li><span class="p-ico user-ico"></span>
|
|
|
- <input type="text" v-model="username" class="ui-ipt ng-pristine ng-valid" placeholder="手机号码">
|
|
|
+ <input type="text" v-model="phone" class="ui-ipt ng-pristine ng-valid" placeholder="手机号码">
|
|
|
<div class="wrong-tips ng-hide" v-show="err.loginError === 'two'">输入的用户名或者密码不正确，请确认</div>
|
|
|
<div class="wrong-tips ng-hide" v-show="err.loginErrorEnter">请输入正确的用户名密码以及验证码！</div>
|
|
|
<div class="wrong-tips ng-hide" v-show="err.loginError === 'one'">输入的用户名或者密码不正确，请确认</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
- <span class="p-ico code-ico"></span>
|
|
|
- <span href="javascript:void(0)" style="cursor:pointer" class="p-ico ng-scope"></span>
|
|
|
- <input type="password" v-model="password" class="ui-ipt ng-scope ng-pristine ng-valid"
|
|
|
- autocomplete="off" placeholder="密码">
|
|
|
- </li>
|
|
|
+ <span class="p-ico picode-ico" @click="changeCode()"></span>
|
|
|
+ <input type="text" v-model="code" class="ui-ipt ipt-s" placeholder="图形验证码" @click="!codeShow&&changeCode()" required="required">
|
|
|
|
|
|
- <li>
|
|
|
- <span class="p-ico picode-ico" @click="changeCode()"></span>
|
|
|
- <input type="text" v-model="code" class="ui-ipt ipt-s" placeholder="图形验证码" @click="!codeShow&&changeCode()" required="required">
|
|
|
+ <div class="wrong-tips ng-hide" v-show="codeShow && code =='' && phoneCode">请输入正确的验证码，看不清？点击验证码刷新</div>
|
|
|
|
|
|
- <div class="wrong-tips ng-hide" v-show="codeShow && code ==''">请输入正确的验证码，看不清？点击验证码刷新</div>
|
|
|
+ <span class="qr-code ng-scope" @click="changeCode()">
|
|
|
+ <img alt="验证码" :src="codeShow" v-show="codeShow">
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
|
|
|
- <span class="qr-code ng-scope" @click="changeCode()">
|
|
|
- <img alt="验证码" :src="codeShow" v-show="codeShow">
|
|
|
+ <li>
|
|
|
+ <span class="p-ico code-ico"></span>
|
|
|
+ <span href="javascript:void(0)" style="cursor:pointer" class="p-ico ng-scope"></span>
|
|
|
+ <input type="text" v-model="phoneCode" class="ui-ipt ipt-s" autocomplete="off" placeholder="短信校验码">
|
|
|
+ <span>
|
|
|
+ <el-button class="auth-code" type="infor" size="medium" v-if="phone.length != 11 || !code" disabled>校验码</el-button>
|
|
|
+ <el-button class="auth-code" type="warning" size="medium" v-else-if="!count" @click="getCode()">校验码</el-button>
|
|
|
+ <el-button class="auth-code" type="infor" size="medium" disabled v-else>{{count}} s</el-button>
|
|
|
</span>
|
|
|
+
|
|
|
</li>
|
|
|
|
|
|
+
|
|
|
+
|
|
|
<li class="clear mt10">
|
|
|
<div class="fl">
|
|
|
<label class="ui-label " :class="rememberUse?'checked':''">
|
|
|
@@ -55,7 +62,6 @@
|
|
|
|
|
|
<script>
|
|
|
import {httpServer} from "@/components/httpServer/httpServer.js";
|
|
|
- import md5 from 'js-md5'
|
|
|
export default {
|
|
|
props:{
|
|
|
err:{
|
|
|
@@ -74,22 +80,63 @@
|
|
|
picValidateCode: false,
|
|
|
code: '',
|
|
|
captchaId:'',
|
|
|
- username:'',
|
|
|
- password:'',
|
|
|
+ phone:'',
|
|
|
+ count:0,
|
|
|
+ phoneCode:'',
|
|
|
codeShow:''
|
|
|
}
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
+ checkPhone() {
|
|
|
+ let phone = this.phone;
|
|
|
+ if (!/^1[3456789]\d{9}$/.test(phone)) {
|
|
|
+ console.log("nophone", phone)
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ getCode(){
|
|
|
+ if (!this.checkPhone()) {
|
|
|
+ this.$message.error("请填写正确的手机号");
|
|
|
+ return
|
|
|
+ };
|
|
|
+ let param = {
|
|
|
+ type:'login',
|
|
|
+ phone: this.phone,
|
|
|
+ code: this.code,
|
|
|
+ captchaId:this.captchaId,
|
|
|
+ }
|
|
|
+ httpServer("Auth.getCode", param).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.successMsg("发送成功", 1)
|
|
|
+ this.startTimer()
|
|
|
+ }else{
|
|
|
+ this.changeCode()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ startTimer() {
|
|
|
+ const TIME_COUNT = 60; //更改倒计时时间
|
|
|
+ if (this.timer) clearInterval(this.timer);
|
|
|
+ this.count = TIME_COUNT;
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (this.count > 0) {
|
|
|
+ this.count--;
|
|
|
+ } else {
|
|
|
+ clearInterval(this.timer); // 清除定时器
|
|
|
+ this.timer = null;
|
|
|
+ this.count = 0;
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
dologin() {
|
|
|
- let mpass = this.password.replace(/(^\s*)|(\s*$)/g, "");
|
|
|
let param = {
|
|
|
- password:md5( mpass ),
|
|
|
- username: this.username,
|
|
|
+ phoneCode:this.phoneCode,
|
|
|
+ phone: this.phone,
|
|
|
code: this.code,
|
|
|
captchaId:this.captchaId,
|
|
|
}
|
|
|
- console.log("dologin", param)
|
|
|
this.$emit("login", param, this.changeCode )
|
|
|
},
|
|
|
changeCode(){
|
