LandSurveyApplet/pages/investigator/Households/progress.vue

<template>
	<view class="page-container">
		<!-- 承包信息卡片 -->
		<view class="card info-card">
			<view class="card-header">
				<text class="card-title">承包信息</text>
			</view>
			<view class="info-grid">
				<view class="info-row">
					<view class="info-label">承包方姓名</view>
					<view class="info-value">{{ cbfInfo.cbfmc }}</view>
				</view>
				<view class="info-row">
					<view class="info-label">证件号码</view>
					<view class="info-value">{{ cbfInfo.cbfzjhm }}</view>
				</view>
				<view class="info-row-group">
					<view class="info-col">
						<view class="info-label">家庭人口</view>
						<view class="info-value">{{ cbfInfo.cbfcysl }} 人</view>
					</view>
					<view class="info-col">
						<view class="info-label">地块数量</view>
						<view class="info-value">{{ dkNumber }} 块</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 上报进度区域 -->
		<view class="card progress-card">
			<view class="card-header">
				<text class="card-title">上报进度</text>
			</view>
			<view class="progress-container">
				<!-- 农户上报 -->
				<view class="progress-step">
					<view class="step-node-box">
						<view class="step-node done">
							<text class="icon">✓</text>
						</view>
						<view class="step-line done"></view>
					</view>
					<view class="step-content">
						<view class="step-head">
							<view class="step-name">农户上报</view>
							<view class="step-tag done">已上报</view>
						</view>
						<view class="step-desc">已完成电子签名</view>
						<button class="view-sign-btn" @click="handleStepBtn('查看签名')">
							查看签名
						</button>
					</view>
				</view>

				<!-- 村干部审核 -->
				<view class="progress-step">
					<view class="step-node-box">
						<view class="step-node" :class="villageOfficialStatus.nodeClass">
							<text class="icon" v-if="villageOfficialStatus.icon">✓</text>
							<text class="icon" v-else>×</text>
						</view>
						<view class="step-line" :class="villageOfficialStatus.lineClass"></view>
					</view>
					<view class="step-content">
						<view class="step-head">
							<view class="step-name">村干部审核</view>
							<view class="step-tag" :class="villageOfficialStatus.tagClass">
								{{ villageOfficialStatus.text }}
							</view>
						</view>

						<view class="item-group" v-if="progressData.dkApprovalList.length">
							<view class="group-title">地块审核</view>
							<view class="item" v-for="(item, idx) in progressData.dkApprovalList" :key="idx">
								<view class="item-left">
									<text>地块编号：{{ item.data.dkbm }}</text>
								</view>
								<text :class="getCGBDkStatusClass(item.data.status)">
									{{ getDkStatusText(item.data.status) }}
								</text>
							</view>
						</view>

						<view class="item-group" v-if="progressData.jtcyApprovalList.length">
							<view class="group-title">家庭成员审核</view>
							<view class="item" v-for="(item, idx) in progressData.jtcyApprovalList" :key="idx">
								<view class="item-left">
									<text>姓名：{{ item.data.cyxm }}</text>
									<text>理由：{{ item.data.changeReason }}</text>
								</view>
								<text :class="getCGBJtcyStatusClass(item.data.status)">
									{{ getCGBJtcyStatusText(item.data.status) }}
								</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 内业处理 -->
				<view class="progress-step" v-if="progressData.internalDkList.length">
					<view class="step-node-box">
						<view class="step-node" :class="internalStatus.nodeClass">
							<text class="icon" v-if="internalStatus.icon">✓</text>
							<text class="icon" v-else>×</text>
						</view>
					</view>
					<view class="step-content">
						<view class="step-head">
							<view class="step-name">内业处理</view>
							<view class="step-tag" :class="internalStatus.tagClass">
								{{ internalStatus.text }}
							</view>
						</view>
						<view class="item-group">
							<view class="group-title">地块审核</view>
							<view class="item" v-for="(item, idx) in progressData.internalDkList" :key="idx">
								<view class="item-left">
									<text>地块编号：{{ item.data.dkbm }}</text>
								</view>
								<text :class="getDkStatusClass(item.data.status)">
									{{ getDkStatusText(item.data.status) }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-bar">
			<button class="action-btn" :class="hasRejected ? 'reject-btn' : 'normal-btn'" @click="handleActionBtn">
				{{ hasRejected ? '重新上报' : '查看当前详情' }}
			</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getCbfdkxxNumberData } from '@/api/farmerApi.js';

	const cbfInfo = ref({});
	const dkNumber = ref(0);
	const progressData = ref({
		dkApprovalList: [],
		jtcyApprovalList: [],
		internalDkList: []
	});

	const hasRejected = computed(() => {
		const dkRejected = progressData.value.dkApprovalList.some(i => i.data?.status === 4);
		const jtcyRejected = progressData.value.jtcyApprovalList.some(i => i.data?.status === 3);
		return dkRejected || jtcyRejected;
	});

	onLoad((options) => {
		try {
			cbfInfo.value = JSON.parse(decodeURIComponent(options.groupInfo || '{}'));
			const raw = JSON.parse(decodeURIComponent(options.index || '{}'));
			progressData.value.dkApprovalList = raw.dkApprovalList || [];
			progressData.value.jtcyApprovalList = raw.jtcyApprovalList || [];
			progressData.value.internalDkList = raw.dkApprovalList || [];
			if (cbfInfo.value.cbfbm) {
				getCbfdkNumberData(cbfInfo.value.cbfbm);
			}
		} catch (err) {
			console.error('参数解析失败', err);
		}
	});

	const villageOfficialStatus = computed(() => {
		const { dkApprovalList, jtcyApprovalList } = progressData.value;
		const allDkPass = dkApprovalList.every(i => i.data?.status === 2);
		const jtcyOk = jtcyApprovalList.length === 0 || jtcyApprovalList.every(i => i.data?.status === 2);
		const allJtcyReject = jtcyApprovalList.length > 0 && jtcyApprovalList.every(i => i.data?.status === 3);

		if (allDkPass && jtcyOk) return {
			nodeClass: 'done',
			lineClass: 'done',
			icon: true,
			text: '已通过',
			tagClass: 'done'
		};
		if (allJtcyReject) return {
			nodeClass: 'reject',
			lineClass: '',
			icon: false,
			text: '已驳回',
			tagClass: 'reject'
		};
		return {
			nodeClass: 'pending',
			lineClass: '',
			icon: false,
			text: '审核中',
			tagClass: 'pending'
		};
	});

	const internalStatus = computed(() => {
		const list = progressData.value.internalDkList;
		if (!list.length) return { nodeClass: 'pending', icon: false, text: '待处理', tagClass: 'pending' };
		const pass = list.every(i => i.data?.status === 3);
		const reject = list.every(i => i.data?.status === 4);
		if (pass) return { nodeClass: 'done', icon: true, text: '已通过', tagClass: 'done' };
		if (reject) return { nodeClass: 'reject', icon: false, text: '已驳回', tagClass: 'reject' };
		return { nodeClass: 'pending', icon: false, text: '处理中', tagClass: 'pending' };
	});

	function getCGBJtcyStatusText(s) {
		return { 0: '暂存', 1: '待审核', 2: '已通过', 3: '已驳回' }[s] || '未知';
	}
	function getDkStatusText(s) {
		return {
			0: '暂存', 1: '待审核', 2: '待调查员审核',
			3: '已通过', 4: '已驳回'
		}[s] || '未知';
	}

	function getCGBJtcyStatusClass(s) {
		return { 0: 'wait', 1: 'wait', 2: 'pass', 3: 'reject' }[s] || '';
	}
	function getDkStatusClass(s) {
		return { 0: 'wait', 1: 'wait', 2: 'wait', 3: 'pass', 4: 'reject' }[s] || '';
	}
	function getCGBDkStatusClass(s) {
		return { 0: 'wait', 1: 'wait', 2: 'progress', 3: 'pass', 4: 'reject' }[s] || '';
	}

	async function getCbfdkNumberData(cbfbm) {
		uni.showLoading({ title: '加载中...' });
		try {
			const res = await getCbfdkxxNumberData({ cbfbm });
			dkNumber.value = res.data?.length || 0;
		} catch (e) {
			uni.showToast({ title: '加载失败', icon: 'none' });
		} finally {
			uni.hideLoading();
		}
	}

	const handleStepBtn = (t) => {
		if (t === '查看签名') uni.showModal({ title: '签名详情', content: '展示电子签名', showCancel: false });
	};

	const handleActionBtn = () => {
		if (hasRejected.value) {
			uni.navigateTo({
				url: `/pages/Escalation/index?groupInfo=${encodeURIComponent(JSON.stringify(cbfInfo.value))}`
			});
		} else {
			uni.navigateTo({
				url: `/pages/investigator/Households/currentDetails?groupInfo=${encodeURIComponent(JSON.stringify(cbfInfo.value))}`
			});
		}
	};
</script>

<style scoped>
	/* 全局容器 */
	.page-container {
		padding: 20rpx;
		background: #f7f8fa;
		/* min-height: 100vh;
		padding-bottom: 140rpx; */
	}

	/* 卡片风格 */
	.card {
		background: #fff;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.card-header {
		margin-bottom: 28rpx;
	}

	.card-title {
		font-size: 34rpx;
		font-weight: 700;
		color: #1d2129;
	}

	/* 承包信息 */
	.info-grid {
		gap: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 0;
		border-bottom: 1rpx solid #f2f3f5;
	}

	.info-row-group {
		display: flex;
		justify-content: space-between;
		padding-top: 12rpx;
	}

	.info-col {
		flex: 1;
	}

	.info-label {
		font-size: 26rpx;
		color: #86909c;
		margin-bottom: 6rpx;
	}

	.info-value {
		font-size: 30rpx;
		color: #1d2129;
		font-weight: 500;
	}

	/* 进度流程 */
	.progress-container {
		position: relative;
	}

	.progress-step {
		display: flex;
		margin-bottom: 48rpx;
		position: relative;
	}

	.step-node-box {
		margin-right: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.step-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		font-weight: bold;
		z-index: 10;
	}

	.step-node.done {
		background: #00b42a;
		color: #fff;
	}

	.step-node.pending {
		background: #f2f3f5;
		color: #999;
		border: 2rpx solid #dcdee0;
	}

	.step-node.reject {
		background: #ff3333;
		color: #fff;
	}

	.step-line {
		width: 3rpx;
		height: 100%;
		background: #e5e6eb;
		margin-top: 8rpx;
	}

	.step-line.done {
		background: #00b42a;
	}

	.step-content {
		flex: 1;
	}

	.step-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12rpx;
	}

	.step-name {
		font-size: 34rpx;
		font-weight: 600;
		color: #1d2129;
	}

	.step-tag {
		font-size: 24rpx;
		padding: 6rpx 18rpx;
		border-radius: 50rpx;
		font-weight: 500;
	}

	.step-tag.done {
		background: #e8ffef;
		color: #00b42a;
	}

	.step-tag.pending {
		background: #f7f8fa;
		color: #666;
	}

	.step-tag.reject {
		background: #fff1f0;
		color: #ff3333;
	}

	.step-desc {
		font-size: 26rpx;
		color: #888;
		margin-bottom: 16rpx;
	}

	.view-sign-btn {
		background: #f2f3f5;
		color: #333;
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		border-radius: 12rpx;
		border: none;
		line-height: 1.2;
	}

	/* 子项组 */
	.item-group {
		background: #f9fafc;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.group-title {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
		margin-bottom: 16rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14rpx 0;
		font-size: 26rpx;
		color: #333;
		border-bottom: 1rpx solid #eaf0fa;
	}

	.item:last-child {
		border-bottom: none;
	}

	.item-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	/* 状态色 */
	.pass {
		color: #00b42a;
		font-weight: 600;
	}

	.wait {
		color: #ff7d00;
		font-weight: 600;
	}

	.progress {
		color: #1677ff;
		font-weight: 600;
	}

	.reject {
		color: #ff3333;
		font-weight: 600;
	}

	/* 底部按钮 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: #fff;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.action-btn {
		width: 100%;
		height: 88rpx;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
		border: none;
	}

	.normal-btn {
		background: #1677ff;
	}

	.reject-btn {
		background: #ff3333;
	}
</style>