zhxy-jsd/src/pages/view/routine/jc/bzList.vue

<template>
  <view class="bz-list">
    <!-- 使用 BasicListLayout 包裹记录列表 -->
    <BasicListLayout @register="register" :fixed="false" class="flex-1">
      <template #default="{ data }">
        <view class="bz-card" @click="goToBz(data)">
          <view class="card-header">
            <view class="card-title">{{ data.bzMc }}</view>
          </view>
          <view class="divider"></view>
          <view class="card-content">
            <view class="info-row">
              <text class="info-label">年级：</text>
              <text class="info-value">{{ data.njmc }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">说明：</text>
              <text class="info-value">{{ data.bzSm }}</text>
            </view>
          </view>
          <view class="card-footer">
            <text class="view-detail">前往点名 →</text>
          </view>
        </view>
      </template>
    </BasicListLayout>
  </view>
</template>

<script setup lang="ts">
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
import { jcBzFindPageApi } from "@/api/base/jcApi";
import { useDataStore } from "@/store/modules/data";
const { setJcBz } = useDataStore();

// 响应式数据
const loading = ref(false);
const bzList = ref<any>([]);
const total = ref<any>(0);

// 使用 BasicListLayout
const [register, { reload, setParam }] = useLayout({
  api: async (params: any) => {
    try {
      const res = await jcBzFindPageApi(params);
      console.log("API返回数据:", res); // 调试日志

      // 确保数据正确赋值
      if (res && res.rows) {
        bzList.value = res.rows;
        total.value = res.records || res.total || 0;
      } else {
        bzList.value = [];
        total.value = 0;
      }
      return res;
    } catch (error) {
      console.error("获取数据失败:", error);
      bzList.value = [];
      total.value = 0;
      return { rows: [], total: 0 };
    }
  },
  componentProps: {
    auto: false,
  },
});

const goToBz = (bz: any) => {
  setJcBz(bz);
  uni.navigateTo({ url: "/pages/view/routine/jc/index"});
};

// 生命周期
onMounted(() => {
  // 不自动加载数据，等待用户搜索
  reload();
});
</script>

<style lang="scss" scoped>
.bz-list {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.bz-card {
  border: 1px solid #f0f0f0;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  .card-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;

    .card-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  .divider {
    height: 1px;
    background-color: #eee;
    margin-bottom: 15px;
  }

  .card-content {
    margin-bottom: 20rpx;
    padding-bottom: 16rpx;
    border-bottom: 1px solid #f0f0f0;
  }

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

    &:last-child {
      margin-bottom: 0;
    }
  }

  .info-label {
    font-size: 28rpx;
    color: #666;
    font-weight: normal;
    flex: 0 0 160rpx;
  }

  .info-value {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    flex: 1;
  }
  
  .card-footer {
    text-align: right;
  }

}
</style>