workApp/pages/materialCollection/reviewMaterial/index.vue

<template>
	<view class="page_review" :style="{paddingTop: statusBarHeight + 120 + 'rpx', paddingBottom: safeAreaBottom + 100 + 'rpx' }">
		<notice-header title="审核材料" mode="review">
		</notice-header>

		<view class="review_content">
			<view class="review_list">
				<scroll-view v-if="reviewList.length > 0" scroll-y>
					<view v-for="item in reviewList" :key="item.id" class="review_item">
						<view class="item_header">
							<text class="submitter_name">{{ item.submitter }}</text>
							<view class="review_status" :class="item.statusClass">
								<text>{{ item.status }}</text>
							</view>
						</view>
						<view class="item_info">
							<text class="info_text">提交时间: {{ item.submitTime }}</text>
							<text class="info_text">材料: {{ item.materialCount }}个</text>
						</view>
						<view class="item_actions">
							<view class="action_btn reject" @click="handleReject(item)">
								<text>驳回</text>
							</view>
							<view class="action_btn approve" @click="handleApprove(item)">
								<text>通过</text>
							</view>
						</view>
					</view>
				</scroll-view>

				<no-data v-else centered text="暂无待审核材料" />
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import NoticeHeader from '@/components/notice-header.vue';
import NoData from '@/components/no-data.vue';
import { useSafeArea } from '@/common/safeArea';

const { statusBarHeight, safeAreaBottom, initSafeArea } = useSafeArea();

const reviewList = ref([
	{
		id: 1,
		submitter: '张老师',
		status: '待审核',
		statusClass: 'status-pending',
		submitTime: '2025-07-28 10:30',
		materialCount: 5
	},
	{
		id: 2,
		submitter: '李老师',
		status: '待审核',
		statusClass: 'status-pending',
		submitTime: '2025-07-28 11:20',
		materialCount: 3
	},
	{
		id: 3,
		submitter: '王老师',
		status: '待审核',
		statusClass: 'status-pending',
		submitTime: '2025-07-27 16:45',
		materialCount: 8
	}
]);

onMounted(() => {
	initSafeArea();
});

const handleApprove = (item) => {
	uni.showModal({
		title: '确认通过',
		content: `确定要通过 ${item.submitter} 提交的材料吗？`,
		success: (res) => {
			if (res.confirm) {
				uni.showToast({ title: '审核通过', icon: 'success' });
				reviewList.value = reviewList.value.filter(i => i.id !== item.id);
			}
		}
	});
};

const handleReject = (item) => {
	uni.showModal({
		title: '确认驳回',
		content: `确定要驳回 ${item.submitter} 提交的材料吗？`,
		success: (res) => {
			if (res.confirm) {
				uni.showToast({ title: '已驳回', icon: 'none' });
				reviewList.value = reviewList.value.filter(i => i.id !== item.id);
			}
		}
	});
};
</script>

<style lang="scss" scoped>
.page_review {
	min-height: 100vh;
	background-color: #F5F7FA;
}

.review_content {
	flex: 1;
	padding: 24rpx;
}

.review_list {
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.review_item {
	padding: 24rpx;
	border-bottom: 1rpx solid #EBEEF5;

	&:last-child {
		border-bottom: none;
	}

	.item_header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;

		.submitter_name {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}

		.review_status {
			font-size: 24rpx;
			padding: 8rpx 16rpx;
			border-radius: 8rpx;

			&.status-pending {
				background: rgba(230, 162, 60, 0.1);
				color: #E6A23C;
			}
		}
	}

	.item_info {
		display: flex;
		gap: 32rpx;
		margin-bottom: 20rpx;

		.info_text {
			font-size: 26rpx;
			color: #999999;
		}
	}

	.item_actions {
		display: flex;
		justify-content: flex-end;
		gap: 24rpx;

		.action_btn {
			font-size: 28rpx;
			padding: 16rpx 32rpx;
			border-radius: 12rpx;

			&.reject {
				background-color: #FFFFFF;
				border: 2rpx solid #E4E7ED;
				color: #666666;
			}

			&.approve {
				background-color: #2E64FA;
				color: #FFFFFF;
			}
		}
	}
}
</style>