youxi-app/pages/user/components/register.uvue

<template>
	<view class=" w-[80vw]">
		<cl-form-item prop="username" required :pt="{
			className: '!mb-4'
		}" :rules="[
			{
				required: true,
				message: '用户名不能为空'
			}
		] as ClFormRule[]
			">
			<cl-input clearable class="" :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" v-model="form.username"
				placeholder="请输入用户名（必填）"></cl-input>
		</cl-form-item>
		<cl-form-item prop="password" required :pt="{
			className: '!mb-4'
		}" :rules="[
			{
				required: true,
				message: '密码不能为空'
			}, {
				min: 6,
				max: 12,
				message: '密码长度必须在6到16位之间'
			}
		] as ClFormRule[]
			">
			<cl-input :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" clearable v-model="form.password" password
				placeholder="请输入密码（必填）">
			</cl-input>
		</cl-form-item>
		<cl-form-item prop="confirmPassword" required :pt="{
			className: '!mb-4'
		}" :rules="[
			{
				required: true,
				message: '确认密码不能为空'
			}, {
				validator: (val: string) => val === form.password,
				message: '两次密码输入不一致'
			}
		] as ClFormRule[]
			">
			<cl-input :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" clearable v-model="form.confirmPassword"
				password placeholder="请确认密码（必填）">
			</cl-input>
		</cl-form-item>
		<cl-form-item prop="phone" required :pt="{
			className: '!mb-4'
		}">
			<cl-input clearable class="" :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" v-model="form.phone"
				placeholder="请输入验证码手机号"></cl-input>
		</cl-form-item>
		<cl-form-item prop="code" required :pt="{
			className: '!mb-4'
		}" :rules="[
			{
				required: true,
				message: '验证码不能为空'
			}
		] as ClFormRule[]
			">
			<cl-input :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" v-model="form.code" :clearable="false"
				type="number" placeholder="请输入验证码（必填）">
			</cl-input>
			<view class="absolute right-0">
				<sms-btn :ref="refs.set('smsBtn')" :phone="form.phone"></sms-btn>
			</view>
		</cl-form-item>

	</view>
</template>

<script setup lang="ts">
import { type PropType } from "vue";
import type { LoginForm } from "./types";
import { useRefs, } from "@/.cool";
import SmsBtn from "./sms-btn.uvue";

const props = defineProps({
	form: {
		type: Object as PropType<LoginForm>,
		default: () => ({})
	}
});

const emit = defineEmits(["success"]);

const refs = useRefs();

</script>