uni-app 场馆预定功能

针对uni-app开发中的场馆预定功能，以下是一个简化的代码示例，展示了如何实现基本的场馆查看、选择和预定流程。该示例假定你已经熟悉uni-app的基本开发流程，并且已经配置好项目环境。

1. 数据准备

首先，我们假设有一个场馆信息的数组，包含场馆的ID、名称、地址、可用时间段等信息。

// pages/venues/venues.js
const venues = [
    { id: 1, name: '场馆A', address: '地址A', availableSlots: ['09:00-11:00', '14:00-16:00'] },
    { id: 2, name: '场馆B', address: '地址B', availableSlots: ['10:00-12:00', '15:00-17:00'] },
    // 更多场馆信息...
];

2. 场馆列表页面

在场馆列表页面，我们展示所有场馆及其可用时间段。

<!-- pages/venues/venues.vue -->
<template>
    <view>
        <block v-for="venue in venues" :key="venue.id">
            <view>
                <text>{{ venue.name }} - {{ venue.address }}</text>
                <view v-for="slot in venue.availableSlots" :key="slot">
                    <button @click="bookVenue(venue, slot)">预定 {{ slot }}</button>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
export default {
    data() {
        return {
            venues: [] // 从服务器或本地获取
        };
    },
    onLoad() {
        this.venues = [...venues]; // 假设数据已经准备好
    },
    methods: {
        bookVenue(venue, slot) {
            uni.navigateTo({
                url: `/pages/booking/booking?venueId=${venue.id}&slot=${slot}`
            });
        }
    }
};
</script>

3. 预定详情页面

在预定详情页面，用户确认预定信息并提交。

<!-- pages/booking/booking.vue -->
<template>
    <view>
        <text>预定场馆: {{ venue.name }}</text>
        <text>预定时间: {{ slot }}</text>
        <button @click="submitBooking">确认预定</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            venue: {},
            slot: ''
        };
    },
    onLoad(options) {
        // 从URL参数中获取venueId和slot
        const venueId = options.venueId;
        const slot = options.slot;
        // 这里应该通过API获取具体的venue信息，为了简化直接假设已知
        this.venue = venues.find(v => v.id == venueId);
        this.slot = slot;
    },
    methods: {
        submitBooking() {
            // 提交预定请求到服务器
            uni.request({
                url: 'https://yourserver.com/api/book',
                method: 'POST',
                data: {
                    venueId: this.venue.id,
                    slot: this.slot
                },
                success: (res) => {
                    if (res.data.success) {
                        uni.showToast({ title: '预定成功', icon: 'success' });
                        uni.navigateBack();
                    } else {
                        uni.showToast({ title: '预定失败', icon: 'none' });
                    }
                }
            });
        }
    }
};
</script>

这个示例仅展示了基本流程，实际开发中还需考虑用户登录状态、错误处理、数据验证、UI优化等多方面因素。