kailin_mp/pages/score/orders.vue

<template>
  <view>
    <!-- <view class="order_status_list">
			<view class="order_status_item" :class="requestParam.status==0?'active':''" @click="setStatus(0)"> 全部 </view>
			<view class="order_status_item" :class="requestParam.status==1?'active':''" @click="setStatus(1)"> 待跟进 </view>
			<view class="order_status_item" :class="requestParam.status==8?'active':''" @click="setStatus(8)"> 已完成 </view>
		</view> -->
    <view class="order_list" v-if="orderList.length">
      <view class="order_item" v-for="(item, index) in orderList" :key="index">
        <view class="box_left">
          <image class="product_image" :src="item.product_thumb" mode=""></image>
        </view>
        <view class="box_right">
          <view class="product_title">
            <view class="product_name">{{ item.product_name }}</view>
            <view class="order_status">
              {{ item.state }}
            </view>
          </view>
          <view class="spec_number">
            <view class="product_spec">{{ item.product_spec }}</view>
            <view class="buy_num">共{{ item.buy_num }}件</view>
          </view>
          <view class="pay_info">
            <!-- 赠品信息 -->
            <view class="coupon_info" v-if="item.is_rebate">赠品</view>
            <view class="pay_total">{{ item.score_total }} 积分</view>
          </view>
        </view>
      </view>
    </view>
    <Empty v-if="!orderList.length" text="----- 还没有记录啦 -----" />
    <view class="to_bottom" v-if="isLast && orderList.length"> -----到底啦-----</view>
  </view>
</template>

<script>
import Empty from "@/components/Empty/Empty.vue";

export default {
  components: {
    Empty,
  },
  data() {
    return {
      // 产品列表
      orderList: [],
      // 请求参数
      requestParam: {
        page: 1,
        status: 0,
      },
      // 是否最后一页
      isLast: false,
      // 是否请求中
      isReqing: false,
    };
  },
  onLoad() {
    // 初始化页码为1
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 请求列表
    this.$http.request("api/score_orders/get_list", this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == "success") {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        this.orderList = re.data.data;
      }
    });
  },
  onShow() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 没有数据的话，或者请求中，不允许刷新
    if (this.orderList.length > 0 || this.isReqing) return;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request("api/score_orders/get_list", this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == "success") {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        this.orderList = re.data.data;
      }
    });
  },
  onPullDownRefresh() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 如果请求中，不允许请求，
    if (this.isReqing) return false;
    // 初始化页码为1
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request("api/score_orders/get_list", this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == "success") {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        this.orderList = re.data.data;
      }
    });
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 如果页码是0，避免第一页重复
    if (this.requestParam.page < 1) return;
    // 最后一页不请求
    if (this.isLast) return;
    // 请求中，不再请求
    if (this.isReqing) return;
    // 增加一页
    this.requestParam.page = this.requestParam.page + 1;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request("api/score_orders/get_list", this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == "success") {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        // 追加数据
        this.orderList.push(...re.data.data);
      }
    });
  },
  methods: {
    setStatus(status) {
      // 登录提示
      if (!this.$checkAccess.alterLogin()) return;
      // 请求中，不再请求
      if (this.isReqing) return;
      // 初始化页码为1
      this.requestParam.page = 1;
      // 是否是最后一页
      this.isLast = false;
      // 状态变更
      this.requestParam.status = status;
      // 设置请求中
      this.isReqing = true;
      // 请求列表
      this.$http.request("api/score_orders/get_list", this.requestParam).then((re) => {
        // 设置非请求中
        this.isReqing = false;
        // 成功结果
        if (re.code == "success") {
          if (re.data.last_page >= this.requestParam.page) this.isLast = true;
          this.orderList = re.data.data;
        }
      });
    },
  },
};
</script>

<style lang="less">
.order_status_list {
  display: block;
  height: 60rpx;
  color: #666666;
  line-height: 60rpx;
  background: #ffffff;
  padding: 10rpx 35rpx;
  .order_status_item {
    float: left;
    font-size: 28rpx;
    padding: 0rpx 20rpx;
  }
  .order_status_item.active {
    color: #000000;
    font-weight: bold;
  }
}
.order_list {
  display: block;
  overflow: hidden;
  margin: 10rpx auto;
  .order_item {
    height: 200rpx;
    display: block;
    background: #ffffff;
    margin: 10rpx auto;
    .box_left {
      float: left;
      width: 160rpx;
      height: 200rpx;
      margin-left: 35rpx;
      .product_image {
        width: 160rpx;
        height: 160rpx;
        margin: 20rpx 0rpx;
        border-radius: 5rpx;
      }
    }
    .box_right {
      float: left;
      width: 485rpx;
      margin-left: 35rpx;
      padding-top: 20rpx;
      .product_title {
        width: 485rpx;
        max-height: 80rpx;
        font-size: 30rpx;
        overflow: hidden;
        line-height: 40rpx;
        padding: 0rpx 0rpx;
        .product_name {
          float: left;
          height: 40rpx;
          width: 380rpx;
        }
        .order_status {
          width: 85rpx;
          float: right;
          color: #999999;
          font-size: 24rpx;
        }
      }
      .spec_number {
        color: #999999;
        height: 60rpx;
        font-size: 24rpx;
        overflow: hidden;
        margin: 10rpx auto;
        line-height: 60rpx;
        .product_spec {
          float: left;
          color: #999999;
        }
        .buy_num {
          float: right;
          height: 40rpx;
          color: #333333;
          font-size: 20rpx;
          text-align: right;
        }
      }
      .pay_info {
        width: 485rpx;
        max-height: 80rpx;
        font-size: 30rpx;
        overflow: hidden;
        line-height: 40rpx;
        padding: 0rpx 0rpx;
        .coupon_info {
          color: gold;
          float: left;
          font-size: 20rpx;
        }
        .pay_total {
          color: red;
          width: 200rpx;
          float: right;
          text-align: right;
          font-size: 30rpx;
        }
      }
    }
  }
}
</style>