制作一个微信小程序的预约表单 /入住日期/退房日期/房型选择/房型价格/总价 最新可执行代码
时间: 2023-07-19 14:53:12 浏览: 361
微信小程序开发项目实例-车位预约小程序代码(源码).rar
5星 · 资源好评率100%
很抱歉,我无法提供完整的可执行代码,但我可以为你提供一个简单的示例代码来帮助你理解如何实现预约表单。
首先,在小程序中创建一个预约表单页面,代码如下:
```
<view class="container">
<form bindsubmit="formSubmit">
<view class="form-item">
<view class="item-label">入住日期</view>
<picker mode="date" name="checkinDate" value="{{checkinDate}}" bindchange="bindDateChange">
<view class="picker">{{checkinDate}}</view>
</picker>
</view>
<view class="form-item">
<view class="item-label">退房日期</view>
<picker mode="date" name="checkoutDate" value="{{checkoutDate}}" bindchange="bindDateChange">
<view class="picker">{{checkoutDate}}</view>
</picker>
</view>
<view class="form-item">
<view class="item-label">房型选择</view>
<picker mode="selector" range="{{roomTypes}}" name="roomTypeIndex" value="{{roomTypeIndex}}" bindchange="bindRoomTypeChange">
<view class="picker">{{roomTypes[roomTypeIndex]}}</view>
</picker>
</view>
<view class="form-item">
<view class="item-label">房型价格</view>
<view class="item-value">{{roomPrices[roomTypeIndex]}}元/晚</view>
</view>
<view class="form-item">
<view class="item-label">总价</view>
<view class="item-value">{{totalPrice}}元</view>
</view>
<button formType="submit" class="submit-btn">提交预约</button>
</form>
</view>
```
在这个页面中,你可以看到包括入住日期、退房日期、房型选择、房型价格和总价等字段的表单元素。
接下来,在页面的js文件中,你需要编写表单提交和数据处理的代码,代码如下:
```
Page({
data: {
checkinDate: '',
checkoutDate: '',
roomTypes: ['标准间', '豪华间', '总统套房'],
roomTypeIndex: 0,
roomPrices: [200, 500, 1000],
totalPrice: 0
},
bindDateChange(e) {
const { name } = e.currentTarget.dataset;
const value = e.detail.value;
this.setData({
[name]: value
});
this.calculateTotalPrice();
},
bindRoomTypeChange(e) {
const { name } = e.currentTarget.dataset;
const value = e.detail.value;
this.setData({
[name]: value
});
this.calculateTotalPrice();
},
calculateTotalPrice() {
const { checkinDate, checkoutDate, roomTypeIndex, roomPrices } = this.data;
const checkinTimestamp = new Date(checkinDate).getTime();
const checkoutTimestamp = new Date(checkoutDate).getTime();
const duration = (checkoutTimestamp - checkinTimestamp) / 1000 / 60 / 60 / 24;
const totalPrice = duration * roomPrices[roomTypeIndex];
this.setData({
totalPrice
});
},
formSubmit(e) {
const formData = e.detail.value;
// 提交表单数据到后台服务器
// 处理表单数据并存储到数据库中
// ...
wx.showToast({
title: '预约成功',
icon: 'success',
duration: 2000
});
}
})
```
在这个代码中,你可以看到包括表单提交、表单数据处理和总价计算等功能的代码。当用户提交表单时,表单数据将被提交到后台服务器进行处理和存储,并在提交成功后显示一个成功提示。
需要注意的是,上述代码只是一个简单的示例,实际开发中还需要考虑更多的细节问题。你需要根据你的实际需求和业务逻辑进行适当的修改和调整。
阅读全文