基于微信小程序的座位预约界面代码
时间: 2024-01-12 15:03:21 浏览: 26
以下是一个简单的微信小程序座位预约界面代码:
```html
<view class="container">
<view class="title">座位预约</view>
<view class="seats">
<view class="seat" wx:for="{{seats}}" wx:key="{{item.id}}" bindtap="selectSeat">
<view class="{{item.status}}"></view>
<view class="name">{{item.name}}</view>
</view>
</view>
<view class="btn-area">
<button class="btn" bindtap="submitReservation">预约</button>
</view>
</view>
```
```js
Page({
data: {
seats: [
{ id: 1, name: 'A1', status: 'available' },
{ id: 2, name: 'A2', status: 'available' },
{ id: 3, name: 'A3', status: 'reserved' },
{ id: 4, name: 'A4', status: 'selected' },
{ id: 5, name: 'A5', status: 'available' },
{ id: 6, name: 'A6', status: 'reserved' },
{ id: 7, name: 'A7', status: 'available' },
{ id: 8, name: 'A8', status: 'available' },
{ id: 9, name: 'A9', status: 'selected' },
{ id: 10, name: 'A10', status: 'available' },
],
selectedSeats: []
},
selectSeat: function(e) {
var seat = e.currentTarget.dataset.seat;
var seats = this.data.seats;
var idx = seats.findIndex(function(item) {
return item.id === seat.id;
});
if (seats[idx].status === 'available') {
seats[idx].status = 'selected';
this.setData({
seats: seats,
selectedSeats: this.data.selectedSeats.concat(seat)
});
} else if (seats[idx].status === 'selected') {
seats[idx].status = 'available';
var selectedSeats = this.data.selectedSeats.filter(function(item) {
return item.id !== seat.id;
});
this.setData({
seats: seats,
selectedSeats: selectedSeats
});
}
},
submitReservation: function() {
wx.showToast({
title: '预约成功',
icon: 'success',
duration: 2000
});
}
})
```
在上面的代码中,`seats` 数组表示所有座位,每个座位有一个 `id`、一个 `name` 和一个 `status` 属性,`status` 表示座位状态,可能的值为 `available`(可用)、`reserved`(已预约)和 `selected`(已选中)。`selectedSeats` 数组表示用户已选中的座位。
在页面渲染时,`wx:for` 指令用于遍历 `seats` 数组,渲染每个座位。当用户点击一个座位时,`selectSeat` 方法会被调用,根据座位状态进行相应的处理,并更新 `seats` 和 `selectedSeats` 数组。当用户点击预约按钮时,`submitReservation` 方法会被调用,弹出一个提示框表示预约成功。
这只是一个简单的示例,实际应用中需要根据具体需求进行修改和完善。