微信小程序实现课表布局和预约功能

之前甲方说要实现这个课表样式的布局和预约功能，经过查阅、编码、调试，最终实现的效果如下：

实现代码如下：

index.wxml:

<!--pages/badminton/badminton.wxml-->
<view class="container">
  <view class="scroll-view">
    <view class="fixed-column">
      <view class="fixed-item">星期一</view>
      <view class="fixed-item">星期二</view>
      <view class="fixed-item">星期三</view>
      <view class="fixed-item">星期四</view>
      <view class="fixed-item">星期五</view>
      <view class="fixed-item">星期六</view>
      <view class="fixed-item">星期日</view>
    </view>
    <view class="niceui-schedule-right">
      <view class="scrollable-content">
        <!-- 右侧滚动内容 -->
        <view wx:for="{{day[0]}}" wx:key="index" class="scroll-item" bind:tap="showModel" data-time="{{item.time}}" data-ynumber="{{item.ynumber}}" data-xnumber="{{item.ynumber}}" data-status="{{item.status}}" data-orderid="{{item._id}}" data-weekday="周一">
          <view>{{item.time}}</view>
          <text>限制人数:{{item.xnumber}}</text>
          <text>已预约人数:{{item.ynumber}}</text>
          <view>{{item.name}}</view>
        </view>
      </view>
      <view class="scrollable-content">
        <!-- 右侧滚动内容 -->
        <view wx:for="{{day[1]}}" wx:key="index" class="scroll-item" bind:tap="showModel" data-time="{{item.time}}" data-ynumber="{{item.ynumber}}" data-xnumber="{{item.ynumber}}" data-status="{{item.status}}" data-orderid="{{item._id}}" data-weekday="周二">
          <view>{{item.time}}</view>
          <text>限制人数:{{item.xnumber}}</text>
          <text>已预约人数:{{item.ynumber}}</text>
          <view>{{item.name}}</view>
        </view>
      </view>
      <view class="scrollable-content">
        <!-- 右侧滚动内容 -->
        <view wx:for="{{day[2]}}" wx:key="index" class="scroll-item" bind:tap="showModel" data-time="{{item.time}}" data-ynumber="{{item.ynumber}}" data-xnumber="{{item.ynumber}}" data-status="{{item.status}}" data-orderid="{{item._id}}" data-weekday="周三">
          <view>{{item.time}}</view>
          <text>限制人数:{{item.xnumber}}</text>
          <text>已预约人数:{{item.ynumber}}</text>
          <view>{{item.name}}</view>
        </view>
      </view>
      <view class="scrollable-content">
        <!-- 右侧滚动内容 -->
        <view wx:for="{{day[3]}}" wx:key="index" class="scroll-item" bind:tap="showModel" data-time="{{item.time}}" data-ynumber="{{item.ynumber}}" data-xnumber="{{item.ynumber}}" data-status="{{item.status}}" data-orderid="{{item._id}}" data-weekday="周三">
          <view>{{item.time}}</view>
          <text>限制人数:{{item.xnumber}}</text>
          <text>已预约人数:{{item.ynumber}}</text>
          <view>{{item.name}}</view>
        </view>
      </view>
      <view class="scrollable-content">
        <!-- 右侧滚动内容 -->
        <view wx:for="{{day[4]}}" wx:key="index" class="scroll-item" bind:tap="showModel" data-time="{{item.time}}" data-ynumber="{{item.ynumber}}" data-xnumber="{{item.ynumber}}" data-status="{{item.status}}" data-orderid="{{item._id}}" data-weekday="周三">
          <view>{{item.time}}</view>
          <text>限制人数:{{item.xnumber}}</text>
          <text>已预约人数:{{item.ynumber}}</text>
          <view>{{item.name}}</view>
        </view>
      </view>
      <view class="scrollable-content">
        <!-- 右侧滚动内容 -->
        <view wx:for="{{day[5]}}" wx:key="index" class="scroll-item" bind:tap="showModel" data-time="{{item.time}}" data-ynumber="{{item.ynumber}}" data-xnumber="{{item.ynumber}}" data-status="{{item.status}}" data-orderid="{{item._id}}" data-weekday="周三">
          <view>{{item.time}}</view>
          <text>限制人数:{{item.xnumber}}</text>
          <text>已预约人数:{{item.ynumber}}</text>
          <view>{{item.name}}</view>
        </view>
      </view>
      <view class="scrollable-content">
        <!-- 右侧滚动内容 -->
        <view wx:for="{{day[6]}}" wx:key="index" class="scroll-item" bind:tap="showModel" data-time="{{item.time}}" data-ynumber="{{item.ynumber}}" data-xnumber="{{item.ynumber}}" data-status="{{item.status}}" data-orderid="{{item._id}}" data-weekday="周三">
          <view>{{item.time}}</view>
          <text>限制人数:{{item.xnumber}}</text>
          <text>已预约人数:{{item.ynumber}}</text>
          <view>{{item.name}}</view>
        </view>
      </view>
    </view>
  </view>
</view>

index.wxss:

/* pages/badminton/badminton.wxss */
.container {
  height: 100%;
  width: 100%;
}

.scroll-view {
  white-space: nowrap;
  display: flex;
}

.fixed-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 200rpx;
  left: 0;
  /* 左侧固定列宽度，根据实际需求调整 */
  background-color: #f5f5f5;
  /* 左侧固定列背景色 */
}

.fixed-item {
  width: 100%;
  /* 每个固定项宽度 */
  height: 170rpx;
  line-height: 150rpx;
  /* text-align: center; */
  /* 文字居中 */
}

.scrollable-content {
  width: calc(100vw - 220rpx);
  height: 170rpx;
  display: flex;
  padding: 0rpx;
  /* 可根据需要调整内边距 */
  overflow: scroll;
}

.scroll-item {
  margin: 0 0rpx;
  height: 150rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

/* 文字居中 */
text {
  font-size: 8px;
}

index.js:

// pages/badminton/badminton.js
// const { envList } = require('../../envList');
const db = wx.cloud.database();

let app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    items: [],
    day: [],
    context: '你确定要预约这个时间段吗？',
    openid: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  onShareAppMessage: function () {
    return {
      title: '快来和我一起去打球！！！',
      path: 'pages/index/index', // 分享后打开的页面路径，可以带参数  
      success: function (res) {
        // 用户点击了分享后执行的回调函数  
        console.log('分享成功', res);
      },
      fail: function (err) {
        // 分享失败的回调函数  
        console.log('分享失败', err);
      }
    }
  },
  showModel: function (e) {
    var now = new Date(); // 创建一个 Date 对象，表示当前的日期和时间  
    var year = now.getFullYear(); // 获取年份  
    var month = String(now.getMonth() + 1).padStart(2, '0');
    var day = String(now.getDate()).padStart(2, '0');
    let date = String(year + "-" + month + "-" + day);
    console.log(date);
    let item = {
      date: date,
      ynumber: e.currentTarget.dataset.ynumber,
      xnumber: e.currentTarget.dataset.xnumber,
      time: e.currentTarget.dataset.time,
      status: e.currentTarget.dataset.status,
      order_id: e.currentTarget.dataset.orderid,
      weekday:e.currentTarget.dataset.weekday
    }
    let order = {
      name: '排球场',
      date: date,
      nickName:app.globalData.nickname,
      time: e.currentTarget.dataset.time,
      status: e.currentTarget.dataset.status,
      order_id: e.currentTarget.dataset.orderid,
      weekday:e.currentTarget.dataset.weekday,
      db:'volleyball'
    }
    console.log(item.status);
    if (item.status == 2) {
      this.setData({
        context: '这个时间段已经约满了哦'
      })
    } else if (item.status == 1) {
      this.setData({
        context: '你确定要预约这个时间段吗？'
      })
    };
    db.collection('orders').where({
      _openid: app.globalData.openid,
      name: '排球场',
      weekday: order.weekday,
      status: 1
    }).get({
      success: res => {
        console.log(res.data.length);
        if (res.data.length > 0) {
          this.setData({
            context: '一天只能预约一次呦'
          });
          wx.showToast({
            title: '一天只能预约一次呦',
            icon: 'none'
          });
          console.log(this.data.context);
        }
      },
      fail: err => {
        console.log(err);
      }
    }),
      wx.showModal({
        title: item.time, //提示的标题
        content: this.data.context, //提示的内容
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击了确定');
            console.log('orderId==' + item.order_id);
            if (this.data.context != '一天只能预约一次呦') {
              // 首先，获取当前的ynumber值
              db.collection('volleyball').doc(item.order_id).get({
                success: (docRes) => {
                  console.log("docRes==" + docRes.data.ynumber);
                  let currentYNumber = docRes.data.ynumber + 1;
                  let currentXNumber = docRes.data.xnumber;
                  console.log("currentYNumber==" + currentYNumber);
                  // 然后，更新ynumber字段的值
                  if (currentYNumber >= currentXNumber) {

                    db.collection("volleyball").doc(item.order_id).update({
                      data: {
                        name: "不可预约",
                        status: 2
                      }
                    })
                  } else {
                    console.log("orderid==" + item.order_id);
                    db.collection('volleyball').doc(item.order_id).update({
                      data: {
                        ynumber: currentYNumber,
                      }
                    }).then(Res => {
                      console.log('更新成功');
                      console.log(Res.data);
                      // db.collection('orders').get();
                      // 更新成功后再添加到订单90jksdf
                      db.collection('orders').add({
                          data: order
                        })
                        .then(res => {
                          console.log(res.data);
                          wx.showToast({ title: '预约成功了哇', icon: 'none' });
                        })
                        .catch(console.error)
                    }).catch((error) => {
                      console.error('更新失败:', error);
                    });
                  }
                },
                fail: console.error
              });
            }
          } else if (res.cancel) {
            console.log('用户点击了取消')
          }
        }
      })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    let arraypro = [];
    let x=0;
    for(let i=0;i<2;i++){
      db.collection('volleyball').skip(i*20)
      .get({
        success: res => {
          // 更新 items 数据  
          x += 1;
          for(let j=0;j<res.data.length;j++){
            arraypro.push(res.data[j]);
          }
          if(x==2){
            console.log(arraypro);
            // 假设你想根据day属性将items分配到day数组中  
            const dayArray = arraypro.reduce((dayArray, item) => {
              if (item.day && item.day > 0) { // 确保day存在且为正数  
                const dayIndex = item.day - 1; // 转换为0索引  
                if (!dayArray[dayIndex]) {
                  dayArray[dayIndex] = [];
                }
                dayArray[dayIndex].push(item);
              }
              return dayArray;
            }, []);
            console.log(dayArray);
            // 更新 day 数据  
            this.setData({
              day: dayArray
            });
          }
        },
        fail: err => {
          console.error('查询失败:', err);
        }
      })   
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

index.json:

{  
  "navigationBarTitleText": ""  
}

能看懂的兄弟直接拿走代码即可，不过注意一下我这里是通过云开发的方式拿到的数据，你们替换成自己的方式去拿到数据就好，这里没有啥难以理解的地方，

注意点：

1.这里的左侧的日期和右侧的数据并无关联，右侧对应的数据是通过对数据的重新分组实现与左侧的数据一 一对应上的，这里对数据的重新分组在前几篇文章里说过，这里就不加赘述了

2.布局方面直接将wxss对应起来就好 

3.预约的功能可以参考这里的逻辑，然后转变成自己的方式来编码

若是还是有些地方没看懂的话，欢迎评论区里留言

希望这些对你有所帮助，如果对你有用的话，可以点赞收藏起来，方便下次查阅呦