代码如下
<template>
<view class="login" :style="{'paddingTop': menuContentTop}">
<view class="title">{{passwordTel ? passwordTel : isLogin ? '登录' : '注册'}}</view>
<view class="helloTip" v-show="isLogin && !passwordTel">您好，欢迎来到顶医！</view>
<view class="content">
<u--form
:model="formData"
:rules="rules"
ref="refFormData"
>
<u-form-item prop="phone" borderBottom>
<u--input placeholder="请输入手机号" v-model="formData.phone" border="none">
<template slot="suffix" v-if="!isLogin || passwordTel">
<u-code
ref="uCode"
@change="codeChange"
seconds="60"
changeText="X秒重新获取"
></u-code>
<u-button @tap="getCode" :text="tips" :plain="true" size="small" style="border: none;background: none;"></u-button>
</template>
</u--input>
</u-form-item>
<u-form-item prop="code" borderBottom v-if="!isLogin || passwordTel">
<u--input v-model="formData.code" placeholder="请输入验证码" border="none"></u--input>
</u-form-item>
</u--form>
<uni-forms
:modelValue="uniFormData"
:rules="uniRules"
ref="uniFormData"
validate-trigger="blur">
<uni-forms-item name="password">
<uni-easyinput type="password"
v-model="uniFormData.password"
:placeholder="passwordTel ? '请输入新密码' : '请输入密码'"
placeholderStyle="color: rgb(192, 196, 204); font-size: 15px;"
:inputBorder="false"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="confirmPassword" borderBottom v-if="!isLogin || passwordTel">
<uni-easyinput type="password"
v-model="uniFormData.confirmPassword"
:placeholder="passwordTel ? '请再次输入新密码' : '请再次输入密码'"
placeholderStyle="color: rgb(192, 196, 204); font-size: 15px;"
:inputBorder="false"></uni-easyinput>
</uni-forms-item>
</uni-forms>
</view>
<view class="btn">
<u-button type="primary" :text="passwordTel ? '提交' : isLogin ? '登录' : '注册'" @click="handelSubmit"></u-button>
<view class="text" v-if="!passwordTel">
<text @click="changePassword">忘记密码</text>
<text class="setColor" @click="toggleStatus">{{isLogin ? '新用户注册' : '已有账号？去登录'}}</text>
</view>
<view class="text" v-if="passwordTel === '密码找回'">
<text class="setColor" @click="backLogin">返回登录</text>
</view>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import { mapState } from 'vuex'
import { sendSms, registerByApp, updatePassword } from "@/api/user.js"
export default {
name: "Login",
options: {
styleIsolation: 'shared', // 解除样式隔离
},
data() {
const validateCode = (rule, value, callback) => {
const reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g
if(!reg.test(value)){
callback(new Error('请输入6位数字验证码'))
}
callback()
}
return {
formData: {
phone: '',
code: '',
},
rules: {
phone: [
{ required: true, message: '请输入手机号', trigger: ['blur'],},
{
validator: (rule, value, callback) => {
return uni.$u.test.mobile(value);
},
message: '请输入正确手机号',
trigger: ['blur'],
}
],
code: [
{ required: true, len: 6, message: '请输入6位数字验证码', trigger: ['blur'],},
{ validator: validateCode, trigger: ['blur'],},
],
},
isLogin: true,
tips: '',
checkboxValue1: [],
changeLoginStatus: null, // 挑战到登录页是否改变登录/注册状态
uniFormData: {
password: '',
confirmPassword: '',
},
uniRules: {
password: {
rules: [{ required: true, errorMessage: '请输入密码'}],
},
confirmPassword: {
rules: [
{ required: true, errorMessage: '请再次输入密码'},
{
validateFunction: (rule,value,data,callback) => {
if (this.uniFormData.confirmPassword !== this.uniFormData.password) {
callback('两次输入的密码不一致');
}
return
}
},
],
},
}
}
},
computed: {
...mapState("user", ['passwordTel', 'menuContentTop', 'userOpenId'])
},
watch: {
changeLoginStatus: {
handler(newVal) {
if (newVal) this.isLogin = false
},
immediate: true
}
},
onReady() {
// 兼容微信小程序
this.$refs.refFormData.setRules(this.rules)
this.$refs.uniFormData.setRules(this.uniRules)
},
onLoad(data) {
this.changeLoginStatus = data.changeLoginStatus
},
onShow() {
this.$common._removeStorage('token')
},
methods: {
codeChange(text) {
this.tips = text;
},
getCode() {
if (!this.formData.phone) {
this.$common._showToast('请输入手机号')
return
}
if (this.$refs.uCode.canGetCode) {
this.$refs.uCode.start();
sendSms({ phone: this.formData.phone }).then(res => {
// 这里此提示会被this.start()方法中的提示覆盖
this.$refs.uToast.show({message: '验证码已发送',})
})
}
},
// 切换登录/注册及其他
toggleStatus() {
this.reset()
this.isLogin = !this.isLogin
this.$store.commit('user/CHANGE_PASSWORD_TEL', '')
},
// 返回登录
backLogin() {
this.toggleStatus()
this.isLogin = true
},
// 修改密码
changePassword() {
this.reset()
this.$store.commit('user/CHANGE_PASSWORD_TEL', '密码找回')
},
// 登录/注册
handelSubmit() {
this.$refs.refFormData.validate().then(res => {
this.$refs.uniFormData.validate().then(res=>{
// 校验通过
if (this.isLogin) {
if (this.passwordTel) {
// 忘记密码，修改密码
this.updatePassword()
} else {
this.$store.dispatch('user/loginByAccount', { phone: this.formData.phone, password: this.uniFormData.password })
}
} else {
this.registerByApp()
}
})
}).catch(err => {
this.$refs.uniFormData.validate().then()
})
},
// 注册
registerByApp() {
registerByApp({
userPhone: this.formData.phone,
verifyCode: this.formData.code,
userPwd: this.uniFormData.password,
openId: this.userOpenId
}).then(res => {
this.$store.dispatch('user/loginByAccount', { phone: this.formData.phone, password: this.uniFormData.password })
})
},
// 忘记密码
updatePassword() {
updatePassword({
userPhone: this.formData.phone,
verifyCode: this.formData.code,
userPwd: this.uniFormData.password,
}).then(res => {
this.$common._showToast('密码修改成功')
if (this.passwordTel === '修改密码') {
// 个人中心-修改密码
this.$store.commit('user/CHANGE_PASSWORD_TEL', '')
this.$common._jumpToUrl('../personalCenter/personalCenter', 2)
} else {
// 登录-忘记密码
this.isLogin = true
this.$store.commit('user/CHANGE_PASSWORD_TEL', '')
this.reset()
}
}).catch(err => {
this.reset()
})
},
// 重置
reset() {
this.$refs.refFormData.resetFields()
this.$refs.refFormData.clearValidate()
this.$refs.uniFormData.clearValidate()
this.uniFormData.password = ''
this.uniFormData.confirmPassword = ''
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/form.scss';
/deep/ {
.content {
.u-button:before {
background: none;
}
}
uni-label {
font-size: 24rpx;
color: #00000099;
uni-text {
color: #1683FB;
}
}
.uni-easyinput__content-input {
padding-left: 0 !important;
}
uni-radio-group {
display: flex;
align-items: center;
}
/* #ifdef MP-WEIXIN */
radio-group {
display: flex;
align-items: center;
}
/* #endif */
.uni-forms-item {
border-bottom: 1px solid rgba(214, 215, 217, 0.8);
margin-bottom: 0;
padding: 10rpx 0;
}
.uni-forms-item__error.msg--active {
position: initial;
margin-left: 45px;
}
}
.login {
box-sizing: border-box;
min-height: 100vh;
.title {
color: #3D3D3D;
font-weight: 700;
font-size: 40rpx;
box-sizing: border-box;
padding: 120rpx 76rpx 0;
}
.helloTip {
opacity: 0.3;
padding: 0 76rpx;
margin-top: 26rpx;
}
.content {
margin-top: 100rpx;
box-sizing: border-box;
padding: 0 76rpx;
}
.btn {
margin-top: 128rpx;
box-sizing: border-box;
padding: 0 76rpx;
.text {
margin-top: 36rpx;
color: #3D3D3D;
display: flex;
justify-content: space-between;
.setColor {
color: #1683FB;
}
}
}
}
</style>
文章来源地址https://www.toymoban.com/news/detail-717722.html
文章来源：https://www.toymoban.com/news/detail-717722.html
到了这里，关于uniapp-uni-easyinput使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
