1

miniprogram/pages/meeting/visitorIinvitation/appointmentRecord/appointmentRecord.js

@@ -4,7 +4,9 @@ Page({
      * 页面的初始数据
      */
     data: {
-
+        dialogShow: false,
+        dialogId: null,
+        dialogContent: null,
     },
 
     /**
@@ -22,6 +24,43 @@ Page({
         });
     },
 
+    // 显示-弹出框
+    showDialog(e) {
+        console.log('showDialog', e);
+
+        let _this = this
+        _this.setData({
+            dialogShow: true,
+            dialogId: e.currentTarget.dataset.id,
+            dialogContent: null
+        })
+    },
+
+    // 弹出框-通过
+    dialogSuccess() {
+        let _this = this
+        _this.setData({
+            dialogShow: false,
+        })
+    },
+
+    // 弹出框-驳回
+    dialogReject() {
+        let _this = this
+        _this.setData({
+            dialogShow: false,
+        })
+    },
+
+    // 弹出框-输入框：输入内容时触发
+    dialogInput(e) {
+        let _this = this
+        console.log('dialogInput', e.detail);
+        _this.setData({
+            dialogContent: e.detail,
+        })
+    },
+
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
@@ -61,7 +100,7 @@ Page({
      * 页面上拉触底事件的处理函数
      */
     onReachBottom() {
-
+        console.log('onReachBottom');
     },
 
     /**

miniprogram/pages/meeting/visitorIinvitation/appointmentRecord/appointmentRecord.json

@@ -1,9 +1,12 @@
 {
     "navigationBarTitleText": "访客预约",
+    "onReachBottomDistance": 100,
     "usingComponents": {
         "van-tab": "@vant/weapp/tab/index",
         "van-tabs": "@vant/weapp/tabs/index",
         "van-icon": "@vant/weapp/icon/index",
-        "van-button": "@vant/weapp/button/index"
+        "van-button": "@vant/weapp/button/index",
+        "van-dialog": "@vant/weapp/dialog/index",
+        "van-field": "@vant/weapp/field/index"
     }
 }

miniprogram/pages/meeting/visitorIinvitation/appointmentRecord/appointmentRecord.wxml

@@ -1,22 +1,23 @@
 <view class="containerView public">
     <van-tabs bind:click="tabClickSwitch" color="#4e96f8" border animated title-active-color="black" title-inactive-color="gray">
         <van-tab title="预约记录">
-            <view class="itemView" wx:for="{{3}}">
+            <view class="itemView" wx:for="{{6}}">
                 <view class="topView">
                     <view class="name">访客：张三</view>
                     <view class="status">待审核</view>
                 </view>
                 <view class="contentView">
                     <view class="dataView">
-                        <van-icon name="manager" color="#cccccc" size="40rpx"/>
+                        <van-icon name="manager" color="#cccccc" size="40rpx" />
                         <view class="msg">访问事由: 参观会议参观会议参观会议参观会议参观会议参观会议参观会议参观会议参观会议参观会议参观会议</view>
                     </view>
                     <view class="dataView">
-                        <van-icon name="clock-o" color="#cccccc" size="40rpx"/>
+                        <van-icon name="clock-o" color="#cccccc" size="40rpx" />
                         <view class="msg">2024-02-02 14:00</view>
                     </view>
                     <view class="btnView">
                         <view class="btn">查看详情</view>
+                        <view class="btn" data-id="{{item}}" bind:tap="showDialog">审核</view>
                     </view>
                 </view>
             </view>
@@ -25,4 +26,15 @@
 
         </van-tab>
     </van-tabs>
+
+    <view class="submitBtn">立即预约</view>
+
+    <van-dialog use-slot title="审核" show="{{ dialogShow }}" show-confirm-button="{{false}}" show-cancel-button="{{false}}" close-on-click-overlay>
+        <van-field input-class="textarea" bind:input="dialogInput" value="{{ dialogContent }}" type="textarea" placeholder="请输入描述信息" />
+        <view class="dialogBtnView">
+            <view class="rejectBtn" bind:tap="dialogReject">驳回</view>
+            <view class="successBtn" bind:tap="dialogSuccess">通过</view>
+        </view>
+    </van-dialog>
+
 </view>

miniprogram/pages/meeting/visitorIinvitation/appointmentRecord/appointmentRecord.wxss

@@ -1,10 +1,12 @@
 .containerView.public {
-    background-color: #f6f7fb;
+    background: none;
+    height: auto;
+    padding-bottom: 200rpx;
 }
 
 .itemView {
-    margin: 20rpx;
+    margin: 30rpx 20rpx;
-    padding: 20rpx 0;
+    padding: 30rpx 0;
     background: #ffffff;
 }
 
@@ -53,7 +55,6 @@
     margin-top: 20rpx;
 }
 
-
 .itemView .contentView .btnView .btn {
     border: 1px solid #4e96f8;
     position: relative;
@@ -63,3 +64,33 @@
     font-size: 24rpx;
     color: #4e96f8;
 }
+
+.textarea {
+    height: 300rpx !important;
+    border: 1px solid rgb(126, 126, 126, 0.2) !important;
+    padding: 20rpx !important;
+}
+
+.dialogBtnView {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid rgb(126, 126, 126, 0.2);
+}
+
+.dialogBtnView .rejectBtn,
+.dialogBtnView .successBtn {
+    width: 50%;
+    text-align: center;
+    padding: 30rpx 0;
+    font-size: 32rpx;
+}
+
+.dialogBtnView .rejectBtn {
+    border-right: 1px solid rgb(126, 126, 126, 0.2);
+    color: red;
+}
+
+.dialogBtnView .successBtn {
+    color: #4e96f8;
+}