From 9b78961b1b02396826d11e970bb983878af4287a Mon Sep 17 00:00:00 2001 From: e <2432808546@qq.com> Date: Mon, 19 Jul 2021 15:34:58 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E7=99=BB=E5=BD=95=EF=BC=8C=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=8C=BA=E5=88=86=E8=B4=A6=E5=8F=B7=E5=92=8C=E6=89=8B?= =?UTF-8?q?=E6=9C=BA=EF=BC=8C=E9=82=AE=E7=AE=B1=E7=AD=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/api.js | 5 +- src/views/Login.vue | 220 +++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 210 insertions(+), 15 deletions(-) diff --git a/src/utils/api.js b/src/utils/api.js index cf684c1..9f4f3d0 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -8,8 +8,9 @@ export default { upload:`${host}/nakadai/nakadai/oss/fileUpload`,// 上传文件-订单 logins: `${host}/users/users/user/login`, //登录 - verification:`${host}/users/users/user/captcha`,// 验证码 - + verification:`${host}/users/users/user/captcha`,// 验证码图片 + bindPhoneOrEmail:`${host}/users/users/userAccount/bindPhoneOrEmail`,// 绑定手机 + sendPhoneOrEmailCode:`${host} /users/users/userAccount/sendPhoneOrEmailCode`,// 手机验证码 // 订单管理 orderAdd:`${host}/nakadai/nakadai/order/add`,// 订单添加 orderDelete:`${host}/nakadai/nakadai/order/delete`,// 删除定单 diff --git a/src/views/Login.vue b/src/views/Login.vue index b07a757..ff5f95e 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -8,8 +8,12 @@
-

账号登录

- + + + 账号登录 + 手机号/邮箱登录 + + @@ -21,7 +25,7 @@ > - + 马上登录
+ + + + + + + + + + + + + + + +
+ 忘记密码? +
+ +
+ + + + + + + +
+ + {{phoneBtnText}} +
+ + + + 取 消 + 确 定 + + @@ -48,36 +100,97 @@ import vFooter from '../components/Footer' export default { data: function() { + var regPhoneOrEmail = (rule, value, callback) => {// 验证手机或邮箱 + let emailReg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ + let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ + if (value === '') { + callback(new Error('请输入手机或邮箱！')); + } else if (!emailReg.test(value)&&!phoneReg.test(value)) { + callback(new Error('输入的手机/邮箱格式不正确!')); + } else { + callback(); + } + }; return { + activeIndex:"1", + + showVerify:false,// 账号-验证码展示 + verificationIMG:'',// 账号验证码拼接链接 + + // 账号 param: { account: 'test', password: '111aaa', code:'', platform:3, - random:'' + random:'', + distinguish:1 }, rules: { - account: [{ required: true, message: '请输入用户名', trigger: 'blur' }], + account: [{ required: true, message: '请输入账号', trigger: 'blur' }], + password: [{ required: true, message: '请输入密码', trigger: 'blur' }], + code: [{ required: true, message: '请输入验证码', trigger: 'blur' }], + }, + + // 手机+邮箱 + showPhoneVerify:false,// 邮箱-验证码展示 + PhoneVerificationIMG:'',// 电话或邮箱验证码拼接链接 + phoneOrEmail: { + account: '', + password: '', + code:'', + platform:3, + random:'', + distinguish:2 + }, + phoneOrEmailrules:{ + account: [{ validator: regPhoneOrEmail, trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }], code: [{ required: true, message: '请输入验证码', trigger: 'blur' }], }, - activeName: 'first', - verificationIMG:'' + + phoneVisible:false, + phone:'', + phoneCode:'', + phoneDisabled:false, + phoneBtnText: '发送验证码', + phoneTimer:'', + phoneOpener:'' + }; }, components: { vFooter }, + watch:{ + verificationIMG:function(val){// 监听账号--展示验证码框 + if(val){ + this.showVerify = true + }else{ + this.showVerify = false + } + }, + PhoneVerificationIMG:function(val){// 监听账号--展示验证码框 + if(val){ + this.showPhoneVerify = true + }else{ + this.showPhoneVerify = false + } + }, + }, created(){ - + if(this.param.account){ + this.showVerify = true + } this.blur() }, methods: { - submitForm() { - - this.$refs.login.validate(valid => { + submitForm(val) { + let ref = val==='phone'?'phoneOrEmail':'login' + let param = val==='phone'?this.phoneOrEmail:this.param + this.$refs[ref].validate(valid => { if (valid) { - this.$post(this.api.logins,this.param).then(res => { + this.$post(this.api.logins,param).then(res => { this.$message.success(res.message); sessionStorage.setItem('token',res.data.token) this.$router.push({ @@ -89,6 +202,9 @@ export default { // this.$store.commit("userLoginData", { userLogin_id : user.userId,userName: user.userName,roleId: user.roleId}); }).catch(err => { console.log(err,'reserr'); + if(err.status===30001){ + this.phoneVisible = true + } // this.$message.error(err.message) }); } else { @@ -96,6 +212,7 @@ export default { return false; } }); + }, handleClick(tab, event) { console.log(tab, event); @@ -106,7 +223,79 @@ export default { } this.param.random = Math.floor(Math.random()*999999999) this.verificationIMG = this.api.verification+'?random='+`${this.param.random}` - } + }, + phoneBlur(){ + console.log(this.phoneOrEmail.account,'this.phoneOrEmail.account'); + if(!this.phoneOrEmail.account){ + return this.PhoneVerificationIMG = '' + } + console.log(123,'後續'); + this.phoneOrEmail.random = Math.floor(Math.random()*999999999) + this.PhoneVerificationIMG = this.api.verification+'?random='+`${this.phoneOrEmail.random}` + console.log(this.PhoneVerificationIMG,'this.PhoneVerificationIMG'); + }, + handleSelect(val){ + this.activeIndex = val + }, + sendPhoneCode(){ + if(!this.phone) return this.$message.warning('请输入手机号') + if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号') + let data = { + phone: this.phone, + types: 2 + } + this.$post(this.api.sendPhoneOrEmailCode,data).then(res => { + console.log(res,'当前绑定手机否'); + this.phoneCountdown()// 倒计时 + if(res.message.opener){ + this.phoneOpener = res.message.opener + }else{ + this.$message(res.message) + } + + }).catch(res => {}) + }, + phoneSubmit(){ + if(!this.phone) return this.$message.warning('请输入手机号') + if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号') + if(!this.phoneCode) return this.$message.warning('请输入验证码') + let data = { + phone: this.phone, + types: 2, + code: this.phoneCode, + opener: this.phoneOpener, + platform: 3, + account: this.param.account + } + this.$post(this.api.bindPhoneOrEmail,data).then(res => { + sessionStorage.setItem('token',res.token) + this.$router.push({ + path:'/customer' + }); + localStorage.setItem('ms_username', this.param.username); + this.$message.success('绑定成功') + // this.form.phone = this.phone + // this.phoneVisible = false + }).catch(res => {}) + }, + phoneCountdown(){ + let count = 60 + if(!this.phoneTimer){ + this.phoneDisabled = true + this.phoneTimer = setInterval(() => { + console.log('倒计时中') + if(count > 0){ + count-- + this.phoneBtnText = `${count}秒后重试` + }else{ + this.phoneDisabled = false + clearInterval(this.phoneTimer) + this.phoneTimer = null + this.phoneBtnText = `发送验证码` + } + },1000) + } + }, }, }; @@ -214,4 +403,9 @@ img{ width: 160px; height: 78px; } +.el-menu-demo{ + display: flex; + justify-content: space-between; + border-bottom: 0; +} \ No newline at end of file