This module details the construction of a historical view for reservation requests. While the architecture parallels event tracking, this section adjusts styling nuances and manages specific status code enumerations required by individual appointment logic.

Core Logic

The application categorizes reservations into three integer-based states:

1. 0: Pending Approval
2. 1: Approved
3. 2: Rejected

Pending items require distinct visual feedback indicating active processing, often with footer notes. Rejected entries must explicitly render the reason provided during the review process.

View Implementtaion

Markup (appointment-history.wxml)

<view class="container">
  <view class="user-section">
    <view class="history-container">
      <view class="header-text">
        Reservation History
        <view class="info-note">(Data retained for 48 hours)</view>
      </view>
      
      <view class="item-wrapper" wx:for="{{records}}" wx:key="_id" bindtap="onItemTap" data-id="{{item._id}}"> 
        <view class="time-display">{{item.appointmentDate}}</view>
        <view class="org-name">Organization: {{item.department}}</view>
        <view class="teacher-name">Instructor: {{item.teacherName}}</view>
        <view class="date-label">{{item.scheduledTime}}</view>
        
        <!-- Display rejection message conditionally -->
        <block wx:if="{{item.status === 2}}">
          <view class="reason-text">Rejection Reason: {{item.rejectMessage}}</view>
        </block>
      </view>       
          
        <!-- Render state indicators based on value -->
        <block wx:if="{{item.status === 0}}">
          <view class="badge-pending">
            <view class="text-content">Reviewing</view>
          </view>
          <!-- Visual Indicator -->
          <image src="/assets/icon/processing.png" style="width:11px;height:11px;position:absolute;left:15px;bottom:15px;"></image>
          <text style="position:absolute;left:55px;bottom:15px;width:140px;height:17px;">Committee reviewing..</text>
        </block>
        
        <block wx:if="{{item.status === 1}}">
          <view class="badge-approved">
            <view class="text-content">Approved</view>
          </view>
          <image src="/assets/icon/success.png" style="width:11px;height:11px;position:absolute;left:15px;bottom:15px;"></image>
        </block>
        
        <block wx:if="{{item.status === 2}}">
          <view class="badge-rejected">
            <view class="text-content">Rejected</view>
          </view>
          <image src="/assets/icon/fail.png" style="width:11px;height:11px;position:absolute;left:15px;bottom:15px;"></image>
        </block>
    </view>
  </view>
</view>

Styling (appointment-history.wxss)

.history-container {
  margin-left: 15rpx;
  margin-right: 15rpx;
}

.header-text {
  border-bottom: 5rpx solid #A6A6A6;
  font-size: 28rpx;
  font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
}

.item-wrapper {
  height: 250rpx;
  width: 100%;
  display: flex;
  position: relative;
  box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.1);
  margin-top: 15rpx;
  border-radius: 15rpx;
}

.info-block {
  font-size: 20rpx;
  position: relative;
  margin:15rpx;
  width: 90%;
  flex: 1;
}

.time-display {
  margin-top: 0rpx;
  font-size: 16rpx;
  color: black;
}

/* Pending State */
.badge-pending {
  float: right;
  width: 80rpx;
  height: 40rpx;
  background-color:#FFC300;
  border-radius: 0 15rpx 0 15rpx;
}

/* Approved State */
.badge-approved {
  width: 80rpx;
  height: 40rpx;
  background-color:#43CF7C;
  border-radius: 0 15rpx 0 15rpx;
  z-index: 2;
  flex-direction: row;
  position: relative;
  margin-left: 20rpx;
}

/* Rejected State */
.badge-rejected {
  width: 80rpx;
  height: 40rpx;
  background-color:#FF5733;
  border-radius: 0 15rpx 0 15rpx;
  z-index: 2;
}

.text-content {
  position: relative;
  margin-top:10rpx ;
  margin-left: 15rpx;
  font-size: 12rpx;
  color: white;
}

.reason-text {
   font-size: 20rpx;
   color:#FF5733;
   margin-top: 10rpx;
}
.instructor-name {
   font-size: 20rpx;
   color:#611504;
   margin-top: 10rpx;
}
.date-label {
   margin-top: 10rpx;
   font-size: 18rpx;
   color: #A0A9BD;
}

.note-disclaimer {
   font-size: 13rpx;
   float: right;
   margin-top: 16rpx;
   color: red;
}

Business Logic (appointment-history.js)

const db = wx.cloud.database()

Page({
  data: {
    records: [],
  },

  loadData(){
    // Invoke cloud function to retrieve user identity
    wx.cloud.callFunction({
      name:'getCurrentUserInfo'
    })
    .then(res=>{
      console.log("User openid retrieved",res.result.openid)
      const collectionRef = db.collection('appointment')
      
      collectionRef.where({
        _openid: res.result.openid,
      })
      .get()
      .then(res=>{
        console.log('Query executed successfully',res.data)
        wx.stopPullDownRefresh()
        
        this.setData({
          records: res.data
        })
      })
    })
    .catch(err=>{
      console.log("Cloud request failed",err)
    })
  },

  onLoad() {
    wx.startPullDownRefresh()
    this.loadData()
  },

  onPullDownRefresh:function(){
    console.log('Refresh action detected')
    this.loadData()
  }
})