uniapp-uni-easyinput使用

代码如下

<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>