微信小程序开发中,添加一个预约咨询的副页面,页面内容包括当前时间和预约对象。每个预约对象作为独立的个体而存在，其半个板块上显示该预约对象的可预约时间和编号,给出所有相关代码

好的，以下是一个简单的微信小程序预约咨询副页面的代码示例：

wxml代码：

<view class="container">
  <view class="time-section">
    <view class="current-time">当前时间：{{currentTime}}</view>
    <view class="appointments">
      <view class="appointment" wx:for="{{appointments}}" wx:key="id">
        <view class="name">{{item.name}}</view>
        <view class="times">
          <view class="time" wx:for="{{item.times}}" wx:key="index">
            <view class="time-slot {{item.status[index] ? 'available' : 'unavailable'}}">{{item.timeslot}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

js代码：

Page({
  data: {
    currentTime: '',
    appointments: [
      {
        id: 1,
        name: '预约对象1',
        times: ['9:00-10:00', '10:00-11:00', '11:00-12:00', '14:00-15:00', '15:00-16:00'],
        status: [true, true, false, true, true]
      },
      {
        id: 2,
        name: '预约对象2',
        times: ['9:00-10:00', '11:00-12:00', '14:00-15:00', '15:00-16:00'],
        status: [true, false, true, true]
      },
      {
        id: 3,
        name: '预约对象3',
        times: ['10:00-11:00', '11:00-12:00', '14:00-15:00', '15:00-16:00'],
        status: [false, true, true, true]
      }
    ]
  },

  onLoad: function () {
    this.getCurrentTime();
  },

  getCurrentTime: function () {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    month = month < 10 ? '0' + month : month;
    let day = date.getDate();
    day = day < 10 ? '0' + day : day;
    let hour = date.getHours();
    hour = hour < 10 ? '0' + hour : hour;
    let minute = date.getMinutes();
    minute = minute < 10 ? '0' + minute : minute;
    let second = date.getSeconds();
    second = second < 10 ? '0' + second : second;
    this.setData({
      currentTime: `${year}-${month}-${day} ${hour}:${minute}:${second}`
    });
    setTimeout(() => {
      this.getCurrentTime();
    }, 1000);
  }
})

样式代码：

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-section {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.current-time {
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 30rpx;
  text-align: center;
}

.appointments {
  width: 100%;
  height: auto;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.appointment {
  width: 90%;
  height: auto;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.name {
  width: 30%;
  height: auto;
  padding: 20rpx;
  font-size: 28rpx;
  text-align: center;
}

.times {
  width: 70%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.time {
  width: 25%;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 28rpx;
  text-align: center;
  box-sizing: border-box;
  border: 2rpx solid #666;
  border-radius: 10rpx;
  margin: 5rpx;
}

.available {
  background-color: #4caf50;
  color: #fff;
}

.unavailable {
  background-color: #f44336;
  color: #fff;
}

这里的主要思路是在预约对象里面定义一个`times`数组，里面存储了该对象的可预约时间，同时再定义一个`status`数组，用于表示该时间段是否可预约，`true`表示可预约，`false`表示不可预约。在渲染页面的时候，通过循环遍历预约对象数组，然后再循环遍历该对象的可预约时间数组，通过`status`数组来判断该时间段是否可预约，然后根据情况动态添加样式即可。