uni-xiudoyou/src/pages/order/order.vue

<!-- order -->
<template>
  <view class="order"  @touchstart="handstart($event)"
      @touchend="handend($event)">
    <view class="header-warp">
      <view class="header-search">
        <view class="search">
          <input
            type="text"
            placeholder-style="color:#a3a8a8;font-size:10px;"
            placeholder="请输入订单号或手机号"
            class="cellphone"
            v-model="params.buyPhone"
          />
          <text class="txt" @tap="orderByNum">搜索</text>
        </view>
      </view>
      <view class="uni-list-cell">
        <view class="uni-list-cell-db">
          <picker
            style="width: 100%; height: 100%;"
            @change="bindPickerChange"
            :value="index"
            :range="shopArray"
            range-key="name"
          >
            <view class="uni-input">{{ shopArray[index].name }}</view>
          </picker>
          <view class="icon-warp">
            <image
              src="../../static/images/moreicon.png"
              class="iconRight"
            ></image>
          </view>
        </view>
      </view>
      <view class="btn-time">
        <uni-calendar
          ref="calendar"
          :insert="false"
          :range="true"
          :startDate="'2020-01-01'"
          :endDate="date"
          @confirm="confirm"
        />
        <view class="opentime" @tap="openTime">
          <view class="start">{{ startdate ? startdate : date }}</view>
          <text class="guo">至</text>
          <view class="end">{{ enddate ? enddate : date }}</view>
          <text class="sundate">共：{{ sunday }}天</text>
        </view>
        <view style="width: 19upx;">
          <image
            src="../../static/images/moreicon.png"
            class="iconRight"
          ></image>
        </view>
      </view>
      <view class="header-bar">
        <view
          class="item"
          @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(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(2, flagList[2])"
          :class="{ active: isactive === 2,henganimationLeft: direction === 'right', henganimationRight: direction === 'left' }"
        >
          <view class="ordertype">退款</view>
          <view class="heng"></view>
        </view>
        <view class="line"></view>
      </view>
    </view>
    <view style="height: 352upx;"></view>

    <view
      class="order-content"
      v-if="isactive === 0"
      :class="{ leaveRightToLeft: isactive === 0 && direction=== 'left', leaveLeftToRight: isactive === 0 && direction ==='right'}"
     
    >
      <view
        class="order-list"
        @tap="todetail(item.ordersNo)"
        v-for="(item, index) in orderList"
        :key="index"
      >
        <view class="order-title">
          <text class="ordernum"
            >订单号：<text class="num">{{ item.ordersNo }}</text></text
          >
          <text class="ordertime">{{ item.orderTime.substring(11) }}</text>
        </view>
        <view class="order-detail">
          <view class="name">{{ item.shopName }}</view>
          <view class="door"
            >门店：<text class="message">{{ item.goodsName }}</text></view
          >
          <view class="num"
            >数量：<text class="message">{{ item.num }}</text></view
          >
          <view class="status"
            >状态：<text class="message">{{ item.statusName }}</text></view
          >
          <view class="playtime"
            >游玩时间：<text class="message"
              >{{ item.palyTime.substring(0, 11) }}
              {{ item.timePart ? item.timePart : '' }}</text
            ></view
          >
        </view>
      </view>
    </view>
    <view
      class="order-content"
      v-if="isactive === 1"
      :class="{ leaveRightToLeft: isactive === 1 && direction=== 'left', leaveLeftToRight: isactive === 1 && direction ==='right'}"
     
    >
      <view
        class="order-list"
        @tap="todetail(item.ordersNo)"
        v-for="(item, index) in orderList"
        :key="index"
      >
        <view class="order-title">
          <text class="ordernum"
            >订单号：<text class="num">{{ item.ordersNo }}</text></text
          >
          <text class="ordertime">{{ item.orderTime.substring(11) }}</text>
        </view>
        <view class="order-detail">
          <view class="name">{{ item.shopName }}</view>
          <view class="door"
            >门店：<text class="message">{{ item.goodsName }}</text></view
          >
          <view class="num"
            >数量：<text class="message">{{ item.num }}</text></view
          >
          <view class="status"
            >状态：<text class="message">{{ item.statusName }}</text></view
          >
          <view class="playtime"
            >游玩时间：<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"
      :class="{ leaveRightToLeft: isactive === 2 && direction=== 'left', leaveLeftToRight: isactive === 2 && direction ==='right'}"
    
    >
      <view
        class="order-list"
        @tap="todetail(item.ordersNo)"
        v-for="(item, index) in orderList"
        :key="index"
      >
        <view class="order-title">
          <text class="ordernum"
            >订单号：<text class="num">{{ item.ordersNo }}</text></text
          >
          <text class="ordertime">{{ item.orderTime.substring(11) }}</text>
        </view>
        <view class="order-detail">
          <view class="name">{{ item.shopName }}</view>
          <view class="door"
            >门店：<text class="message">{{ item.goodsName }}</text></view
          >
          <view class="num"
            >数量：<text class="message">{{ item.num }}</text></view
          >
          <view class="status"
            >状态：<text class="message">{{ item.statusName }}</text></view
          >
          <view class="playtime"
            >游玩时间：<text class="message"
              >{{ item.palyTime.substring(0, 11) }}
              {{ item.timePart ? item.timePart : '' }}</text
            ></view
          >
        </view>
      </view>
    </view>

    
    <tabBar :currentIndex="typeNum" ></tabBar>
    <uni-load-more :status="more"> </uni-load-more>
    <rf-loading v-if="loading"></rf-loading>
    <view style="height: 100upx;"></view>
  </view>
</template>

<script>
import moment from '@/common/moment';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
export default {
  name: 'order',
  components: { uniLoadMore, uniCalendar },
  data() {
    //这里存放数据
    return {
      typeNum: 1,
      // loading: false,
      shopArray: [{ name: '全部', id: '' }],
      index: 0,
      shopID: 0,

      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: '',
      enddate: '',
      sunday: 1,

      orderFlag: 'pay', // pay accomplish refundorder

      soleStatus: 1, // 触底状态

      orderList: [],
      params: {
        orderFlag: 'pay', // pay accomplish refundorder
        pageNum: 1,
        pageSize: 10,
        ordersNo: '',
        buyPhone: '',
        shopId: '',
        overTimeArray: [
          moment().format('YYYY-MM-DD'),
          moment().format('YYYY-MM-DD'),
        ],
      },

      //按下的时间
      startTime: 0,
      //按下的坐标
      startX: 0,
      startY: 0,
    };
  },
  // 下拉刷新page.json中要配置
  onPullDownRefresh() {
    this.startdate = '';
    this.enddate = '';
    this.sunday = 1;
    this.dateArr = [];
    this.index = 0
    this.params.pageNum = 1;
    this.params.buyPhone = '';
    this.params.ordersNo = '';
    this.params.shopId = '';
    this.params.overTimeArray = [
      moment().format('YYYY-MM-DD'),
      moment().format('YYYY-MM-DD'),
    ];
    this.orderbynumber = '';
    this.getOrderList();
  },
  // 页面触底加载
  onReachBottom() {
    if (this.soleStatus === 1) {
      if (this.more === 'noMore') {
        return;
      }
      this.loadMoreList();
    }
  },
  onLoad() {
    this.getShopList();
    this.getOrderList();
  },
  //方法集合
  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';
        this.more = 'loading'
        if (this.direction === 'right' && this.isactive === 0) {
          this.direction = ''
          this.more = 'noMore'
          return
        }
        if (this.direction === 'left' && this.isactive === 2) {
          this.direction = ''
          this.more = 'noMore'
          return
        }
        if (this.direction === 'right') {
          this.isactive--;
          if (this.isactive < 0) {
            this.isactive = 0
            this.more = 'noMore'
            return;
          }
          this.params.orderFlag = this.flagList[this.isactive];
        } else if (this.direction === 'left') {
          this.isactive++;
          if (this.isactive > 2) {
            this.isactive = 2;
            this.more = 'noMore'
            return;
          }
          this.params.orderFlag = this.flagList[this.isactive];
        }
        this.getOrderList();
      } else {
        return;
      }
    },
    // 打开日历
    openTime() {
      this.startdate = '';
      this.enddate = '';
      this.sunday = 1;
      this.$refs.calendar.open();
    },
    // 确认时间后
    confirm(e) {
      this.more = 'loading';

      this.startdate = e.range.before;
      this.enddate = e.range.after;
      if (!this.startdate || !this.enddate) {
        this.startdate = e.fulldate;
        this.enddate = e.fulldate;
        this.sunday = 1;
        this.params.overTimeArray = [this.startdate, this.enddate];
        this.getOrderList();
        return;
      }
      this.sunday = e.range.data.length;
      this.params.overTimeArray = [this.startdate, this.enddate];
      this.getOrderList();
    },

    // 根据订单号或者手机号查询
    orderByNum() {
      this.more = 'loading';
      let num = '';
      num = this.params.buyPhone;
      const pattern = /^1[345678]\d{9}$/;
      if (pattern.test(this.params.buyPhone)) {
        this.params.buyPhone = num;
        this.params.ordersNo = '';
      } else {
        this.params.buyPhone = '';
        this.params.ordersNo = num;
      }
      this.getOrderList();
    },

    // 商铺选择
    bindPickerChange(e) {
      this.more = 'loading';
      this.index = e.detail.value;
      this.params.shopId = this.shopArray[this.index].id;
      this.getOrderList();
    },

    // tab
    changeTab(type, falg) {
      this.direction = ''  // 关闭动画
      this.more = 'loading';
      this.params.pageNum = 1;
      this.isactive = type;
      console.log(this.isactive);
      this.params.orderFlag = falg;
      this.getOrderList();
    },
    // 跳转详情
    todetail(num) {
      uni.setStorageSync('order', num);
      this.$mRouter.push({ route: '/pages/order/orderdetail' });
    },
    // 获取店铺列表
    async getShopList() {
      await this.$http.get('/homePage/getShopByMerId').then((res) => {
        if (res.data && res.code === 200) {
          let newarr = [{ name: '全部', id: '' }];
          this.shopArray = newarr.concat(res.data);
        }
      });
    },
    // 订单列表
    async getOrderList() {
      this.soleStatus = 1;
      this.orderList = [];
      await this.$http
        .post('/orders/proList', this.params)
        .then(async (res) => {
          if (res.data.list.length > 0) {
            this.orderList = res.data.list;
            if (res.data.nextPage === 0) {
              this.more = 'noMore';
            }
          } else {
            this.more = 'noMore';
          }
        });
      uni.stopPullDownRefresh();
    },
    // 上拉加载
    async loadMoreList() {
      this.params.pageNum++;
      await this.$http
        .post('/orders/proList', this.params)
        .then(async (res) => {
          if (res.data.list.length > 0) {
            this.orderList = this.orderList.concat(res.data.list);
            if (res.data.nextPage === 0) {
              this.more = 'noMore';
            }
          } else {
            this.more = 'noMore';
            return;
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.order {
  background-color: #f4f4f4;
  height: 100vh;
  .header-warp {
    width: 100%;
    background-color: #fff;
    padding: 15upx 33upx 0;
    position: fixed;
    .header-search {
      display: flex;
      align-items: center;
      .search {
        width: 100%;
        display: flex;
        align-items: center;
        height: 80upx;
        margin-left: 20upx;
        background-color: #f7f7f7;
        border-radius: 10upx;
        .cellphone {
          flex: 1;
          height: 100%;
          color: $titleColor;
          padding-left: 20upx;
        }
        .search-holder {
          color: #f00;
        }
        .txt {
          height: 72upx;
          width: 90upx;
          text-align: center;
          line-height: 72upx;
          color: #a95cff;
          font-size: 28upx;
        }
      }
    }
    .uni-list-cell {
      padding: 0 20upx;
      border-bottom: 1px solid #f4f4f4;
      .uni-list-cell-db {
        height: 80upx;
        font-size: 28upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        color: #8f8f8f;
        font-size: 30upx;
      }
      .uni-input {
        height: 100%;
        line-height: 80upx;
      }
      .icon-warp {
        width: 19upx;
        .iconRight {
          width: 19upx;
          height: 27upx;
        }
      }
    }
    .btn-time {
      width: 100%;
      height: 80upx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #f4f4f4;
      padding: 0 20upx;
      .opentime {
        flex: 1;
        display: flex;
        align-items: center;
        color: #8f8f8f;
        .start {
          font-size: 30upx;
        }
        .guo {
          padding: 0 45upx;
          font-size: 32upx;
        }
        .end {
          font-size: 30upx;
        }
        .sundate {
          font-size: 28upx;
          padding-left: 40upx;
        }
      }
      .iconRight {
        width: 19upx;
        height: 27upx;
      }
    }
    .header-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .item {
        position: relative;
        width: 33.33%;
        height: 99upx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .ordertype {
          position: relative;
          font-size: 30upx;
          letter-spacing: 3upx;
          color: #7a7c7c;
        }
        .heng {
          position: absolute;
          display: none;
          bottom: 0;
          width: 40upx;
          height: 6upx;
          border-radius: 4upx;
          background-color: #a95cff;
        }
      }

      .active .ordertype {
        color: #a95cff;
      }
      .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 {
    padding: 24upx 32upx 0;
    .order-list {
      background-color: #fff;
      border-radius: 10upx;
      padding: 30upx 24upx 33upx;
      margin-bottom: 24upx;
      .order-title {
        border-bottom: 1px solid $bordrColor;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 22upx;
        .ordernum {
          font-size: 30upx;
          color: #232828;
          .num {
            margin-left: 10upx;
          }
        }
        .ordertime {
          color: #a3a8a8;
        }
      }
      .order-detail {
        margin-top: 24upx;
        .name {
          font-size: 34upx;
        }
        .door,
        .num,
        .status,
        .playtime {
          font-size: 26upx;
          color: #7a7c7c;
          margin-top: 14upx;
        }
        .message {
          margin-left: 10upx;
        }
      }
    }
  }
  .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>