+
+
+
+
+
+
+
+```
+
+#### 2. 预约页组件
+
+```vue
+
+
+
+
+
+
+ {{ dateItem.dateText }}
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ {{ room.name }} {{ room.room_type_name }}
+{{ room.description }}
+
+ 标准价：{{ room.standard_price_desc }}
+ 会员价：{{ room.member_price_desc }}
+
+
+
+
+
+
+
+ {{ slot.slot_name }}
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## 常见问题FAQ
+
+### Q1: 时间戳是秒级还是毫秒级？
+
+**A:** 所有接口使用的都是**秒级时间戳**（Unix Timestamp），不是毫秒级。
+
+```javascript
+// 正确：秒级
+const timestamp = Math.floor(Date.now() / 1000);
+
+// 错误：毫秒级
+const timestamp = Date.now();
+```
+
+### Q2: 如何判断当前是哪个时段？
+
+**A:** 根据当前时间的小时数判断：
+
+```javascript
+function getCurrentTimeSlot() {
+ const hour = new Date().getHours();
+ if (hour >= 0 && hour < 6) return 0; // 凌晨
+ if (hour >= 6 && hour < 12) return 1; // 上午
+ if (hour >= 12 && hour < 18) return 2; // 下午
+ return 3; // 晚上
+}
+```
+
+### Q3: 最晚到店时间如何处理？
+
+**A:** 最晚到店时间必须在所选时段的时间范围内：
+
+```javascript
+// 1. 获取时段的时间范围
+const timeRanges = {
+ 0: { min: '00:00', max: '05:59' },
+ 1: { min: '06:00', max: '11:59' },
+ 2: { min: '12:00', max: '17:59' },
+ 3: { min: '18:00', max: '23:59' }
+};
+
+// 2. 限制时间选择器的范围
+const range = timeRanges[selectedSlot];
+
+
+// 3. 转换为时间戳
+const [hour, minute] = arrivalTime.split(':');
+const d = new Date(date * 1000);
+d.setHours(Number(hour), Number(minute), 0, 0);
+const timestamp = Math.floor(d.getTime() / 1000);
+```
+
+### Q4: "无需组局"模式如何处理？
+
+**A:** 当选择"无需组局"时：
+
+```javascript
+// 1. 人数固定为1
+if (playerCount === 1) {
+ form.is_solo_mode = true;
+ form.player_count = 1;
+}
+
+// 2. 后端会拒绝其他人加入该预约
+```
+
+### Q5: 鸽子费的限制是什么？
+
+**A:** 鸽子费必须满足：
+- 范围：0-50元
+- 类型：整数（不能有小数）
+
+```javascript
+// 校验
+if (depositFee < 0 || depositFee > 50) {
+ alert('鸽子费必须在0-50元之间');
+ return false;
+}
+if (!Number.isInteger(depositFee)) {
+ alert('鸽子费必须是整数');
+ return false;
+}
+```
+
+### Q6: 如何处理时间冲突？
+
+**A:** 后端会自动检测时间冲突，返回错误码402：
+
+```javascript
+if (response.data.code === 402) {
+ alert('您有其它预约时间冲突，无法创建该预约！');
+ // 可以引导用户查看"我的预约"
+}
+```
+
+### Q7: Token如何传递？
+
+**A:** 所有需要登录的接口都需要在请求头中携带Token：
+
+```javascript
+// Axios示例
+axios.post('/api/SQ/AddSQReservationBySlot', data, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('token')}`
+ }
+});
+
+// 或配置全局拦截器
+axios.interceptors.request.use(config => {
+ const token = localStorage.getItem('token');
+ if (token) {
+ config.headers.Authorization = `Bearer ${token}`;
+ }
+ return config;
+});
+```
+
+### Q8: 如何处理已过时段？
+
+**A:** 后端会自动过滤已过去的时段，前端不需要额外处理。如果某个时段已过去，它会在`time_slots`中显示为`unavailable`或不返回。
+
+### Q9: 房间图片加载失败怎么办？
+
+**A:** 建议添加图片加载失败的占位图：
+
+```vue
+