VAVABUY/components/list copy.vue

<template>
  <view>
    <!-- @scrolltolower="scrolltolower" -->
    <up-list style="height:auto" id="item_height" class="wrap_list">
      <up-list-item v-for="(item, index) in lists" :key="index">
        <slot name="item" :item="item" :index="index"></slot>
      </up-list-item>
    </up-list>
    <view class="null_warp" v-if="!!status && !lists.length">
      <slot name="null">
        <view class="null_text">{{ t(nullText || '无数据') }}</view>
      </slot>
    </view>
    <template v-if="!!status && lists.length">
      <view class="load_more">
        <u-loadmore :status="status" :loading-text="t(loadingText)" :loadmore-text="t(loadmoreText)"
          :nomore-text="t(nomoreText)" />
      </view>
    </template>
  </view>
</template>

<script setup>
import { useCacheStore } from '@/store';
import { query, $post, systemInfo } from '@/utils';
import { ref, nextTick } from "vue";
import { t } from "@/locale";

const useCache = useCacheStore();

const props = defineProps({
  topHeight: {
    type: Number,
    default: 0
  },
  url: {
    type: String,
    default: ''
  },
  pageSize: {
    type: Number,
    default: 20
  },
  defaultParams: {
    type: Object,
    default: () => { }
  },
  nullText: String,
  loadingText: {
    type: String,
    default: '正在加载中'
  },
  loadmoreText: {
    type: String,
    default: '加载更多'
  },
  nomoreText: {
    type: String,
    default: '没有更多了'
  },
  getIndex: {
    type: Number,
    default: 0
  },
  activeIndex: {
    type: Number,
    default: 0
  },
  isCache: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['datas'])

const lists = ref([]);
const page = ref(1);
const totals = ref(0);
const status = ref('nomore');
const noData = ref(false);
const height = ref(0);

const scrolltolower = () => {
  if (!noData.value) {
    let num = page.value;
    num += 1;
    page.value = num;
    getData();
  }
}
const getListKey = () => `${props.url}_${JSON.stringify(props.defaultParams)}`;

const getData = async (force = false) => {
  try {
    if (props.isCache) {
      const key = getListKey()
      const list = await useCache.getListPageData({
        key,
        page: page.value,
        pageSize: props.pageSize,
        apiFn: props.url,
        params: props.defaultParams,
        force
      })
      if (list) {
        lists.value = list;
        emit('datas', lists.value)
        nextTick(() => {
          getHeight();
        })
        return;
      }
    }

    status.value = 'loading';
    const { data: { data: { item: data, total_results: count } } } = await $post(props.url, { pageSize: props.pageSize, page: page.value, ...props.defaultParams });
    status.value = 'nomore';
    if (data.length < props.pageSize) {
      noData.value = true
    } else {
      noData.value = false
    }
    totals.value = count - 0;
    if (page.value > 1) {
      const arrList = lists.value;
      lists.value = [...arrList, ...data]
      emit('datas', lists.value)
      nextTick(() => {
        getHeight();
      })
      return;
    }
    lists.value = data;
    emit('datas', lists.value)
    nextTick(() => {
      getHeight();
    })
  } catch (error) {
    console.error(error, 'getData');
  }
}
const getHeight = async (name = '#item_height') => {
  const { height: heights } = await query(name, this);
  nextTick(() => {
    height.value = heights
    const { windowHeight, statusBarHeight } = systemInfo();
    let contHeight = windowHeight - 44 - props.topHeight;
    if (height < contHeight) {
      scrolltolower();
    }
  })
  return height
}
const handleRefresh = (flag = false) => {
  page.value = 1;
  status.value = 'nomore';
  noData.value = false;
  if (!flag) {
    lists.value = []
  }
  nextTick(() => {
    getData();
  })
}
const setList = (_list) => {
  nextTick(() => {
    lists.value = _list;
    emit("datas", lists.value)
    nextTick(() => {
      getHeight();
    })
  })
}

defineExpose({
  handleRefresh,
  setList,
  getData,
  scrolltolower
})
</script>

<style lang="less" scoped>
@import url('@/style.less');

:deep(.u-list) {
  height: 100% !important;
}

/deep/ .uni-scroll-view {
  overflow: unset !important;
}

.null_warp {
  .null_text {
    min-height: 100rpx;
    .flex_center();
    font-size: 28rpx;
    color: #333;
  }
}

.load_more {
  padding: 16rpx 0;
}
</style>