订单管理添加手势滑动动画，TB修改BUG

src/config/index.config.js

@@ -2,8 +2,8 @@ const CONFIG = {
     //开发环境配置
     development: {
         assetsPath: '/static', // 静态资源路径
-        // baseUrl: 'http://tyou.xiudo.cn/merch',  // 后台接口请求地址
-        baseUrl: 'http://192.168.100.135:83/merch',  // 后台接口请求地址
+        baseUrl: 'http://tyou.xiudo.cn/merch',  // 后台接口请求地址
+        // baseUrl: 'http://192.168.100.135:83/merch',  // 后台接口请求地址
         hostUrl: 'http://localhost:8080',        // H5地址(前端运行地址)
         websocketUrl: '',        // websocket服务端地址
         weixinAppId: '' // 微信公众号appid

src/pages/index/index.vue

@@ -487,8 +487,6 @@ export default {
           this.futureDayData();
           this.shopSellData();
         }
-      }).catch(error=>{
-        console.log(error);
       })
     },
 

src/pages/order/order.vue

@@ -58,24 +58,24 @@
       <view class="header-bar">
         <view
           class="item"
-          @tap="changeTab(1, 'pay')"
-          :class="{ active: isactive === 1 }"
+          @tap="changeTab(0, flagList[0])"
+          :class="{ active: isactive === 0,henganimationLeft: direction === 'right', henganimationRight: direction === 'left' }"
         >
           <view class="ordertype">已付款</view>
           <view class="heng"></view>
         </view>
         <view
           class="item"
-          @tap="changeTab(2, 'accomplish')"
-          :class="{ active: isactive === 2 }"
+          @tap="changeTab(1, flagList[1])"
+          :class="{ active: isactive === 1,henganimationLeft: direction === 'right', henganimationRight: direction === 'left' }"
         >
           <view class="ordertype">已完成</view>
           <view class="heng"></view>
         </view>
         <view
           class="item"
-          @tap="changeTab(3, 'refundorder')"
-          :class="{ active: isactive === 3 }"
+          @tap="changeTab(2, flagList[2])"
+          :class="{ active: isactive === 2,henganimationLeft: direction === 'right', henganimationRight: direction === 'left' }"
         >
           <view class="ordertype">退款</view>
           <view class="heng"></view>
@@ -85,7 +85,13 @@
     </view>
     <view style="height: 352upx;"></view>
 
-    <view class="order-content" v-if="isactive === 1">
+    <view
+      class="order-content"
+      v-if="isactive === 0"
+      :class="{ leaveRightToLeft: isactive === 0 && direction=== 'left', leaveLeftToRight: isactive === 0 && direction ==='right'}"
+      @touchstart="handstart($event)"
+      @touchend="handend($event)"
+    >
       <view
         class="order-list"
         @tap="todetail(item.ordersNo)"
@@ -110,12 +116,21 @@
             >状态：<text class="message">{{ item.statusName }}</text></view
           >
           <view class="playtime"
-            >游玩时间：<text class="message">{{ item.palyTime.substring(0,11) }} {{ item.timePart ?item.timePart : ''}}</text></view
+            >游玩时间：<text class="message"
+              >{{ item.palyTime.substring(0, 11) }}
+              {{ item.timePart ? item.timePart : '' }}</text
+            ></view
           >
         </view>
       </view>
     </view>
-    <view class="order-content" v-if="isactive === 2">
+    <view
+      class="order-content"
+      v-if="isactive === 1"
+      :class="{ leaveRightToLeft: isactive === 1 && direction=== 'left', leaveLeftToRight: isactive === 1 && direction ==='right'}"
+      @touchstart="handstart($event)"
+      @touchend="handend($event)"
+    >
       <view
         class="order-list"
         @tap="todetail(item.ordersNo)"
@@ -140,12 +155,21 @@
             >状态：<text class="message">{{ item.statusName }}</text></view
           >
           <view class="playtime"
-            >游玩时间：<text class="message">{{ item.palyTime.substring(0,11) }} {{ item.timePart ?item.timePart : ''}}</text></view
+            >游玩时间：<text class="message"
+              >{{ item.palyTime.substring(0, 11) }}
+              {{ item.timePart ? item.timePart : '' }}</text
+            ></view
           >
         </view>
       </view>
     </view>
-    <view class="order-content" v-if="isactive === 3">
+    <view
+      class="order-content"
+      v-if="isactive === 2"
+      :class="{ leaveRightToLeft: isactive === 2 && direction=== 'left', leaveLeftToRight: isactive === 2 && direction ==='right'}"
+      @touchstart="handstart($event)"
+      @touchend="handend($event)"
+    >
       <view
         class="order-list"
         @tap="todetail(item.ordersNo)"
@@ -170,14 +194,17 @@
             >状态：<text class="message">{{ item.statusName }}</text></view
           >
           <view class="playtime"
-            >游玩时间：<text class="message">{{ item.palyTime.substring(0,11) }} {{ item.timePart ?item.timePart : ''}}</text></view
+            >游玩时间：<text class="message"
+              >{{ item.palyTime.substring(0, 11) }}
+              {{ item.timePart ? item.timePart : '' }}</text
+            ></view
           >
         </view>
       </view>
     </view>
 
     <uni-load-more :status="more"> </uni-load-more>
-    <!-- <rf-loading v-if="loading"></rf-loading> -->
+    <rf-loading v-if="loading"></rf-loading>
     <view style="height: 250upx;"></view>
   </view>
 </template>
@@ -196,13 +223,16 @@ export default {
       shopArray: [{ name: '全部', id: '' }],
       index: 0,
       shopID: 0,
-      isactive: 1,
+
+      isactive: 0, // tab
+      flagList: ['pay', 'accomplish', 'refundorder'],
+      direction: '',
+
       more: 'loading', // more  loading noMore
 
       date: moment().format('YYYY-MM-DD'),
       yesdate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
       dateArr: [],
-      // startdate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
       startdate: '',
       enddate: '',
       sunday: 1,
@@ -219,8 +249,17 @@ export default {
         ordersNo: '',
         buyPhone: '',
         shopId: '',
-        overTimeArray: [moment().format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],
+        overTimeArray: [
+          moment().format('YYYY-MM-DD'),
+          moment().format('YYYY-MM-DD'),
+        ],
       },
+
+      //按下的时间
+      startTime: 0,
+      //按下的坐标
+      startX: 0,
+      startY: 0,
     };
   },
 
@@ -231,7 +270,10 @@ export default {
     this.sunday = 1;
     this.dateArr = [];
     this.params.pageNum = 1;
-    this.params.overTimeArray = [moment().format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')];
+    this.params.overTimeArray = [
+      moment().format('YYYY-MM-DD'),
+      moment().format('YYYY-MM-DD'),
+    ];
     this.orderbynumber = '';
     this.getOrderList();
   },
@@ -250,11 +292,53 @@ export default {
   },
   //方法集合
   methods: {
+    // 手势开始
+    handstart(event) {
+      this.startTime = Date.now();
+      this.startX = event.changedTouches[0].clientX;
+      this.startY = event.changedTouches[0].clientY;
+    },
+    // 手势结束
+    handend(event) {
+      const endTime = Date.now();
+      const endX = event.changedTouches[0].clientX;
+      const endY = event.changedTouches[0].clientY;
+
+      //判断按下的时长
+      if (endTime - this.startTime > 2000) {
+        return;
+      }
+      this.direction = '';
+      //先判断用户滑动的距离
+      if (Math.abs(endX - this.startX) > 50) {
+        //滑动方向
+        this.direction = endX - this.startX > 0 ? 'right' : 'left';
+        console.log(this.direction);
+        if (this.direction === 'right') {
+          this.isactive--;
+          this.params.orderFlag = this.flagList[this.isactive];
+          if (this.isactive < 0) {
+            this.isactive = 0;
+            return;
+          }
+        } else if (this.direction === 'left') {
+          this.isactive++;
+          this.params.orderFlag = this.flagList[this.isactive];
+          if (this.isactive > 2) {
+            this.isactive = 2;
+            return;
+          }
+        }
+        this.getOrderList();
+      } else {
+        return;
+      }
+    },
     // 打开日历
     openTime() {
-      this.startdate ='';
+      this.startdate = '';
       this.enddate = '';
-      this.sunday = 1
+      this.sunday = 1;
       this.$refs.calendar.open();
     },
     // 确认时间后
@@ -265,12 +349,12 @@ export default {
       this.startdate = e.range.before;
       this.enddate = e.range.after;
       if (!this.startdate || !this.enddate) {
-        this.startdate = e.fulldate
-        this.enddate = e.fulldate
+        this.startdate = e.fulldate;
+        this.enddate = e.fulldate;
         this.sunday = 1;
         this.params.overTimeArray = [this.startdate, this.enddate];
         this.getOrderList();
-        return
+        return;
       }
       this.sunday = e.range.data.length;
       this.params.overTimeArray = [this.startdate, this.enddate];
@@ -288,9 +372,9 @@ export default {
         this.params.ordersNo = '';
       } else {
         this.params.buyPhone = '';
-        this.params.ordersNo = num
+        this.params.ordersNo = num;
       }
-      this.getOrderList()
+      this.getOrderList();
     },
 
     // 商铺选择
@@ -303,6 +387,8 @@ export default {
 
     // tab
     changeTab(type, falg) {
+      this.direction = ''  // 关闭动画
+      console.log(type);
       this.more = 'loading';
       this.params.pageNum = 1;
       this.isactive = type;
@@ -340,7 +426,7 @@ export default {
             this.more = 'noMore';
           }
         });
-        uni.stopPullDownRefresh();
+      uni.stopPullDownRefresh();
     },
     // 上拉加载
     async loadMoreList() {
@@ -494,6 +580,30 @@ export default {
       .active .heng {
         display: block;
       }
+      .henganimationLeft .heng {
+        transition: all .5s;
+        animation: hengRightToLeft .5s;
+      }
+      .henganimationRight .heng {
+        transition: all .5s;
+        animation: hengLeftToRight .5s;
+      }
+      @keyframes hengRightToLeft {
+        from{
+          transform: translateX(141upx);
+        }
+        to{
+          transform: translateX(0);
+        }
+      }
+      @keyframes hengLeftToRight {
+        from{
+          transform: translateX(-141upx);
+        }
+        to{
+          transform: translateX(0);
+        }
+      }
     }
   }
   .order-content {
@@ -539,5 +649,32 @@ export default {
       }
     }
   }
+  .leaveRightToLeft {
+    transition: all 0.5s linear;
+    animation: leaveinRihthToLeft .5s;
+    z-index: 10;
+  }
+  .leaveLeftToRight {
+    transition: all 0.5s linear;
+    animation: leaveLeftToRight .5s;
+    z-index: 10;
+  }
+
+  @keyframes leaveinRihthToLeft {
+    from {
+      transform: translateX(768upx);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  @keyframes leaveLeftToRight {
+    from {
+      transform: translateX(-768upx);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
 }
 </style>

src/pages/shop/shop.vue

@@ -99,8 +99,9 @@
         <view class="operate">
           <view
             class="btn stick"
-            @tap="sticktop(item.id, topstatus)"
-            >{{ topstatus === '-1' ? '置顶' : '取消置顶' }}</view
+            :class="{ isactive: item.sort != 0 }"
+            @tap="sticktop(item.id, item.sort)"
+            >{{ item.sort === 0 ? '置顶' : '取消置顶' }}</view
           >
           <!-- <view class="btn sold" @tap="passGet(item.id)">审核</view> -->
           <view class="btn compile" @tap="topage(item.id)">编辑</view>
@@ -136,8 +137,9 @@
         <view class="operate">
           <view
             class="btn stick"
-            @tap="sticktop(item.id, topstatus,$event)"
-            >{{ topstatus === '-1' ? '置顶' : '取消置顶' }}</view
+            :class="{ isactive: item.sort != 0 }"
+            @tap="sticktop(item.id, item.sort)"
+            >{{ item.sort === 0 ? '置顶' : '取消置顶' }}</view
           >
           <view class="btn sold" @tap="shopPutDown(item.id)">下架</view>
           <view class="btn compile" @tap="topage(item.id)">编辑</view>
@@ -173,8 +175,9 @@
         <view class="operate">
           <view
             class="btn stick"
-            @tap="sticktop(item.id, topstatus)"
-            >{{ topstatus === '-1' ? '置顶' : '取消置顶' }}</view
+            :class="{ isactive: item.sort != 0 }"
+            @tap="sticktop(item.id, item.sort)"
+            >{{ item.sort === 0 ? '置顶' : '取消置顶' }}</view
           >
           <view class="btn sold" @tap="shopPutUp(item.id)">上架</view>
           <view class="btn compile" @tap="topage(item.id)">编辑</view>
@@ -368,30 +371,21 @@ export default {
     },
     // 置顶
     sticktop(id, status) {
-
-      console.log(e);
-      let view = uni.createSelectorQuery().in(this).select(`#${id}btn`);
-
-      view
-        .fields(
-          {
-            size: true,
-            scrollOffset: true,
-          },
-          (data) => {
-            console.log('得到节点信息' + JSON.stringify(data));
-            console.log('节点的宽为' + data.width);
-          }
-        )
-        .exec();
-      return;
-
+      if (status != 0) {
+        this.topstatus = '-2';
+      } else {
+        this.topstatus = '-1';
+      }
       this.$http
-        .PUT('/goods/changeSort?id=' + id + '&sort=' + status)
+        .PUT('/goods/changeSort?id=' + id + '&sort=' + this.topstatus)
         .then((res) => {
           if (res.code === 200) {
             console.log(res);
-            this.$mHelper.toast('已将该商品置顶发布');
+            if (status != 0) {
+              this.$mHelper.toast('取消成功');
+            } else {
+              this.$mHelper.toast('置顶成功');
+            }
             this.getTicketShopList();
           }
         });
@@ -687,6 +681,10 @@ export default {
           color: #7a7c7c;
           letter-spacing: 3upx;
         }
+        .isactive {
+          color: #ff6a5e;
+          border: 1upx solid #ff6a5e;
+        }
         .delete {
           margin-right: 0;
           background-color: #ff6a5e;