本篇用于记录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) return
if (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 = true
setTimeout(() => {
this.countDown--;
this.codeViewMsg = "重新获取(" + this.countDown + "s)"
if (this.countDown <= 0) {
this.countDown = 61;
this.codeViewMsg = "获取验证码";
this.hasGetCode = false
return
}
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.phoneNum
this.loginForm.code = ops.smsCode
this.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.captchaEnabled
if (this.captchaEnabled) {
this.codeUrl = 'data:image/gif;base64,' + res.img
this.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>
文章评论