基于ruoyi-app的手机短信登录(uniapp)

本篇用于记录h5的框架搭建

组件地址:短信验证码登陆，手机号，验证码倒计时 - DCloud 插件市场

调整后的表单组件代码:

<template><view class="login-view"><!-- <input type="tel" confirm-type="确认" class="input" v-model="phoneNum" placeholder="请输入手机号" /> --><!-- 	<view class="input-w-view"><input class="input-w" confirm-type="确认" type="number" v-model="smsCode" placeholder="请输入验证码" /><view @click="sendMsg" class="code-view">{{codeViewMsg}}</view></view> --><view class="input-item flex align-center"><view class="iconfont icon-user icon"></view><input v-model="phoneNum" class="input" type="text" placeholder="请输入手机号" maxlength="30" /></view><view class="input-item flex align-center" style="width: 60%;margin: 0px;"><view class="iconfont icon-code icon"></view><input v-model="smsCode" type="number" class="input" placeholder="请输入验证码" maxlength="10" /><view class="login-code"><view @click="sendMsg" class="login-code-btn">{{codeViewMsg}}</view></view></view><view class="action-btn"><button @click="userLogin" type="primary" :disabled="btnDisabled"class="login-btn cu-btn block bg-blue lg round">登录</button></view></view>
</template><script>export 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)},}}
</script><style lang="scss">uni-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>

登录页引用:

<template><view class="normal-login-container"><view class="logo-content align-center justify-center flex"><image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix"></image><text class="title">若依移动端登录</text></view><view class="login-form-content"><jump-login @smsCall="smsCall" @loginCall="loginCall"></jump-login><view class="login-code"><image :src="codeUrl" @click="getCode" class="login-code-img"></image></view></view></view></template><script>import {getCodeImg} from '@/api/login'export 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')})}}}
</script><style lang="scss">page {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>