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

<!-- order -->
<template>
  <view class="order">
    <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(1, 'pay')"
          :class="{ active: isactive === 1 }"
        >
          <view class="ordertype">已付款</view>
          <view class="heng"></view>
        </view>
        <view
          class="item"
          @tap="changeTab(2, 'accomplish')"
          :class="{ active: isactive === 2 }"
        >
          <view class="ordertype">已完成</view>
          <view class="heng"></view>
        </view>
        <view
          class="item"
          @tap="changeTab(3, 'refundorder')"
          :class="{ active: isactive === 3 }"
        >
          <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 === 1">
      <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">
      <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 === 3">
      <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>

    <uni-load-more :status="more"> </uni-load-more>
    <!-- <rf-loading v-if="loading"></rf-loading> -->
    <view style="height: 250upx;"></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 {
      // loading: false,
      shopArray: [{ name: '全部', id: '' }],
      index: 0,
      shopID: 0,
      isactive: 1,
      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,

      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')],
      },
    };
  },

  // 下拉刷新page.json中要配置
  onPullDownRefresh() {
    this.startdate = '';
    this.enddate = '';
    this.sunday = 1;
    this.dateArr = [];
    this.params.pageNum = 1;
    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: {
    // 打开日历
    openTime() {
      this.$refs.calendar.open();
    },
    // 确认时间后
    confirm(e) {
      console.log(e);
      this.more = 'loading';

      this.startdate = e.range.before;
      this.enddate = e.range.after;
      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.more = 'loading';
      this.params.pageNum = 1;
      this.isactive = type;
      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) => {
          console.log(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;
  .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: 80upx;
        }
      }
      .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;
      }
    }
  }
  .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;
        }
      }
    }
  }
}
</style>