xyy-m/src/components/TravelProjectDetail/BookInfo.vue

<template>
  <div class="pt-15 text-black-3 text-base">
    <div class="">日期选择</div>
    <div
      @click="showCalendarPicker = true"
      class="h-40 rounded-full border-[2px] px-15 mt-10 border-[#f7f7f7] flex items-center justify-between"
    >
      <span class="flex items-center space-x-10">
        <span>出发:{{ startDate }}</span>
        <span class="text-[#FF2222]"
          >{{ calendarData[startDate]?.adultPrice || "???"
          }}{{ detailData.priceUnit }}</span
        >
      </span>
      <span
        class="iconfont icon-caret-down text-primary"
        style="font-size: 24px"
      ></span>
    </div>
    <div class="mt-15">
      <div class="">人数选择</div>
      <div
        @click="showAdultNumberPicker = true"
        class="h-40 rounded-full border-[2px] px-15 mt-10 border-[#f7f7f7] flex items-center justify-between"
      >
        <span>成人：{{ adultNumber }}</span>
        <span class="flex-1 text-primary ml-20">12周岁及以上</span>
        <span
          class="iconfont icon-caret-down text-primary"
          style="font-size: 24px"
        ></span>
      </div>
      <div
        @click="showChildrenNumberPicker = true"
        class="h-40 rounded-full border-[2px] px-15 mt-10 border-[#f7f7f7] flex items-center justify-between"
      >
        <span>儿童：{{ childrenNumber }}</span>
        <span class="flex-1 text-primary ml-20">2-12周岁（不含）</span>
        <span
          class="iconfont icon-caret-down text-primary"
          style="font-size: 24px"
        ></span>
      </div>
    </div>
    <div class="mt-15">
      <div class="">预定须知</div>
      <div class="mt-10 flex flex-col space-y-3 text-sm text-black-6">
        <span>*该产品最少1人起订，成人+儿童最多支持16人</span>
        <span>*此线路因服务能力有限，无法接待婴儿(14天-2周岁(不含))出行</span>
        <span>*出于安全考虑，18岁以下未成年人需要至少一名成年旅客陪同</span>
      </div>
    </div>

    <van-popup
      v-model:show="showAdultNumberPicker"
      destroy-on-close
      round
      position="bottom"
    >
      <van-picker
        :columns="adultNumberPickerOptions"
        @cancel="showAdultNumberPicker = false"
        @confirm="onAdultNumberConfirm"
      />
    </van-popup>
    <van-popup
      v-model:show="showChildrenNumberPicker"
      destroy-on-close
      round
      position="bottom"
    >
      <van-picker
        :columns="childrenNumberPickerOptions"
        @cancel="showChildrenNumberPicker = false"
        @confirm="onChildrenNumberConfirm"
      />
    </van-popup>
    <van-popup
      v-model:show="showCalendarPicker"
      destroy-on-close
      round
      position="bottom"
    >
      <TravelProjectDetailBookInfoCalendar
        v-model:date="startDate"
        :calendar-data="calendarData"
        @on-close="showCalendarPicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
const props = defineProps({
  calendarData: {
    type: Object,
    default: () => {},
  },
  detailData: {
    type: Object,
    default: () => ({}),
  },
});

const startDate = defineModel("startDate");
const adultNumber = defineModel("adultNumber");
const childrenNumber = defineModel("childrenNumber");

// 选择成人人数
const showAdultNumberPicker = ref(false);
const adultNumberPickerOptions = Array.from({ length: 9 }, (_, i) => i).map(
  (e) => ({
    text: `${e}人`,
    value: e,
  })
);
function onAdultNumberConfirm({ selectedValues }) {
  adultNumber.value = selectedValues[0];
  showAdultNumberPicker.value = false;
}

// 选择儿童人数
const showChildrenNumberPicker = ref(false);
const childrenNumberPickerOptions = Array.from({ length: 9 }, (_, i) => i).map(
  (e) => ({
    text: `${e}人`,
    value: e,
  })
);
function onChildrenNumberConfirm({ selectedValues }) {
  childrenNumber.value = selectedValues[0];
  showChildrenNumberPicker.value = false;
}

const showCalendarPicker = ref(false);

// 选择日历
</script>

<style lang="scss" scoped></style>