Bladeren bron

feat(register): 调整用户注册表单为手机号验证码注册流程

替换原用户名输入框为手机号输入框,新增验证码输入项与短信发送按钮,将真实姓名字段替换为昵称字段并更新表单类型定义,移除原单独的手机号输入字段
408249787 3 weken geleden
bovenliggende
commit
31957ef428
2 gewijzigde bestanden met toevoegingen van 23 en 10 verwijderingen
  1. 22 9
      pages/user/components/register.uvue
  2. 1 1
      pages/user/components/types.ts

+ 22 - 9
pages/user/components/register.uvue

@@ -5,12 +5,12 @@
 		}" :rules="[
 			{
 				required: true,
-				message: '用户名不能为空'
+				message: '手机号不能为空'
 			}
 		] as ClFormRule[]
 			">
 			<cl-input clearable class="" :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" v-model="form.username"
-				placeholder="请输入用户名(必填)"></cl-input>
+				placeholder="请输入手机号(必填)"></cl-input>
 		</cl-form-item>
 		<cl-form-item prop="password" required :pt="{
 			className: '!mb-4'
@@ -45,18 +45,30 @@
 				password placeholder="请确认密码(必填)">
 			</cl-input>
 		</cl-form-item>
-		<cl-form-item :pt="{
+		<cl-form-item prop="code" required :pt="{
 			className: '!mb-4'
-		}" prop="realName">
-			<cl-input clearable :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" v-model="form.realName"
-				placeholder="请输入姓名"></cl-input>
+		}" :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.username"></sms-btn>
+			</view>
 		</cl-form-item>
 		<cl-form-item :pt="{
 			className: '!mb-4'
-		}" prop="phone">
-			<cl-input clearable :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" v-model="form.phone"
-				placeholder="请输入手机号"></cl-input>
+		}" prop="nickName">
+			<cl-input clearable :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" v-model="form.nickName"
+				placeholder="请输入昵称(可选)"></cl-input>
 		</cl-form-item>
+
+
 	</view>
 </template>
 
@@ -64,6 +76,7 @@
 import { type PropType } from "vue";
 import type { LoginForm } from "./types";
 import { useRefs, } from "@/.cool";
+import SmsBtn from "./sms-btn.uvue";
 
 const props = defineProps({
 	form: {

+ 1 - 1
pages/user/components/types.ts

@@ -7,6 +7,6 @@ export type LoginForm = {
 	code: string;
 	loginType: number;
 	confirmPassword?: string;
-	realName?: string;
+	nickName?: string;
 	phone?: string;
 };