zhxg_app/pages/instructor/performance-appraisal/components/student-emergencies.vue

<template>
	<view class="container">
		<view class="tip">
			<label>本月已提交{{total}}份</label>
			<!-- <uni-icons type="right" size="16" color="#202020"></uni-icons> -->
		</view>
		<scroll-view @scrolltolower="scrolltolower" scroll-y="true" style="height:calc(100vh - 150rpx);">
			<uni-swipe-action>
				<view class="list">
					<view class="row" v-for="item in list" :key="item.id" @tap="toDetail(item.id)">
						<uni-swipe-action-item :right-options="actionOptions" @tap="onDel(item.id)">
							<view class="top">
								<label>{{item.eventLevel==0?'一般事件':'重大事件'}}</label>
								<uni-icons type="right" size="16" color="#202020"></uni-icons>
							</view>
							<view class="bottom">
								<view class="desc">
									{{item.eventDescription}}
								</view>
								<view>
									起止时间：{{item.startTime}}~{{item.endTime}}
								</view>
							</view>
						</uni-swipe-action-item>
					</view>
				</view>
			</uni-swipe-action>
			<view class="empty" v-if="list.length==0">
				<image src="@/static/empty.png" mode="widthFix"></image>
				暂时没有数据
			</view>
			<view class="loading-more" v-if="loading">
				<uni-load-more status="loading" />
			</view>
			<view class="no-more" v-if="!loading&&list.length!=0">
				到底啦~~
			</view>
		</scroll-view>
		<view class="add" @tap="addEvidence" v-if="commitStatus!=1">
			+
		</view>
	</view>
</template>

<script>
	import {
		listkpiFillingStuEmergency,
		delkpiFillingStuEmergency
	} from "@/api/instructor/studentEmergencies.js"
	export default {
		props: ["queryDetailParams", "commitStatus", "classType"],
		data() {
			return {
				actionOptions: [{
					text: '删除',
					style: {
						width: "200px",
						backgroundColor: '#df0000'
					}
				}],
				formData: {
					id: ""
				},
				query: {},
				list: [],
				totalPage: 0,
				total: 0,
				loading: false
			}
		},
		mounted() {
			this.query = {
				...this.queryDetailParams,
				classType: this.classType,
				fdyName: uni.getStorageSync("stuName"),
				pageNum: 1,
				pageSize: 10,
			}
			uni.$on('refreshStuEmergencyList', this.getlistkpiFillingStuEmergency);
			this.getlistkpiFillingStuEmergency();
		},
		beforeDestroy() {
			uni.$off('refreshStuEmergencyList', this.getlistkpiFillingStuEmergency);
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: `../performance-evaluation/student-emergencies-materials/detail?id=${id}&commitStatus=${this.commitStatus}`
				})
			},
			scrolltolower() {
				console.log('下');
				if (this.query.pageNum < this.totalPages) {
					this.query.pageNum++;
					this.loading = true;
					setTimeout(() => {
						this.getlistkpiFillingStuEmergency()
					}, 1000)
				} else {

				}
			},
			async getlistkpiFillingStuEmergency() {
				let res = await listkpiFillingStuEmergency(this.query);
				if (res.code == 200) {
					this.loading = false;
					if (this.query.pageNum == 1) {
						this.list = res.rows; // 如果是第一页，直接显示新数据
						this.total = res.total; // 如果是第一页，直接显示新数据
						console.log(res);
					} else {
						this.list = this.list.concat(res.rows); // 否则追加新数据到列表中
					}
					this.totalPages = Math.ceil(res.total / this.query.pageSize);
				}
			},
			addEvidence() {
				uni.navigateTo({
					url: `../performance-evaluation/student-emergencies-materials/add?year=${this.query.fillingYear}&month=${this.query.fillingMonth}`
				})
			},
			getFormData() {
				return this.formData;
			},
			onDel(id) {
				console.log(id);
				uni.showModal({
					title: "确定删除吗?",
					success: (res) => {
						if (res.confirm) {
							delkpiFillingStuEmergency(id).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: "删除成功"
									})
									this.getlistkpiFillingStuEmergency();
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.add {
			background-color: #1890FF;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 60rpx;
			position: fixed;
			bottom: 80px;
			right: 25px;
		}

		.tip {
			padding: 22rpx 40rpx 22rpx 40rpx;
			background-color: white;
			margin-bottom: 30rpx;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			left: 40rpx;
			right: 40rpx;
			z-index: 2;
			box-shadow: 0 0 2px 0px #dadada;
		}

		.no-more {
			text-align: center;
			color: gray;
			padding-bottom: 10px;
		}

		.empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 200rpx;
			color: #9E9E9E;
			font-size: 36rpx;

			image {
				width: 250rpx;
				margin-bottom: 50rpx;
			}
		}

		.list {
			padding-top: 120rpx;
		}

		.row {
			padding: 22rpx 40rpx 22rpx 40rpx;
			background-color: white;
			margin-bottom: 30rpx;
			border-radius: 16rpx;

			.uni-icons {
				opacity: 0.5;
			}

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: bold;
				border-bottom: 1px solid #F5F5F7;
				padding-bottom: 22rpx;
			}

			.bottom {
				color: #9C9C9C;
				padding-top: 22rpx;

				.desc {
					color: #404040;
					margin-bottom: 15rpx;
				}
			}
		}
	}
</style>