20 changed files with 1232 additions and 28 deletions
@ -0,0 +1,182 @@ |
|||
// subpages/mine/mySpace/mySpace.js
|
|||
import { appointmentRecList } from "../../../api/index"; |
|||
Page({ |
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
list: [], |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
loading: false, |
|||
refreshing: false, |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
this.setData({ |
|||
list: [], |
|||
pageNum: 1, |
|||
}); |
|||
this.getList(); |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() {}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
this.setData({ |
|||
refreshing: true, |
|||
pageNum: 1, |
|||
list: [] |
|||
}); |
|||
this.getList().finally(() => { |
|||
wx.stopPullDownRefresh(); |
|||
this.setData({ |
|||
refreshing: false |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() {}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() {}, |
|||
toReserve(e) { |
|||
wx.navigateTo({ |
|||
url: `/subpages/space/reserve/reserve?id=${e.currentTarget.dataset.item.id}`, |
|||
}); |
|||
}, |
|||
getList() { |
|||
if (this.data.loading) return; |
|||
|
|||
this.setData({ |
|||
loading: true |
|||
}); |
|||
|
|||
let parm = { |
|||
pageSize: this.data.pageSize, |
|||
pageNum: this.data.pageNum, |
|||
}; |
|||
|
|||
return appointmentRecList(parm) |
|||
.then((res) => { |
|||
if (res.code === 200) { |
|||
const newData = res.data.records.map((item) => { |
|||
return { |
|||
...item, |
|||
// 格式化预约日期和时间
|
|||
appointmentDate: item.appointmentDate || "", |
|||
appointTime: item.appointTime || "", |
|||
// 添加状态显示
|
|||
statusText: this.getStatusText(item), |
|||
statusColor: this.getStatusColor(item) |
|||
}; |
|||
}); |
|||
|
|||
this.setData({ |
|||
list: this.data.pageNum === 1 ? newData : this.data.list.concat(newData), |
|||
total: res.data.total, |
|||
loading: false |
|||
}); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
this.setData({ |
|||
loading: false |
|||
}); |
|||
wx.showToast({ |
|||
title: err.msg || "获取数据失败", |
|||
duration: 2000, |
|||
icon: "none", |
|||
}); |
|||
}); |
|||
}, |
|||
scrolltolower() { |
|||
if (this.data.loading) return; |
|||
|
|||
if (this.data.list.length < this.data.total) { |
|||
this.setData({ |
|||
pageNum: this.data.pageNum + 1, |
|||
}); |
|||
this.getList(); |
|||
} else if (this.data.list.length > 0) { |
|||
wx.showToast({ |
|||
icon: "none", |
|||
title: "没有更多了", |
|||
}); |
|||
} |
|||
}, |
|||
toEvaluate(e) { |
|||
wx.navigateTo({ |
|||
url: `/subpages/mine/evaluate/evaluate?id=${ |
|||
e.currentTarget.dataset.item.checkInRecId |
|||
}&obj=${JSON.stringify({ |
|||
apartmentName: e.currentTarget.dataset.item.apartmentName, |
|||
buildingName: e.currentTarget.dataset.item.buildingName, |
|||
buildingName: e.currentTarget.dataset.item.buildingName, |
|||
roomType: e.currentTarget.dataset.item.roomType, |
|||
unitName: e.currentTarget.dataset.item.unitName, |
|||
checkInRecId: e.currentTarget.dataset.item.checkInRecId, |
|||
houseName: e.currentTarget.dataset.item.houseName, |
|||
})}`,
|
|||
}); |
|||
}, |
|||
|
|||
// 获取状态文本
|
|||
getStatusText(item) { |
|||
// 根据实际业务逻辑判断状态
|
|||
const now = new Date(); |
|||
const appointmentDate = new Date(item.appointmentDate); |
|||
|
|||
if (appointmentDate > now) { |
|||
return '已预约'; |
|||
} else if (appointmentDate.toDateString() === now.toDateString()) { |
|||
return '使用中'; |
|||
} else { |
|||
return '已完成'; |
|||
} |
|||
}, |
|||
|
|||
// 获取状态颜色
|
|||
getStatusColor(item) { |
|||
const now = new Date(); |
|||
const appointmentDate = new Date(item.appointmentDate); |
|||
|
|||
if (appointmentDate > now) { |
|||
return '#17C4C4'; // 已预约 - 青色
|
|||
} else if (appointmentDate.toDateString() === now.toDateString()) { |
|||
return '#FA9E0A'; // 使用中 - 橙色
|
|||
} else { |
|||
return '#999'; // 已完成 - 灰色
|
|||
} |
|||
}, |
|||
}); |
|||
@ -0,0 +1,11 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"no-data": "../../../components/noData/nodata", |
|||
"van-divider": "@vant/weapp/divider/index", |
|||
"van-button": "@vant/weapp/button/index", |
|||
"van-rate": "@vant/weapp/rate/index" |
|||
}, |
|||
"navigationBarTitleText": "我的共享空间", |
|||
"enablePullDownRefresh": true, |
|||
"backgroundTextStyle": "dark" |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
<!-- subpages/mine/mySpace/mySpace.wxml --> |
|||
<scroll-view scroll-y class="scroll-view" bindscrolltolower="scrolltolower" wx:if="{{list.length>0}}" enable-back-to-top refresher-enabled="{{true}}" bindrefresherrefresh="onPullDownRefresh" refresher-triggered="{{refreshing}}"> |
|||
<view class="card" wx:key="id" wx:for="{{list}}"> |
|||
<view class="flex flex-sb"> |
|||
<view class="name font-bold">{{item.apartmentName}}</view> |
|||
</view> |
|||
<van-divider dashed /> |
|||
<view class="item flex"> |
|||
<image src="{{item.imgUrls[0]}}" style="width: 200rpx;height:152rpx;margin-right: 16rpx;border-radius: 10rpx;" mode="aspectFill" /> |
|||
<view class="flex flex-col flex-1"> |
|||
<view class="space-name font-bold" style="margin:10rpx 0 10rpx 0;"> |
|||
{{item.name}} |
|||
</view> |
|||
<view class="address" style="color: #666; font-size: 28rpx; margin-bottom: 10rpx;"> |
|||
{{item.address}} |
|||
</view> |
|||
<view class="date" style="color: #333; font-size: 28rpx; margin-bottom: 10rpx;"> |
|||
{{item.appointmentDate}} {{item.appointTime}} |
|||
</view> |
|||
<view class="status" style="color:{{item.statusColor}}; font-size: 28rpx;"> |
|||
{{item.statusText}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 加载更多提示 --> |
|||
<view class="loading-more" wx:if="{{loading}}" style="text-align: center; padding: 20rpx; color: #999;"> |
|||
加载中... |
|||
</view> |
|||
</scroll-view> |
|||
<no-data isShow="{{list.length === 0 && !loading}}"></no-data> |
|||
@ -0,0 +1,37 @@ |
|||
/* subpages/mine/mySpace/mySpace.wxss */ |
|||
|
|||
|
|||
.name { |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.position { |
|||
font-size: 30rpx; |
|||
line-height: 32rpx; |
|||
} |
|||
|
|||
.date { |
|||
font-size: 26rpx; |
|||
color: #BFBFBF; |
|||
line-height: 40rpx; |
|||
} |
|||
.status{ |
|||
font-size: 26rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.btn { |
|||
position: relative; |
|||
} |
|||
|
|||
.doc { |
|||
color: #08b3b3; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.scroll-view { |
|||
padding: 20rpx; |
|||
box-sizing: border-box; |
|||
background: #eff0f3; |
|||
min-height: 100vh; |
|||
} |
|||
@ -0,0 +1,202 @@ |
|||
// subpages/space/list/list.js
|
|||
import { spacePage } from "../../../api/index"; |
|||
Page({ |
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
list: [], |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
loading: false, |
|||
hasMore: true, |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
this.getList(true); // 页面显示时刷新数据
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() {}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
this.getList(true); // 下拉刷新
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
this.loadMore(); // 上拉加载更多
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() {}, |
|||
toReserve(e) { |
|||
wx.navigateTo({ |
|||
url: `/subpages/space/reserve/reserve?id=${e.currentTarget.dataset.item.id}&roomName=${e.currentTarget.dataset.item.name}&openDate=${e.currentTarget.dataset.item.appointmentWeekText}&openTimeText=${e.currentTarget.dataset.item.appointmentTimeText}&imgUrls=${e.currentTarget.dataset.item.imgUrls}`, |
|||
}); |
|||
}, |
|||
getList(isRefresh = false) { |
|||
// 如果正在加载中，直接返回
|
|||
if (this.data.loading) return; |
|||
|
|||
// 如果是刷新，重置分页参数
|
|||
if (isRefresh) { |
|||
this.setData({ |
|||
pageNum: 1, |
|||
list: [], |
|||
hasMore: true, |
|||
}); |
|||
} |
|||
|
|||
// 如果没有更多数据，直接返回
|
|||
if (!this.data.hasMore && !isRefresh) { |
|||
wx.showToast({ |
|||
icon: "none", |
|||
title: "没有更多了", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
this.setData({ loading: true }); |
|||
|
|||
let parm = { |
|||
pageSize: this.data.pageSize, |
|||
pageNum: this.data.pageNum, |
|||
}; |
|||
|
|||
spacePage(parm) |
|||
.then((res) => { |
|||
if (res.code === 200) { |
|||
const newData = res.data.records.map((item) => { |
|||
return { |
|||
...item, |
|||
// 处理可预约周几的显示
|
|||
appointmentWeekText: this.formatAppointmentWeek( |
|||
item.appointmentWeek |
|||
), |
|||
// 处理预约时间段的显示
|
|||
appointmentTimeText: this.formatAppointmentTime( |
|||
item.appointmentTimeAm, |
|||
item.appointmentTimePm |
|||
), |
|||
}; |
|||
}); |
|||
|
|||
const currentList = isRefresh ? [] : this.data.list; |
|||
const updatedList = currentList.concat(newData); |
|||
|
|||
// 判断是否还有更多数据
|
|||
const hasMore = newData.length === this.data.pageSize && updatedList.length < res.data.total; |
|||
|
|||
this.setData({ |
|||
list: updatedList, |
|||
total: res.data.total, |
|||
hasMore: hasMore, |
|||
loading: false, |
|||
}); |
|||
|
|||
// 如果是下拉刷新，停止刷新动画
|
|||
if (isRefresh) { |
|||
wx.stopPullDownRefresh(); |
|||
} |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
this.setData({ loading: false }); |
|||
|
|||
wx.showToast({ |
|||
title: err.msg || "加载失败", |
|||
duration: 2000, |
|||
icon: "none", |
|||
}); |
|||
|
|||
// 如果是下拉刷新，停止刷新动画
|
|||
if (isRefresh) { |
|||
wx.stopPullDownRefresh(); |
|||
} |
|||
}); |
|||
}, |
|||
scrolltolower() { |
|||
this.loadMore(); |
|||
}, |
|||
|
|||
loadMore() { |
|||
if (!this.data.hasMore) { |
|||
wx.showToast({ |
|||
icon: "none", |
|||
title: "没有更多了", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 增加页码
|
|||
this.setData({ |
|||
pageNum: this.data.pageNum + 1, |
|||
}); |
|||
|
|||
this.getList(); |
|||
}, |
|||
|
|||
// 格式化可预约周几
|
|||
formatAppointmentWeek(appointmentWeek) { |
|||
if (!appointmentWeek || !Array.isArray(appointmentWeek)) { |
|||
return ""; |
|||
} |
|||
|
|||
// 将中文周几转换为显示格式
|
|||
const weekMap = { |
|||
一: "周一", |
|||
二: "周二", |
|||
三: "周三", |
|||
四: "周四", |
|||
五: "周五", |
|||
六: "周六", |
|||
日: "周日", |
|||
}; |
|||
|
|||
return appointmentWeek.map((week) => weekMap[week] || week).join(","); |
|||
}, |
|||
|
|||
// 格式化预约时间段
|
|||
formatAppointmentTime(appointmentTimeAm, appointmentTimePm) { |
|||
const timeSlots = []; |
|||
|
|||
if (appointmentTimeAm) { |
|||
timeSlots.push(`上午 ${appointmentTimeAm}`); |
|||
} |
|||
|
|||
if (appointmentTimePm) { |
|||
timeSlots.push(`下午 ${appointmentTimePm}`); |
|||
} |
|||
|
|||
return timeSlots.join(" "); |
|||
}, |
|||
}); |
|||
@ -0,0 +1,11 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"no-data": "../../../components/noData/nodata", |
|||
"van-divider": "@vant/weapp/divider/index", |
|||
"van-button": "@vant/weapp/button/index", |
|||
"van-rate": "@vant/weapp/rate/index" |
|||
}, |
|||
"navigationBarTitleText": "共享空间", |
|||
"enablePullDownRefresh": true, |
|||
"onReachBottomDistance": 50 |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
<!-- subpages/space/list/list.wxml --> |
|||
<scroll-view scroll-y class="scroll-view" bindscrolltolower="scrolltolower" wx:if="{{list.length>0}}"> |
|||
<view class="card " wx:key="index" wx:for="{{list}}"> |
|||
<view class="item flex"> |
|||
<image src="{{item.imgUrls[0]}}" style="width: 200rpx;height:152rpx;margin-right: 16rpx;border-radius: 10rpx;" mode="" /> |
|||
<view class="flex flex-col flex-1"> |
|||
<!-- <view class="flex flex-sb"> |
|||
<view class="name font-bold">{{item.name}}</view> |
|||
</view> --> |
|||
<view class="position" style="margin:10rpx 0 10rpx 0;"> |
|||
{{item.name}} |
|||
</view> |
|||
<view class="date">{{item.appointmentWeekText}}</view> |
|||
<view class="date" wx:if="{{item.appointmentTimeText}}">{{item.appointmentTimeText}}</view> |
|||
<view class="date" wx:if="{{item.status==='1'}}">{{item.inDate}} 至 {{item.outDate}}</view> |
|||
<view class="date" wx:if="{{item.status==='5'}}"> |
|||
{{item.inDate}} 至 {{item.actualOutDate}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <van-divider dashed /> --> |
|||
<view class="flex flex-sb px-20 btn"> |
|||
<van-button round size="small" bind:click="toReserve" data-item="{{item}}" color="linear-gradient(to right, #0DC6C6, #13C2C2,#46DBD5)" custom-style="position:absolute;right:0rpx;bottom:-60rpx;"> |
|||
预约 |
|||
</van-button> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 加载更多提示 --> |
|||
<view wx:if="{{list.length > 0}}" class="load-more"> |
|||
<view wx:if="{{loading}}" class="loading-text"> |
|||
<text>加载中...</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<no-data isShow="{{list.length === 0 && !loading}}"></no-data> |
|||
@ -0,0 +1,60 @@ |
|||
/* subpages/space/list/list.wxss */ |
|||
.card{ |
|||
height:280rpx ; |
|||
} |
|||
.name { |
|||
font-size: 32rpx; |
|||
} |
|||
.position{ |
|||
font-size: 30rpx; |
|||
line-height: 32rpx; |
|||
} |
|||
.date { |
|||
font-size: 26rpx; |
|||
color: #BFBFBF; |
|||
line-height: 40rpx; |
|||
} |
|||
.btn{ |
|||
position: relative; |
|||
} |
|||
|
|||
.doc { |
|||
color: #08b3b3; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.scroll-view { |
|||
padding: 20rpx; |
|||
box-sizing: border-box; |
|||
background: #eff0f3; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
/* 加载更多样式 */ |
|||
.load-more { |
|||
padding: 20rpx 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.loading-text, .no-more-text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.loading-text text::before { |
|||
content: ''; |
|||
display: inline-block; |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
border: 2rpx solid #ccc; |
|||
border-top-color: #0DC6C6; |
|||
border-radius: 50%; |
|||
animation: spin 1s linear infinite; |
|||
margin-right: 10rpx; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
@keyframes spin { |
|||
0% { transform: rotate(0deg); } |
|||
100% { transform: rotate(360deg); } |
|||
} |
|||
@ -0,0 +1,338 @@ |
|||
// subpages/space/reserve/reserve.js
|
|||
import { appointment, spaceInfo } from "../../../api/index"; |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
bannerUrl: 'https://img.yzcdn.cn/vant/cat.jpeg', |
|||
roomName: '第一会议室', |
|||
openDate: '周一至周五', |
|||
openTimeText: '上午09:00-下午18:00', |
|||
dateList: [], |
|||
selectedDateIndex: 0, |
|||
timeSlots: [], |
|||
rangeStartIndex: -1, |
|||
rangeEndIndex: -1, |
|||
chosenText: '', |
|||
spaceDetail: null, |
|||
appointDates: [], |
|||
appointmentTimes: [] |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
console.log("11",options); |
|||
this.setData({ |
|||
id: options.id, |
|||
roomName: options.roomName, |
|||
openDate: options.openDate, |
|||
openTimeText: options.openTimeText, |
|||
bannerUrl: options.imgUrls, |
|||
}); |
|||
this.getDetail(); // 获取详情后会自动初始化日期和时间段
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() {}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() {}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() {}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { }, |
|||
// 获取详情
|
|||
getDetail() { |
|||
spaceInfo({ id: this.data.id }).then(res => { |
|||
console.log(res); |
|||
if (res.code === 200 && res.data) { |
|||
this.setData({ |
|||
spaceDetail: res.data, |
|||
appointDates: res.data.appointDates || [], |
|||
appointmentTimes: res.data.appointmentTimes || [] |
|||
}); |
|||
// 根据接口数据初始化日期和时间段
|
|||
this.initDatesFromAPI(); |
|||
this.initTimeSlotsFromAPI(); |
|||
} |
|||
}).catch(err => { |
|||
wx.showToast({ |
|||
title: err.msg || '获取详情失败', |
|||
icon: 'none' |
|||
}); |
|||
}) |
|||
}, |
|||
|
|||
initDates() { |
|||
const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; |
|||
const today = new Date(); |
|||
const dates = []; |
|||
for (let i = 0; i < 7; i++) { |
|||
const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + i); |
|||
const isToday = i === 0; |
|||
dates.push({ |
|||
label: isToday ? '今天' : weekMap[d.getDay()], |
|||
day: d.getDate(), |
|||
date: `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}-${('0' + d.getDate()).slice(-2)}`, |
|||
}); |
|||
} |
|||
this.setData({ |
|||
dateList: dates, |
|||
selectedDateIndex: 0, |
|||
}); |
|||
}, |
|||
|
|||
// 根据接口数据初始化日期
|
|||
initDatesFromAPI() { |
|||
const { appointDates } = this.data; |
|||
if (!appointDates || appointDates.length === 0) { |
|||
this.initDates(); // 如果没有接口数据，使用默认逻辑
|
|||
return; |
|||
} |
|||
|
|||
const today = new Date().toISOString().split('T')[0]; // 今天的日期 YYYY-MM-DD
|
|||
const dates = appointDates.map((item, index) => { |
|||
const date = new Date(item.appointDate); |
|||
const isToday = item.appointDate === today; |
|||
return { |
|||
label: isToday ? '今天' : item.week, |
|||
day: date.getDate(), |
|||
date: item.appointDate, |
|||
canAppoint: item.canAppoint, |
|||
disabled: !item.canAppoint |
|||
}; |
|||
}); |
|||
|
|||
// 找到第一个可预约的日期作为默认选中
|
|||
let defaultIndex = 0; |
|||
for (let i = 0; i < dates.length; i++) { |
|||
if (dates[i].canAppoint) { |
|||
defaultIndex = i; |
|||
break; |
|||
} |
|||
} |
|||
|
|||
this.setData({ |
|||
dateList: dates, |
|||
selectedDateIndex: defaultIndex, |
|||
}); |
|||
}, |
|||
|
|||
initTimeSlots() { |
|||
const ranges = [ |
|||
['09:00', '09:30'], ['09:30', '10:00'], ['10:00', '10:30'], ['10:30', '11:00'], |
|||
['11:00', '11:30'], ['11:30', '12:00'], ['12:00', '12:30'], ['12:30', '13:00'], |
|||
['13:00', '13:30'], ['13:30', '14:00'], ['14:00', '14:30'], ['14:30', '15:00'], |
|||
['15:00', '15:30'], ['15:30', '16:00'], ['16:00', '16:30'], ['16:30', '17:00'], |
|||
['17:00', '17:30'], ['17:30', '18:00'], ['18:00', '18:30'], ['18:30', '19:00'], |
|||
]; |
|||
const slots = ranges.map((r, idx) => ({ |
|||
id: `${r[0]}-${r[1]}`, |
|||
start: r[0], |
|||
end: r[1], |
|||
status: idx < 3 ? 'disabled' : 'available' |
|||
})); |
|||
this.setData({ timeSlots: slots, rangeStartIndex: -1, rangeEndIndex: -1, chosenText: '' }); |
|||
}, |
|||
|
|||
// 根据接口数据初始化时间段
|
|||
initTimeSlotsFromAPI() { |
|||
const { appointmentTimes } = this.data; |
|||
if (!appointmentTimes || appointmentTimes.length === 0) { |
|||
this.initTimeSlots(); // 如果没有接口数据，使用默认逻辑
|
|||
return; |
|||
} |
|||
|
|||
const slots = appointmentTimes.map((item, index) => { |
|||
// 解析时间段，例如 "09:00至09:29" -> start: "09:00", end: "09:29"
|
|||
const timeMatch = item.appointmentTime.match(/(\d{2}:\d{2})至(\d{2}:\d{2})/); |
|||
let start = '00:00'; |
|||
let end = '00:30'; |
|||
|
|||
if (timeMatch) { |
|||
start = timeMatch[1]; |
|||
end = timeMatch[2]; |
|||
} |
|||
|
|||
return { |
|||
id: item.id, |
|||
apiId: item.id, // 保存接口返回的ID
|
|||
start: start, |
|||
end: end, |
|||
timeText: item.appointmentTime, |
|||
status: item.canAppoint ? 'available' : 'disabled' |
|||
}; |
|||
}); |
|||
|
|||
this.setData({ |
|||
timeSlots: slots, |
|||
rangeStartIndex: -1, |
|||
rangeEndIndex: -1, |
|||
chosenText: '' |
|||
}); |
|||
}, |
|||
|
|||
selectDate(e) { |
|||
const { index } = e.currentTarget.dataset; |
|||
const selectedDate = this.data.dateList[index]; |
|||
|
|||
// 检查是否可预约
|
|||
if (selectedDate.disabled) { |
|||
wx.showToast({ |
|||
title: '该日期不可预约', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
this.setData({ selectedDateIndex: index }); |
|||
this.initTimeSlotsFromAPI(); // 使用接口数据初始化时间段
|
|||
}, |
|||
|
|||
toggleSlot(e) { |
|||
const { index } = e.currentTarget.dataset; |
|||
const list = this.data.timeSlots.slice(); |
|||
const slot = list[index]; |
|||
if (slot.status === 'disabled') return; |
|||
|
|||
const { rangeStartIndex, rangeEndIndex } = this.data; |
|||
|
|||
// 无选择 -> 单选
|
|||
if (rangeStartIndex === -1) { |
|||
for (let i = 0; i < list.length; i++) if (list[i].status === 'selected') list[i].status = 'available'; |
|||
list[index].status = 'selected'; |
|||
this.setData({ |
|||
timeSlots: list, |
|||
rangeStartIndex: index, |
|||
rangeEndIndex: index, |
|||
chosenText: `${slot.start} - ${slot.end}` |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 已有单选
|
|||
if (rangeStartIndex !== -1 && rangeEndIndex === rangeStartIndex) { |
|||
// 点击同一格 -> 清空
|
|||
if (index === rangeStartIndex) { |
|||
list[index].status = 'available'; |
|||
this.setData({ timeSlots: list, rangeStartIndex: -1, rangeEndIndex: -1, chosenText: '' }); |
|||
return; |
|||
} |
|||
// 点击另一格 -> 扩展成区间（需避开禁用）
|
|||
const start = Math.min(rangeStartIndex, index); |
|||
const end = Math.max(rangeStartIndex, index); |
|||
for (let i = start; i <= end; i++) if (list[i].status === 'disabled') { |
|||
wx.showToast({ icon: 'none', title: '所选区间包含不可预约时段' }); |
|||
return; |
|||
} |
|||
for (let i = start; i <= end; i++) list[i].status = 'selected'; |
|||
this.setData({ |
|||
timeSlots: list, |
|||
rangeStartIndex: start, |
|||
rangeEndIndex: end, |
|||
chosenText: `${list[start].start} - ${list[end].end}` |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 已有区间 -> 下一次点击无论何处都折叠为所点单格
|
|||
if (rangeStartIndex !== -1 && rangeEndIndex !== -1) { |
|||
// 清空之前区间
|
|||
for (let i = 0; i < list.length; i++) { |
|||
if (list[i].status === 'selected') list[i].status = 'available'; |
|||
} |
|||
// 选中新点为单选
|
|||
list[index].status = 'selected'; |
|||
this.setData({ |
|||
timeSlots: list, |
|||
rangeStartIndex: index, |
|||
rangeEndIndex: index, |
|||
chosenText: `${list[index].start} - ${list[index].end}` |
|||
}); |
|||
return; |
|||
} |
|||
}, |
|||
|
|||
confirmReserve() { |
|||
const { rangeStartIndex, rangeEndIndex, timeSlots, selectedDateIndex, dateList, id } = this.data; |
|||
if (rangeStartIndex === -1) { |
|||
wx.showToast({ icon: 'none', title: '请先选择预约时段' }); |
|||
return; |
|||
} |
|||
|
|||
const start = rangeStartIndex; |
|||
const end = rangeEndIndex === -1 ? rangeStartIndex : rangeEndIndex; |
|||
const selectedDate = dateList[selectedDateIndex]; |
|||
const startSlot = timeSlots[start]; |
|||
const endSlot = timeSlots[end]; |
|||
|
|||
// 收集选中的时间段ID
|
|||
const selectedTimeIds = []; |
|||
for (let i = start; i <= end; i++) { |
|||
if (timeSlots[i].apiId) { |
|||
selectedTimeIds.push(timeSlots[i].apiId); |
|||
} |
|||
} |
|||
|
|||
const appointmentData = { |
|||
shareSpaceId: id, |
|||
appointmentDate: selectedDate.date, |
|||
timeIds: selectedTimeIds, |
|||
}; |
|||
|
|||
console.log('预约数据:', appointmentData); |
|||
|
|||
// 调用预约接口
|
|||
appointment(appointmentData).then(res => { |
|||
if (res.code === 200) { |
|||
wx.showToast({ |
|||
title: '预约成功', |
|||
icon: 'success' |
|||
}); |
|||
// 可以跳转到预约成功页面或返回上一页
|
|||
setTimeout(() => { |
|||
wx.navigateBack(); |
|||
}, 1500); |
|||
} else { |
|||
wx.showToast({ |
|||
title: res.msg || '预约失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}).catch(err => { |
|||
wx.showToast({ |
|||
title: err.msg || '预约失败', |
|||
icon: 'none' |
|||
}); |
|||
}); |
|||
} |
|||
}) |
|||
@ -0,0 +1,8 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"van-image": "@vant/weapp/image/index", |
|||
"van-divider": "@vant/weapp/divider/index", |
|||
"van-button": "@vant/weapp/button/index", |
|||
"van-tag": "@vant/weapp/tag/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,35 @@ |
|||
<!-- subpages/space/reserve/reserve.wxml --> |
|||
<view class="page"> |
|||
<view class="banner"> |
|||
<van-image width="100%" height="360rpx" src="{{bannerUrl}}" fit="cover" radius="0" /> |
|||
</view> |
|||
<view class=" banner-overlay"> |
|||
<view class="room-name">{{roomName}}</view> |
|||
<view class="open-time">{{openDate}}</view> |
|||
<view class="open-time">{{openTimeText}}</view> |
|||
</view> |
|||
|
|||
<view class="section"> |
|||
<scroll-view scroll-x class="date-strip"> |
|||
<view class="date-item {{selectedDateIndex === index ? 'active' : ''}} {{item.disabled ? 'disabled' : ''}}" wx:for="{{dateList}}" wx:key="index" data-index="{{index}}" bindtap="selectDate"> |
|||
<view class="date-label">{{item.label}}</view> |
|||
<view class="date-day">{{item.day}}</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="section-title">预约时段</view> |
|||
<view class="slot-grid"> |
|||
<view wx:for="{{timeSlots}}" wx:key="index" class="slot {{item.status}}" data-index="{{index}}" bindtap="toggleSlot"> |
|||
<view class="slot-line">{{item.start}}</view> |
|||
<view class="slot-sep">至</view> |
|||
<view class="slot-line">{{item.end}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="chosen" wx:if="{{chosenText}}">已选择：{{chosenText}}</view> |
|||
</view> |
|||
<view class="footer"> |
|||
<van-button type="primary" block round color="linear-gradient(90deg, #0DC6C6, #13C2C2, #46DBD5)" custom-style="width:400rpx;height:76rpx;" bind:click="confirmReserve"> |
|||
确定 |
|||
</van-button> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,131 @@ |
|||
/* subpages/space/reserve/reserve.wxss */ |
|||
.page { |
|||
background: #f8f8f8; |
|||
min-height: 100vh; |
|||
} |
|||
.banner { |
|||
position: relative; |
|||
} |
|||
.banner-overlay { |
|||
padding: 20rpx; |
|||
background: #fff; |
|||
} |
|||
.room-name { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
} |
|||
.open-time { |
|||
margin-top: 8rpx; |
|||
font-size: 26rpx; |
|||
color: #BFBFBF; |
|||
} |
|||
.section { |
|||
margin: 0 18rpx; |
|||
margin-top: 12rpx; |
|||
padding: 18rpx; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
|
|||
} |
|||
.section-row{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.section-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
margin-bottom: 16rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
.range-switch{ |
|||
display: flex; |
|||
align-items: center; |
|||
color: #666; |
|||
font-size: 26rpx; |
|||
} |
|||
.date-strip { |
|||
white-space: nowrap; |
|||
padding-bottom: 12rpx; |
|||
} |
|||
.date-item { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 100rpx; |
|||
height: 120rpx; |
|||
border-radius: 16rpx; |
|||
color: #666; |
|||
margin-right: 16rpx; |
|||
} |
|||
.date-item .date-label { |
|||
font-size: 26rpx; |
|||
} |
|||
.date-item .date-day { |
|||
margin-top: 8rpx; |
|||
width: 56rpx; |
|||
height: 56rpx; |
|||
line-height: 56rpx; |
|||
text-align: center; |
|||
border-radius: 50%; |
|||
} |
|||
.date-item.active { |
|||
/* background: #e6fffb; */ |
|||
color: #13c2c2; |
|||
} |
|||
.date-item.active .date-day { |
|||
background: #13c2c2; |
|||
color: #fff; |
|||
} |
|||
.date-item.disabled { |
|||
color: #bfbfbf; |
|||
opacity: 0.5; |
|||
} |
|||
.date-item.disabled .date-day { |
|||
background: #f0f0f0; |
|||
color: #bfbfbf; |
|||
} |
|||
.slot-grid { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 12rpx; |
|||
} |
|||
.slot { |
|||
width: calc(25% - 16rpx); |
|||
margin-right: 16rpx; |
|||
margin-top: 16rpx; |
|||
border-radius: 16rpx; |
|||
padding: 12rpx 0; |
|||
text-align: center; |
|||
background: #f7f8fa; |
|||
color: #000; |
|||
border:1px solid rgba(111, 195, 160, 1); |
|||
} |
|||
.slot:nth-child(4n) { |
|||
margin-right: 0; |
|||
} |
|||
.slot .slot-line { |
|||
font-size: 28rpx; |
|||
} |
|||
.slot .slot-sep { |
|||
font-size: 24rpx; |
|||
color: inherit; |
|||
} |
|||
.slot.disabled { |
|||
background: #ededed; |
|||
color: #bfbfbf; |
|||
border: none; |
|||
} |
|||
.slot.selected { |
|||
background: #13c2c2; |
|||
color: #fff; |
|||
} |
|||
.chosen{ |
|||
margin-top: 20rpx; |
|||
color: #13c2c2; |
|||
font-size: 26rpx; |
|||
} |
|||
.footer { |
|||
padding: 24rpx; |
|||
} |
|||
Loading…
Reference in new issue