备案过的网站换空间,部署php网站,教育机构加盟,html做网页本篇用于记录h5的框架搭建
组件地址:短信验证码登陆#xff0c;手机号#xff0c;验证码倒计时 - DCloud 插件市场
调整后的表单组件代码:
templateview classlogin-view!-- input typetel confirm-type确认…本篇用于记录h5的框架搭建
组件地址:短信验证码登陆手机号验证码倒计时 - DCloud 插件市场
调整后的表单组件代码:
templateview classlogin-view!-- input typetel confirm-type确认 classinput v-modelphoneNum placeholder请输入手机号 / --!-- view classinput-w-viewinput classinput-w confirm-type确认 typenumber v-modelsmsCode placeholder请输入验证码 /view clicksendMsg classcode-view{{codeViewMsg}}/view/view --view classinput-item flex align-centerview classiconfont icon-user icon/viewinput v-modelphoneNum classinput typetext placeholder请输入手机号 maxlength30 //viewview classinput-item flex align-center stylewidth: 60%;margin: 0px;view classiconfont icon-code icon/viewinput v-modelsmsCode typenumber classinput placeholder请输入验证码 maxlength10 /view classlogin-codeview clicksendMsg classlogin-code-btn{{codeViewMsg}}/view/view/viewview classaction-btnbutton clickuserLogin typeprimary :disabledbtnDisabledclasslogin-btn cu-btn block bg-blue lg round登录/button/view/view
/templatescriptexport default {name: jump-login,props: [smsCall, loginCall],data() {return {styles: {color: #000000,borderColor: #ffffff,backgroupColor: #ffffff},codeViewMsg: 获取验证码,countDown: 61,dbClick: false,btnDisabled: true,hasGetCode: false,phoneNum: 13488888888,smsCode: };},methods: {sendMsg() {const that this;if (this.hasGetCode) returnif (this.phoneNum || this.phoneNum undefined) {uni.showToast({icon: none,title: 请先输入手机号})return;}if (this.dbClick) return;this.dbClick true;setTimeout(() {this.dbClick false;}, 500)if (!this.validatePhoneNumber(that.phoneNum)) {uni.showToast({icon: none,title: 手机号码格式有误!})return;}//短信发送this.$emit(smsCall, () {that.countDown--;that.codeViewMsg 重新获取( this.countDown s)that.countDownData();});},userLogin() {const that this;if (this.phoneNum || this.phoneNum undefined) {uni.showToast({icon: none,title: 手机号不能为空!})return;}if (!this.validatePhoneNumber(that.phoneNum)) {uni.showToast({icon: none,title: 手机号码格式有误!})return;}const sD {phoneNum: that.phoneNum,smsCode: that.smsCode};console.log(sD);this.$emit(loginCall, sD);},validatePhoneNumber(phoneNumber) {// 使用正则表达式匹配手机号码的格式var pattern /^1[3456789]\d{9}$/;// 验证手机号码是否符合格式要求if (pattern.test(phoneNumber)) {return true; // 手机号码格式正确} else {return false; // 手机号码格式不正确}},countDownData() {this.btnDisabled false;this.hasGetCode truesetTimeout(() {this.countDown--;this.codeViewMsg 重新获取( this.countDown s)if (this.countDown 0) {this.countDown 61;this.codeViewMsg 获取验证码;this.hasGetCode falsereturn}this.countDownData();}, 1000)},}}
/scriptstyle langscssuni-input {box-sizing: unset;}.login-form-content {text-align: center;margin: 20px auto;margin-top: 15%;width: 80%;.input-item {margin: 20px auto;background-color: #f5f6f7;height: 45px;border-radius: 20px;.icon {font-size: 38rpx;margin-left: 10px;color: #999;}.input {width: 100%;font-size: 14px;line-height: 20px;text-align: left;padding-left: 15px;}}.login-btn {margin-top: 40px;height: 45px;}.reg {margin-top: 15px;}.xieyi {color: #333;margin-top: 20px;}.login-code {height: 38px;float: right;.login-code-btn {height: 38px;position: absolute;margin-left: 10px;width: 200rpx;display: flex;justify-content: center;align-items: center;background-color: #0c7bf3;color: #fff;border-radius: 20px}}}
/style
登录页引用:
templateview classnormal-login-containerview classlogo-content align-center justify-center fleximage stylewidth: 100rpx;height: 100rpx; :srcglobalConfig.appInfo.logo modewidthFix/imagetext classtitle若依移动端登录/text/viewview classlogin-form-contentjump-login smsCallsmsCall loginCallloginCall/jump-loginview classlogin-codeimage :srccodeUrl clickgetCode classlogin-code-img/image/view/view/view/templatescriptimport {getCodeImg} from /api/loginexport default {data() {return {codeUrl: ,captchaEnabled: true,// 用户注册开关register: false,globalConfig: getApp().globalData.config,loginForm: {username: admin,password: admin123,phoneNum: ,code: ,uuid: }}},created() {this.getCode()},methods: {smsCall(opm) {//todo 发送短信console.log(发送短信验证码);opm();this.getCode()},loginCall(ops) {this.loginForm.phoneNum ops.phoneNumthis.loginForm.code ops.smsCodethis.handleLogin()console.log(登录, ops)},// 隐私协议handlePrivacy() {let site this.globalConfig.appInfo.agreements[0]this.$tab.navigateTo(/pages/common/webview/index?title${site.title}url${site.url})},// 用户协议handleUserAgrement() {let site this.globalConfig.appInfo.agreements[1]this.$tab.navigateTo(/pages/common/webview/index?title${site.title}url${site.url})},// 获取图形验证码getCode() {getCodeImg().then(res {this.captchaEnabled res.captchaEnabled undefined ? true : res.captchaEnabledif (this.captchaEnabled) {this.codeUrl data:image/gif;base64, res.imgthis.loginForm.uuid res.uuid}})},// 登录方法async handleLogin() {if (this.loginForm.phoneNum ) {this.$modal.msgError(请输入您的手机号)} else if (this.loginForm.username ) {this.$modal.msgError(请输入您的账号)} else if (this.loginForm.password ) {this.$modal.msgError(请输入您的密码)} else if (this.loginForm.code this.captchaEnabled) {this.$modal.msgError(请输入验证码)} else {this.$modal.loading(登录中请耐心等待...)this.pwdLogin()}},// 密码登录async pwdLogin() {console.log(this.loginForm, this.loginForm)this.$store.dispatch(Login, this.loginForm).then(() {this.$modal.closeLoading()this.loginSuccess()}).catch(() {if (this.captchaEnabled) {this.getCode()}})},// 登录成功后处理函数loginSuccess(result) {// 设置用户信息this.$store.dispatch(GetInfo).then(res {this.$tab.reLaunch(/pages/index)})}}}
/scriptstyle langscsspage {background-color: #ffffff;}.login-form-content {text-align: center;margin: 20px auto;margin-top: 15%;width: 80%;.input-item {margin: 20px auto;background-color: #f5f6f7;height: 45px;border-radius: 20px;.icon {font-size: 38rpx;margin-left: 10px;color: #999;}.input {width: 100%;font-size: 14px;line-height: 20px;text-align: left;padding-left: 15px;}}.login-btn {margin-top: 40px;height: 45px;}.reg {margin-top: 15px;}.xieyi {color: #333;margin-top: 20px;}}
/style
