Bodk.MiniAPP.Web/src/pages/ContactSign.vue

<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>