app/pages/enter/idEnter/list.vue

<template>
  <s-layout>
    <scroll-view scroll-y class="list-container" refresher-enabled :refresher-triggered="triggered"
      @refresherrefresh="onRefresh" @scrolltolower="loadMore">
      <view>
        <view class="add-btn" @click="goToAdd">
          <u-icon name="plus" size="28"></u-icon>
          <text>添加身份信息</text>
        </view>
        <u-empty v-if="list.length === 0" text="暂无数据"></u-empty>
        <view v-else class="card-list">
          <view v-for="(item, index) in list" :key="index" class="card-item">
            <u-card :title="item.name" :sub-title="item.idCardNumber">
              <template #body>
                <view class="card-content" @click="goToEdit(item)">
                  <view class="info-row">
                    <text class="label">性别:</text>
                    <text class="value">{{ item.gender }}</text>
                  </view>
                  <view class="info-row">
                    <text class="label">民族:</text>
                    <text class="value">{{ item.ethnicity }}</text>
                  </view>
                  <view class="info-row">
                    <text class="label">出生日期:</text>
                    <text class="value">{{ dayjs(item.birthDate).format("YYYY-MM-DD") }}</text>
                  </view>
                  <view class="info-row">
                    <text class="label">住址:</text>
                    <text class="value">{{ item.address }}</text>
                  </view>
                  <view class="info-row">
                    <text class="label">签发机关:</text>
                    <text class="value">{{ item.issuingAuthority }}</text>
                  </view>
                  <view class="info-row">
                    <text class="label">有效期:</text>
                    <text class="value">{{ dayjs(item.validityStart).format("YYYY-MM-DD") }} - {{
                      dayjs(item.validityEnd).format("YYYY-MM-DD") }}</text>
                  </view>
                </view>
              </template>
            </u-card>
          </view>
        </view>
        <u-loadmore v-if="list.length > 0" :status="loadMoreStatus" />
      </view>
    </scroll-view>
  </s-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import EnterApi from '@/sheep/api/enter/index.js';
import dayjs from 'dayjs';
import sheep from '@/sheep';
const triggered = ref(false);
const list = ref([]);
const page = ref(1);
const loadMoreStatus = ref('loadmore');

// 跳转到添加页面
const goToAdd = () => {
  sheep.$router.go('/pages/enter/idEnter/index', { formType: 'create' })
};

const goToEdit = (item) => {
  sheep.$router.go('/pages/enter/idEnter/index', { formType: 'edit', id: item.id })
};
// 获取列表数据
const getList = async (isRefresh = false) => {
  try {
    if (isRefresh) {
      page.value = 1;
    }
    const res = await EnterApi.useriIdcardPage({
      page: page.value,
      pageSize: 10
    });

    if (res.code === 0) {
      if (isRefresh) {
        list.value = res.data.list;
      } else {
        list.value = [...list.value, ...res.data.list];
      }

      loadMoreStatus.value = res.data.hasMore ? 'loadmore' : 'nomore';
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      });
    }
  } catch (error) {
    console.error(error);
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    });
  }
};

// 下拉刷新
const onRefresh = async () => {
  triggered.value = true;
  await getList(true);
  triggered.value = false;
};

// 加载更多
const loadMore = async () => {
  if (loadMoreStatus.value === 'nomore') return;

  loadMoreStatus.value = 'loading';
  page.value++;
  await getList();
};

onLoad(() => {
})

onShow(() => {
  // 页面显示时重新加载数据
  page.value = 1;
  list.value = [];
  loadMoreStatus.value = 'loadmore';
  loadMore();
})

onMounted(() => {
  // // 页面显示时重新加载数据
  // page.value = 1;
  // list.value = [];
  // loadMoreStatus.value = 'loadmore';
  // loadMore();
});
</script>

<style lang="scss" scoped>
.list-container {
  width: 100%;
  background: #f5f5f5;

  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20rpx;
    padding: 20rpx;
    background: #fff;
    border-radius: 8rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

    text {
      margin-left: 10rpx;
      font-size: 28rpx;
      color: #333;
    }
  }

  .card-list {
    .card-item {
      margin-bottom: 20rpx;

      .card-content {
        padding: 20rpx;

        .info-row {
          display: flex;
          margin-bottom: 16rpx;

          .label {
            width: 160rpx;
            color: #666;
            font-size: 28rpx;
          }

          .value {
            flex: 1;
            color: #333;
            font-size: 28rpx;
          }
        }
      }
    }
  }
}
</style>