pj_mini_app_cloud/src/pages/integrated/visitor/invitation.vue

<template>
	<crud-layout title="访客邀约" mainIsScroll :bg="$fileUrl(filePath(SERVICE_IMAGE.blueBg))">
		<view class="h-20rpx" />
		<tm-sheet :margin="[0]">
			<tm-alert :border="['2']" :borderColor="['#89c0ff']" :darkBorderColor="['#3b5066']">访客邀约请填写以下信息</tm-alert>
			<tm-form @submit="onsubmit" v-model="form" :rules="rules" direction="vertical">
				<tm-form-item name="mobile" label="访客手机号">
					<tm-input color="transparent" v-model.trim="form.mobile" placeholder="请输入访客手机号" />
				</tm-form-item>
				<tm-form-item name="vStartDate" label="拜访开始时间 >" @tap="startDatePicker('vStartDate')">
					<template #label>
						<span>拜访开始时间 </span>
						<tm-icon name="arrow-right-s-line" />
					</template>
					<tm-input :modelValue="form.vStartDate" placeholder="请选择拜访开始时间" style="pointer-events: none"
						disabled color="transparent" />
				</tm-form-item>
				<tm-form-item name="vEndDate" label="拜访离开时间 >" @tap="endDatePicker('vEndDate')">
					<template #label>
						<span>拜访离开时间 </span>
						<tm-icon name="arrow-right-s-line" />
					</template>
					<tm-input :modelValue="form.vEndDate" placeholder="请选择拜访离开时间" style="pointer-events: none" disabled
						color="transparent" />
				</tm-form-item>
				<tm-form-item name="isOtherPeople" label="是否有随行人员" direction="horizontal" labelWidth="500">
					<tm-switch v-model="form.isOtherPeople" />
				</tm-form-item>
				<tm-form-item name="isDrive" label="是否有驾驶车辆" direction="horizontal" labelWidth="500">
					<tm-switch v-model="form.isDrive" />
				</tm-form-item>
				<tm-button class="mt-32rpx" form-type="submit" block>提 交</tm-button>
			</tm-form>
		</tm-sheet>

		<tm-drawer title="请选择时间" :showClose="true" :showFooter="false" size="auto" v-model:show="showDatePicker"
			:duration="100" zIndex="100">
			<time-range-picker @confirm="onDatePickerConfirm" @cancel="showDatePicker = false" />
		</tm-drawer>

		<tm-modal v-model:show="confirmModalShow" :overlayClick="false" title="确定提交吗？" position="bottom" height="auto"
			:showCancel="true" cancelText="取消" confirmText="确定" @confirm="confirmSubmit"
			@cancel="confirmModalShow = false">
			<view class="text-center">
				<tm-text font-size="30" color="#999999">提交后系统将会向手机号</tm-text>
				<tm-text font-size="30" color="#0779FD">{{ form.mobile || "" }}</tm-text>
				<tm-text font-size="30" color="#999999">发送邀约短信</tm-text>
			</view>
		</tm-modal>

		<template #main-bottom>
			<view class="h-100rpx flex justify-around items-center">
				<view class="flex-col justify-center items-center">
					<image src="@/static/page/invitation-select.png" class="w-50rpx h-50rpx" />
					<view class="text-center text-24rpx c-#1977FD">访客邀约</view>
				</view>
				<view class="flex-col justify-center items-center" @click="goInvitationRecord">
					<image src="@/static/page/order.png" class="w-50rpx h-50rpx" />
					<view class="text-center text-24rpx c-#999999">访客记录</view>
				</view>
			</view>
		</template>
	</crud-layout>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"

import { SERVICE_IMAGE } from "@@/constant/index"
import { filePath } from "@@/utils/file"
import { invitationApi } from "@/sheep/api/index"
import TimeRangePicker from "@/sheep/components/time-range-picker.vue"

interface FormData {
	mobile: string
	vStartDate: string
	vEndDate: string
	isOtherPeople: boolean | string
	isDrive: boolean | string
}

const form = reactive<FormData>({
	mobile: "",
	vStartDate: "",
	vEndDate: "",
	isOtherPeople: true,
	isDrive: true,
})
const showDatePicker = ref(false)
const curDateType = ref("")
const confirmModalShow = ref(false)

const rules: Record<string, TM.FORM_RULE[]> = {
	mobile: [{ required: true, message: "请输入正确的手机号", rule: /^(?:(?:\+|00)86)?1\d{10}$/ }],
	vStartDate: [{ required: true, message: "请选择拜访开始时间" }],
	vEndDate: [{ required: true, message: "请选择拜访离开时间" }],
}

// 开始日期选择
const startDatePicker = (dateType: string) => {
	showDatePicker.value = true
	curDateType.value = dateType
}

// 离开日期选择
const endDatePicker = (dateType: string) => {
	showDatePicker.value = true
	curDateType.value = dateType
}

// 日期选择器确认
const onDatePickerConfirm = (dateValue: any, timeValue: string) => {
	form[curDateType.value] = `${dateValue.fullDate} ${timeValue}`
	showDatePicker.value = false
}

// 表单提交
const onsubmit = (evt: TM.FORM_SUBMIT_RESULT) => {
	// console.log("校验结果:", evt)
	if (!evt.isPass) return
	confirmModalShow.value = true
}

// 确认提交
const confirmSubmit = async () => {
	if (form.isOtherPeople) {
		form.isOtherPeople = "1"
	} else {
		form.isOtherPeople = "0"
	}

	if (form.isDrive) {
		form.isDrive = "1"
	} else {
		form.isDrive = "0"
	}

	form.mobile = form.mobile.trim().replace(/\s/g, "")

	try {
		uni.showLoading({ title: "提交中...", mask: true })
		const { code, msg } = await invitationApi.saveInvitation(form)
		if (code != 0) return uni.showToast({ title: msg || "提交失败", icon: "error" })
		uni.showToast({ title: "提交成功", icon: "success" })
		resetForm()
		confirmModalShow.value = false
		uni.navigateTo({ url: "/pages/integrated/visitor/invitation-record" })
	} catch (error: any) {
		uni.showToast({ title: error.message || "提交失败", icon: "none" })
	} finally {
		uni.hideLoading()
	}
}

// 重置表单
const resetForm = () => {
	Object.assign(form, {
		mobile: "",
		vstartDate: "",
		vendDate: "",
		isOtherPeople: true,
		isDrive: true,
	})
}

const goInvitationRecord = () => {
	uni.redirectTo({ url: "/pages/integrated/visitor/invitation-record" })
}
</script>

<style lang="scss" scope>
:deep(.tmFormItemLabel) {
	display: flex;
	align-items: center;
}
</style>