|
@@ -0,0 +1,199 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ @click="isExpand = !isExpand"
|
|
|
+ class="h-40 w-full rounded-xl px-20 text-white font-semibold bg-gradient-to-r from-[#FD9A00] to-[#FFCC7C] flex items-center justify-between"
|
|
|
+ >
|
|
|
+ <div class="flex items-center space-x-15">
|
|
|
+ <span>{{ startPlaceLabel }}</span>
|
|
|
+ <span>{{ formData.startDate }}</span>
|
|
|
+ <span>包车{{ formData.days }}天</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="w-20 h-20 bg-[#FD9A00] flex items-center rounded-full justify-center"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="iconfont icon-caret-down text-white"
|
|
|
+ :class="{ 'rotate-180': isExpand }"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="isExpand">
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell
|
|
|
+ title="选择起点"
|
|
|
+ :value="startPlaceLabel"
|
|
|
+ is-link
|
|
|
+ @click="startPlaceOption.show = true"
|
|
|
+ />
|
|
|
+ <van-cell
|
|
|
+ title="选择用车时间"
|
|
|
+ :value="formData.startDate"
|
|
|
+ is-link
|
|
|
+ @click="startDateOption.show = true"
|
|
|
+ />
|
|
|
+ <van-cell
|
|
|
+ title="选择天数"
|
|
|
+ :value="`${formData.days}天`"
|
|
|
+ is-link
|
|
|
+ @click="daysOption.show = true"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ <van-popup
|
|
|
+ v-model:show="startPlaceOption.show"
|
|
|
+ round
|
|
|
+ position="bottom"
|
|
|
+ :style="{ height: '40%' }"
|
|
|
+ >
|
|
|
+ <van-cascader
|
|
|
+ v-model="startPlaceOption.activedId"
|
|
|
+ title="请选择起点"
|
|
|
+ :options="startPlaceOption.options"
|
|
|
+ @close="startPlaceOption.show = false"
|
|
|
+ :field-names="{
|
|
|
+ text: 'menuName',
|
|
|
+ value: 'id',
|
|
|
+ children: 'children',
|
|
|
+ }"
|
|
|
+ @finish="startPlaceOnFinish"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <van-popup v-model:show="startDateOption.show" round position="bottom">
|
|
|
+ <van-date-picker
|
|
|
+ title="选择日期"
|
|
|
+ @confirm="handleStartDateConfirm"
|
|
|
+ :min-date="new Date()"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <van-popup v-model:show="daysOption.show" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="选择天数"
|
|
|
+ :columns="daysOption.options"
|
|
|
+ @confirm="handleDaysConfirm"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+const isExpand = ref(false);
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
+const formData = reactive({
|
|
|
+ startDate: "",
|
|
|
+ startPlace: "",
|
|
|
+ days: "",
|
|
|
+});
|
|
|
+
|
|
|
+watchEffect(() => {
|
|
|
+ formData.startDate = route.query.startDate;
|
|
|
+ formData.startPlace = route.query.startPlace;
|
|
|
+ formData.days = route.query.days;
|
|
|
+});
|
|
|
+
|
|
|
+// watch(
|
|
|
+// formData,
|
|
|
+// () => {
|
|
|
+// console.log(formData);
|
|
|
+// },
|
|
|
+// { deep: true, immediate: true }
|
|
|
+// );
|
|
|
+
|
|
|
+// 起点
|
|
|
+const startPlaceOption = reactive({
|
|
|
+ show: false,
|
|
|
+ options: [],
|
|
|
+ selectedOptions: [],
|
|
|
+ activedId: "",
|
|
|
+});
|
|
|
+const startPlaceLabel = computed(() => {
|
|
|
+ return findTextInTree(startPlaceOption.options, formData.startPlace);
|
|
|
+});
|
|
|
+async function getStartPlaceOptions() {
|
|
|
+ const { data } = await request(
|
|
|
+ "/website/app/tourCarCategory/carContractTree"
|
|
|
+ );
|
|
|
+ startPlaceOption.options = tree(data);
|
|
|
+}
|
|
|
+function tree(list) {
|
|
|
+ return list.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ children: item.children.length ? tree(item.children) : null,
|
|
|
+ };
|
|
|
+ });
|
|
|
+}
|
|
|
+function startPlaceOnFinish({ selectedOptions, value }) {
|
|
|
+ startPlaceOption.show = false;
|
|
|
+ startPlaceOption.selectedOptions = selectedOptions;
|
|
|
+ navigateTo({
|
|
|
+ path: "/car/search",
|
|
|
+ replace: true,
|
|
|
+ query: {
|
|
|
+ ...route.query,
|
|
|
+ startPlace: value,
|
|
|
+ },
|
|
|
+ });
|
|
|
+}
|
|
|
+function findTextInTree(tree, id) {
|
|
|
+ for (let i = 0; i < tree.length; i++) {
|
|
|
+ if (tree[i].id === id) {
|
|
|
+ return tree[i].menuName;
|
|
|
+ }
|
|
|
+ if (tree[i].children && tree[i].children.length) {
|
|
|
+ const text = findTextInTree(tree[i].children, id);
|
|
|
+ if (text) {
|
|
|
+ return text;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 用车时间
|
|
|
+const startDateOption = reactive({
|
|
|
+ show: false,
|
|
|
+ activedValue: null,
|
|
|
+ selectedValues: [],
|
|
|
+});
|
|
|
+function handleStartDateConfirm({ selectedValues }) {
|
|
|
+ startDateOption.show = false;
|
|
|
+ startDateOption.selectedValues = selectedValues;
|
|
|
+ navigateTo({
|
|
|
+ path: "/car/search",
|
|
|
+ replace: true,
|
|
|
+ query: {
|
|
|
+ ...route.query,
|
|
|
+ startDate: selectedValues.join("-"),
|
|
|
+ },
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 用车天数
|
|
|
+const daysOption = reactive({
|
|
|
+ show: false,
|
|
|
+ options: Array.from({ length: 10 }, (_, i) => i).map((item) => ({
|
|
|
+ text: `${item + 1}天`,
|
|
|
+ value: `${item + 1}`,
|
|
|
+ })),
|
|
|
+});
|
|
|
+
|
|
|
+function handleDaysConfirm({ selectedOptions }) {
|
|
|
+ daysOption.show = false;
|
|
|
+ navigateTo({
|
|
|
+ path: "/car/search",
|
|
|
+ replace: true,
|
|
|
+ query: {
|
|
|
+ ...route.query,
|
|
|
+ days: selectedOptions[0].value,
|
|
|
+ },
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getStartPlaceOptions();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped></style>
|