wxapp/pages/list/index.vue

<template>
  <view class="u-page">
    <view class="u-demo-block" style="padding:10px;height:100vh">
      <view>
        <search-bar @toFilterSearch="filterSearch"></search-bar>
      </view>
      <view v-if="list.length > 0">
        <u-list @scrolltolower="scrollSearch">
          <u-list-item v-for="i in list" :key="i._id">
            <item :data="i" @toRefresh="refresh"></item>
          </u-list-item>
          <view v-if="noData" style="margin-bottom: 20px;">
            <u-empty iconSize="0" text="没数据啦!点击按钮再次加载!">
              <up-row>
                <up-col>
                  <up-button type="primary" icon="reload" shape="circle" @click="trySearch()"></up-button>
                </up-col>
              </up-row>
            </u-empty>
          </view>
        </u-list>
      </view>
      <view v-else>
        <u-empty mode="list">
          <up-row>
            <up-col>
              <up-button type="primary" icon="reload" shape="circle" @click="trySearch()"></up-button>
            </up-col>
          </up-row>
        </u-empty>
      </view>
    </view>
    <view style="position: fixed;right:5vw;bottom:10vh;z-index:9999">
      <up-row>
        <up-col>
          <up-button type="primary" icon="plus" shape="circle" @click="toAdd()"></up-button>
        </up-col>
      </up-row>
    </view>

  </view>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from 'vue';
import item from './item.vue'
import searchBar from './searchBar.vue'
let skip = ref(0);
let limit = ref(5);
let list = ref([]);
let total = ref(0);
let noData = ref(false);
let searchCondition = ref({});
const search = async (skip = 0, limit = 5, add = true) => {
  uni.showLoading({
    title: '加载中...',
    mask: true,
    success: async () => {
      try {
        const query = { skip, limit, ...searchCondition.value };
        const result = await $api('/perfume', 'GET', query);
        if (result.errcode == 0) {
          if (add) list.value.push(...result.data);
          else list.value = result.data;
          total.value = result.total
          if (list.value.length >= result.total) noData.value = true
        }
        uni.hideLoading()
      } catch (error) {
        console.log(error)
        uni.hideLoading()
      }

    },
    fail: (e) => console.log(e)

  })

}
const refresh = () => {
  skip.value = 0
  search()
}
onMounted(async () => {
  await search()
})
const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;

const toAdd = () => {
  uni.navigateTo({
    url: `/pages/list/edit?type=add`,
  })
}
const scrollSearch = () => {
  if (noData.value) return
  skip.value = skip.value + limit.value;
  search(skip.value, limit.value)
}
const trySearch = async () => {
  const res = await $api('/perfume/count', 'GET')
  if (res.data > total.value) {
    skip.value = total.value;
    noData.value = false;
    search(skip.value, limit.value)
  }
}
const filterSearch = (data) => {
  skip.value = 0;
  total.value = 0;
  noData.value = false;
  searchCondition.value = data;
  search(skip.value, limit.value, false);
}
</script>

<style></style>