基本功能都已完成

pages/checklist/checklist.vue

@@ -1,41 +1,101 @@
 <template>
 	<view class="page padding">
-		<view class="padding bg-white radius flex justify-between margin-bottom" v-for="item in list" :key="item.id">
-			<view>{{ item.name }}</view>
-			<view>
-				<button class="bg-blue cu-btn margin-right-xs" @click="edit()">编辑</button>
-				<button class="bg-red cu-btn">删除</button>
-			</view>
+		<!-- 检查表列表 -->
+		<view class="checklist-card" v-for="item in list" :key="item.id">
+			<view class="card-name">{{ item.name }}</view>
 		</view>
-		<button class="lg cuIcon-add bg-blue round margin-top-xl" @click="edit()">新增检查表</button>
+		
+		<!-- 空状态 -->
+		<view v-if="list.length === 0" class="empty-tip">
+			<text>暂无检查表</text>
+		</view>
+		
+		<!-- 新增按钮 -->
+		<button class="add-btn" @click="goToAdd">
+			<text class="cuIcon-add"></text>
+			<text>新增检查表</text>
+		</button>
 	</view>
 </template>
 
 <script setup>
-	import { ref } from 'vue'
-	import { onLoad } from '@dcloudio/uni-app'
-	import { useRouter } from 'vue-router'
-	import { getCheckTableList } from '@/request/api.js'
-	const router = useRouter()
-	const list = ref([])
-	const edit = () => {
-		uni.navigateTo({
-			url: '/pages/editchecklist/editchecklist'
-		})
+import { ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { getCheckTableList } from '@/request/api.js'
+
+const list = ref([])
+
+// 获取检查表列表
+const fetchList = async () => {
+	try {
+		const res = await getCheckTableList({ pageNum: 1, pageSize: 100 });
+		if (res.code === 0) {
+			list.value = res.data.records || [];
+		}
+	} catch (error) {
+		console.error('获取检查表列表失败:', error);
 	}
-	onLoad(() => {
-		getCheckTableList().then(res => {
-			if (res.code === 0) {
-				list.value = res.data.records
-			}
-		})
+}
+
+// 跳转到新增页面
+const goToAdd = () => {
+	uni.navigateTo({
+		url: '/pages/editchecklist/editchecklist'
 	})
-	
+}
+
+// 每次显示页面时刷新数据
+onShow(() => {
+	fetchList();
+})
 </script>
 
 <style lang="scss" scoped>
-	.page {
-		min-height: 100vh;
-		background: #EBF2FC;
+.page {
+	min-height: 100vh;
+	background: #EBF2FC;
+	padding-bottom: 120rpx;
+}
+
+.checklist-card {
+	background: #fff;
+	border-radius: 16rpx;
+	padding: 30rpx;
+	margin-bottom: 20rpx;
+	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+	
+	.card-name {
+		font-size: 32rpx;
+		color: #333;
+		font-weight: 500;
 	}
+}
+
+.empty-tip {
+	text-align: center;
+	padding: 100rpx 0;
+	color: #999;
+	font-size: 28rpx;
+}
+
+.add-btn {
+	position: fixed;
+	bottom: 40rpx;
+	left: 30rpx;
+	right: 30rpx;
+	height: 90rpx;
+	background: linear-gradient(135deg, #667eea 0%, #2668EA 100%);
+	border-radius: 45rpx;
+	color: #fff;
+	font-size: 32rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.4);
+	
+	.cuIcon-add {
+		margin-right: 10rpx;
+		font-size: 36rpx;
+	}
+}
 </style>