访客申请表单项增减

src/pages/visitor/apply.vue

@@ -4,7 +4,7 @@
 
 		<tm-sheet margin="[0, 20]">
 			<view class="mx-auto text-center text-lg">访客申请</view>
-			<tm-text color="#999999" class="bg-#FFF7E6 p-1 pl-2 my-1">！访客需要填写一下验证信息</tm-text>
+			<tm-text color="#999999" class="bg-#FFF7E6 p-1 pl-2 my-1">！访客需要填写以下验证信息</tm-text>
 			<tm-form @submit="onsubmit" v-model="form" :rules="rules">
 				<tm-form-item name="username" label="您的姓名">
 					<tm-input color="transparent" v-model="form.username" placeholder="姓名" />
@@ -34,20 +34,26 @@
 					</tm-picker>
 				</tm-form-item>
 				<tm-form-item name="username" label="随行人员">
-					<view class="flex">
-						<tm-input color="transparent" v-model="form.username" placeholder="姓名" />
+					<view class="flex items-center" v-for="(v, i) in form.entourage" :key="i">
+						<tm-input color="transparent" v-model="form.entourage[i].username" placeholder="姓名" />
 						&nbsp;
-						<tm-input color="transparent" v-model="form.username" placeholder="手机号" />
-					</view>
-					<view class="flex">
-						<tm-input color="transparent" v-model="form.username" placeholder="姓名" />
+						<tm-input color="transparent" v-model="form.entourage[i].phone" placeholder="手机号" />
 						&nbsp;
-						<tm-input color="transparent" v-model="form.username" placeholder="手机号" />
+						<view class="w-80rpx">
+							<tm-button v-if="i > 0 && i < 6" color="error" size="s" btnIcon width="40" rounded @click="removeEntourage(i)">—</tm-button>
+						</view>
 					</view>
+					<tm-button skin="thin" block size="s" class="my-2" @click="addEntourage">添加</tm-button>
 				</tm-form-item>
 				<tm-form-item name="username" label="车牌号">
-					<tm-input color="transparent" v-model="form.username" placeholder="车牌号" />
-					<tm-input color="transparent" v-model="form.username" placeholder="车牌号" />
+					<view v-for="(v, i) in form.carPlate" :key="i" class="flex items-center">
+						<tm-input color="transparent" v-model="form.carPlate[i]" :placeholder="`车牌号${i + 1}`" />
+						&nbsp;
+						<view class="w-80rpx">
+							<tm-button v-if="i > 0 && i < 6" color="error" size="s" btnIcon width="40" rounded @click="removeCarPlate(i)">—</tm-button>
+						</view>
+					</view>
+					<tm-button skin="thin" block size="s" class="my-2" @click="addCarPlate">添加</tm-button>
 				</tm-form-item>
 				<tm-form-item name="pingtai" label="到访单位">
 					<tm-picker
@@ -94,21 +100,28 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { reactive, ref } from "vue"
 
-const form = ref({
+const form = reactive({
 	username: "",
 	price: "",
-	checkbox: [] as string[],
+	checkbox: [],
 	radio: "",
 	time: "2024-6-5",
-	pingtai: [] as string[],
+	pingtai: [],
 	store: 0,
 	score: 0,
 	textarea: "",
+	entourage: [
+		{
+			username: "",
+			phone: "",
+		},
+	],
+	carPlate: [""],
 })
 
-const _timestr = ref(form.value.time)
+const _timestr = ref(form.time)
 const _pingtaistr = ref("")
 
 const rules: Record<string, TM.FORM_RULE[]> = {
@@ -127,6 +140,31 @@ const rules: Record<string, TM.FORM_RULE[]> = {
 	textarea: [{ required: true, max: 100, message: "请输入内容" }],
 }
 
+// 添加随从
+const addEntourage = () => {
+	if (form.entourage.length > 5) return uni.showToast({ title: "最多添加6个随从", icon: "none" })
+	form.entourage.push({
+		username: "",
+		phone: "",
+	})
+}
+
+// 移除随从
+const removeEntourage = (index: number) => {
+	form.entourage.splice(index, 1)
+}
+
+// 添加车牌号
+const addCarPlate = () => {
+	if (form.carPlate.length > 3) return uni.showToast({ title: "最多添加4个车牌", icon: "none" })
+	form.carPlate.push("")
+}
+
+// 移除车牌号
+const removeCarPlate = (index: number) => {
+	form.carPlate.splice(index, 1)
+}
+
 // 表单提交
 const onsubmit = (evt: TM.FORM_SUBMIT_RESULT) => {
 	console.log("校验结果:", evt)