to: import dialog component

app.json

@@ -10,7 +10,8 @@
   ],
   "usingComponents": {
     "van-icon": "@vant/weapp/icon/index",
-    "van-overlay": "@vant/weapp/overlay/index"
+    "van-overlay": "@vant/weapp/overlay/index",
+    "van-dialog": "@vant/weapp/dialog/index"
   },
   "window": {
     "backgroundTextStyle": "light",

app.wxss

@@ -18,6 +18,16 @@ page {
   justify-content: flex-start;
   align-items: center;
 }
+.ittflex-jca {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.ittflex-jcb {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .itt-btn {
   background: var(--maincolor);
   display: flex;

pages/appointment/appointment.js

@@ -1,4 +1,5 @@
 // pages/appointment/appointment.js
+import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
 Page({
 
   /**
@@ -6,7 +7,8 @@ Page({
    */
   data: {
     hasAddress: true,
-    calendarcolor: '#45A6B5'
+    calendarcolor: '#45A6B5',
+    timeActive: '0'
   },
 
   /**
@@ -27,41 +29,24 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
+    Dialog.confirm({
+      title: '',
+      confirmButtonText: '去充值',
+      cancelButtonText: '实体卡激活',
+      confirmButtonColor: '#333333',
+      cancelButtonColor: '#333333',
+      message: '您当前的检测次数为0，先充值次数',
+    }).then(() => {
+        // on confirm
+      }).catch(() => {
+        // on cancel
+      });
+  },
+  handleTime (e) {
+    console.log(e);
+    var timeActiveIndex = e.currentTarget.dataset.time
+    this.setData({
+      timeActive: timeActiveIndex
+    })
   }
 })

pages/appointment/appointment.wxml

@@ -56,17 +56,22 @@
         />
       </view>
       <view class="time-list ittflex">
-        <view class="time-a time-item time-nurse time-active">
+        <view class="time-a time-item time-nurse {{timeActive == '0' ? 'time-active' : ''}}" data-time="0" bindtap="handleTime">
           <text class="t-text">8:00-12:00</text>
           <text class="time-nurse-text">剩余紧张</text>
         </view>
-        <view class="time-b time-item">
+        <view class="time-b time-item {{timeActive == '1' ? 'time-active' : ''}}" data-time="1" bindtap="handleTime">
           <text class="t-text">13:00-18:00</text>
         </view>
-        <view class="time-c time-item">
+        <view class="time-c time-item {{timeActive == '2' ? 'time-active' : ''}}" data-time="2" bindtap="handleTime">
           <text class="t-text">18:00-21:00</text>
         </view>
       </view>
     </view>
+    <view class="footer-actions ittflex-jcb">
+      <view class="f-btn cancel-btn ittflex">取消</view>
+      <view class="f-btn confirm-btn itt-btn">确定</view>
+    </view>
+    <van-dialog id="van-dialog" />
   </view>
 </view>

pages/appointment/appointment.wxss

@@ -3,12 +3,13 @@
   width: 100%;
   height: 100%;
   background: #F7F7F7;
-  overflow-y: auto;
 }
 .main-con {
   width: 690rpx;
-  height: 100%;
+  min-height: 100%;
   margin: 0 auto;
+  overflow-y: auto;
+  padding-bottom: 50rpx;
 }
 .ac-title {
   width: 100%;
@@ -161,7 +162,7 @@
   margin: 0 20rpx 0 10rpx;
 }
 .calendar {
-  --calendar-height: 500rpx;
+  --calendar-height: 450rpx;
 }
 view .van-calendar__selected-day {
   width: 68rpx;
@@ -211,4 +212,18 @@ view .van-calendar__days {
 }
 .time-active .t-text{
   color: #fff;
+}
+.footer-actions {
+  width: 100%;
+  height: 80rpx;
+  margin-top: 40rpx;
+}
+.f-btn {
+  width: 324rpx;
+  height: 80rpx;
+  border-radius: 10rpx;
+}
+.cancel-btn {
+  background-color: #F7F7F7;
+  border: 1rpx solid #333333;
 }