zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 快速预定功能调整

Browse Source
This commit is contained in:
duanshuwen
2025-10-21 20:58:32 +08:00
parent 5e0ce0b3a4
commit 7a827e1d92
3 changed files with 85 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages-quick/components/Tabs/index.vue
View File

@@ -10,14 +10,24 @@
]"
@click="handleTabClick(index)"
>
<text
:class="[
'font-size-16 font-500 color-525866 absolute',
activeIndex === index && 'tab-text-active',
]"
>
{{ item.label }}
</text>
<view class="absolute flex flex-items-center">
<uni-icons
class="icon mr-4"
fontFamily="znicons"
size="20"
:color="activeIndex === index ? '#2D91FF' : '#525866'"
>
{{ zniconsMap[item.icon] }}
</uni-icons>
<text
:class="[
'font-size-16 font-500 color-525866 ',
activeIndex === index && 'tab-text-active',
]"
>
{{ item.label }}
</text>
</view>
</view>
</view>
@@ -45,6 +55,7 @@ import {
watch,
getCurrentInstance,
} from "vue";
import { zniconsMap } from "@/static/fonts/znicons";
// 获取组件实例
const instance = getCurrentInstance();
@@ -54,10 +65,10 @@ const props = defineProps({
tabs: {
type: Array,
default: () => [
{ label: "客房", value: "0" },
{ label: "门票", value: "1" },
{ label: "餐食", value: "2" },
{ label: "套餐", value: "3" },
{ label: "客房", value: "0", icon: "zn-nav-room" },
{ label: "门票", value: "1", icon: "zn-nav-ticket" },
{ label: "餐食", value: "2", icon: "zn-nav-meal" },
// { label: "套餐", value: "3", icon: "zn-package" },
],
},
defaultActive: {

5
src/pages-quick/components/Tabs/styles/index.scss
View File

@@ -7,6 +7,11 @@
height: 100%;
}
.icon {
height: 20px;
width: 20px;
}
.tab-item-active {
&::before {
content: "";

95
src/pages-quick/list.vue
View File

@@ -10,42 +10,44 @@
>
<template #top>
<TopNavBar title="快速预定" />
<header>
<Tabs @change="handleTabChange" />
<!-- 选择入住、离店日期 -->
<view class="bg-white border-box flex flex-items-center p-12">
<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">
{{ DateUtils.formatDate() }}
</text>
</view>
<Tabs @change="handleTabChange" />
<!-- 几晚 -->
<text
class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8"
>
{{ 1 }}晚
<!-- 选择入住、离店日期 -->
<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 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">
{{ DateUtils.formatDate() }}
</text>
</view>
<!-- 日期图标 -->
<uni-icons
class="ml-auto"
type="calendar"
size="24"
color="#2D91FF"
@click="calendarVisible = true"
/>
</view>
</header>
<!-- 几晚 -->
<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" />
@@ -54,10 +56,10 @@
<!-- 日历组件 -->
<Calender
:visible="calendarVisible"
mode="single"
mode="range"
:default-value="selectedDate"
@close="handleCalendarClose"
@select="handleDateSelect"
@range-select="handleDateSelect"
/>
</template>
@@ -71,9 +73,15 @@ import { quickBookingComponent } from "@/request/api/MainPageDataApi";
import { DateUtils } from "@/utils";
const calendarVisible = ref(false);
const selectedDate = ref("");
const selectedDate = ref({
startDate: DateUtils.formatDate(), // 当天日期
endDate: DateUtils.formatDate(new Date(Date.now() + 24 * 60 * 60 * 1000)), // 第二天日期
totalDays: 1,
});
const dataList = ref([]);
const commodityGroupDTOList = ref([]);
const paging = ref(null);
const currentType = ref("0"); // 当前选中类型
const queryList = async (pageNum = 1, pageSize = 10) => {
try {
@@ -81,6 +89,7 @@ const queryList = async (pageNum = 1, pageSize = 10) => {
console.log("API响应:", res.data.commodityGroupDTOList);
if (res && res.data && res.data.commodityGroupDTOList) {
commodityGroupDTOList.value = res.data.commodityGroupDTOList;
const records = res.data.commodityGroupDTOList[0].commodityList;
// 完成数据加载，第二个参数表示是否还有更多数据
@@ -96,7 +105,17 @@ const queryList = async (pageNum = 1, pageSize = 10) => {
}
};
const handleTabChange = ({ index, item }) => {};
const handleTabChange = ({ item }) => {
console.log("item", item.value);
currentType.value = item.value;
// 从列表中找到对应的商品列表
const { commodityList } =
commodityGroupDTOList.value.find(
(i) => i.commodityTypeCode === item.value
) || {};
dataList.value = commodityList || [];
paging.value.complete(commodityList);
};
// 处理日历关闭
const handleCalendarClose = () => {
@@ -105,9 +124,9 @@ const handleCalendarClose = () => {
// 处理日期选择
const handleDateSelect = (data) => {
selectedDate.value = data.date;
selectedDate.value = data;
calendarVisible.value = false;
console.log("选择的日期:", data.date);
console.log("选择的日期:", data);
};
</script>