146 lines
3.7 KiB
Vue
146 lines
3.7 KiB
Vue
<template>
|
|
<z-paging
|
|
ref="paging"
|
|
v-model="dataList"
|
|
use-virtual-list
|
|
:force-close-inner-list="true"
|
|
cell-height-mode="dynamic"
|
|
safe-area-inset-bottom
|
|
@query="queryList"
|
|
>
|
|
<template #top>
|
|
<TopNavBar title="快速预定" />
|
|
|
|
<Tabs @change="handleTabChange" />
|
|
|
|
<!-- 选择入住、离店日期 -->
|
|
<view
|
|
class="bg-white border-box flex flex-items-center p-12"
|
|
v-if="currentType === '0'"
|
|
>
|
|
<view class="in flex flex-items-center">
|
|
<text class="font-size-11 font-500 color-99A0AE mr-4">入住</text>
|
|
<text class="font-size-14 font-500 color-171717">
|
|
{{ selectedDate.startDate }}
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 几晚 -->
|
|
<text
|
|
class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8"
|
|
>
|
|
{{ selectedDate.totalDays }}晚
|
|
</text>
|
|
|
|
<view class="out flex flex-items-center">
|
|
<text class="font-size-11 font-500 color-99A0AE mr-4">离店</text>
|
|
<text class="font-size-14 font-500 color-171717">
|
|
{{ selectedDate.endDate }}
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 日期图标 -->
|
|
<uni-icons
|
|
class="ml-auto"
|
|
type="calendar"
|
|
size="24"
|
|
color="#2D91FF"
|
|
@click="calendarVisible = true"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<Card v-for="(item, index) in dataList" :key="index" :item="item" />
|
|
</z-paging>
|
|
|
|
<!-- 日历组件 -->
|
|
<Calender
|
|
:visible="calendarVisible"
|
|
mode="range"
|
|
:default-value="selectedDate"
|
|
@close="handleCalendarClose"
|
|
@range-select="handleDateSelect"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import TopNavBar from "@/components/TopNavBar/index.vue";
|
|
import Calender from "@/components/Calender/index.vue";
|
|
import Tabs from "./components/Tabs/index.vue";
|
|
import Card from "./components/Card/index.vue";
|
|
import { quickBookingList } from "@/request/api/GoodsApi";
|
|
import { DateUtils } from "@/utils";
|
|
|
|
const calendarVisible = ref(false);
|
|
const selectedDate = ref({
|
|
startDate: DateUtils.formatDate(), // 当天日期
|
|
endDate: DateUtils.formatDate(new Date(Date.now() + 24 * 60 * 60 * 1000)), // 第二天日期
|
|
totalDays: 1,
|
|
});
|
|
const dataList = ref([]);
|
|
const paging = ref(null);
|
|
const currentType = ref("0"); // 当前选中类型
|
|
|
|
const queryList = async (pageNum = 1, pageSize = 10) => {
|
|
try {
|
|
const params = {
|
|
commodityTypeCode: currentType.value,
|
|
size: pageSize,
|
|
current: pageNum,
|
|
};
|
|
|
|
if (currentType.value === "0") {
|
|
params.checkInDate = selectedDate.value.startDate;
|
|
params.checkOutDate = selectedDate.value.endDate;
|
|
}
|
|
|
|
const res = await quickBookingList(params);
|
|
console.log("API响应:", res.data.records);
|
|
|
|
if (res && res.data && res.data.records) {
|
|
const records = res.data.records;
|
|
|
|
// 完成数据加载，第二个参数表示是否还有更多数据
|
|
paging.value.complete(records);
|
|
} else {
|
|
// 没有数据
|
|
paging.value.complete([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("查询列表失败:", error);
|
|
// 加载失败
|
|
paging.value.complete(false);
|
|
}
|
|
};
|
|
|
|
const handleTabChange = ({ item }) => {
|
|
console.log("item", item.value);
|
|
currentType.value = item.value;
|
|
|
|
if (currentType.value === "0") {
|
|
}
|
|
|
|
paging.value.reload();
|
|
};
|
|
|
|
// 处理日历关闭
|
|
const handleCalendarClose = () => {
|
|
calendarVisible.value = false;
|
|
};
|
|
|
|
// 处理日期选择
|
|
const handleDateSelect = (data) => {
|
|
selectedDate.value = data;
|
|
calendarVisible.value = false;
|
|
console.log("选择的日期:", data);
|
|
paging.value.reload();
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.nights {
|
|
padding: 3px 6px;
|
|
}
|
|
</style>
|