kxmall-ui/kxmall-app-ui/pages/refund/index.vue

<template>
  <view class="return-list" ref="container">
	<!-- 分类查询 -->
	<view class="nav">
	  <view class="item" :class="{ on: listQuery.type === 0 }" @click="changeType(0)">
	    <view>全部</view>
	  </view>
	  <view class="item" :class="{ on: listQuery.type === 1 }" @click="changeType(1)">
	    <view>售后中</view>
	  </view>
	  <view class="item" :class="{ on: listQuery.type === 2 }" @click="changeType(2)">
	    <view>已完成</view>
	  </view>
	</view>
	<!-- 商品列表 -->
	<view class="list">
		<ListItem
			v-for="(item,index) in orderList"
			:key="index"
			:item="item"
		/>
    <view style="padding: 150rpx 0rpx;" v-if="loaded === true && orderList.length === 0">
      <missing v-if="loaded === true && orderList.length === 0"
               :imgUrl="'http://qiniuoss.nauzone.cn/%E7%BB%84%203%20%E6%8B%B7%E8%B4%9D@3x.png'" :desc="'暂时没有订单哦！'">
      </missing>
    </view>
	</view>


  </view>
</template>

<script>
import missing from '@/components/missing.vue'
import ListItem from './listItem.vue'
export default {
  name: "ReturnList",
  components: {
    missing,
    ListItem
  },
  data() {
    return {
		orderList: [],
		listQuery: {
		  pageNum: 1,
		  pageSize: 5,
		  type: 0
		},
		type: 0,
		loading: false,
		loaded: false,
      pageNum: 0
    };
  },
  onLoad(option) {
    this.getOrderList();
  },
  onReachBottom() {
    !this.loading && this.getOrderList();
  },
  methods: {
	  // 售后详情
    getOrderList() {
      if ((this.loading || this.loaded) && (this.type === this.listQuery.type)) return;
      this.loading = true;
	  // 售后接口

    this.$api.request('get', 'order/app/storeAfterSales/list', this.listQuery).then(res => {
		  // console.log(res)
		  if (this.type === this.listQuery.type) {
			this.orderList = [...this.orderList, ...res.rows];
		  } else {
			  this.orderList = res.rows;
			  this.type = this.listQuery.type
		  }
		  this.listQuery.pageNum++;
		  // 加载组件
		  this.loading = false;
		  this.loaded = res.rows.length <= res.total;// 查询到末尾
	  })
    },
	// 分类查询
	changeType (type) {
		this.listQuery.type = type
		this.listQuery.pageNum = 1;
		this.getOrderList()
	}
  }
};
</script>

<style scoped lang="scss">
.return-list{
	.nav{
		background-color: #FFF;
		display: flex;
		justify-content: space-around;
		.item{
			height: 80rpx;
			line-height: 80rpx;
			font-size: 14px;
			font-family: PingFang SC;
			color: #333333;
		}
		.on{
			border-bottom: 6rpx solid #EB3729;
		}
	}
}
</style>