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.
179 lines
4.8 KiB
179 lines
4.8 KiB
1 week ago
|
<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>
|