cb7054cd90
Remove the unused box-sizing.scss stylesheet and its import from the main SCSS index file. Update all Vue component template class references from the custom border-box class to the native box-border utility class to eliminate redundant custom CSS and align with the project's utility class conventions.
125 lines
3.8 KiB
Vue
125 lines
3.8 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="快速预定" :background="$theme - color - 100" />
|
|
|
|
<Tabs @change="handleTabChange" />
|
|
|
|
<!-- 选择入住、离店日期 0:是酒店 -->
|
|
<view v-if="didSelectedTabItem && didSelectedTabItem.orderType == 0"
|
|
class="bg-white box-border flex flex-items-center p-[12px]">
|
|
<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] box-border 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="$theme-color-500" @click="calendarVisible = true" />
|
|
</view>
|
|
</template>
|
|
|
|
<Card v-for="(item, index) in dataList" :key="index" :item="item" :selectedDate="selectedDate" />
|
|
</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 didSelectedTabItem = ref(null);
|
|
|
|
const queryList = async (pageNum = 1, pageSize = 10) => {
|
|
if (!didSelectedTabItem.value) {
|
|
paging.value.complete([]);
|
|
return;
|
|
}
|
|
try {
|
|
const params = {
|
|
commodityTypeCode: didSelectedTabItem.value.typeCode,
|
|
size: pageSize,
|
|
current: pageNum,
|
|
};
|
|
|
|
if (didSelectedTabItem.value.orderType == 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("选中的tab item: ", item);
|
|
didSelectedTabItem.value = item;
|
|
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>
|