微信小程序开发中,添加一个预约咨询的副页面,页面内容包括预约日期时间的选择、预约的对象及其可预约的时间和编号,给出所有相关代码
时间: 2024-03-10 12:51:18 浏览: 25
好的,以下是一个简单的预约咨询副页面的代码示例:
1. HTML代码
```html
<view class="container">
<view class="title">预约咨询</view>
<view class="form">
<view class="form-item">
<view class="label">日期</view>
<picker mode="date" value="{{date}}" start="{{startDate}}" end="{{endDate}}" bindchange="onDateChange">
<view class="picker">{{date}}</view>
</picker>
</view>
<view class="form-item">
<view class="label">时间</view>
<picker mode="time" value="{{time}}" start="{{startTime}}" end="{{endTime}}" bindchange="onTimeChange">
<view class="picker">{{time}}</view>
</picker>
</view>
<view class="form-item">
<view class="label">咨询对象</view>
<input type="text" placeholder="请输入咨询对象" bindinput="onObjectInput" value="{{object}}">
</view>
<view class="form-item">
<view class="label">可预约时间</view>
<checkbox-group bindchange="onCheckboxChange">
<label class="checkbox" wx:for="{{availableTime}}">
<checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox>
</label>
</checkbox-group>
</view>
</view>
<button class="submit-btn" type="primary" bindtap="submitForm">提交</button>
</view>
```
2. JS代码
```javascript
Page({
data: {
date: '',
time: '',
startDate: '',
endDate: '',
startTime: '',
endTime: '',
object: '',
availableTime: [
{ name: '上午8:00-9:00', value: '1', checked: false },
{ name: '上午9:00-10:00', value: '2', checked: false },
{ name: '下午1:00-2:00', value: '3', checked: false },
{ name: '下午2:00-3:00', value: '4', checked: false }
]
},
onLoad: function () {
// 初始化日期时间范围
const startDate = new Date()
startDate.setDate(startDate.getDate() + 1)
const endDate = new Date()
endDate.setDate(endDate.getDate() + 7)
const startTime = '08:00'
const endTime = '15:00'
this.setData({
startDate: startDate.toISOString().split('T')[0],
endDate: endDate.toISOString().split('T')[0],
startTime: startTime,
endTime: endTime
})
},
onDateChange: function (e) {
this.setData({
date: e.detail.value
})
},
onTimeChange: function (e) {
this.setData({
time: e.detail.value
})
},
onObjectInput: function (e) {
this.setData({
object: e.detail.value
})
},
onCheckboxChange: function (e) {
const availableTime = this.data.availableTime
for (let i = 0; i < availableTime.length; i++) {
availableTime[i].checked = false
for (let j = 0; j < e.detail.value.length; j++) {
if (availableTime[i].value === e.detail.value[j]) {
availableTime[i].checked = true
break
}
}
}
this.setData({
availableTime: availableTime
})
},
submitForm: function () {
const date = this.data.date
const time = this.data.time
const object = this.data.object
const availableTime = this.data.availableTime.filter(item => item.checked).map(item => item.name)
console.log('预约信息:', date, time, object, availableTime)
// TODO: 提交预约信息
}
})
```
以上代码实现了一个包含日期、时间、咨询对象和可预约时间的预约咨询副页面,通过选择日期、时间、输入咨询对象和勾选可预约时间进行预约信息的填写,点击提交按钮可以将预约信息打印在控制台中。如果需要实际提交预约信息,可以在 `submitForm` 方法中添加相应的代码。