组件部分提交

+Component({
+  properties: {
+    showConfirm: {
+      type: Boolean,
+      value: true
+    }
+  },
+  data: {
+    slideLeft: 0,
+    startX: 0,
+    hideSlide: true,
+    hideTip: false,
+    containerWidth: 0
+  },
+  methods: {
+    closeSlide: function() {
+      this.setData({
+        hideSlide: true
+      });
+    },
+    touchStart: function (e) {
+      this.data.startX = e.touches[0].clientX;
+    },
+    touchMove: function (e) {
+      let currentX = e.touches[0].clientX;
+
+      if (currentX - this.data.startX < 0 || this.data.complete) {
+        return;
+      }
+      this.setData({
+        hideTip: true,
+        slideLeft: currentX - this.data.startX
+      })
+    },
+    touchEnd: function (e) {
+      if (!this.data.complete) {
+        this.setData({
+          slideLeft: 0,
+          hideTip: false
+        });
+      }
+    },
+    confirm: function() {
+      this.setData({
+        showConfirm: false,
+        hideSlide: false
+      });
+    },
+    keep: function () {
+      this.setData({
+        showConfirm: false
+      });
+    }
+  }
+});

+{
+  "component": true,
+  "usingComponents": {
+
+  }
+}

+<view class="cancel-order-dialog">
+  <view class="confirm-layer" wx:if="{{showConfirm}}">
+    <view class="mask"></view>
+    <view class="info">
+      <view class="item">123232</view>
+      <view class="cancel" bindtap="confirm">赔付并取消订单</view>
+      <view class="keep" bindtap="keep">保留订单</view>
+    </view>
+  </view>
+  <view class="slide-layer" hidden="{{hideSlide}}">
+    <view class="slide-mask">
+      <image class="close-icon"
+             bindtap="closeSlide"
+             src="../../assets/images/close.png"></image>
+    </view>
+    <view class="slide">
+      <view class="slide-container">
+        <view class="tip" hidden="{{hideTip}}">滑动确认赔付并取消订单</view>
+        <image class="slide-icon"
+               catchtouchstart="touchStart"
+               catchtouchmove="touchMove"
+               catchtouchend="touchEnd"
+               style="margin-left:{{slideLeft}}px"
+               src="../../assets/images/slide.png"></image>
+      </view>
+    </view>
+  </view>
+</view>

+.cancel-order-dialog .confirm-layer .info {
+  position: relative;
+  z-index: 1000;
+  background-color: #ffffff;
+}
+
+.cancel-order-dialog .mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.4;
+  z-index: 999;
+  background: #000000;
+}
+
+
+
+.cancel-order-dialog .slide-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.9;
+  z-index: 999;
+  background: #000000;
+}
+
+.cancel-order-dialog .slide-layer .close-icon {
+  position: fixed;
+  top: 60rpx;
+  right: 40rpx;
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.cancel-order-dialog .slide-container {
+  position: absolute;
+  width: 640rpx;
+  height: 140rpx;
+  z-index: 9999;
+  background: #FFFFFF;
+  border-radius: 70rpx;
+  top: 50%;
+  left: 50%;
+  margin-top: -70rpx;
+  margin-left: -320rpx;
+}
+
+.cancel-order-dialog .slide-container .tip {
+  font-size: 28px;
+  color: #444444;
+  letter-spacing: 0;
+  text-align: center;
+  line-height: 140rpx;
+  margin-left: 122rpx;
+}
+
+.cancel-order-dialog .slide-container .slide-icon {
+  position: absolute;
+  width: 132rpx;
+  height: 132rpx;
+  top: 4rpx;
+  left: 4rpx;
+}

@@ -128,7 +128,6 @@ Page({
           interval = setInterval(() => {
             leftTime = leftTime - 1;
             timer = formatTimeByMin(leftTime, 'm:s');
-            console.log(leftTime);
             if (leftTime <= 0) {
               timer = '00:00';
               setTimeout(() => {

@@ -2,6 +2,7 @@
   "navigationBarTitleText": "我的购买",
   "usingComponents": {
     "orderlistcell":"./orderlistcell",
-    "no-data-show-view": "../../../components/no-data-show-view/no-data-show-view"
+    "no-data-show-view": "../../components/no-data-show-view/no-data-show-view",
+    "cancel-order-dialog": "../../components/order/cancel-order-dialog"
   }
 }

@@ -29,4 +29,5 @@
       </swiper-item>
     </swiper>
   </view>
+  <cancel-order-dialog></cancel-order-dialog>
 </view>