xlcs/xlcs-user/pagesOrder/orderList/orderList.vue

<template>
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper ref="tabs" :current="current" :is-scroll="false" :list="list" activeColor="#f29100"
                       swiperWidth="750" @change="change"></u-tabs-swiper>
      </view>
      <swiper :current="swiperCurrent" class="swiper-box">
        <swiper-item v-for="idx in 5" :key="idx" class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
            <view class="page-box">
              <view v-for="(res, index) in orderList[idx]" :key="res.id" class="order">
                <view class="top">
                  <view class="left">
                    [{{ index + 1 }}]
                    <u-icon :size="30" color="rgb(94,94,94)" name="clock"></u-icon>
                    <u-icon :size="26" color="rgb(203,203,203)" name="arrow-right"></u-icon>
                    <view class="store">{{ res.createTime }}</view>
                  </view>
                  <view class="right">{{ res.param.orderStatusName }}</view>
                </view>
                <view v-for="(item, index) in res.orderItemList" :key="index" class="item">
                  <view class="left">
                    <image :src="item.imgUrl" mode="aspectFill"></image>
                  </view>
                  <view class="content">
                    <view class="title u-line-2">{{ item.skuName }}</view>
                    <view class="type">活动金额：￥{{ item.splitActivityAmount }}</view>
                    <view class="type">优惠券金额：￥{{ item.splitCouponAmount }}</view>
                  </view>
                  <view class="right">
                    <view class="price">￥{{ item.skuPrice }}</view>
                    <view class="number">x{{ item.skuNum }}</view>
                    <view class="u-type-error">￥{{ item.splitTotalAmount }}</view>
                  </view>
                </view>
                <view class="total">
                  <text class="total-price">
                    <text class="decimal">现价：￥{{ res.totalAmount }} 原价：￥{{ res.originalTotalAmount }}</text>
                  </text>
                </view>
                <view class="bottom">
                  <view class="more">
                    <u-icon color="rgb(203,203,203)" name="more-dot-fill"></u-icon>
                  </view>
                  <view class="logistics btn">查看物流</view>
                  <view class="exchange btn">卖了换钱</view>
                  <view class="evaluate btn">评价</view>
                </view>
              </view>
              <u-gap height="30"></u-gap>
              <u-loadmore :status="loadStatus[idx]" bgColor="#f2f2f2"></u-loadmore>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 订单列表
      orderList: [[], [], [], [], []],
      // 订单类型、状态与数量
      list: [
        {
          name: '待付款',
          orderStatus: 'UNPAID',
          count: 0
        },
        {
          name: '待发货',
          orderStatus: 'WAITING_DELEVER',
          count: 0
        },
        {
          name: '待收货',
          orderStatus: 'WAITING_TAKE',
          count: 0
        },
        {
          name: '待评价',
          orderStatus: 'WAITING_COMMON',
          count: 0
        },
        {
          name: '已完结',
          orderStatus: 'FINISHED',
          count: 0
        }
      ],
      // 当前选中的选项卡
      current: 0,
      // 当前的swiper
      swiperCurrent: 0,
      // 每个选项卡数据加载的状态
      loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'],
      // 每个选项卡初始页面
      page: [1, 1, 1, 1, 1],
      // 每个选项卡总页数
      pages: [0, 0, 0, 0, 0],
      // 每次列表请求的记录条数
      limit: 5
    };
  },
  async onLoad(options) {
    // 请求不同状态的初始列表数据
    await this.getOrderList(0, 'UNPAID');
    await this.getOrderList(1, 'WAITING_DELEVER');
    await this.getOrderList(2, 'WAITING_TAKE');
    await this.getOrderList(3, 'WAITING_COMMON');
    await this.getOrderList(4, 'FINISHED');

    let current = +options.current;
    if (current !== -1) {
      this.change(current);
    }
  },

  methods: {
    // 触底加载
    reachBottom() {
      const orderStatus = this.list[this.current].orderStatus;
      if (this.loadStatus[this.current] !== 'nomore') this.getOrderList(this.current, orderStatus);
    },
    // 页面数据
    // idx是数组下标，orderStatus是订单状态的常量值，请求接口的时候需要使用
    async getOrderList(idx, orderStatus) {
      const result = await this.$u.api.getFindUserOrder({
        page: this.page[idx],
        limit: this.limit,
        orderStatus
      });

      // 给每个选项卡存储总页数以及总记录数
      this.pages[idx] = result.pages; // 设置总页数
      this.list[idx].count = result.total; // 总记录数

      // 对于每个选项卡
      // 其中每一个如果总页数为0，则没有记录，loadmore组件状态为nomore
      // 并且不需要执行后续操作内容
      if (this.pages[idx] === 0) {
        this.loadStatus.splice(idx, 1, 'nomore');
        return;
      }

      // 如果每个选项卡的当前页值小于总页数值，
      // 那么需要将请求后的数据与之前数据进行数据合并，
      // 并且确认loadmore组件的状态为loadmore可加载更多
      // 还需要将页码数进行+1操作
      if (this.page[idx] <= this.pages[idx]) {
        this.orderList[idx] = [...this.orderList[idx], ...result.records];
        this.loadStatus.splice(idx, 1, 'loadmore');
        this.page[idx] = this.page[idx] + 1;
      } else {
        this.loadStatus.splice(idx, 1, 'nomore');
      }
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
      this.current = index;
      const orderStatus = this.list[index].orderStatus;
      this.getOrderList(index, orderStatus);
    }
  }
};
</script>

<style>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f2f2f2;
}

/* #endif */
</style>

<style lang="scss" scoped>
.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;

  .top {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .store {
        margin: 0 10rpx;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .right {
      color: $u-type-warning-dark;
    }
  }

  .item {
    display: flex;
    margin: 20rpx 0 0;

    .left {
      margin-right: 20rpx;

      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
      }
    }

    .content {
      flex: 1;

      .title {
        font-size: 28rpx;
        line-height: 50rpx;
      }

      .type {
        margin: 10rpx 0;
        font-size: 24rpx;
        color: $u-tips-color;
      }

      .delivery-time {
        color: #e5d001;
        font-size: 24rpx;
      }
    }

    .right {
      margin-left: 10rpx;
      padding-top: 20rpx;
      text-align: right;

      .decimal {
        font-size: 24rpx;
        margin-top: 4rpx;
      }

      .number {
        color: $u-tips-color;
        font-size: 24rpx;
      }
    }
  }

  .total {
    margin-top: 20rpx;
    text-align: right;
    font-size: 24rpx;

    .total-price {
      font-size: 32rpx;
    }
  }

  .bottom {
    display: flex;
    margin-top: 40rpx;
    padding: 0 10rpx;
    justify-content: space-between;
    align-items: center;

    .btn {
      line-height: 52rpx;
      width: 160rpx;
      border-radius: 26rpx;
      border: 2rpx solid $u-border-color;
      font-size: 26rpx;
      text-align: center;
      color: $u-type-info-dark;
    }

    .evaluate {
      color: $u-type-warning-dark;
      border-color: $u-type-warning-dark;
    }
  }
}

.centre {
  text-align: center;
  margin: 200rpx auto;
  font-size: 32rpx;

  image {
    width: 164rpx;
    height: 164rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }

  .tips {
    font-size: 24rpx;
    color: #999999;
    margin-top: 20rpx;
  }

  .btn {
    margin: 80rpx auto;
    width: 200rpx;
    border-radius: 32rpx;
    line-height: 64rpx;
    color: #ffffff;
    font-size: 26rpx;
    background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
  }
}

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}
</style>