微信小程序开发中,添加一个预约咨询的副页面,页面内容包括时间、预约对象及其编号,给出所有相关代码
时间: 2024-03-08 11:50:53 浏览: 96
好的,以下是一个简单的微信小程序预约咨询副页面的代码示例:
1. 在 app.json 中注册页面:
```
"pages": [
"index",
"booking"
],
```
2. 在 pages 文件夹下新建 booking 目录,并在该目录下新建 booking.wxml、booking.wxss、booking.js 和 booking.json 文件。
booking.wxml 文件代码示例:
```
<view class="container">
<form bindsubmit="submitBooking">
<view class="input-group">
<view class="input-label">时间:</view>
<input name="time" class="input-field" type="datetime-local" placeholder="请选择时间" required />
</view>
<view class="input-group">
<view class="input-label">预约对象编号:</view>
<input name="objectId" class="input-field" type="number" placeholder="请输入编号" required />
</view>
<view class="input-group">
<view class="input-label">预约对象名称:</view>
<input name="objectName" class="input-field" type="text" placeholder="请输入名称" required />
</view>
<button type="submit">提交</button>
</form>
</view>
```
booking.wxss 文件代码示例:
```
.container {
padding: 20rpx;
}
.input-group {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.input-label {
width: 120rpx;
}
.input-field {
flex: 1;
height: 80rpx;
border-radius: 10rpx;
border: 1rpx solid #ccc;
padding: 20rpx;
}
```
booking.js 文件代码示例:
```
Page({
data: {
bookingInfo: {
time: '',
objectId: '',
objectName: ''
}
},
submitBooking: function(e) {
const bookingInfo = e.detail.value;
// TODO: 将预约信息提交到服务器
console.log(bookingInfo);
wx.showToast({
title: '预约成功',
icon: 'success',
duration: 2000
});
}
});
```
booking.json 文件代码示例:
```
{
"navigationBarTitleText": "预约咨询"
}
```
以上代码示例中,我们使用了一个表单来收集用户的预约信息,并在点击提交按钮时将信息打印到控制台,并弹出一个提示框告知用户预约成功。你可以根据业务需求来修改代码,例如将预约信息提交到服务器等。
阅读全文