tangguo_h5/src/views/community/components/itemBox.vue

<template>
  <div class="itemBox">
    <template v-if="!state.loading">
      <van-pull-refresh
        v-model="moreParams.refreshing"
        @refresh="onRefresh"
        :disabled="moreParams.disabled"
        success-text="刷新成功"
        :class="[{ 'my-refresh': moreParams.isHigehtMax, none: moreParams.refreshing }]"
      >
        <van-list
          v-if="!moreParams.isNoData"
          v-model:loading="moreParams.loading"
          :finished="moreParams.finished"
          finished-text="没有更多数据了"
          @load="onLoad"
          :offset="10"
          v-model:error="moreParams.error"
          :immediate-check="false"
          error-text="请求失败，点击重新加载"
        >
          <div class="listBox" v-for="(item, index) in state.list" :key="index">
            <Post
              class="post"
              :postInfo="item"
              :currentIndex="index"
              :list="state.list"
              :key="item"
              :isListMode="true"
            />
            <!-- <div class="advBox">
            <lazyImg
              v-if="state.advsList.length > 0"
              class="advImg"
              :src="state.advsList[index % state.advsList.length].cover"
              :key="state.advsList[index % state.advsList.length].cover"
              @click="jumpAdv(state.advsList[index % state.advsList.length], 'ads')"
            />
          </div> -->
          </div>
        </van-list>
        <div class="sizeBox" v-if="!moreParams.isNoData"></div>
        <Empty v-if="moreParams.isNoData" />
      </van-pull-refresh>
    </template>
    <div v-else class="isloading">
      <Loading />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
// import { AdType } from '@/enums/app';
// import { getAdItem } from '@/utils/getConfig';
import HomeApi from '@/service/home';

const props = withDefaults(
  defineProps<{
    moduleId: string;
    moduleSort?: number;
    tagId: string;
  }>(),
  {
    moduleId: '',
  },
);

const state = reactive({
  // advsList: <Array<Types.App.AdsInfoListItem>>[], // 专栏之间的广告
  list: <Array<Types.Home.SectionsItem>>[],
  pageNumber: 1,
  pageSize: 10,
  loading: true,
});

const moreParams = reactive({
  loading: true,
  refreshing: false,
  finished: false,
  isNoData: false,
  error: false,
  isHigehtMax: true,
  disabled: false,
});

// 获取帖子数据
const getList = async (type: any) => {
  const data = {
    id: props.moduleId,
    data: {
      pageNumber: state.pageNumber,
      pageSize: state.pageSize,
      moduleSort: props.moduleSort,
      tagId: props.tagId || null,
    },
  };
  try {
    let res: any = await HomeApi.getModuleList(data);
    moreParams.loading = false;
    moreParams.refreshing = false;
    state.loading = false;
    let list = res.allVideoInfo || [];
    if (type === 'refresh') {
      state.list = list;
    } else {
      state.list = state.list.concat(list);
    }
    if (state.pageNumber == 1) {
      moreParams.isNoData = list.length ? false : true;
    }
    if (!res.hasNext) {
      moreParams.finished = true;
    }
  } catch (e) {
    moreParams.loading = false;
    moreParams.error = true;
  }
};

// 初始化
const init = () => {
  // 专题之间的广告
  // state.advsList = getAdItem(AdType.HOMETOPIC);
  getList('');
};
init();

const onLoad = () => {
  moreParams.loading = true;
  state.pageNumber++;
  getList(null);
};

const onRefresh = () => {
  state.pageNumber = 1;
  moreParams.refreshing = true;
  moreParams.finished = false;
  getList('refresh');
};

const resetList = () => {
  state.loading = true;
  state.list = [];
  state.pageNumber = 1;
  moreParams.loading = true;
  moreParams.finished = false;
  moreParams.isNoData = false;
  getList('');
};
defineExpose({
  resetList,
});
</script>

<style lang="scss" scoped>
.itemBox {
  .isloading {
    height: 400px;
  }
  .advBox {
    margin-bottom: 20px;
  }
  .sizeBox {
    height: 100px;
  }
}
</style>