submit

pages/order-goods/index.vue

@@ -31,9 +31,10 @@
 
     </div>
     <div class="content3">
-      <div  @touchstart="touchStart"
+      <div @touchstart="touchStart"
-            @touchmove="touchMove"
+           @touchmove="touchMove"
-            @touchend="touchEnd" class="wrap1">
+           @touchend="touchEnd"
+           :style="{transform: `translateX(${distanceX}px)`}"  class="wrap1">
         <div class="wrap1_1">
           <image  src="../../static/jx632@3x.png"></image>
         </div>
@@ -45,9 +46,9 @@
         </div>
         <div class="wrap1_3">
           <div class="wrap1_3_1">
-              <div class="wrap1_3_1_1">2023.09.28</div>
+            <div class="wrap1_3_1_1">2023.09.28</div>
-              <div class="wrap1_3_1_2">已延期</div>
+            <div class="wrap1_3_1_2">已延期</div>
-              <div class="wrap1_3_1_3">点击补款</div>
+            <div class="wrap1_3_1_3">点击补款</div>
           </div>
           <div class="wrap1_3_2">
             <div class="wrap1_3_2_1">货架号:</div>
@@ -55,7 +56,7 @@
           </div>
         </div>
         <div class="wrap1_4">
-
+          <image style="width: 80rpx;height: 80rpx" src="../../static/zu154@3x.png"></image>
         </div>
       </div>
     </div>
@@ -68,16 +69,34 @@ import UImage from "../../uview-ui/components/u--image/u--image.vue";
 
 export default {
   name: "index",
+  data(){
+    return {
+      startX: 0,
+      distanceX: 0,
+      windowWidth:0,
+    }
+  },
   components: {UImage, tabbar},
+  mounted(){
+    uni.getSystemInfo({
+      success:(res)=>{
+        this.windowWidth=res.windowWidth
+      }
+    })
+  },
   methods:{
-    touchMove(){
+    touchMove(e){
-      console.log('touchMove')
+      this.distanceX = e.touches[0].clientX - this.startX;
     },
-    touchStart(){
+    touchStart(e){
-      console.log('touchStart')
+      this.startX = e.touches[0].clientX;
     },
     touchEnd(){
-      console.log('touchEnd')
+      if (this.distanceX < -((144/750)*this.windowWidth)) {
+        this.distanceX = -((144/750)*this.windowWidth);
+      } else {
+        this.distanceX = 0;
+      }
     }
   }
 }
@@ -94,15 +113,29 @@ export default {
   height: 100vh;
   .content3{
     margin-top: 28rpx;
+    overflow: hidden;
     .wrap1{
-      overflow: hidden;
+      position: relative;
       padding-left: 20rpx;
       border-radius: 20rpx;
       background-color: #fff;
       height: 228rpx;
       display: flex;
       align-items: center;
+      .wrap1_4{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 228rpx;
+        width: 154rpx;
+        background-color: #B7C0C8;
+        right: -144rpx;
+        position: absolute;
+        z-index: -1;
+      }
       .wrap1_3{
+        border-top-right-radius: 20rpx;
+        border-bottom-right-radius: 20rpx;
         display: flex;
         margin-left: auto;
         background-color: #FF4848;

unpackage/dist/dev/mp-weixin/pages/order-goods/index.js

@@ -158,7 +158,7 @@ __webpack_require__.r(__webpack_exports__);
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
+/* WEBPACK VAR INJECTION */(function(uni) {
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -176,23 +176,43 @@ var UImage = function UImage() {
 };
 var _default = {
   name: "index",
+  data: function data() {
+    return {
+      startX: 0,
+      distanceX: 0,
+      windowWidth: 0
+    };
+  },
   components: {
     UImage: UImage,
     tabbar: tabbar
   },
+  mounted: function mounted() {
+    var _this = this;
+    uni.getSystemInfo({
+      success: function success(res) {
+        _this.windowWidth = res.windowWidth;
+      }
+    });
+  },
   methods: {
-    touchMove: function touchMove() {
+    touchMove: function touchMove(e) {
-      console.log('touchMove');
+      this.distanceX = e.touches[0].clientX - this.startX;
     },
-    touchStart: function touchStart() {
+    touchStart: function touchStart(e) {
-      console.log('touchStart');
+      this.startX = e.touches[0].clientX;
     },
     touchEnd: function touchEnd() {
-      console.log('touchEnd');
+      if (this.distanceX < -(144 / 750 * this.windowWidth)) {
+        this.distanceX = -(144 / 750 * this.windowWidth);
+      } else {
+        this.distanceX = 0;
+      }
     }
   }
 };
 exports.default = _default;
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"]))
 
 /***/ }),
 

unpackage/dist/dev/mp-weixin/pages/order-goods/index.wxml

@@ -1 +1 @@
-<view class="order-goods _div data-v-c0c42e9e" style="{{'background:'+('url('+'../../static/bbj1@3x.png'+')')+';'}}"><view class="content1 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><tm-menu vue-id="541fae75-1" list="{{['已延期','即将到期']}}" class="data-v-c0c42e9e" bind:__l="__l" vue-slots="{{['default']}}"><view class="wrap1_1 _div data-v-c0c42e9e"><view class="wrap1_1_1 _div data-v-c0c42e9e">全部状态</view><image style="width:12rpx;height:8rpx;" src="../../static/dbx2@3x.png" class="data-v-c0c42e9e"></image></view></tm-menu></view><view class="wrap2 _div data-v-c0c42e9e"><view class="wrap2_1 _div data-v-c0c42e9e">订单库</view><view class="wrap2_2 _div data-v-c0c42e9e">*滑动删除</view><view class="_div data-v-c0c42e9e"></view></view><view class="wrap3 _div data-v-c0c42e9e">上传</view></view><view class="content2 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/zu1@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"></view><input placeholder-style="color: #C7C7C7;font-size: 20rpx;" placeholder="在此处搜索您的订单" class="data-v-c0c42e9e"/></view><view class="wrap2 _div data-v-c0c42e9e">搜索</view></view><view class="content3 _div data-v-c0c42e9e"><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['touchMove',['$event']]]],['touchend',[['touchEnd',['$event']]]]]}}" class="wrap1 _div data-v-c0c42e9e" bindtouchstart="__e" bindtouchmove="__e" bindtouchend="__e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/jx632@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"><view class="wrap1_2_1 _div data-v-c0c42e9e">画作的名称</view><view class="wrap1_2_2 _div data-v-c0c42e9e">订单号:0129181232101</view><view class="wrap1_2_3 _div data-v-c0c42e9e">16平尺</view><view class="wrap1_2_4 _div data-v-c0c42e9e">2023.09.01-2023.09.18</view></view><view class="wrap1_3 _div data-v-c0c42e9e"><view class="wrap1_3_1 _div data-v-c0c42e9e"><view class="wrap1_3_1_1 _div data-v-c0c42e9e">2023.09.28</view><view class="wrap1_3_1_2 _div data-v-c0c42e9e">已延期</view><view class="wrap1_3_1_3 _div data-v-c0c42e9e">点击补款</view></view><view class="wrap1_3_2 _div data-v-c0c42e9e"><view class="wrap1_3_2_1 _div data-v-c0c42e9e">货架号:</view><view class="wrap1_3_2_2 _div data-v-c0c42e9e">12-02-13</view></view></view><view class="wrap1_4 _div data-v-c0c42e9e"></view></view></view><tabbar vue-id="541fae75-2" current="{{1}}" class="data-v-c0c42e9e" bind:__l="__l"></tabbar></view>
+<view class="order-goods _div data-v-c0c42e9e" style="{{'background:'+('url('+'../../static/bbj1@3x.png'+')')+';'}}"><view class="content1 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><tm-menu vue-id="541fae75-1" list="{{['已延期','即将到期']}}" class="data-v-c0c42e9e" bind:__l="__l" vue-slots="{{['default']}}"><view class="wrap1_1 _div data-v-c0c42e9e"><view class="wrap1_1_1 _div data-v-c0c42e9e">全部状态</view><image style="width:12rpx;height:8rpx;" src="../../static/dbx2@3x.png" class="data-v-c0c42e9e"></image></view></tm-menu></view><view class="wrap2 _div data-v-c0c42e9e"><view class="wrap2_1 _div data-v-c0c42e9e">订单库</view><view class="wrap2_2 _div data-v-c0c42e9e">*滑动删除</view><view class="_div data-v-c0c42e9e"></view></view><view class="wrap3 _div data-v-c0c42e9e">上传</view></view><view class="content2 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/zu1@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"></view><input placeholder-style="color: #C7C7C7;font-size: 20rpx;" placeholder="在此处搜索您的订单" class="data-v-c0c42e9e"/></view><view class="wrap2 _div data-v-c0c42e9e">搜索</view></view><view class="content3 _div data-v-c0c42e9e"><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['touchMove',['$event']]]],['touchend',[['touchEnd',['$event']]]]]}}" class="wrap1 _div data-v-c0c42e9e" style="{{'transform:'+('translateX('+distanceX+'px)')+';'}}" bindtouchstart="__e" bindtouchmove="__e" bindtouchend="__e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/jx632@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"><view class="wrap1_2_1 _div data-v-c0c42e9e">画作的名称</view><view class="wrap1_2_2 _div data-v-c0c42e9e">订单号:0129181232101</view><view class="wrap1_2_3 _div data-v-c0c42e9e">16平尺</view><view class="wrap1_2_4 _div data-v-c0c42e9e">2023.09.01-2023.09.18</view></view><view class="wrap1_3 _div data-v-c0c42e9e"><view class="wrap1_3_1 _div data-v-c0c42e9e"><view class="wrap1_3_1_1 _div data-v-c0c42e9e">2023.09.28</view><view class="wrap1_3_1_2 _div data-v-c0c42e9e">已延期</view><view class="wrap1_3_1_3 _div data-v-c0c42e9e">点击补款</view></view><view class="wrap1_3_2 _div data-v-c0c42e9e"><view class="wrap1_3_2_1 _div data-v-c0c42e9e">货架号:</view><view class="wrap1_3_2_2 _div data-v-c0c42e9e">12-02-13</view></view></view><view class="wrap1_4 _div data-v-c0c42e9e"><image style="width:80rpx;height:80rpx;" src="../../static/zu154@3x.png" class="data-v-c0c42e9e"></image></view></view></view><tabbar vue-id="541fae75-2" current="{{1}}" class="data-v-c0c42e9e" bind:__l="__l"></tabbar></view>