LandSurveyApplet/pages/investigator/Households/detailsOfTheReport.vue

<template>
	<view class="page-container">
		<!-- 变更摘要头部 -->
		<view class="summary-header">
			<text class="summary-title">变更摘要</text>
		</view>

		<!-- 变更简述 -->
		<view class="change-brief">
			新增1名家庭成员,修改户信息,新增2块地
		</view>

		<!-- 变更内容模块（可收起/展开） -->
		<view class="change-content-card">
			<view class="module-header" @click="toggleChangeContent">
				<text class="module-title">变更内容</text>
				<text class="toggle-icon">{{ contentExpand ? "∨ 收起" : "∧ 收起" }}</text>
			</view>
			<view class="module-body" v-if="contentExpand">
				<text class="change-item">新增1名家庭成员: [丁爱兰]</text>
				<text class="change-item">
					承包方地址从<span class="old-val">null</span>变更为
					<text class="link-text">湘乡市望春门街道桑枣社区一组</text>
				</text>
				<text class="change-item">
					承包方联系电话从<span class="old-val">无</span>变更为[13762226769]
				</text>
				<text class="change-item">
					新增地块[00003糯泗四亩1.84亩]
				</text>
				<text class="change-item">
					新增地块[00011糯泗四亩1.66亩]
				</text>
			</view>
		</view>

		<!-- 基本信息模块 -->
		<view class="info-module">
			<text class="module-title">基本信息</text>
			<view class="info-item">
				<text class="label">承包方姓名<text class="required">*</text></text>
				<text class="value">王战伟</text>
			</view>
			<view class="info-item">
				<text class="label">承包方编码</text>
				<text class="value">430381001004001001</text>
			</view>
			<view class="info-item">
				<text class="label">证件类型<text class="required">*</text></text>
				<text class="value">居民身份证</text>
			</view>
			<view class="info-item">
				<text class="label">证件号码<text class="required">*</text></text>
				<text class="value">430322**********1015</text>
				<text class="eye-icon">👁️</text>
			</view>
			<view class="info-item">
				<text class="label">承包方类型<text class="required">*</text></text>
				<text class="value">农户</text>
			</view>
			<view class="info-item">
				<text class="label">联系电话<text class="changed-tag">变更</text></text>
				<text class="value changed-val">13762226769</text>
			</view>
			<view class="info-item">
				<text class="label">邮政编码</text>
				<text class="value">暂无</text>
			</view>
			<view class="info-item">
				<text class="label">承包方地址<text class="changed-tag">变更</text></text>
				<text class="value">湘乡市望春门街道桑枣社区一组</text>
			</view>
		</view>

		<!-- 家庭成员模块（可收起/展开） -->
		<view class="member-module">
			<view class="module-header" @click="toggleMember">
				<text class="module-title">家庭成员</text>
				<text class="toggle-icon">{{ memberExpand ? "∨ 收起" : "∧ 收起" }}</text>
			</view>
			<view class="module-body" v-if="memberExpand">
				<text class="content-desc">家庭成员信息（1）</text>
				<view class="member-item" @click="familyMembersPage()">
					<view class="member-info">
						<text class="member-name">王战伟</text>
						<text class="member-role">男 户主</text>
						<text class="changed-val">99</text>
					</view>
					<text class="member-id changed-val">430322**********1015</text>
					<text class="arrow-icon">→</text>
				</view>
			</view>
		</view>

		<!-- 地块信息模块（可收起/展开） -->
		<view class="land-module">
			<view class="module-header" @click="toggleLand">
				<text class="module-title">地块信息</text>
				<text class="toggle-icon">{{ landExpand ? "∨ 收起" : "∧ 收起" }}</text>
			</view>
			<view class="module-body" v-if="landExpand">
				<view class="land-desc">
					<text>地块信息（2块 共3.5亩）</text>
					<text class="all-location" @click="handleLocation()">全部地块位置</text>
				</view>
				<view class="land-item">
					<text class="land-code">00003</text>
					<text class="land-area">糯泗四亩1.84亩</text>
					<text class="location-tag" @click="handleLocation()">地块位置</text>
					<view class="" @click="plotDetailsPage()">
						<view class="land-boundary changed-val">
							<text>地块东至:田埂</text>
							<text>地块西至:王战克</text>
						</view>
						<view class="land-boundary changed-val">
							<text>地块南至:道路</text>
							<text>地块北至:道路</text>
						</view>
						<text class="arrow-icon">→</text>
					</view>
				</view>
				<view class="land-item">
					<text class="land-code">00011</text>
					<text class="land-area">糯泗四亩1.66亩</text>
					<text class="location-tag" @click="handleLocation()">地块位置</text>
					<view class="" @click="plotDetailsPage()">
						<view class="land-boundary changed-val">
							<text>地块东至:房屋</text>
							<text>地块西至:王立冬</text>
						</view>
						<view class="land-boundary changed-val">
							<text>地块南至:道路</text>
							<text>地块北至:王奥</text>
						</view>
						<text class="arrow-icon">→</text>
					</view>
				</view>
				<text class="remark changed-val">备注:分为两块,一块0.4,一块0.2</text>
			</view>
		</view>

		<!-- 附件信息模块（可收起/展开） -->
		<view class="attach-module">
			<view class="module-header" @click="toggleAttach">
				<text class="module-title">附件信息</text>
				<text class="toggle-icon">{{ attachExpand ? "∨ 收起" : "∧ 收起" }}</text>
			</view>
			<view class="module-body" v-if="attachExpand">
				<view class="info-item">
					<text class="label">备注说明</text>
					<text class="value">暂无</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 控制模块展开/收起
	const contentExpand = ref(true);
	const memberExpand = ref(true);
	const landExpand = ref(true);
	const attachExpand = ref(true);

	// 切换变更内容展开状态
	const toggleChangeContent = () => {
		contentExpand.value = !contentExpand.value;
	};

	// 切换家庭成员展开状态
	const toggleMember = () => {
		memberExpand.value = !memberExpand.value;
	};

	// 切换地块信息展开状态
	const toggleLand = () => {
		landExpand.value = !landExpand.value;
	};

	// 切换附件信息展开状态
	const toggleAttach = () => {
		attachExpand.value = !attachExpand.value;
	};

	const familyMembersPage = () => {
		uni.navigateTo({
			url: `/pages/investigator/Households/familyMembers`
		})
	}


	// 地块位置点击事件
	const handleLocation = (item) => {
		uni.navigateTo({
			url: `/pages/map/map`
		});
	};

	const plotDetailsPage = () => {
		uni.navigateTo({
			url: `/pages/investigator/Households/plotDetails`
		});
	}
</script>

<style scoped>
	/* 页面容器 */
	.page-container {
		padding: 24rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 变更摘要头部 */
	.summary-header {
		margin-bottom: 16rpx;
	}

	.summary-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1d2129;
	}

	/* 变更简述 */
	.change-brief {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #1d2129;
		margin-bottom: 20rpx;
	}

	/* 通用模块样式 */
	.change-content-card,
	.info-module,
	.member-module,
	.land-module,
	.attach-module {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	/* 模块头部（可点击） */
	.module-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.module-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #1d2129;
	}

	.toggle-icon {
		font-size: 24rpx;
		color: #86909c;
	}

	/* 模块内容区 */
	.module-body {
		padding: 24rpx;
	}

	/* 变更内容项 */
	.change-item {
		display: block;
		font-size: 28rpx;
		color: #1d2129;
		margin-bottom: 16rpx;
	}

	.change-item:last-child {
		margin-bottom: 0;
	}

	.old-val {
		color: #86909c;
		text-decoration: line-through;
	}

	.link-text {
		color: #1677ff;
		text-decoration: underline;
	}

	/* 信息项通用样式 */
	.info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 24rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

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

	.label {
		font-size: 28rpx;
		color: #86909c;
	}

	.required {
		color: #ff4d4f;
		margin-left: 4rpx;
	}

	.value {
		font-size: 28rpx;
		color: #1d2129;
		text-align: right;
	}

	.eye-icon {
		font-size: 28rpx;
		margin-left: 12rpx;
		color: #86909c;
	}

	.changed-tag {
		font-size: 22rpx;
		color: #ff4d4f;
		margin-left: 8rpx;
	}

	.changed-val {
		color: #ff4d4f;
	}

	/* 家庭成员项 */
	.content-desc {
		font-size: 24rpx;
		color: #86909c;
		margin-bottom: 20rpx;
		display: block;
	}

	.member-item {
		display: flex;
		flex-direction: column;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		position: relative;
	}

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

	.member-info {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.member-name {
		font-size: 28rpx;
		color: #1d2129;
		margin-right: 16rpx;
	}

	.member-role {
		font-size: 24rpx;
		color: #86909c;
		margin-right: 16rpx;
	}

	.new-tag {
		font-size: 22rpx;
		color: #ff4d4f;
	}

	.member-id {
		font-size: 24rpx;
		color: #86909c;
	}

	.arrow-icon {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 24rpx;
		color: #86909c;
	}

	/* 地块信息项 */
	.land-desc {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.all-location {
		font-size: 24rpx;
		color: #1677ff;
	}

	.land-item {
		display: flex;
		flex-direction: column;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		position: relative;
	}

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

	.land-code {
		font-size: 28rpx;
		color: #1d2129;
		margin-right: 16rpx;
	}

	.land-area {
		font-size: 28rpx;
		color: #1d2129;
	}

	.location-tag {
		font-size: 22rpx;
		color: #fff;
		background-color: #1677ff;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}

	.land-boundary {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		margin-top: 8rpx;
	}

	.remark {
		font-size: 24rpx;
		margin-top: 20rpx;
		display: block;
	}
</style>