基于微信小程序的座位预约界面代码

以下是一个简单的微信小程序座位预约界面的代码：

<view class="container">
  <view class="header">
    <text>座位预约</text>
  </view>
  <view class="form">
    <view class="input-group">
      <text>座位数量：</text>
      <input type="number" placeholder="请输入数量" value="{{seatNum}}" bindinput="onInputSeatNum"/>
    </view>
    <view class="input-group">
      <text>预约时间：</text>
      <picker mode="date" value="{{dateValue}}" start="{{startDate}}" end="{{endDate}}" bindchange="onDateChange">
        <view class="picker">{{dateText}}</view>
      </picker>
      <picker mode="time" value="{{timeValue}}" start="{{startTime}}" end="{{endTime}}" bindchange="onTimeChange">
        <view class="picker">{{timeText}}</view>
      </picker>
    </view>
    <view class="input-group">
      <text>联系电话：</text>
      <input type="number" placeholder="请输入电话" value="{{phoneNum}}" bindinput="onInputPhoneNum"/>
    </view>
    <view class="input-group">
      <text>备注：</text>
      <textarea placeholder="请输入备注" value="{{remark}}" bindinput="onInputRemark"></textarea>
    </view>
  </view>
  <view class="button-group">
    <button class="submit" bindtap="onSubmit">提交</button>
    <button class="reset" bindtap="onReset">重置</button>
  </view>
</view>

.container {
  margin: 20rpx;
}

.header {
  font-size: 32rpx;
  text-align: center;
  margin-bottom: 20rpx;
}

.form {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.input-group text {
  font-size: 28rpx;
  margin-right: 10rpx;
}

input, textarea {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  padding: 0 20rpx;
  border-radius: 5rpx;
  border: 1rpx solid #ccc;
}

.picker {
  font-size: 28rpx;
  color: #999;
  padding: 0 10rpx;
  border-radius: 5rpx;
  border: 1rpx solid #ccc;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
}

.submit, .reset {
  background-color: #007aff;
  color: #fff;
  font-size: 28rpx;
  border-radius: 5rpx;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
}

.reset {
  background-color: #eee;
  color: #333;
}

Page({
  data: {
    seatNum: 1,
    dateValue: '',
    dateText: '请选择日期',
    timeValue: '',
    timeText: '请选择时间',
    phoneNum: '',
    remark: '',
    startDate: new Date().getTime(),
    endDate: new Date().getTime() + 7 * 24 * 60 * 60 * 1000,
    startTime: '08:00',
    endTime: '22:00'
  },

  onInputSeatNum: function (e) {
    this.setData({
      seatNum: e.detail.value
    })
  },

  onDateChange: function (e) {
    this.setData({
      dateValue: e.detail.value,
      dateText: this.formatDate(new Date(e.detail.value))
    })
  },

  onTimeChange: function (e) {
    this.setData({
      timeValue: e.detail.value,
      timeText: e.detail.value
    })
  },

  onInputPhoneNum: function (e) {
    this.setData({
      phoneNum: e.detail.value
    })
  },

  onInputRemark: function (e) {
    this.setData({
      remark: e.detail.value
    })
  },

  onSubmit: function () {
    // TODO: 提交预约信息
    console.log(this.data)
  },

  onReset: function () {
    this.setData({
      seatNum: 1,
      dateValue: '',
      dateText: '请选择日期',
      timeValue: '',
      timeText: '请选择时间',
      phoneNum: '',
      remark: ''
    })
  },

  formatDate: function (date) {
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
  }
})

以上代码实现了一个简单的座位预约界面，包括座位数量、预约时间、联系电话和备注。用户可以选择日期和时间，点击提交按钮后会将预约信息打印到控制台中。注意，这只是一个示例代码，实际开发中还需要进行数据验证和提交等操作。