eud-gk-share/pages/password/password.vue

<template>
	<view>
		<view class="logo">
			<image src="../../static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="form">
			<!-- <view class="prompt">
				注意：密码需8位以上，包含英文大小写、字母。
			</view> -->
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-align="right" :label-width="90">
				<uni-forms-item label="密码" name="password">
					<uni-easyinput type="password" maxlength="20" :clearable="false" v-model="formData.password"
						placeholder="请输入新密码" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="confirmPassword">
					<uni-easyinput type="password" maxlength="20" :clearable="false" v-model="formData.confirmPassword"
						placeholder="请再次确认新密码" />
				</uni-forms-item>
			</uni-forms>
			<button class="submit" :class="{'submit-disabled': !formData.password || !formData.confirmPassword}"
				@click="submit">确认</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	const formData = reactive({
		password: '',
		confirmPassword: '',
	})
	const rules = reactive({
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入密码',
			}, {
				validateFunction: (rule, value, data, callback) => {
					const passwordRegex = /^(?=.*[a-zA-Z])(.{8,})$/;
					if (value?.length >= 6 && value?.length <= 20) {
						return true
					}
					
					callback('密码必须为6至20位字符')
				}
			}]
		},
		confirmPassword: {
			rules: [{
				required: true,
				errorMessage: '请输入密码',
			}, {
				validateFunction: (rule, value, data, callback) => {
					if (value == formData.password) {
						return true
					}
					callback('两次密码不一致')
				}
			}]
		}
	})
	const form = ref()
	const parameter = ref({})
	const submit = () => {
		if (formData.password && formData.confirmPassword) {
			form.value.validate().then(async data => {
				const res = encodeURIComponent(JSON.stringify({
					...parameter.value,
					password: formData.password
				}))
				uni.navigateTo({
					url: `/pages/register/register?parameter=${res}`
				})
			})
		}
	}
	onLoad((options) => {
		parameter.value = JSON.parse(decodeURIComponent(options.parameter));
	})
</script>

<style lang="scss">
	.form {
		padding: 0 40rpx;

		.prompt {
			font-weight: 400;
			font-size: 24rpx;
			color: #F53F3F;
			line-height: 28rpx;
			margin-bottom: 20px;
		}

		:deep(.uni-forms-item__label) {
			height: 88rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #1D2129;
			line-height: 38rpx;
		}

		:deep(.uni-easyinput__content) {
			border: none;
		}

		:deep(.uni-easyinput__content-input) {
			background: #F1F5FE;
			height: 88rpx;
			border-radius: 24rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #1D2129;
			line-height: 38rpx;
		}

		:deep(.uni-input-placeholder) {
			font-weight: 400;
			font-size: 32rpx;
			color: #86909C;
			line-height: 38rpx;
		}
	}

	.submit {
		height: 112rpx;
		background: #3682EA;
		border-radius: 24rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 128rpx;
	}

	.submit-disabled {
		background: #B0CDFF;
	}
</style>