uni |
您所在的位置：网站首页 › uniapp制作app保持登录 › uni |
|
视图层的功能都已经做好了，包括账号密码登录、手机验证码登陆，登录信息合法性校验。还没有和后台进行数据对接，后台的数据交互还没有做全，后期做完微信QQ等三方登录后再贴一篇。 整体功能仅做参考，如有问题可进一步留言沟通，代码制作参考了以下两位同学的内容： https://blog.csdn.net/weixin_43487066/article/details/106033315 https://www.jianshu.com/p/c10557859601 html代码 {{codeBtn.codeText}} {{loginWay}} 忘记密码 登录 登录 注册 微信登录js代码 export default { data() { return { isShow: true, loginWay: "短信验证码登陆", //用户输入内容 userName: "", userPwd: "", userNamePhone: "", userPwdPhone: "", //验证规则 rules: { userName: { rule:/\S/, msg: "账号不能为空" }, userPwd: { rule: /^[0-9a-zA-Z]{6,16}$/, msg: "密码应该为6-16位" }, userNamePhone: { rule: /^1[3456789]\d{9}$/, msg: "手机号格式错误" }, userPwdPhone: { rule: /^[0-9]{6}$/, msg: "请输入6位数字验证码" } }, //验证码按钮 codeBtn: { codeTime: 60, codeText: "获取验证码", codeStatus: true } } }, methods:{ //切换登录方式 loginSwitch() { this.isShow = !this.isShow if(this.isShow) { this.loginWay = "短信验证码登陆" }else{ this.loginWay = "账号密码登陆" } }, //账号密码点击登录 submit() { if(!this.validate('userName')) return; if(!this.validate("userPwd")) return; uni.showLoading({ title:"登录中..." }); //向服务器发送登陆请求 setTimeout(()=>{ //隐藏登录状态 uni.hideLoading(); uni.navigateBack({ delta:1 }) },2000) }, //判断验证是否符合要求，合法性校验 validate(key){ let bool=true; if(!this.rules[key].rule.test(this[key])){ //提示信息 uni.showToast({ title:this.rules[key].msg, }) //取反 bool=false; return false; } return bool; }, //手机验证码登录 submitPhone() { if(!this.validate('userNamePhone')) return; if(!this.validate("userPwdPhone")) return; //向服务器发送登陆请求 uni.request({ url: 'http://.....',//接口地址 data: { user_MobilePhone: this.userNamePhone, user_Password: this.userPwdPhone }, method: "POST", success: (res) => { console.log("之前的数据状态" + "账号：" + this.userNamePhone + "密码：" + this.userPwdPhone) let list = JSON(stringify(res.data)) console.log("数据状态:" + list) if(list == "[]"){ uni.showToast({ icon: 'none', title: '用户名密码错误' }) return } uni.showToast({ icon: "none", title: "登陆成功" }) uni.switchTab({ url: "../course/index" }) }, fail: () => { uni.showToast({ icon: "none", title: "网络异常，请稍后再试" }) } }) }, //获取验证码按钮点击计时事件 getPhonecode() { if(this.validate('userNamePhone') && this.codeBtn.codeStatus) { this.codeBtn.codeStatus = false let timerId = setInterval(() => { let codetime = this.codeBtn.codeTime codetime-- this.codeBtn.codeTime = codetime this.codeBtn.codeText = codetime + "s" if(codetime < 1) { clearInterval(timerId) this.codeBtn.codeText = "重新获取" this.codeBtn.codeTime = 60 this.codeBtn.codeStatus = true } },1000) } }, //微信登录 // wechatLogin() { // } } }
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |