cxb-minapp-vue3/src/pages/order/components/ObligationOrderList.vue

<script setup lang="ts">
import {getAllOrder, getGroupOrderList} from "~/apis/order.api";
import OrderItem from "~/pages/order/components/OrderItem.vue";
import OtherOrderItem from "~/pages/order/components/OtherOrderItem.vue";
import CXBEmpty from "~/components/CXBEmpty/CXBEmpty.vue";
import OrderObligationItem from "~/pages/order/components/OrderObligationItem.vue";
const props = defineProps({
  tabValue: {
    type: Number,
    default: 0
  }
})
const state = reactive({
  currentPage: 1,
  pageSize: 10,
  totalPage: 1,
  status: 'noMore',

  list: []
})
function loadList(action: 'page' | 'reload', callback?: (items) => void) {
  // console.log(state.keyword)
  if (action === 'reload') {
    state.currentPage = 1
  }
  const params = {
    page: state.currentPage,
    limit: state.pageSize
  }
  if (state.keyword) {
    params.keyword = state.keyword
  }

  getGroupOrderList({
    page: state.currentPage,
    limit: state.pageSize
  }).then(res => {
    if (action === 'page') {
      state.list = state.list.concat(res.list)
    }
    if (action == 'reload') {
      state.list = res.list
    }
    state.totalPage = Math.ceil(res.total / state.pageSize);

    state.status = 'more'
    if (callback) {
      callback(res.list)
    }
  })
}

function handleScrollToLower() {
  state.status = 'loading';
  state.currentPage += 1;

  if (state.currentPage > state.totalPage) {
    state.status = 'noMore';
  } else {
    setTimeout(() => {
      loadList('page')
    }, 300)
  }
}

onMounted(() => {
  loadList('reload')
  uni.$on('orderCancelFromList', () => {
    // loadAllOrderList()
    loadList('reload')
    // uni.$emit('orderCancelFromList', 1)
    // state.tabvalue = 0
  })

  uni.$on('onTab1ReachBottom', handleScrollToLower)
  uni.$on('onTab1PullDownRefresh', () => {
    loadList('reload', items => {
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 300)
    })
  })
})

onUnmounted(() => {
  uni.$off('onTab1ReachBottom');
  uni.$off('onTab1PullDownRefresh');
})
</script>
<template>
  <div class="p-3 flex flex-col">
    <div v-if="state.list.length > 0" class="flex flex-col">
      <div v-for="(orderItem, index) in state.list" :key="index">
<!--        <OrderItem :order-item="orderItem" />-->
<!--        <OtherOrderItem :item="orderItem" v-else/>-->
        <OrderObligationItem :order-item="orderItem" :tab-value="props.tabValue"/>
      </div>
      <div class=" flex justify-center items-center text-[12px] text-gray-500"
           v-if="state.list && state.list.length > 0">
        <div v-if="state.status === 'loading'">
          加载中...
        </div>
        <div v-if="state.status === 'noMore'">
          没有更多了～
        </div>
      </div>
    </div>
    <div v-else class="flex flex-col  justify-center items-center w-full">
      <CXBEmpty />

    </div>
  </div>


</template>