You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

178 lines
4.8 KiB

<template>
<LinkBackHome title="预约登记" :ifShowBack="false" />
<div class="container1">
<van-form @submit="handleSubmit">
<van-field v-model="formData.name" label="姓名" placeholder="请输入你的姓名" />
<van-field v-model="formData.email" label="邮箱" placeholder="请输入你的邮箱" />
<van-field v-model="formData.phone" label="电话" placeholder="请输入你的电话" />
<van-field
label="预约时间"
v-model="formData.appointmentDate"
placeholder="请选择日期"
is-link
readonly
@click="OpenShowDate"
>
<template #right-icon>
<van-icon name="calendar-o" />
</template>
</van-field>
<van-field
label="选择基地"
v-model="formData.company"
placeholder="请选择基地"
is-link
readonly
@click="showPicker = true"
>
<template #right-icon>
<van-icon name="location-o" />
</template>
</van-field>
<div class="message-container">
<label class="message-label">留言</label>
<van-field
v-model="formData.message"
placeholder="请输入你的留言"
type="textarea"
rows="4"
class="message-input"
/>
</div>
<div class="button-container">
<van-button class="submit-btn" color="rgba(2, 232, 217, 1)" round block type="primary" native-type="submit"
>提交</van-button
>
</div>
</van-form>
</div>
<van-popup v-model:show="showDatePicker" position="bottom">
<van-date-picker
v-model="currentDate"
visible-option-num="5"
@confirm="onConfirm"
option-height="40"
@cancel="showDatePicker = false"
/>
</van-popup>
<van-popup v-model:show="showPicker" position="bottom">
<van-picker
:columns="companySelecteOptions"
@confirm="onConfirmCompany"
@cancel="showPicker = false"
option-height="40"
visible-option-num="5"
class="company-picker"
>
</van-picker>
</van-popup>
</template>
<style scoped></style>
<script setup lang="ts">
import LinkBackHome from '@/components/shared/LinkBackHome.vue';
import { ref, reactive, onMounted, inject, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { showToast, closeToast, showFailToast, showSuccessToast } from 'vant';
const route = useRoute();
const type = ref(route.params.type as string);
const showDatePicker = ref(false);
const currentDate = ref([]);
const showPicker = ref(false);
const selectedDate = ref('');
const selectedBase = ref('');
const formData = reactive({
name: '',
email: '',
phone: '',
appointmentDate: '',
company: '',
message: '',
});
const companySelecteOptions = ref([
{ value: 1, text: '东莞基地' },
{ value: 2, text: '惠州基地' },
{ value: 3, text: '广州基地' },
{ value: 4, text: '深圳基地' },
]);
const setAppointmentDateToToday = () => {
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
formData.appointmentDate = `${year}-${month}-${day}`;
};
const OpenShowDate = () => {
currentDate.value = formData.appointmentDate.split('-');
showDatePicker.value = true;
};
const onConfirm = ({ selectedValues }) => {
formData.appointmentDate = selectedValues.join('-');
showDatePicker.value = false;
};
const onConfirmCompany = ({ selectedOptions }) => {
formData.company = selectedOptions[0]?.text;
showPicker.value = false;
};
// const onConfirm = (value) => {
// formData.appointmentDate = value.selectedOptions.map((i) => i.text).join('-');
// showPicker.value = false;
// };
onMounted(() => {
setAppointmentDateToToday();
});
const handleSubmit = (values: any) => {
if (formData.name == '') {
return showFailToast({
message: '请输入姓名',
duration: 1500,
});
}
if (formData.email == '') {
return showFailToast({
message: '请输入邮箱',
duration: 1500,
});
}
if (formData.phone == '') {
return showFailToast({
message: '请输入电话',
duration: 1500,
});
}
if (formData.appointmentDate == '') {
return showFailToast({
message: '请输入预约时间',
duration: 1500,
});
}
if (formData.company == '') {
return showFailToast({
message: '请选择基地',
duration: 1500,
});
}
showSuccessToast({
message: '提交成功',
duration: 1500,
});
};
onBeforeUnmount(() => {
closeToast();
});
</script>
<style scoped type="text/scss">
@import url(@/assets/styles/pages/_contact.scss);
</style>