本篇用于記錄h5的框架搭建

組件地址:短信驗證碼登陸，手機號，驗證碼倒計時 - DCloud 插件市場

調(diào)整后的表單組件代碼:

<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;}//短信發(fā)送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,// 用戶注冊開關(guān)register: false,globalConfig: getApp().globalData.config,loginForm: {username: "admin",password: "admin123",phoneNum: '',code: "",uuid: ''}}},created() {this.getCode()},methods: {smsCall(opm) {//todo 	發(fā)送短信console.log("發(fā)送短信驗證碼");opm();this.getCode()},loginCall(ops) {this.loginForm.phoneNum = ops.phoneNumthis.loginForm.code = ops.smsCodethis.handleLogin()console.log("登錄", ops)},// 隱私協(xié)議handlePrivacy() {let site = this.globalConfig.appInfo.agreements[0]this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)},// 用戶協(xié)議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()}})},// 登錄成功后，處理函數(shù)loginSuccess(result) {// 設(shè)置用戶信息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>