134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<div class="conference-list">
|
|||
|
|
<a-list
|
|||
|
|
:grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }"
|
|||
|
|
:data-source="conferenceList"
|
|||
|
|
:loading="loading"
|
|||
|
|
class="conference-list-content"
|
|||
|
|
v-infinite-scroll="loadMore"
|
|||
|
|
:infinite-scroll-disabled="disabled"
|
|||
|
|
:infinite-scroll-distance="10"
|
|||
|
|
>
|
|||
|
|
<template #renderItem="{ item }">
|
|||
|
|
<a-list-item>
|
|||
|
|
<a-card :title="item.name" :bordered="false" class="conference-card">
|
|||
|
|
<template #cover>
|
|||
|
|
<img
|
|||
|
|
alt="会议室图片"
|
|||
|
|
:src="item.image || '/placeholder-image.jpg'"
|
|||
|
|
style="height: 200px; object-fit: cover;"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<a-card-meta :title="item.name">
|
|||
|
|
<template #description>
|
|||
|
|
<div class="conference-info">
|
|||
|
|
<p>容纳人数：{{ item.capacity }}人</p>
|
|||
|
|
<p>位置：{{ item.location }}</p>
|
|||
|
|
<p>设备：{{ item.facilities }}</p>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</a-card-meta>
|
|||
|
|
<div class="card-actions">
|
|||
|
|
<a-button type="primary" @click="handleReservation(item)">
|
|||
|
|
去预约
|
|||
|
|
</a-button>
|
|||
|
|
</div>
|
|||
|
|
</a-card>
|
|||
|
|
</a-list-item>
|
|||
|
|
</template>
|
|||
|
|
</a-list>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { ref, computed } from 'vue';
|
|||
|
|
import { requestClient } from '../../../../api/request';
|
|||
|
|
|
|||
|
|
interface ConferenceRoom {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
capacity: number;
|
|||
|
|
location: string;
|
|||
|
|
facilities: string;
|
|||
|
|
image?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const pageSize = 20;
|
|||
|
|
const currentPage = ref(1);
|
|||
|
|
const loading = ref(false);
|
|||
|
|
const conferenceList = ref<ConferenceRoom[]>([]);
|
|||
|
|
const noMore = ref(false);
|
|||
|
|
|
|||
|
|
const disabled = computed(() => loading.value || noMore.value);
|
|||
|
|
|
|||
|
|
const fetchConferenceList = async (page: number) => {
|
|||
|
|
try {
|
|||
|
|
loading.value = true;
|
|||
|
|
const res = await requestClient.get<{
|
|||
|
|
list: ConferenceRoom[];
|
|||
|
|
total: number;
|
|||
|
|
}>('/property/conference/list', {
|
|||
|
|
params: {
|
|||
|
|
pageSize,
|
|||
|
|
pageNum: page,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (page === 1) {
|
|||
|
|
conferenceList.value = res.list;
|
|||
|
|
} else {
|
|||
|
|
conferenceList.value = [...conferenceList.value, ...res.list];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
noMore.value = conferenceList.value.length >= res.total;
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadMore = async () => {
|
|||
|
|
if (disabled.value) return;
|
|||
|
|
currentPage.value++;
|
|||
|
|
await fetchConferenceList(currentPage.value);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleReservation = (room: ConferenceRoom) => {
|
|||
|
|
// TODO: 实现预约逻辑
|
|||
|
|
console.log('预约会议室:', room);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 初始加载
|
|||
|
|
fetchConferenceList(1);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.conference-list {
|
|||
|
|
padding: 16px;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.conference-list-content {
|
|||
|
|
height: calc(100vh - 120px);
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.conference-card {
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.conference-info {
|
|||
|
|
p {
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-actions {
|
|||
|
|
margin-top: 16px;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|