保存数据

src/pages/userFunc/projectList.vue

@@ -19,7 +19,7 @@
 			</view>
 
 			<view v-else class="projects-list">
-				<view v-for="(project, index) in projects" :key="project.id" class="project-card"
+				<view v-for="(project, index) in projects" :key="project.planId" class="project-card"
 					@click="viewProjectDetail(project)">
 					<view class="project-delete" @click.stop="deleteProject(project, index)">
 						<u-icon name="trash" size="18" color="#ff4d4f"></u-icon>
@@ -35,7 +35,7 @@
 						<view class="project-stats">
 							<view class="stat-badge">
 								<u-icon name="account" size="14" color="#1890ff"></u-icon>
-								<text class="badge-text">{{ project.studentCount }}位学员</text>
+								<text class="badge-text">{{ project.users.length }}位学员</text>
 							</view>
 						</view>
 					</view>
@@ -46,7 +46,7 @@
 						</view>
 						<view class="project-time">
 							<u-icon name="clock" size="14" color="#999"></u-icon>
-							<text class="time-text">{{ project.createTime }}</text>
+							<text class="time-text">{{ Service.formatDate(project.addTime,1) }}</text>
 						</view>
 
 					</view>
@@ -57,69 +57,25 @@
 </template>
 
 <script setup lang="ts">
-	import { onShow, onLoad } from "@dcloudio/uni-app"
+	import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app"
 	import { Service } from '@/Service/Service'
+	import { PlanService } from '@/Service/swimming/PlanService'
 	import { ref } from "vue"
-	// 定义项目类型
-	interface Project {
-		id : string
-		name : string
-		mode : '计时' | '包干' | '分段'
-		createTime : string
-		studentCount : number
-		recordCount : number
-	}
+
+
+	// 分页相关
+	let page = ref(1)
+	let status = ref('loadmore')
 
 	// 项目列表数据
-	const projects = ref<Project[]>([
-		{
-			id: '001',
-			name: '自由泳50米',
-			mode: '计时',
-			createTime: '2024-01-15 14:30',
-			studentCount: 8,
-			recordCount: 24
-		},
-		{
-			id: '002',
-			name: '蛙泳100米',
-			mode: '包干',
-			createTime: '2024-01-14 10:15',
-			studentCount: 6,
-			recordCount: 18
-		},
-		{
-			id: '003',
-			name: '仰泳200米',
-			mode: '分段',
-			createTime: '2024-01-13 16:45',
-			studentCount: 5,
-			recordCount: 20
-		},
-		{
-			id: '004',
-			name: '蝶泳50米',
-			mode: '计时',
-			createTime: '2024-01-12 09:20',
-			studentCount: 4,
-			recordCount: 12
-		},
-		{
-			id: '005',
-			name: '混合泳100米',
-			mode: '包干',
-			createTime: '2024-01-11 15:00',
-			studentCount: 7,
-			recordCount: 21
-		}
-	])
+	const projects = ref<Array<any>>([])
 
 	onLoad(() => {
-
+		getData()
 	})
 
-	onShow(() => {
-
+	onReachBottom(() => {
+		getList()
 	})
 
 	// 获取模式对应的样式类
@@ -133,15 +89,46 @@
 	}
 
 	// 查看项目详情
-	const viewProjectDetail = (project : Project) => {
+	const viewProjectDetail = (project : any) => {
 		Service.Msg(`查看「${project.name}」详情`)
 	}
 
 	// 删除项目
-	const deleteProject = (project : Project, index : number) => {
+	const deleteProject = (project : any, index : number) => {
 		Service.Confirm(`确定要删除「${project.name}」吗？`, () => {
-			projects.value.splice(index, 1)
-			Service.Msg('删除成功')
+			PlanService.DeletePlan(project.planId).then(res => {
+				if (res.code == 0) {
+					getData()
+					Service.Msg('删除成功')
+				} else {
+					Service.Msg(res.msg)
+				}
+			})
+		})
+	}
+
+	// 获取项目列表数据
+	const getData = () => {
+		projects.value = []
+		page.value = 1
+		status.value = 'loadmore'
+		getList()
+	}
+
+	// 获取项目列表
+	const getList = () => {
+		if (status.value == 'loading' || status.value == 'nomore') {
+			return
+		}
+		status.value = 'loading'
+		PlanService.GetPlanList( '', page.value.toString()).then(res => {
+			if (res.code == 0) {
+				projects.value = [...projects.value, ...res.data]
+				status.value = res.data.length == 10 ? 'loadmore' : 'nomore'
+				page.value++
+			} else {
+				Service.Msg(res.msg)
+			}
 		})
 	}