153 lines
3.3 KiB
Vue
153 lines
3.3 KiB
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>
|