Kaynağa Gözat

to: set van-overlay cancel button

wangyuan 2 yıl önce
ebeveyn
işleme
a2bfb92d44

+ 13 - 9
pages/myAppointment/myAppointment.js

@@ -6,7 +6,8 @@ Page({
    */
   data: {
     navItemActive: '0',
-    dataList: [1,1,1,1,1,1,1,1,1]
+    dataList: [1,1,1,1,1,1,1,1,1],
+    vanoverlayshow: false
   },
 
   /**
@@ -51,19 +52,22 @@ Page({
   onUnload() {
 
   },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
+  handleOverlayCancel() {
+    this.setData({
+      vanoverlayshow: false
+    })
+  },
+  handleoverlayConfirm () {
 
   },
 
   /**
-   * 页面上拉触底事件的处理函数
+   * 取消预约
    */
-  onReachBottom() {
-
+  handleCancel() {
+    this.setData({
+      vanoverlayshow: true
+    })
   },
 
   /**

+ 13 - 1
pages/myAppointment/myAppointment.wxml

@@ -33,8 +33,20 @@
         </view>
       </view>
       <view class="bototm actions">
-        <view class="cancel-button ittflex">取消</view>
+        <view class="cancel-button ittflex" bindtap="handleCancel">取消</view>
       </view>
     </view>
   </block>
+  <van-overlay show="{{ vanoverlayshow }}">
+    <view class="wrapper ittflex">
+      <view class="model">
+        <!-- // 已超过取消预约时间 -->
+        <view class="top-title">确定要取消预约吗?</view>
+        <view class="bottom-action ittflex">
+          <view class="btn w-cancel-btn ittflex" bindtap="handleOverlayCancel">取消</view>
+          <view class="btn w-confirm-btn ittflex" bindtap="handleoverlayConfirm">确定</view>
+        </view>
+      </view>
+    </view>
+  </van-overlay>
 </view>

+ 33 - 0
pages/myAppointment/myAppointment.wxss

@@ -94,4 +94,37 @@ s-done {
   font-size: 26rpx;
   font-weight: 400;
   color: #333333;
+}
+.wrapper {
+  height: 100%;
+}
+.model {
+  width: 540rpx;
+  height: 208rpx;
+  background: #FFFFFF;
+  border-radius: 24rpx;
+}
+.top-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333333;
+  text-align: center;
+  height: 118rpx;
+  line-height: 118rpx;
+  border-bottom: 1rpx solid #DDDDDD;
+  box-sizing:border-box;
+}
+.btn {
+  width: 270rpx;
+  height: 90rpx;
+  box-sizing: border-box;
+  font-size: 34rpx;
+  color: #333333;
+}
+.w-cancel-btn {
+  font-weight: 400;
+}
+.w-confirm-btn {
+  border-left: 1rpx solid #DDDDDD;
+  font-weight: bold;
 }