跟新调查员部分页面

src/manifest.json

@@ -1,6 +1,6 @@
 {
     "name" : "",
-    "appid" : "",
+    "appid" : "__UNI__B3D47F0",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",
@@ -65,8 +65,8 @@
     "mp-toutiao" : {
         "usingComponents" : true
     },
-    "uniStatistics": {  
-        "enable": false
+    "uniStatistics" : {
+        "enable" : false
     },
     "vueVersion" : "3"
 }

src/pages.json

@@ -95,6 +95,97 @@
         "navigationBarTitleText": "调查员"
       }
     },
+	{
+	  "path": "pages/investigator/Households/index",
+	  "style": {
+	    "navigationBarTitleText": "总户数"
+	  }
+	},
+	{
+	  "path": "pages/investigator/Households/progress",
+	  "style": {
+	    "navigationBarTitleText": "进度详情"
+	  }
+	},
+	{
+	  "path": "pages/investigator/Households/currentDetails",
+	  "style": {
+	    "navigationBarTitleText": "查看当前详情"
+	  }
+	},
+	{
+	  "path": "pages/investigator/Households/detailsOfTheReport",
+	  "style": {
+	    "navigationBarTitleText": "查看上报详情"
+	  }
+	},
+	{
+	  "path": "pages/investigator/Households/familyMembers",
+	  "style": {
+	    "navigationBarTitleText": "家庭成员详情"
+	  }
+	},
+	{
+	  "path": "pages/investigator/Households/plotDetails",
+	  "style": {
+	    "navigationBarTitleText": "地块详情"
+	  }
+	},
+	{
+	  "path": "pages/investigator/employerModule/index",
+	  "style": {
+	    "navigationBarTitleText": ""
+	  }
+	},
+	
+	{
+	  "path": "pages/investigator/employerModule/twoRoundExtension",
+	  "style": {
+	    "navigationBarTitleText": "二轮延包"
+	  }
+	},
+	// {
+	//   "path": "pages/investigator/employerModule/notStarted",
+	//   "style": {
+	//     "navigationBarTitleText": "未开始"
+	//   }
+	// },
+	// {
+	//   "path": "pages/investigator/employerModule/underInvestigation",
+	//   "style": {
+	//     "navigationBarTitleText": "摸底中"
+	//   }
+	// },
+	// {
+	//   "path": "pages/investigator/employerModule/underPublicity",
+	//   "style": {
+	//     "navigationBarTitleText": "公示中"
+	//   }
+	// },
+	{
+	  "path": "pages/map/map",
+	  "style": {
+	    "navigationBarTitleText": "位置信息"
+	  }
+	},
+	{
+	  "path": "pages/map/collectively/index",
+	  "style": {
+	    "navigationBarTitleText": "集体地"
+	  }
+	},
+	{
+	  "path": "pages/map/collectively/add",
+	  "style": {
+	    "navigationBarTitleText": "新增集体地"
+	  }
+	},
+	{
+	  "path": "pages/map/collectively/information",
+	  "style": {
+	    "navigationBarTitleText": "集体地详情"
+	  }
+	},
     {
       "path": "pages/official/index",
       "style": {
@@ -106,7 +197,25 @@
       "style": {
         "navigationBarTitleText": "测试"
       }
-    }
+    },
+	{
+	  "path": "pages/task/index",
+	  "style": {
+	    "navigationBarTitleText": "任务列表"
+	  }
+	},
+	{
+	  "path": "pages/EntryPage/backstageAdd",
+	  "style": {
+	    "navigationBarTitleText": "后台录入"
+	  }
+	},
+	{
+	  "path": "pages/EntryPage/manualAdd",
+	  "style": {
+	    "navigationBarTitleText": "手动录入"
+	  }
+	}
   ],
   "globalStyle": {
     "navigationBarTextStyle": "black",

src/pages/EntryPage/backstageAdd.vue

@@ -0,0 +1,142 @@
+<template>
+  <view class="page-container">
+    <!-- 信息描述区域 -->
+    <view class="form-item">
+      <text class="label">信息描述</text>
+      <textarea 
+        class="textarea" 
+        placeholder="请在此输入新增承包方信息描述"
+        v-model="infoDesc"
+        maxlength="200"
+      ></textarea>
+    </view>
+
+    <!-- 图片信息区域 -->
+    <view class="form-item">
+      <text class="label">图片信息</text>
+      <view class="sub-label">
+        <text>证明材料</text>
+        <text class="required">*</text>
+      </view>
+      <!-- 图片上传区域 -->
+      <view class="upload-area" @click="chooseImage">
+      </view>
+    </view>
+
+    <!-- 确认按钮 -->
+    <button class="confirm-btn" @click="handleConfirm">确认</button>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 信息描述内容
+const infoDesc = ref('');
+// 上传的图片地址
+const imageUrl = ref('');
+
+// 选择图片（uni-app上传API）
+const chooseImage = () => {
+  uni.chooseImage({
+    count: 1, // 仅允许选择1张
+    sizeType: ['original', 'compressed'],
+    sourceType: ['album', 'camera'],
+    success: (res) => {
+      // 临时文件路径，实际项目中需上传到服务器获取正式地址
+      imageUrl.value = res.tempFilePaths[0];
+    },
+    fail: (err) => {
+      uni.showToast({ title: '选择图片失败', icon: 'none' });
+    }
+  });
+};
+
+// 确认按钮点击事件
+const handleConfirm = () => {
+  // 表单校验 
+  if (!infoDesc.value.trim()) {
+    return uni.showToast({ title: '请填写信息描述', icon: 'none' });
+  }
+  if (!imageUrl.value) {
+    return uni.showToast({ title: '请上传证明材料', icon: 'none' });
+  }
+
+  // 实际项目中提交表单数据到接口
+  console.log('提交数据：', {
+    infoDesc: infoDesc.value,
+    imageUrl: imageUrl.value
+  });
+  uni.showToast({ title: '提交成功', icon: 'success' });
+  // 提交后返回上一页
+  setTimeout(() => {
+    uni.navigateBack();
+  }, 1500);
+};
+</script>
+
+<style scoped>
+.page-container {
+  padding: 20rpx;
+  background-color: #fff;
+  min-height: 100vh;
+}
+
+.form-item {
+  margin-bottom: 40rpx;
+}
+
+.label {
+  font-size: 32rpx;
+  color: #333;
+  margin-bottom: 10rpx;
+  display: block;
+}
+
+.sub-label {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 15rpx;
+  display: flex;
+  align-items: center;
+}
+.required {
+  color: #ff3333;
+  margin-left: 5rpx;
+}
+
+.textarea {
+  width: 100%;
+  min-height: 150rpx;
+  border: 1px solid #e5e5e5;
+  border-radius: 8rpx;
+  padding: 15rpx;
+  font-size: 28rpx;
+  color: #333;
+  box-sizing: border-box;
+}
+
+.upload-area {
+  width: 120rpx;
+  height: 120rpx;
+  border: 1px dashed #e5e5e5;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.upload-img {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.confirm-btn {
+  width: 100%;
+  height: 80rpx;
+  background-color: #2c83ff;
+  color: #fff;
+  font-size: 32rpx;
+  border-radius: 8rpx;
+  margin-top: 60rpx;
+}
+</style>

src/pages/EntryPage/manualAdd.vue

@@ -0,0 +1,96 @@
+<template>
+	<!-- 弹窗主体 -->
+	<view class="popup-box">
+		<!-- 表单区域 -->
+		<view class="form-item">
+			<text class="label">姓名：</text>
+			<input v-model="form.name" class="input" placeholder="请填写承包方姓名" type="text" />
+		</view>
+		<view class="form-item">
+			<text class="label">身份证号码：</text>
+			<input v-model="form.idCard" class="input" placeholder="请填写承包方身份证号码" type="number" maxlength="18" />
+		</view>
+		<!-- 按钮区域 -->
+		<view class="btn-group">
+			<button class="cancel-btn" @click="handleCancel">取消</button>
+			<button class="confirm-btn" @click="handleConfirm">确定</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+	// 表单数据
+	const form = ref({
+		name: '',
+		idCard: ''
+	});
+
+
+	// 点击确定按钮（校验+传参）
+	const handleConfirm = () => {
+	};
+</script>
+
+<style scoped>
+	/* 弹窗主体 */
+	.popup-box {
+		background: #fff;
+		border-radius: 12rpx;
+		z-index: 9999;
+		overflow: hidden;
+	}
+
+	/* 表单项 */
+	.form-item {
+		padding: 20rpx 24rpx;
+		display: flex;
+		flex-direction: column;
+		gap: 8rpx;
+	}
+
+	.label {
+		font-size: 28rpx;
+		color: #333;
+	}
+
+	.input {
+		width: 100%;
+		height: 60rpx;
+		padding: 0 16rpx;
+		border: 1rpx solid #ddd;
+		border-radius: 8rpx;
+		font-size: 28rpx;
+		box-sizing: border-box;
+	}
+
+	/* 按钮组 */
+	.btn-group {
+		display: flex;
+		border-top: 1rpx solid #eee;
+	}
+
+	.cancel-btn,
+	.confirm-btn {
+		flex: 1;
+		height: 80rpx;
+		line-height: 80rpx;
+		text-align: center;
+		font-size: 32rpx;
+		border: none;
+		background: none;
+	}
+
+	.cancel-btn {
+		color: #666;
+		border-right: 1rpx solid #eee;
+	}
+
+	.confirm-btn {
+		color: #fff;
+		background-color: #1677ff;
+		/* 截图中的蓝色按钮 */
+	}
+</style>

src/pages/index/index.vue

@@ -1,9 +1,9 @@
 <template>
 <!--  <view class="w-full h-[100rpx] bg-[#f5f5f5] flex items-center justify-center" @click="navigateToTest">进入测试页面</view>-->
-  <view class="flex flex-col items-center justify-start bg-[#f5f5f5]">
+  <view class="flex flex-col items-center justify-start bg-[#f5f5f5] p-[20rpx]">
 
     <!-- 轮播图 -->
-    <swiper class="w-full h-[300rpx] mb-[20rpx]" :indicator-dots="true" :autoplay="true" interval="3000" duration="500"
+    <swiper class="w-full h-[400rpx] mb-[20rpx]" :indicator-dots="true" :autoplay="true" interval="5000" duration="500"
             :circular="true">
       <swiper-item v-for="(item, index) in bannerList" :key="index">
         <image :src="item.imageUrl" class="w-full object-contain" mode="aspectFill" />
@@ -11,39 +11,39 @@
     </swiper>
 
     <!-- 三个图标 -->
-    <view class="flex justify-around w-full py-[20rpx] bg-white rounded-[12rpx] mb-[20rpx]">
+    <view class="flex justify-around w-full py-[20rpx] bg-white rounded-[12rpx] mb-[20rpx] mr-[10rpx] ml-[10rpx]">
       <view class="flex flex-col items-center p-[20rpx] w-[200rpx] text-center" @click="handleIconClick('farmer')">
         <view class="w-[80rpx] h-[80rpx] rounded-full bg-#FFF1E0 flex items-center justify-center shadow">
           <image src="/static/icon/farmer.png" class="w-[48rpx] h-[48rpx]" />
         </view>
-        <text class="mt-[10rpx] text-[28rpx] text-[#333]">我是农户</text>
+        <text class="mt-[30rpx] text-[28rpx] text-[#333]">我是农户</text>
       </view>
 
       <view class="flex flex-col items-center p-[20rpx] w-[200rpx] text-center" @click="handleIconClick('investigator')">
         <view class="w-[80rpx] h-[80rpx] rounded-full bg-#FFE4E0 flex items-center justify-center shadow">
           <image src="/static/icon/investigator.png" class="w-[48rpx] h-[48rpx]" />
         </view>
-        <text class="mt-[10rpx] text-[28rpx] text-[#333]">我是调查员</text>
+        <text class="mt-[30rpx] text-[28rpx] text-[#333]">我是调查员</text>
       </view>
 
       <view class="flex flex-col items-center p-[20rpx] w-[200rpx] text-center" @click="handleIconClick('official')">
         <view class="w-[80rpx] h-[80rpx] rounded-full bg-#E3E3FF flex items-center justify-center shadow">
           <image src="/static/icon/official.png" class="w-[48rpx] h-[48rpx]" />
         </view>
-        <text class="mt-[10rpx] text-[28rpx] text-[#333]">我是村干部</text>
+        <text class="mt-[30rpx] text-[28rpx] text-[#333]">我是村干部</text>
       </view>
     </view>
 
     <!-- 新闻 -->
-    <view class="w-full bg-white rounded-[12rpx] py-[20rpx]">
-      <view class="text-[32rpx] font-bold text-[#333] mb-[20rpx]">新闻政策</view>
+    <view class="w-full rounded-[12rpx] py-[20rpx]">
+      <view class="text-[32rpx] font-bold text-[#333] mb-[30rpx]">新闻政策</view>
 
       <view class="flex flex-col gap-[20rpx]">
-        <view v-for="(news, index) in newsList" :key="index" class="flex bg-white rounded-[12rpx] overflow-hidden shadow" @click="toDetail(news)">
+        <view v-for="(news, index) in newsList" :key="index" class="flex bg-white rounded-[12rpx] overflow-hidden shadow p-[10rpx]" @click="toDetail(news)">
           <view class="flex-1 p-[20rpx] flex flex-col justify-between">
-            <text class="text-[28rpx] text-[#333] leading-snug mb-[10rpx]">{{ news.title }}</text>
-            <text class="text-[24rpx] text-[#666] mb-[10rpx]">{{ news.time }}</text>
-            <view class="flex items-center text-[24rpx] text-[#666]">
+            <text class="text-[30rpx] text-[#333] leading-snug mb-[20rpx] font-bold">{{ news.title }}</text>
+            <text class="text-[24rpx] text-[#666] mb-[20rpx]">{{ news.time }}</text>
+            <view class="flex items-center text-[28rpx] text-[#666]">
               <view class="text-[#007aff] mr-[10rpx]">{{ news.source }}</view>
               <view class="ml-[10rpx] flex items-center">
                 <image src="/static/icon/eye.png" class="w-[36rpx] h-[36rpx]" />
@@ -51,8 +51,7 @@
               </view>
             </view>
           </view>
-<!--          <image :src="news.image" class="w-[180rpx] h-[120rpx]" mode="aspectFill" />-->
-          <div class="bg-blue w-[180rpx] h-190rpx my-5rpx"></div>
+         <image :src="news.image" class="w-[190rpx] h-[190rpx] p-[10rpx]" mode="aspectFill" />
         </view>
       </view>
     </view>
@@ -73,13 +72,13 @@ const navigateToTest = () => {
 // 轮播图数据
 const bannerList = ref([
   {
-    imageUrl: '/static/banner/banner1.png'
+    imageUrl: '/static/banner/19.png'
   },
   {
-    imageUrl: '/static/banner/banner2.png'
+    imageUrl: '/static/banner/20.png'
   },
   {
-    imageUrl: '/static/banner/banner3.png'
+    imageUrl: '/static/banner/21.png'
   }
 ])
 
@@ -90,7 +89,7 @@ const newsList = ref([
     time: '2025-08-19 18:02:55',
     source: '实时新闻',
     views: 29771,
-    image: '/static/news/news1.jpg',
+    image: '/static/news/news1.png',
     content: '湖南省第二轮planting到期后再延长30年政策问题解答（1）'
   },
   {
@@ -98,7 +97,7 @@ const newsList = ref([
     time: '2025-08-19 18:01:53',
     source: '实时新闻',
     views: 15643,
-    image: '/static/news/news2.jpg',
+    image: '/static/news/news2.png',
     content: '农业农村部：稳妥推进第二轮土地承包到期后再延长30年试点'
   },
   {
@@ -106,7 +105,7 @@ const newsList = ref([
     time: '2025-08-18 16:30:22',
     source: '政策发布',
     views: 8921,
-    image: '/static/news/news3.jpg',
+    image: '/static/news/news3.png',
     content: '关于加强农村土地流转管理的通知'
   },
   {
@@ -114,7 +113,7 @@ const newsList = ref([
     time: '2025-08-17 14:25:11',
     source: '专题报道',
     views: 12345,
-    image: '/static/news/news4.jpg',
+    image: '/static/news/news1.png',
     content: '<p style="color: red">乡村振兴战略实施情况报告</p>'
   }
 ])

src/pages/investigator/Households/currentDetails.vue

@@ -0,0 +1,358 @@
+<template>
+	<view class="page-container">
+		<!-- 顶部标题栏 -->
+		<view class="page-title">基本信息</view>
+
+		<!-- 基本信息表单区 -->
+		<view class="form-card">
+			<view class="form-item">
+				<text class="label">承包方姓名<text class="required">*</text></text>
+				<text class="value">王战伟</text>
+			</view>
+			<view class="form-item">
+				<text class="label">证件类型<text class="required">*</text></text>
+				<text class="value">居民身份证</text>
+			</view>
+			<view class="form-item">
+				<text class="label">证件号码<text class="required">*</text></text>
+				<text class="value">430322**********1015</text>
+				<text class="eye-icon">👁️</text>
+			</view>
+			<view class="form-item">
+				<text class="label">承包方类型<text class="required">*</text></text>
+				<text class="value">农户</text>
+			</view>
+			<view class="form-item">
+				<text class="label">联系电话</text>
+				<text class="value">13762226769</text>
+			</view>
+			<view class="form-item">
+				<text class="label">邮政编码</text>
+				<text class="value">411100</text>
+			</view>
+			<view class="form-item">
+				<text class="label">承包方地址<text class="required">*</text></text>
+				<text class="value">湘乡市望春门街道桑枣社区一村民小组</text>
+			</view>
+		</view>
+
+		<!-- 家庭成员模块（可收起/展开） -->
+		<view class="module-card">
+			<view class="module-header" @click="toggleFamily">
+				<text class="module-title">家庭成员</text>
+				<text class="toggle-icon">{{ familyExpand ? "∨ 收起" : "∧ 收起" }}</text>
+			</view>
+			<view class="module-content" v-if="familyExpand">
+				<text class="content-desc">家庭成员信息（2）</text>
+				<view class="member-item" @click="gotoMemberDetail">
+					<view class="member-info">
+						<text class="member-name">王战伟</text>
+						<text class="member-role">男 户主</text>
+					</view>
+					<text class="member-id">430322**********1015</text>
+					<text class="arrow-icon">→</text>
+				</view>
+				<view class="member-item" @click="gotoMemberDetail">
+					<view class="member-info">
+						<text class="member-name">丁爱兰</text>
+						<text class="member-role">女 配偶</text>
+					</view>
+					<text class="member-id">430322**********1020</text>
+					<text class="arrow-icon">→</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 地块信息模块（可收起/展开） -->
+		<view class="module-card">
+			<view class="module-header" @click="toggleLand">
+				<text class="module-title">地块信息</text>
+				<text class="toggle-icon">{{ landExpand ? "∨ 收起" : "∧ 收起" }}</text>
+			</view>
+			<view class="module-content" v-if="landExpand">
+				<view class="land-desc">
+					<text>地块信息（2块共3.50亩）</text>
+					<text class="all-location" @click="gotoLandDetail()">全部地块位置</text>
+				</view>
+				<view class="land-item">
+					<text class="land-code">00003</text>
+					<text class="land-area">糯泗四亩 1.84亩</text>
+					<text class="location-tag" @click="gotoLandDetail()">地块位置</text>
+					<view class="" @click="plotDetailsPage()">
+						<view class="land-boundary">
+							<text>地块东至:田埂</text>
+							<text>地块西至:王战克</text>
+						</view>
+						<view class="land-boundary">
+							<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="gotoLandDetail()">地块位置</text>
+					<view class="" @click="plotDetailsPage()">
+						<view class="land-boundary">
+							<text>地块东至:桑枣村水田</text>
+							<text>地块西至:王奥</text>
+						</view>
+						<view class="land-boundary">
+							<text>地块南至:田埂</text>
+							<text>地块北至:王奥</text>
+						</view>
+						<text class="arrow-icon">→</text>
+					</view>
+				</view>
+				<text class="remark">备注:分为两块,一块0.4,一块0.2</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+
+	// 控制模块展开/收起
+	const familyExpand = ref(true);
+	const landExpand = ref(true);
+
+	// 切换家庭成员展开状态
+	const toggleFamily = () => {
+		familyExpand.value = !familyExpand.value;
+	};
+
+	// 切换地块信息展开状态
+	const toggleLand = () => {
+		landExpand.value = !landExpand.value;
+	};
+
+	// 跳转成员详情（模拟）
+	const gotoMemberDetail = () => {
+		uni.navigateTo({
+			url: '/pages/investigator/Households/familyMembers'
+		});
+	};
+
+	// 跳转地块详情（模拟）
+	const gotoLandDetail = () => {
+		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;
+	}
+
+	/* 页面标题 */
+	.page-title {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #1d2129;
+		margin-bottom: 20rpx;
+	}
+
+	/* 表单卡片 */
+	.form-card {
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		margin-bottom: 20rpx;
+	}
+
+	/* 表单项 */
+	.form-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 16rpx 0;
+		border-bottom: 1rpx solid #f5f5f5;
+	}
+
+	.form-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;
+	}
+
+	/* 模块卡片（家庭成员/地块信息） */
+	.module-card {
+		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-content {
+		padding: 24rpx;
+	}
+
+	.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;
+	}
+
+	.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;
+		color: #86909c;
+		margin-top: 8rpx;
+	}
+
+	.remark {
+		font-size: 24rpx;
+		color: #86909c;
+		margin-top: 20rpx;
+		display: block;
+	}
+</style>

src/pages/investigator/Households/detailsOfTheReport.vue

@@ -0,0 +1,458 @@
+<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>

src/pages/investigator/Households/familyMembers.vue

@@ -0,0 +1,170 @@
+<template>
+  <view class="page-container">
+    <!-- 页面标题 -->
+    <view class="page-title">基本信息</view>
+
+    <!-- 基本信息表单区 -->
+    <view class="form-card">
+      <view class="form-item">
+        <text class="label">承包方姓名<text class="required">*</text></text>
+        <text class="value">王战伟</text>
+      </view>
+      <view class="form-item">
+        <text class="label">证件类型<text class="required">*</text></text>
+        <text class="value">居民身份证</text>
+      </view>
+      <view class="form-item">
+        <text class="label">证件号码<text class="required">*</text></text>
+        <text class="value">430322**********1015</text>
+        <text class="eye-icon">👁️</text>
+      </view>
+      <view class="form-item">
+        <text class="label">成员性别<text class="required">*</text></text>
+        <text class="value">男</text>
+      </view>
+      <view class="form-item">
+        <text class="label">与户主关系<text class="required">*</text></text>
+        <text class="value">户主</text>
+      </view>
+      <view class="form-item">
+        <text class="label">联系电话</text>
+        <text class="value">暂无</text>
+      </view>
+      <view class="form-item">
+        <text class="label">成员备注</text>
+        <text class="value">暂无</text>
+      </view>
+    </view>
+
+    <!-- 图片信息区 -->
+    <view class="image-card">
+      <view class="image-title">
+        <text>图片信息</text>
+        <text class="required">*</text>
+      </view>
+      <view class="image-group">
+		  
+        <text class="image-label">证明材料</text>
+        <view class="image-list">
+          <!-- 身份证正面 -->
+          <!-- <image 
+            class="idcard-img" 
+            src="/static/idcard-front.png" 
+            mode="widthFix"
+            @click="previewImage('/static/idcard-front.png')"
+          ></image> -->
+          <!-- 身份证背面 -->
+          <!-- <image 
+            class="idcard-img" 
+            src="/static/idcard-back.png" 
+            mode="widthFix"
+            @click="previewImage('/static/idcard-back.png')"
+          ></image> -->
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 预览图片（uni-app原生API）
+const previewImage = (url) => {
+  uni.previewImage({
+    current: url,
+    urls: [url]
+  });
+};
+</script>
+
+<style scoped>
+/* 页面容器 */
+.page-container {
+  padding: 24rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+/* 页面标题 */
+.page-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #1d2129;
+  margin-bottom: 20rpx;
+}
+
+/* 表单卡片 */
+.form-card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+}
+
+/* 表单项 */
+.form-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16rpx 0;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+.form-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;
+}
+
+/* 图片信息卡片 */
+.image-card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+}
+
+/* 图片标题 */
+.image-title {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #1d2129;
+  margin-bottom: 20rpx;
+}
+
+/* 图片组 */
+.image-group {
+  margin-bottom: 16rpx;
+}
+.image-label {
+  font-size: 28rpx;
+  color: #86909c;
+  margin-bottom: 16rpx;
+  display: block;
+}
+.image-list {
+  display: flex;
+  gap: 20rpx;
+}
+.idcard-img {
+  width: 240rpx;
+  height: auto;
+  border-radius: 8rpx;
+  border: 1rpx solid #eee;
+}
+</style>

src/pages/investigator/Households/index.vue

@@ -0,0 +1,239 @@
+<template>
+  <view class="page-container">
+    <!-- 搜索栏 -->
+    <view class="search-bar">
+      <input 
+        v-model="searchKey" 
+        class="search-input" 
+        placeholder="请输入承包方姓名/身份证号"
+      />
+      <button class="search-btn" @click="handleSearch">搜索</button>
+    </view>
+
+    <!-- 数据统计 -->
+    <view class="total-count">
+      共计 {{ total }} 条
+    </view>
+
+    <!-- 列表区域 -->
+    <view class="list-container">
+      <!-- 列表项（循环渲染） -->
+      <view class="list-item" v-for="(item, index) in contractorList" :key="index" @click="progressPage()">
+        <!-- 姓名 + 状态标签 -->
+        <view class="item-header">
+          <text class="name">{{ item.name }}</text>
+          <view class="status-tag">
+            {{ item.status }}
+          </view>
+        </view>
+
+        <!-- 详情信息（一行多列） -->
+        <view class="item-info-row">
+          <view class="info-item">
+            <text class="label">身份证号：</text>
+            <text class="value">{{ item.idCard }}</text>
+          </view>
+        </view>
+        <view class="item-info-row">
+          <view class="info-item">
+            <text class="label">上报时间：</text>
+            <text class="value">{{ item.reportTime }}</text>
+          </view>
+        </view>
+        <view class="item-info-row">
+          <view class="info-item">
+            <text class="label">家庭人口：</text>
+            <text class="value">{{ item.familyCount }}</text>
+          </view>
+          <view class="info-item">
+            <text class="label">地块数量：</text>
+            <text class="value">{{ item.landCount }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+// 搜索关键词
+const searchKey = ref('');
+// 列表数据（模拟接口返回）
+const contractorList = ref([
+  {
+    name: '王战伟',
+    status: '已上报·审核通过',
+    idCard: '430322******1015',
+    reportTime: '2025-08-09 16:09:13',
+    familyCount: 2,
+    landCount: 2
+  },
+  {
+    name: '王战克',
+    status: '已上报·审核通过',
+    idCard: '430322******1032',
+    reportTime: '2025-07-09 16:20:55',
+    familyCount: 4,
+    landCount: 1
+  },
+  {
+    name: '王城埠',
+    status: '已上报·审核通过',
+    idCard: '430322******1019',
+    reportTime: '2025-07-09 16:25:02',
+    familyCount: 8,
+    landCount: 1
+  },
+  {
+    name: '王怀埠',
+    status: '已上报·审核通过',
+    idCard: '430322******1031',
+    reportTime: '2025-07-09 16:27:07',
+    familyCount: 2,
+    landCount: 1
+  },
+  {
+    name: '董庆林',
+    status: '已上报·审核通过',
+    idCard: '430322******1010',
+    reportTime: '2025-07-09 16:29:05',
+    familyCount: 3,
+    landCount: 1
+  },
+  {
+    name: '王立位',
+    status: '已上报·审核通过',
+    idCard: '430322******1014',
+    reportTime: '2025-07-09 16:30:03',
+    familyCount: 3,
+    landCount: 2
+  }
+]);
+// 总条数
+const total = ref(contractorList.value.length);
+
+// 页面加载时初始化（可替换为接口请求）
+onMounted(() => {
+  // 实际项目中这里调用接口获取列表数据
+  // getContractorList().then(res => {
+  //   contractorList.value = res.data;
+  //   total.value = res.total;
+  // });
+});
+
+// 搜索事件
+const handleSearch = () => {
+  // 实际项目中这里调用搜索接口
+  uni.showToast({
+    title: `搜索关键词：${searchKey.value}`,
+    icon: 'none'
+  });
+  // 模拟搜索（过滤本地数据）
+  // const filteredList = 原始数据.filter(item => 
+  //   item.name.includes(searchKey.value) || item.idCard.includes(searchKey.value)
+  // );
+  // contractorList.value = filteredList;
+  // total.value = filteredList.length;
+};
+
+const progressPage = () => {
+	uni.navigateTo({
+		url: `/pages/investigator/Households/progress`
+	})
+}
+</script>
+
+<style scoped>
+/* 页面容器 */
+.page-container {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+/* 搜索栏 */
+.search-bar {
+  display: flex;
+  gap: 16rpx;
+  margin-bottom: 20rpx;
+}
+.search-input {
+  flex: 1;
+  height: 68rpx;
+  padding: 0 20rpx;
+  border: 1rpx solid #ddd;
+  border-radius: 8rpx;
+  background-color: #fff;
+  font-size: 28rpx;
+}
+.search-btn {
+  width: 120rpx;
+  height: 68rpx;
+  line-height: 68rpx;
+  background-color: #1677ff;
+  color: #fff;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  text-align: center;
+}
+
+/* 总条数 */
+.total-count {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 20rpx;
+}
+
+/* 列表容器 */
+.list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+/* 列表项 */
+.list-item {
+  background-color: #fff;
+  border-radius: 8rpx;
+  padding: 20rpx;
+}
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+.name {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+}
+.status-tag {
+  font-size: 24rpx;
+  color: #1677ff;
+  background-color: #e6f0ff;
+  padding: 4rpx 12rpx;
+  border-radius: 4rpx;
+}
+
+/* 信息行 */
+.item-info-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+  margin-bottom: 12rpx;
+}
+.info-item {
+  display: flex;
+  font-size: 26rpx;
+}
+.label {
+  color: #999;
+  margin-right: 8rpx;
+}
+.value {
+  color: #333;
+}
+</style>

src/pages/investigator/Households/plotDetails.vue

@@ -0,0 +1,200 @@
+<template>
+  <view class="page-container">
+    <!-- 基本信息区域 -->
+    <view class="section-title">基本信息</view>
+    <view class="form-list">
+      <!-- 变更理由 -->
+      <view class="form-item">
+        <text class="label">变更理由*</text>
+        <text class="value">
+          <text class="new-tag">(新增:</text>
+          <text class="new-content">新增</text>
+        </text>
+      </view>
+
+      <!-- 地块编号 -->
+      <view class="form-item">
+        <text class="label">地块编号*</text>
+        <text class="value">4303810010040100003</text>
+      </view>
+
+      <!-- 地块名称 -->
+      <view class="form-item">
+        <text class="label">地块名称</text>
+        <text class="value">碓溏四亩</text>
+      </view>
+
+      <!-- 确权面积 -->
+      <view class="form-item">
+        <text class="label">确权面积*</text>
+        <text class="value">1.84 亩</text>
+      </view>
+
+      <!-- 所有权性质 -->
+      <view class="form-item">
+        <text class="label">所有权性质*</text>
+        <text class="value">集体土地所有权</text>
+      </view>
+
+      <!-- 地块类别 -->
+      <view class="form-item">
+        <text class="label">地块类别*</text>
+        <text class="value">承包地块</text>
+      </view>
+
+      <!-- 利用类型 -->
+      <view class="form-item">
+        <text class="label">利用类型*</text>
+        <text class="value">水田</text>
+      </view>
+
+      <!-- 地力等级 -->
+      <view class="form-item">
+        <text class="label">地力等级*</text>
+        <text class="value">七等地</text>
+      </view>
+
+      <!-- 土地用途 -->
+      <view class="form-item">
+        <text class="label">土地用途</text>
+        <text class="value">种植业</text>
+      </view>
+
+      <!-- 基本农田 -->
+      <view class="form-item">
+        <text class="label">基本农田*</text>
+        <text class="value">是</text>
+      </view>
+
+      <!-- 地块东至 -->
+      <view class="form-item">
+        <text class="label">地块东至*</text>
+        <text class="value">田埂</text>
+      </view>
+
+      <!-- 地块西至 -->
+      <view class="form-item">
+        <text class="label">地块西至*</text>
+        <text class="value">王战亮</text>
+      </view>
+
+      <!-- 地块南至 -->
+      <view class="form-item">
+        <text class="label">地块南至*</text>
+        <text class="value">道路</text>
+      </view>
+
+      <!-- 地块北至 -->
+      <view class="form-item">
+        <text class="label">地块北至*</text>
+        <text class="value">道路</text>
+      </view>
+
+      <!-- 范围选择 -->
+      <view class="form-item">
+        <text class="label">范围选择</text>
+        <text class="value link" @click="viewRange">查看地块大致范围 ></text>
+      </view>
+    </view>
+
+    <!-- 图片信息区域 -->
+    <view class="section-title">图片信息</view>
+    <view class="img-section">
+      <text class="img-label">证明材料</text>
+      <!-- <image class="img-preview" src="/static/plot-cert.jpg" mode="widthFix"></image> -->
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// 模拟查看范围的方法
+const viewRange = () => {
+  uni.navigateTo({
+    url: `/pages/map/map`
+  });
+}
+</script>
+
+<style scoped>
+.page-container {
+  padding: 16rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+/* 区域标题 */
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-bottom: 16rpx;
+  color: #333;
+}
+
+/* 表单列表 */
+.form-list {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 16rpx;
+  margin-bottom: 16rpx;
+}
+
+/* 表单项 */
+.form-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 18rpx 0;
+  border-bottom: 1px solid #eee;
+}
+.form-item:last-child {
+  border-bottom: none;
+}
+
+/* 标签样式 */
+.label {
+  font-size: 28rpx;
+  color: #666;
+}
+.label::after {
+  content: '';
+  color: #f00;
+  margin-left: 4rpx;
+}
+
+/* 值样式 */
+.value {
+  font-size: 28rpx;
+  color: #333;
+  text-align: right;
+}
+/* 新增标签样式 */
+.new-tag {
+  color: #f00;
+}
+.new-content {
+  color: #f00;
+}
+/* 链接样式 */
+.link {
+  color: #409eff;
+}
+
+/* 图片区域 */
+.img-section {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 16rpx;
+}
+.img-label {
+  font-size: 28rpx;
+  color: #666;
+  display: block;
+  margin-bottom: 12rpx;
+}
+.img-preview {
+  width: 100%;
+  border-radius: 8rpx;
+}
+</style>

src/pages/investigator/Households/progress.vue

@@ -0,0 +1,396 @@
+<template>
+	<view class="page-container">
+		<!-- 承包信息卡片 -->
+		<view class="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">王战伟</view>
+				</view>
+				<view class="info-row">
+					<view class="info-label">证件号码：</view>
+					<view class="info-value">430322**********1015</view>
+				</view>
+				<view class="info-row">
+					<view class="info-label">家庭人口：</view>
+					<view class="info-value">2 人</view>
+					<view class="info-label" style="margin-left: 60rpx;">地块数量：</view>
+					<view class="info-value">2 块</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 上报进度区域 -->
+		<view class="progress-card">
+			<view class="card-header">
+				<text class="card-title">上报进度</text>
+			</view>
+			<view class="progress-container">
+				<!-- 进度步骤（精准还原5步流程） -->
+				<view class="progress-step" v-for="(step, idx) in progressList" :key="idx">
+					<!-- 左侧节点+连接线 -->
+					<view class="step-node-wrap">
+						<!-- 节点 -->
+						<view class="step-node" :class="{
+                'node-completed': step.status === 'completed',
+                'node-pending': step.status === 'pending'
+              }">
+							<text class="node-icon" v-if="step.status === 'completed'">✓</text>
+						</view>
+						<!-- 连接线（最后一步隐藏） -->
+						<view class="step-line" v-if="idx < progressList.length - 1" :class="{
+                'line-completed': step.status === 'completed'
+              }"></view>
+					</view>
+
+					<!-- 右侧内容区 -->
+					<view class="step-content">
+						<view class="step-header">
+							<text class="step-name">{{ step.name }}</text>
+							<text class="step-status-tag" :class="{
+                  'status-completed': step.status === 'completed',
+                  'status-pending': step.status === 'pending'
+                }">
+								{{ step.statusText }}
+							</text>
+							<!-- 操作按钮 -->
+							<button class="step-btn" v-if="step.btnText" :class="{
+                  'btn-primary': step.btnType === 'primary',
+                  'btn-warning': step.btnType === 'warning'
+                }" @click="handleStepBtn(step.btnText)">
+								{{ step.btnText }}
+							</button>
+						</view>
+						<!-- 时间 -->
+						<text class="step-time" v-if="step.time">{{ step.time }}</text>
+						<!-- 描述 -->
+						<text class="step-desc" v-if="step.desc">{{ step.desc }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部操作按钮（固定底部） -->
+		<view class="bottom-btn-group">
+			<button class="action-btn btn-orange" @click="currentDetailsPage()">查看当前详情</button>
+			<button class="action-btn btn-blue" @click="detailsOfTheReportPage()">查看上报详情</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+
+	// 上报进度数据（精准匹配截图内容）
+	const progressList = ref([{
+			name: '农户上报',
+			status: 'completed', // completed:已完成 pending:待处理
+			statusText: '已上报',
+			btnText: '查看签名',
+			btnType: 'primary',
+			time: '2025-08-01 16:09:13',
+			desc: '已上报新增1名家庭成员，修改户信息，新增2块地'
+		},
+		{
+			name: '村干部审核',
+			status: 'completed',
+			statusText: '审核通过',
+			btnText: '退回',
+			btnType: 'warning',
+			time: '2025-08-11 07:48:32'
+		},
+		{
+			name: '内业处理',
+			status: 'completed',
+			statusText: '审核通过',
+			time: '2025-08-11 07:49:12'
+		},
+		{
+			name: '公示状态',
+			status: 'pending',
+			statusText: '待公示'
+		},
+		{
+			name: '签订合同',
+			status: 'pending',
+			statusText: '待签订'
+		}
+	]);
+
+	// 步骤按钮点击事件
+	const handleStepBtn = (btnText) => {
+		if (btnText === '查看签名') {
+			// 模拟打开签名弹窗
+			uni.showModal({
+				title: '签名详情',
+				content: '展示农户电子签名图片',
+				showCancel: false
+			});
+		} else if (btnText === '退回') {
+			uni.showModal({
+				title: '退回确认',
+				content: '确定要将该申请退回给农户吗？',
+				success: (res) => {
+					if (res.confirm) {
+						uni.showToast({
+							title: '退回成功',
+							icon: 'success'
+						});
+					}
+				}
+			});
+		}
+	};
+	
+	const currentDetailsPage = () => {
+		uni.navigateTo({
+			url: `/pages/investigator/Households/currentDetails`
+		})
+	}
+	
+	const detailsOfTheReportPage = () => {
+		uni.navigateTo({
+			url: `/pages/investigator/Households/detailsOfTheReport`
+		})
+	}
+</script>
+
+<style scoped>
+	/* 页面基础样式 */
+	.page-container {
+		padding: 0 24rpx;
+		padding-top: 10rpx;
+		background-color: #f5f5f5;
+		min-height: 100vh;
+		box-sizing: border-box;
+	}
+ss
+	/* 卡片通用样式 */
+	.info-card,
+	.progress-card {
+		background-color: #ffffff;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		margin-bottom: 20rpx;
+		/* 避开导航栏 */
+	}
+
+	.progress-card {
+		margin-top: 20rpx;
+	}
+
+	/* 卡片头部 */
+	.card-header {
+		margin-bottom: 24rpx;
+	}
+
+	.card-title {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #1d2129;
+	}
+
+	/* 信息网格 */
+	.info-grid {
+		display: flex;
+		flex-direction: column;
+		gap: 20rpx;
+	}
+
+	.info-row {
+		display: flex;
+		align-items: center;
+		font-size: 28rpx;
+	}
+
+	.info-label {
+		color: #86909c;
+		margin-right: 12rpx;
+	}
+
+	.info-value {
+		color: #1d2129;
+		font-weight: 400;
+	}
+
+	/* 进度容器 */
+	.progress-container {
+		position: relative;
+		padding-left: 10rpx;
+	}
+
+	/* 进度步骤 */
+	.progress-step {
+		display: flex;
+		margin-bottom: 40rpx;
+		position: relative;
+	}
+
+	/* 最后一步去除margin */
+	.progress-step:last-child {
+		margin-bottom: 0;
+	}
+
+	/* 节点+连接线 */
+	.step-node-wrap {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-right: 24rpx;
+	}
+
+	.step-node {
+		width: 40rpx;
+		height: 40rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 24rpx;
+		z-index: 2;
+	}
+
+	/* 已完成节点 */
+	.node-completed {
+		background-color: #1677ff;
+		color: #ffffff;
+		border: 2rpx solid #1677ff;
+	}
+
+	/* 待处理节点 */
+	.node-pending {
+		background-color: #ffffff;
+		color: transparent;
+		border: 2rpx solid #c9cdD4;
+	}
+
+	/* 连接线 */
+	.step-line {
+		width: 2rpx;
+		height: 70rpx;
+		background-color: #c9cdD4;
+		margin-top: 8rpx;
+	}
+
+	/* 已完成连接线 */
+	.line-completed {
+		background-color: #1677ff;
+	}
+
+	/* 进度内容 */
+	.step-content {
+		flex: 1;
+	}
+
+	.step-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 12rpx;
+	}
+
+	.step-name {
+		font-size: 28rpx;
+		color: #1d2129;
+		font-weight: 500;
+	}
+
+	/* 状态标签 */
+	.step-status-tag {
+		font-size: 24rpx;
+		padding: 4rpx 16rpx;
+		border-radius: 30rpx;
+		font-weight: 400;
+	}
+
+	.status-completed {
+		background-color: #e6f0ff;
+		color: #1677ff;
+	}
+
+	.status-pending {
+		background-color: #e8f4f8;
+		color: #00b42a;
+	}
+
+	/* 步骤按钮 */
+	.step-btn {
+		font-size: 24rpx;
+		padding: 6rpx 20rpx;
+		border-radius: 30rpx;
+		border: none;
+		height: auto;
+		line-height: normal;
+	}
+
+	.btn-primary {
+		background-color: #1677ff;
+		color: #ffffff;
+	}
+
+	.btn-warning {
+		background-color: #ff7d00;
+		color: #ffffff;
+	}
+
+	/* 时间 */
+	.step-time {
+		font-size: 24rpx;
+		color: #86909c;
+		margin-bottom: 8rpx;
+		display: block;
+	}
+
+	/* 描述 */
+	.step-desc {
+		font-size: 24rpx;
+		color: #4e5969;
+		line-height: 1.6;
+	}
+
+	/* 底部按钮组（固定底部） */
+	.bottom-btn-group {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 20rpx 24rpx;
+		background-color: #f5f5f5;
+		display: flex;
+		gap: 20rpx;
+		box-sizing: border-box;
+	}
+
+	.action-btn {
+		flex: 1;
+		height: 88rpx;
+		line-height: 88rpx;
+		border-radius: 16rpx;
+		border: none;
+		font-size: 32rpx;
+		color: #ffffff;
+		font-weight: 500;
+	}
+
+	.btn-orange {
+		background-color: #ff7d00;
+	}
+
+	.btn-blue {
+		background-color: #1677ff;
+	}
+
+	/* 修复uni-app按钮默认样式 */
+	::v-deep(.uni-btn) {
+		border-radius: 16rpx !important;
+	}
+
+	::v-deep(.uni-btn::after) {
+		border: none !important;
+	}
+</style>

src/pages/investigator/employerModule/index.vue

@@ -0,0 +1,266 @@
+<!-- 总发包方 -->
+<template>
+	<!-- 页面容器 -->
+	<view class="page-container">
+		<!-- 总计数据行 -->
+		<view class="total-row">
+			<text class="total-text">共计 {{ totalCount }} 条</text>
+		</view>
+
+		<!-- 村民小组列表 -->
+		<view class="group-list">
+			<view class="group-item" v-for="(item, index) in groupList" :key="index" @click="pageClick()">
+				<!-- 小组名称 + 状态标签 -->
+				<view class="group-header">
+					<text class="group-name">{{ item.name }}</text>
+					<text class="status-tag" :class="getStatusClass(item.status)">
+						{{ item.status }}
+					</text>
+				</view>
+
+				<!-- 数据统计行 -->
+				<view class="data-row">
+					<!-- 总户数 -->
+					<view class="data-item">
+						<text class="data-value">{{ item.total }}</text>
+						<text class="data-label">总户数</text>
+					</view>
+					<!-- 未上报（红色高亮） -->
+					<view class="data-item unreported">
+						<text class="data-value">{{ item.unreported }}</text>
+						<text class="data-label">未上报</text>
+					</view>
+					<!-- 已上报 -->
+					<view class="data-item">
+						<text class="data-value">{{ item.reported }}</text>
+						<text class="data-label">已上报</text>
+					</view>
+					<!-- 已完成 -->
+					<view class="data-item">
+						<text class="data-value">{{ item.completed }}</text>
+						<text class="data-label">已完成</text>
+					</view>
+					<!-- 箭头图标 -->
+					<view class="arrow-icon">
+						<uni-icons type="right" size="16"></uni-icons>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		computed
+	} from 'vue';
+	// 从 uni-app 中导入页面生命周期钩子
+	import { onLoad } from '@dcloudio/uni-app';
+	
+	const groupInfo = ref({});
+	
+	// 导入后即可正常使用 onLoad
+	onLoad((options) => {
+	  // 解码 + 解析JSON
+	  groupInfo.value = JSON.parse(decodeURIComponent(options.groupInfo));
+	   uni.setNavigationBarTitle({
+	      title: groupInfo.value.label
+	    });
+	});
+	// 模拟数据（与截图一致）
+	const groupList = ref([{
+			name: '湘乡市望春门街道桑枣社区第一村民小组',
+			status: '摸底中',
+			total: 10,
+			unreported: 0,
+			reported: 10,
+			completed: 0
+		},
+		{
+			name: '湘乡市望春门街道桑枣社区第二村民小组',
+			status: '未开始',
+			total: 0,
+			unreported: 0,
+			reported: 0,
+			completed: 0
+		},
+		{
+			name: '湘乡市望春门街道桑枣社区第八村民小组',
+			status: '未开始',
+			total: 0,
+			unreported: 0,
+			reported: 0,
+			completed: 0
+		},
+		{
+			name: '湘乡市望春门街道桑枣社区第十四村民小组',
+			status: '未开始',
+			total: 0,
+			unreported: 0,
+			reported: 0,
+			completed: 0
+		},
+		{
+			name: '湘乡市望春门街道城北村第一村民小组',
+			status: '摸底中',
+			total: 27,
+			unreported: 1,
+			reported: 26,
+			completed: 0
+		},
+		{
+			name: '湘乡市望春门街道城北村第二村民小组',
+			status: '摸底中',
+			total: 41,
+			unreported: 0,
+			reported: 41,
+			completed: 0
+		}
+	]);
+
+	// 计算总计数量（列表长度）
+	const totalCount = computed(() => groupList.value.length);
+
+	// 状态对应的样式类
+	const getStatusClass = computed(() => (status) => {
+		switch (status) {
+			case '摸底中':
+				return 'status-blue';
+			case '未开始':
+				return 'status-gray';
+			default:
+				return 'status-blue';
+		}
+	});
+	// 图标点击处理
+	const pageClick = () => {
+		uni.navigateTo({
+			url: `/pages/investigator/employerModule/twoRoundExtension`
+		})
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-container {
+		background-color: #f5f5f5;
+		min-height: 100vh;
+
+		// 导航栏
+		.nav-bar {
+			height: 88rpx;
+			line-height: 88rpx;
+			background-color: #fff;
+			text-align: center;
+			border-bottom: 1rpx solid #eee;
+			padding: 0 24rpx;
+			font-size: 32rpx;
+			font-weight: 500;
+		}
+
+		// 总计行
+		.total-row {
+			background-color: #fff;
+			padding: 16rpx 24rpx;
+			font-size: 28rpx;
+			color: #666;
+			border-bottom: 1rpx solid #f5f5f5;
+		}
+
+		// 列表容器
+		.group-list {
+			padding: 20rpx 24rpx 0;
+		}
+
+		// 列表项
+		.group-item {
+			background-color: #fff;
+			border-radius: 16rpx;
+			padding: 24rpx;
+			margin-bottom: 20rpx;
+
+			// 小组名称+状态
+			.group-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 24rpx;
+
+				.group-name {
+					font-size: 30rpx;
+					font-weight: 500;
+					color: #333;
+					line-height: 40rpx;
+				}
+
+				// 状态标签基础样式
+				.status-tag {
+					font-size: 24rpx;
+					padding: 4rpx 16rpx;
+					border-radius: 12rpx;
+					font-weight: 400;
+				}
+
+				// 摸底中（蓝色）
+				.status-blue {
+					color: #409eff;
+					background-color: #ecf5ff;
+				}
+
+				// 未开始（灰色）
+				.status-gray {
+					color: #909399;
+					background-color: #f5f5f5;
+				}
+			}
+
+			// 数据行
+			.data-row {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				// 数据项
+				.data-item {
+					text-align: center;
+					flex: 1;
+
+					.data-value {
+						font-size: 32rpx;
+						font-weight: 500;
+						color: #333;
+						display: block;
+					}
+
+					.data-label {
+						font-size: 24rpx;
+						color: #999;
+						margin-top: 8rpx;
+					}
+
+					// 未上报（红色高亮）
+					&.unreported {
+						.data-value {
+							color: #f56c6c;
+						}
+
+						.data-label {
+							color: #f56c6c;
+						}
+
+						background-color: #fff2f2;
+						border-radius: 8rpx;
+						padding: 8rpx 0;
+						margin: 0 4rpx;
+					}
+				}
+
+				// 箭头图标
+				.arrow-icon {
+					color: #999;
+					margin-left: 12rpx;
+				}
+			}
+		}
+	}
+</style>

src/pages/investigator/employerModule/twoRoundExtension.vue

@@ -0,0 +1,298 @@
+<template>
+	<view class="container">
+		<!-- 搜索栏 -->
+		<view class="search-bar">
+			<input class="search-input" type="text" placeholder="请输入承包方姓名/身份证号" />
+			<button class="search-btn">搜索</button>
+		</view>
+
+		<!-- 数据卡片区域 -->
+		<view class="card">
+			<view class="card-title">湘乡市望春门街道桑枣社区第二村民小组</view>
+			<view class="tag-group">
+				<view class="tag orange" @click="toCollective()">集体地</view>
+				<view class="tag gray">未开始</view>
+			</view>
+			<view class="stats-row">
+				<view class="stat-item" @click="InformationDetails()">
+					<view class="stat-num">0</view>
+					<view class="stat-label">总户数</view>
+				</view>
+				<view class="stat-item" @click="InformationDetails()">
+					<view class="stat-num">0</view>
+					<view class="stat-label">已上报</view>
+				</view>
+				<view class="stat-item" @click="InformationDetails()">
+					<view class="stat-num red">0</view>
+					<view class="stat-label">未上报</view>
+				</view>
+			</view>
+			<view class="stats-row">
+				<view class="stat-item pink" @click="InformationDetails()">
+					<view class="stat-num">0</view>
+					<view class="stat-label">待审核</view>
+				</view>
+				<view class="stat-item red" @click="InformationDetails()">
+					<view class="stat-num">0</view>
+					<view class="stat-label">未通过</view>
+				</view>
+				<view class="stat-item orange" @click="InformationDetails()">
+					<view class="stat-num">0</view>
+					<view class="stat-label">待公示</view>
+				</view>
+				<view class="stat-item green" @click="InformationDetails()">
+					<view class="stat-num">0</view>
+					<view class="stat-label">已公示</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 现场调查任务 -->
+		<view class="task-item" @click="goToTask()">
+			<view class="task-text">现场调查任务</view>
+			<view class="task-arrow">＞</view>
+		</view>
+
+		<!-- 空数据提示 -->
+		<view class="empty-area">
+			<view class="empty-text">暂无数据</view>
+		</view>
+
+		<!-- 新增按钮 -->
+		<button class="add-btn" @click="handleAdd">新增</button>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+
+	// 处理导航栏操作
+	const handleMenu = () => {
+		// 菜单逻辑
+	};
+	const handleMinimize = () => {
+		// 最小化逻辑
+	};
+	const handleClose = () => {
+		// 关闭逻辑
+	};
+	
+	const InformationDetails = () => {
+		uni.showToast({
+			title: '暂无数据',
+			icon: 'none',
+		});
+	}
+
+	// 跳转现场调查任务
+	const goToTask = () => {
+		uni.navigateTo({
+			url: '/pages/task/index'
+		});
+	};
+	
+	const toCollective = () => {
+		uni.navigateTo({
+			url: '/pages/map/collectively/index'
+		});
+	}
+
+	// 打开新增选项弹窗
+	const handleAdd = () => {
+	  uni.showActionSheet({
+	    itemList: ['后台录入', '手动录入'], // 选项列表
+	    itemColor: '#333', // 选项文字颜色
+	    success: (res) => {
+	      // 根据选择的索引执行对应操作
+	      switch (res.tapIndex) {
+	        case 0:
+	          uni.navigateTo({ url: '/pages/EntryPage/backstageAdd' });
+	          break;
+	        case 1:
+	          uni.navigateTo({ url: '/pages/EntryPage/manualAdd' });
+	          break;
+	      }
+	    },
+	    fail: (err) => {
+	      console.log('取消选择', err);
+	    }
+	  });
+	};
+</script>
+
+<style scoped>
+	.container {
+		padding: 16rpx;
+		background-color: #f8f9fa;
+		min-height: 100vh;
+		box-sizing: border-box;
+	}
+
+	.search-bar {
+		display: flex;
+		align-items: center;
+		background-color: #fff;
+		border-radius: 8rpx;
+		padding: 12rpx 16rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.search-input {
+		flex: 1;
+		height: 60rpx;
+		font-size: 28rpx;
+	}
+
+	.search-btn {
+		width: 120rpx;
+		height: 60rpx;
+		line-height: 60rpx;
+		background-color: #007bff;
+		color: #fff;
+		border-radius: 8rpx;
+		font-size: 28rpx;
+	}
+
+	.card {
+		background-color: #fff;
+		border-radius: 12rpx;
+		padding: 20rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.card-title {
+		font-size: 30rpx;
+		font-weight: 500;
+		margin-bottom: 16rpx;
+	}
+
+	.tag-group {
+		display: flex;
+		gap: 12rpx;
+		margin-bottom: 24rpx;
+	}
+
+	.tag {
+		padding: 4rpx 12rpx;
+		border-radius: 6rpx;
+		font-size: 24rpx;
+	}
+
+	.tag.orange {
+		background-color: #ff9933;
+		color: #fff;
+	}
+
+	.tag.gray {
+		background-color: #cccccc;
+		color: #fff;
+	}
+
+	.stats-row {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 16rpx;
+	}
+
+	.stat-item {
+		text-align: center;
+		flex: 1;
+		margin: 0 10rpx;
+	}
+
+	.stat-num {
+		font-size: 36rpx;
+		font-weight: bold;
+		margin-bottom: 4rpx;
+	}
+
+	.stat-num.red {
+		color: #ff3333;
+	}
+
+	.stat-label {
+		font-size: 24rpx;
+		color: #666;
+	}
+
+	.stat-item.pink {
+		background-color: #ffcccc;
+		border-radius: 8rpx;
+		padding: 8rpx 0;
+	}
+
+	.stat-item.red {
+		background-color: #ff9999;
+		border-radius: 8rpx;
+		padding: 8rpx 0;
+	}
+
+	.stat-item.orange {
+		background-color: #ffcc99;
+		border-radius: 8rpx;
+		padding: 8rpx 0;
+	}
+
+	.stat-item.green {
+		background-color: #ccffcc;
+		border-radius: 8rpx;
+		padding: 8rpx 0;
+	}
+
+	.task-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: #fff;
+		border-radius: 8rpx;
+		padding: 20rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.task-text {
+		font-size: 28rpx;
+		color: #007bff;
+	}
+
+	.task-arrow {
+		font-size: 32rpx;
+		color: #999;
+	}
+
+	.empty-area {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-top: 100rpx;
+	}
+
+	.empty-icon {
+		width: 200rpx;
+		height: 200rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.empty-text {
+		font-size: 28rpx;
+		color: #999;
+	}
+
+	.add-btn {
+		position: fixed;
+		bottom: 40rpx;
+		right: 40rpx;
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 50%;
+		background-color: #007bff;
+		color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 32rpx;
+		white-space: nowrap;
+	}
+</style>

src/pages/investigator/index.vue

@@ -1,210 +1,236 @@
 <template>
-  <view class="min-h-screen bg-gray-50">
-    <!-- 顶部导航栏 -->
-    <view class="flex items-center justify-between bg-white p-4 border-b">
-      <text class="text-xl font-bold">湘乡市</text>
-      <view class="bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-sm">
-        已公示列表
-      </view>
-    </view>
-
-    <!-- 主要内容区域 -->
-    <view class="p-4">
-      <!-- 第一行数据卡片 -->
-      <view class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-        <view class="rounded-lg p-4 shadow-sm bg-[#F8FAFF]">
-          <text class="text-gray-500 text-sm block mb-1">总发包方</text>
-          <text class="text-xl font-bold">6488</text>
-        </view>
-
-        <view class="rounded-lg p-4 shadow-sm bg-[#FFF7F8]">
-          <text class="text-gray-500 text-sm block mb-1">未开始</text>
-          <text class="text-xl font-bold">0</text>
-        </view>
-
-        <view class="rounded-lg p-4 shadow-sm bg-[#F7FFF9]">
-          <text class="text-gray-500 text-sm block mb-1">摸底中</text>
-          <text class="text-xl font-bold">6698</text>
-        </view>
-
-        <view class="rounded-lg p-4 shadow-sm bg-[#FFFBF2]">
-          <text class="text-gray-500 text-sm block mb-1">公示中</text>
-          <text class="text-xl font-bold">0</text>
-        </view>
-      </view>
-
-
-      <!-- 第二行数据卡片 -->
-      <view class="grid grid-cols-3 gap-4 mb-6">
-        <view class="rounded-lg p-4 shadow-sm bg-[#F8FAFF]">
-          <text class="text-gray-500 text-sm block mb-1">总户数</text>
-          <text class="text-xl font-bold">194115</text>
-        </view>
-
-        <view class="rounded-lg p-4 shadow-sm bg-[#F7FFF9]">
-          <text class="text-gray-500 text-sm block mb-1">已上报</text>
-          <text class="text-xl font-bold">190430</text>
-        </view>
-
-        <view class="rounded-lg p-4 shadow-sm bg-[#FFF7F7]">
-          <text class="text-gray-500 text-sm block mb-1">未上报</text>
-          <text class="text-xl font-bold text-red-500">3685</text>
-        </view>
-      </view>
-
-
-      <!-- 第三行数据卡片 -->
-      <view class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-
-        <!-- 待审核 -->
-        <view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-pink-50">
-          <text class="text-gray-500 text-sm block mb-1">待审核</text>
-          <text class="text-xl font-bold text-pink-500">1324</text>
-        </view>
-
-        <!-- 未通过 -->
-        <view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-orange-50">
-          <text class="text-gray-500 text-sm block mb-1">未通过</text>
-          <text class="text-xl font-bold text-orange-500">846</text>
-        </view>
-
-        <!-- 待公示 -->
-        <view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-amber-50">
-          <text class="text-gray-500 text-sm block mb-1">待公示</text>
-          <text class="text-xl font-bold text-amber-500">188260</text>
-        </view>
-
-        <!-- 已公示 -->
-        <view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-green-50">
-          <text class="text-gray-500 text-sm block mb-1">已公示</text>
-          <text class="text-xl font-bold text-green-500">0</text>
-        </view>
-
-      </view>
-
-      <!-- 功能按钮区域 -->
-      <view class="grid grid-cols-2 gap-4 mb-6">
-        <view
-            class="bg-white rounded-lg p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-shadow"
-            @click="goTask"
-        >
-          <text class="font-medium text-blue-600 underline">现场调查任务</text>
-          <uni-icons type="right" color="#3B82F6" size="18"></uni-icons>
-        </view>
-
-        <view
-            class="bg-white rounded-lg p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-shadow"
-            @click="goArchive"
-        >
-          <text class="font-medium text-blue-600 underline">档案资料</text>
-          <uni-icons type="right" color="#3B82F6" size="18"></uni-icons>
-        </view>
-      </view>
-
-      <!-- 乡镇数据列表 -->
-      <view class="space-y-4">
-
-        <!-- 壶天镇 -->
-        <view class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
-          <text class="font-medium text-base mb-3 block">湘乡市壶天镇</text>
-          <view class="grid grid-cols-4 gap-2 text-sm">
-
-            <view>
-              <text class="text-gray-500 block">总户数</text>
-              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">12071</text>
-            </view>
-
-            <view>
-              <text class="text-gray-500 block">未上报</text>
-              <text class="font-medium text-red-500 bg-red-50 px-2 py-1 rounded inline-block">103</text>
-            </view>
-
-            <view>
-              <text class="text-gray-500 block">已上报</text>
-              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">11968</text>
-            </view>
-
-            <view class="flex items-end justify-between">
-              <view>
-                <text class="text-gray-500 block">已完成</text>
-                <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">0</text>
-              </view>
-              <uni-icons type="right" color="#999" size="16"></uni-icons>
-            </view>
-
-          </view>
-        </view>
-
-
-        <!-- 翻江镇 -->
-        <view class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
-          <text class="font-medium text-base mb-3 block">湘乡市翻江镇</text>
-          <view class="grid grid-cols-4 gap-2 text-sm">
-
-            <view>
-              <text class="text-gray-500 block">总户数</text>
-              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">10593</text>
-            </view>
-
-            <view>
-              <text class="text-gray-500 block">未上报</text>
-              <text class="font-medium text-red-500 bg-red-50 px-2 py-1 rounded inline-block">181</text>
-            </view>
-
-            <view>
-              <text class="text-gray-500 block">已上报</text>
-              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">10412</text>
-            </view>
-
-            <view class="flex items-end justify-between">
-              <view>
-                <text class="text-gray-500 block">已完成</text>
-                <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">0</text>
-              </view>
-              <uni-icons type="right" color="#999" size="16"></uni-icons>
-            </view>
-
-          </view>
-        </view>
-
-
-        <!-- 月山镇 -->
-        <view class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
-          <text class="font-medium text-base mb-3 block">湘乡市月山镇</text>
-          <view class="grid grid-cols-4 gap-2 text-sm">
-
-            <view>
-              <text class="text-gray-500 block">总户数</text>
-              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">15942</text>
-            </view>
-
-            <view>
-              <text class="text-gray-500 block">未上报</text>
-              <text class="font-medium text-red-500 bg-red-50 px-2 py-1 rounded inline-block">123</text>
-            </view>
+	<view class="min-h-screen bg-gray-50">
+		<!-- 顶部导航栏 -->
+		<view class="flex items-center justify-between bg-white p-4 border-b">
+			<text class="text-xl font-bold">湘乡市</text>
+			<view class="bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-sm">
+				已公示列表
+			</view>
+		</view>
+		<!-- 主要内容区域 -->
+		<view class="p-4">
+			<!-- 第一行数据卡片 -->
+			<view class="grid grid-cols-2 md-grid-cols-4 gap-4 mb-6">
+				<!-- 抽离配置项，通过循环渲染（减少重复代码） -->
+				<view v-for="(item, index) in statCardList" :key="index" class="rounded-lg p-4 shadow-sm"
+					:class="`bg-${item.bgColor}`" @click="handleIconClick(urbanDistrictData[item.dataKey],item)">
+					<text class="text-gray-500 text-sm block mb-1">{{ item.label }}</text>
+					<text class="text-xl font-bold">{{ urbanDistrictData[item.dataKey] }}</text>
+				</view>
+			</view>
+			<!-- 第二行数据卡片 -->
+			<view class="grid grid-cols-3 gap-4 mb-6">
+				<view class="rounded-lg p-4 shadow-sm bg-[#F8FAFF]" @click="householdsPage()">
+					<text class="text-gray-500 text-sm block mb-1">总户数</text>
+					<text class="text-xl font-bold">194115</text>
+				</view>
+				<view class="rounded-lg p-4 shadow-sm bg-[#F7FFF9]" @click="householdsPage()">
+					<text class="text-gray-500 text-sm block mb-1">已上报</text>
+					<text class="text-xl font-bold">190430</text>
+				</view>
+				<view class="rounded-lg p-4 shadow-sm bg-[#FFF7F7]">
+					<text class="text-gray-500 text-sm block mb-1" @click="householdsPage()">未上报</text>
+					<text class="text-xl font-bold text-red-500">3685</text>
+				</view>
+			</view>
+			<!-- 第三行数据卡片 -->
+			<view class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+				<!-- 待审核 -->
+				<view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-pink-50">
+					<text class="text-gray-500 text-sm block mb-1">待审核</text>
+					<text class="text-xl font-bold text-pink-500">1324</text>
+				</view>
+				<!-- 未通过 -->
+				<view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-orange-50">
+					<text class="text-gray-500 text-sm block mb-1">未通过</text>
+					<text class="text-xl font-bold text-orange-500">846</text>
+				</view>
+				<!-- 待公示 -->
+				<view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-amber-50">
+					<text class="text-gray-500 text-sm block mb-1">待公示</text>
+					<text class="text-xl font-bold text-amber-500">188260</text>
+				</view>
+				<!-- 已公示 -->
+				<view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-green-50">
+					<text class="text-gray-500 text-sm block mb-1">已公示</text>
+					<text class="text-xl font-bold text-green-500">0</text>
+				</view>
+			</view>
+			<!-- 功能按钮区域 -->
+			<view class="grid grid-cols-2 gap-4 mb-6">
+				<view
+					class="bg-white rounded-lg p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-shadow"
+					@click="goToTask()">
+					<text class="font-medium text-blue-600 underline">现场调查任务</text>
+					<uni-icons type="right" color="#3B82F6" size="18"></uni-icons>
+				</view>
+				<view
+					class="bg-white rounded-lg p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-shadow"
+					@click="goArchive">
+					<text class="font-medium text-blue-600 underline">档案资料</text>
+					<uni-icons type="right" color="#3B82F6" size="18"></uni-icons>
+				</view>
+			</view>
+			<!-- 乡镇数据列表 -->
+			<view class="space-y-4">
+				<!-- 壶天镇 -->
+				<view class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
+					<text class="font-medium text-base mb-3 block">湘乡市壶天镇</text>
+					<view class="grid grid-cols-4 gap-2 text-sm">
+						<view>
+							<text class="text-gray-500 block">总户数</text>
+							<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">12071</text>
+						</view>
+						<view>
+							<text class="text-gray-500 block">未上报</text>
+							<text class="font-medium text-red-500 bg-red-50 px-2 py-1 rounded inline-block">103</text>
+						</view>
+						<view>
+							<text class="text-gray-500 block">已上报</text>
+							<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">11968</text>
+						</view>
+						<view class="flex items-end justify-between">
+							<view>
+								<text class="text-gray-500 block">已完成</text>
+								<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">0</text>
+							</view>
+							<uni-icons type="right" color="#999" size="16"></uni-icons>
+						</view>
+					</view>
+				</view>
+				<!-- 翻江镇 -->
+				<view class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
+					<text class="font-medium text-base mb-3 block">湘乡市翻江镇</text>
+					<view class="grid grid-cols-4 gap-2 text-sm">
+						<view>
+							<text class="text-gray-500 block">总户数</text>
+							<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">10593</text>
+						</view>
+						<view>
+							<text class="text-gray-500 block">未上报</text>
+							<text class="font-medium text-red-500 bg-red-50 px-2 py-1 rounded inline-block">181</text>
+						</view>
+						<view>
+							<text class="text-gray-500 block">已上报</text>
+							<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">10412</text>
+						</view>
+						<view class="flex items-end justify-between">
+							<view>
+								<text class="text-gray-500 block">已完成</text>
+								<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">0</text>
+							</view>
+							<uni-icons type="right" color="#999" size="16"></uni-icons>
+						</view>
+					</view>
+				</view>
+				<!-- 月山镇 -->
+				<view class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
+					<text class="font-medium text-base mb-3 block">湘乡市月山镇</text>
+					<view class="grid grid-cols-4 gap-2 text-sm">
+						<view>
+							<text class="text-gray-500 block">总户数</text>
+							<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">15942</text>
+						</view>
+						<view>
+							<text class="text-gray-500 block">未上报</text>
+							<text class="font-medium text-red-500 bg-red-50 px-2 py-1 rounded inline-block">123</text>
+						</view>
+						<view>
+							<text class="text-gray-500 block">已上报</text>
+							<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">15819</text>
+						</view>
+						<view class="flex items-end justify-between">
+							<view>
+								<text class="text-gray-500 block">已完成</text>
+								<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">0</text>
+							</view>
+							<uni-icons type="right" color="#999" size="16"></uni-icons>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
 
-            <view>
-              <text class="text-gray-500 block">已上报</text>
-              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">15819</text>
-            </view>
+<script setup lang="ts">
+	import { ref } from 'vue';
+	// 无需额外逻辑，直接展示静态数据
+	const urbanDistrictData = {
+		mainEmployer: 6488,
+		notStarted: 0,
+		underInvestigation: 6698,
+		underPublicity: 0
+	}
+	// 状态卡片配置（统一管理，便于维护）
+	const statCardList = [
+		{
+			label: '总发包方',
+			dataKey: 'mainEmployer',
+			type: 'mainEmployer',
+			bgColor: 'fffaff' // 对应原 bg-[#FFFAFF]
+		},
+		{
+			label: '未开始',
+			dataKey: 'notStarted',
+			type: 'notStarted',
+			bgColor: 'fff7f8' // 对应原 bg-[#FFF7F8]
+		},
+		{
+			label: '摸底中',
+			dataKey: 'underInvestigation',
+			type: 'underInvestigation',
+			bgColor: 'fffef9' // 对应原 bg-[#FFFEF9]
+		},
+		{
+			label: '公示中',
+			dataKey: 'underPublicity',
+			type: 'underPublicity',
+			bgColor: 'fffeb2' // 对应原 bg-[#FFFEB2]
+		}
+	];
+	const handleIconClick = (e, value) => {
+		if (e === 0) {
+			uni.showToast({
+				title: '暂无数据',
+				icon: 'none',
+			});
+		} else {
+			uni.navigateTo({
+				url: `/pages/investigator/employerModule/index?groupInfo=${encodeURIComponent(JSON.stringify(value))}`
+			})
+		}
+	}
+	
+	const householdsPage = () => {
+		uni.navigateTo({
+			url: `/pages/investigator/Households/index`
+		})
+	}
+	// 跳转现场调查任务跳转现场调查任务跳转现场调查任务
+	// 跳转现场调查任务跳转现场调查任务跳转现场调查任务
+	const goToTask = () => {
+		uni.navigateTo({
+			url: '/pages/task/index'
+		});
+	};
+</script>
 
-            <view class="flex items-end justify-between">
-              <view>
-                <text class="text-gray-500 block">已完成</text>
-                <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">0</text>
-              </view>
-              <uni-icons type="right" color="#999" size="16"></uni-icons>
-            </view>
+<style>
+	/* 统一定义背景色（避免行内样式，提升可维护性） */
+	.bg-fffaff {
+		background-color: #FFFAFF;
+	}
 
-          </view>
-        </view>
+	.bg-fff7f8 {
+		background-color: #FFF7F8;
+	}
 
-      </view>
+	.bg-fffef9 {
+		background-color: #FFFEF9;
+	}
 
-    </view>
-  </view>
-</template>
-
-<script setup>
-// 无需额外逻辑，直接展示静态数据
-</script>
+	.bg-fffeb2 {
+		background-color: #FFFEB2;
+	}
+</style>

src/pages/map/collectively/add.vue

@@ -0,0 +1,359 @@
+<template>
+  <view class="container">
+    <!-- 基本信息区域 -->
+      <view class="section-title">基本信息</view>
+    <view class="section">
+      <!-- 变更理由（下拉选择） -->
+      <view class="form-item">
+        <view class="label required">变更理由</view>
+        <picker class="picker" mode="selector" :range="reasonList" @change="handlePickerChange('changeReason')">
+          <view class="picker-content">
+            <view class="picker-text">{{ selected.changeReason || '请选择' }}</view>
+            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
+          </view>
+        </picker>
+      </view>
+
+      <!-- 地块名称（输入框） -->
+      <view class="form-item">
+        <view class="label required">地块名称</view>
+        <input class="input" type="text" v-model="form.landName" placeholder="请输入" />
+      </view>
+
+      <!-- 实测面积（输入框+单位） -->
+      <view class="form-item">
+        <view class="label required">实测面积</view>
+        <view class="input-unit-wrap">
+          <input class="input" type="number" v-model="form.area" placeholder="请输入" />
+          <view class="unit">亩</view>
+        </view>
+      </view>
+
+      <!-- 所有权性质（下拉选择） -->
+      <view class="form-item">
+        <view class="label required">所有权性质</view>
+        <picker class="picker" mode="selector" :range="ownershipList" @change="handlePickerChange('ownership')">
+          <view class="picker-content">
+            <view class="picker-text">{{ selected.ownership || '请选择' }}</view>
+            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
+          </view>
+        </picker>
+      </view>
+
+      <!-- 地块类别（下拉选择） -->
+      <view class="form-item">
+        <view class="label required">地块类别</view>
+        <picker class="picker" mode="selector" :range="landTypeList" @change="handlePickerChange('landType')">
+          <view class="picker-content">
+            <view class="picker-text">{{ selected.landType || '请选择' }}</view>
+            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
+          </view>
+        </picker>
+      </view>
+
+      <!-- 利用类型（下拉选择） -->
+      <view class="form-item">
+        <view class="label required">利用类型</view>
+        <picker class="picker" mode="selector" :range="useTypeList" @change="handlePickerChange('useType')">
+          <view class="picker-content">
+            <view class="picker-text">{{ selected.useType || '请选择' }}</view>
+            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
+          </view>
+        </picker>
+      </view>
+
+      <!-- 地力等级（下拉选择） -->
+      <view class="form-item">
+        <view class="label required">地力等级</view>
+        <picker class="picker" mode="selector" :range="soilLevelList" @change="handlePickerChange('soilLevel')">
+          <view class="picker-content">
+            <view class="picker-text">{{ selected.soilLevel || '请选择' }}</view>
+            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
+          </view>
+        </picker>
+      </view>
+
+      <!-- 土地用途（下拉选择） -->
+      <view class="form-item">
+        <view class="label required">土地用途</view>
+        <picker class="picker" mode="selector" :range="landUseList" @change="handlePickerChange('landUse')">
+          <view class="picker-content">
+            <view class="picker-text">{{ selected.landUse || '请选择' }}</view>
+            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
+          </view>
+        </picker>
+      </view>
+
+      <!-- 基本农田（下拉选择） -->
+      <view class="form-item">
+        <view class="label required">基本农田</view>
+        <picker class="picker" mode="selector" :range="basicFarmlandList" @change="handlePickerChange('basicFarmland')">
+          <view class="picker-content">
+            <view class="picker-text">{{ selected.basicFarmland || '请选择' }}</view>
+            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
+          </view>
+        </picker>
+      </view>
+
+      <!-- 地块东至（输入框） -->
+      <view class="form-item">
+        <view class="label required">地块东至</view>
+        <input class="input" type="text" v-model="form.east" placeholder="请输入" />
+      </view>
+
+      <!-- 地块西至（输入框） -->
+      <view class="form-item">
+        <view class="label required">地块西至</view>
+        <input class="input" type="text" v-model="form.west" placeholder="请输入" />
+      </view>
+
+      <!-- 地块南至（输入框） -->
+      <view class="form-item">
+        <view class="label required">地块南至</view>
+        <input class="input" type="text" v-model="form.south" placeholder="请输入" />
+      </view>
+
+      <!-- 地块北至（输入框） -->
+      <view class="form-item">
+        <view class="label required">地块北至</view>
+        <input class="input" type="text" v-model="form.north" placeholder="请输入" />
+      </view>
+
+      <!-- 范围选择 -->
+      <view class="form-item" @click="handleRangeSelect">
+        <view class="label">范围选择</view>
+        <view class="link-text">在地图上打点框选择大致范围</view>
+      </view>
+
+      <!-- 备注信息（文本域） -->
+      <view class="form-item">
+        <view class="label">备注信息</view>
+        <textarea class="textarea" v-model="form.remark" placeholder="请输入"></textarea>
+      </view>
+    </view>
+
+    <!-- 图片信息区域 -->
+    <view class="section">
+      <view class="section-title">图片信息</view>
+      <view class="form-item">
+        <view class="label">证明材料</view>
+        <view class="upload-area" @click="handleUpload">
+          <view class="upload-icon">+</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 确定按钮 -->
+    <button class="confirm-btn" @click="handleConfirm">确定</button>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'; // 引入uni-icons
+
+// 表单数据
+const form = reactive({
+  landName: '',
+  area: '',
+  east: '',
+  west: '',
+  south: '',
+  north: '',
+  remark: ''
+});
+
+// 下拉选择数据源
+const reasonList = ref(['变更理由1', '变更理由2']);
+const ownershipList = ref(['集体土地所有权', '国有土地所有权']);
+const landTypeList = ref(['其它集体土地', '宅基地']);
+const useTypeList = ref(['旱地', '水田']);
+const soilLevelList = ref(['一等地', '二等地']);
+const landUseList = ref(['种植业', '林业']);
+const basicFarmlandList = ref(['是', '否']);
+
+// 选中的下拉值
+const selected = reactive({
+  changeReason: '',
+  ownership: '',
+  landType: '',
+  useType: '',
+  soilLevel: '',
+  landUse: '',
+  basicFarmland: ''
+});
+
+// 下拉选择事件
+const handlePickerChange = (key) => (e) => {
+  const value = e.target.value;
+  switch (key) {
+    case 'changeReason':
+      selected.changeReason = reasonList.value[value];
+      break;
+    case 'ownership':
+      selected.ownership = ownershipList.value[value];
+      break;
+    case 'landType':
+      selected.landType = landTypeList.value[value];
+      break;
+    case 'useType':
+      selected.useType = useTypeList.value[value];
+      break;
+    case 'soilLevel':
+      selected.soilLevel = soilLevelList.value[value];
+      break;
+    case 'landUse':
+      selected.landUse = landUseList.value[value];
+      break;
+    case 'basicFarmland':
+      selected.basicFarmland = basicFarmlandList.value[value];
+      break;
+  }
+};
+
+// 范围选择事件
+const handleRangeSelect = () => {
+  uni.showToast({ title: '跳转到地图选择页面', icon: 'none' });
+};
+
+// 上传证明材料
+const handleUpload = () => {
+  uni.chooseImage({
+    count: 1,
+    success: () => uni.showToast({ title: '选择图片成功', icon: 'success' })
+  });
+};
+
+// 确定按钮事件
+const handleConfirm = () => {
+  // 可添加表单校验逻辑
+  uni.showToast({ title: '提交成功', icon: 'success' });
+};
+</script>
+
+<style scoped>
+.container {
+  padding: 16rpx;
+  background-color: #f8f9fa;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+.section {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-bottom: 20rpx;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+
+.label {
+  width: 200rpx;
+  font-size: 28rpx;
+}
+
+.required::after {
+  content: '*';
+  color: #ff3333;
+  margin-left: 4rpx;
+}
+
+/* 输入框样式 */
+.input {
+  flex: 1;
+  height: 60rpx;
+  padding: 0 12rpx;
+  border: 1px solid #eee;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+/* 带单位的输入框容器 */
+.input-unit-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.unit {
+  margin-left: 8rpx;
+  font-size: 28rpx;
+  color: #666;
+}
+
+/* 下拉选择器样式 */
+.picker {
+  flex: 1;
+  text-align: right;
+}
+
+.picker-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8rpx;
+}
+
+.picker-text {
+  font-size: 28rpx;
+  color: #333;
+}
+
+/* 链接文本样式 */
+.link-text {
+  flex: 1;
+  text-align: right;
+  font-size: 28rpx;
+  color: #007bff;
+}
+
+/* 文本域样式 */
+.textarea {
+  flex: 1;
+  height: 160rpx;
+  padding: 12rpx;
+  border: 1px solid #eee;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+/* 上传区域样式 */
+.upload-area {
+  width: 120rpx;
+  height: 120rpx;
+  border: 1px dashed #ccc;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-icon {
+  font-size: 48rpx;
+  color: #999;
+}
+
+/* 确定按钮样式 */
+.confirm-btn {
+  width: 90%;
+  height: 80rpx;
+  line-height: 80rpx;
+  background-color: #007bff;
+  color: #fff;
+  border-radius: 8rpx;
+  font-size: 32rpx;
+  margin: 0 auto;
+  display: block;
+}
+</style>

src/pages/map/collectively/index.vue

@@ -0,0 +1,200 @@
+<template>
+  <view class="container">
+    <!-- 统计信息 -->
+    <view class="count-tip">共计 6 条</view>
+
+    <!-- 地块列表 -->
+    <view class="list-item" v-for="(item, index) in landList" :key="index">
+      <!-- 地块编号+名称+面积 -->
+      <view class="item-header">
+        <text class="item-code">{{ item.code }}</text>
+        <text class="item-name">{{ item.name }}</text>
+        <text class="item-area">{{ item.area }}亩</text>
+        <!-- 地块位置按钮 -->
+        <text class="location-btn" @click="handleLocation(item)">地块位置</text>
+      </view>
+
+      <!-- 四至信息 -->
+      <view class="boundary-row" @click="handleDetail(item)">
+        <text class="boundary-label">地块东至：{{ item.east }}</text>
+        <text class="boundary-label">地块西至：{{ item.west }}</text>
+      </view>
+      <view class="boundary-row">
+        <text class="boundary-label">地块南至：{{ item.south }}</text>
+        <text class="boundary-label">地块北至：{{ item.north }}</text>
+      </view>
+
+      <!-- 箭头按钮 -->
+      <view class="arrow-btn">＞</view>
+    </view>
+
+    <!-- 新增按钮 -->
+    <button class="add-btn" @click="handleAdd">新增</button>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+
+// 模拟地块数据
+const landList = ref([
+  {
+    code: '00006',
+    name: '桑枣村水田',
+    area: '1.73',
+    east: '田埂',
+    west: '桑枣村水田',
+    south: '桑枣村水田',
+    north: '田埂'
+  },
+  {
+    code: '00005',
+    name: '桑枣村水田',
+    area: '2.19',
+    east: '桑枣村水田',
+    west: '田埂',
+    south: '田埂',
+    north: '桑枣村水田'
+  },
+  {
+    code: '00004',
+    name: '桑枣村旱地',
+    area: '0.94',
+    east: '田埂',
+    west: '桑枣村旱地',
+    south: '田埂',
+    north: '桑枣村旱地'
+  },
+  {
+    code: '00003',
+    name: '桑枣村旱地',
+    area: '5.37',
+    east: '桑枣村旱地',
+    west: '桑枣村旱地',
+    south: '桑枣村旱地',
+    north: '桑枣村旱地'
+  },
+  {
+    code: '00002',
+    name: '桑枣村旱地',
+    area: '1.78',
+    east: '桑枣村旱地',
+    west: '田埂',
+    south: '桑枣村旱地',
+    north: '田埂'
+  },
+  {
+    code: '00001',
+    name: '桑枣村旱地',
+    area: '1.39',
+    east: '田埂',
+    west: '田埂',
+    south: '田埂',
+    north: '田埂'
+  }
+]);
+
+// 地块位置点击事件
+const handleLocation = (item) => {
+  uni.navigateTo({
+    url: `/pages/map/map`
+  });
+};
+
+// 详情箭头点击事件
+const handleDetail = (item) => {
+	console.log(item)
+  uni.navigateTo({
+    url: `/pages/map/collectively/information?landInfo=${encodeURIComponent(JSON.stringify(item))}`
+  });
+};
+
+// 新增按钮点击事件
+const handleAdd = () => {
+  uni.navigateTo({
+    url: '/pages/map/collectively/add'
+  });
+};
+</script>
+
+<style scoped>
+.container {
+  padding: 16rpx;
+  background-color: #f8f9fa;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+.count-tip {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 16rpx;
+}
+
+.list-item {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  margin-bottom: 16rpx;
+  position: relative;
+}
+
+.item-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+.item-code {
+  color: #007bff;
+  font-size: 28rpx;
+  margin-right: 8rpx;
+}
+.item-name {
+  font-size: 28rpx;
+  margin-right: 8rpx;
+}
+.item-area {
+  font-size: 28rpx;
+  color: #666;
+}
+.location-btn {
+  color: #007bff;
+  font-size: 28rpx;
+  margin-left: auto;
+}
+
+.boundary-row {
+  font-size: 26rpx;
+  color: #666;
+  margin-bottom: 8rpx;
+}
+
+.boundary-label{
+	margin-right: 100rpx;
+}
+
+.arrow-btn {
+  position: absolute;
+  right: 20rpx;
+  bottom: 40rpx;
+  font-size: 32rpx;
+  color: #999;
+}
+
+.add-btn {
+  position: fixed;
+  bottom: 40rpx;
+  right: 40rpx;
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  background-color: #007bff;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  white-space: nowrap;
+}
+</style>

src/pages/map/collectively/information.vue

@@ -0,0 +1,311 @@
+<template>
+  <view class="container">
+      <view class="section-title">基本信息</view>
+    <!-- 基本信息区域 -->
+    <view class="section">
+      
+      <!-- 表单项：变更理由 -->
+      <view class="form-item">
+        <view class="label required">变更理由</view>
+        <picker class="picker" mode="selector" :range="reasonList" @change="handlePickerChange('changeReason')">
+          <view class="picker-text">{{ selected.changeReason || '请选择' }} ▽</view>
+        </picker>
+      </view>
+
+      <!-- 表单项：地块编码（只读） -->
+      <view class="form-item">
+        <view class="label required">地块编码</view>
+        <view class="read-only-text">4303810010041400004</view>
+      </view>
+
+      <!-- 表单项：地块名称（只读） -->
+      <view class="form-item">
+        <view class="label required">地块名称</view>
+        <view class="read-only-text">桑枣村旱地</view>
+      </view>
+
+      <!-- 表单项：实测面积（只读） -->
+      <view class="form-item">
+        <view class="label required">实测面积</view>
+        <view class="read-only-text">0.94 亩</view>
+      </view>
+
+      <!-- 表单项：所有权性质 -->
+      <view class="form-item">
+        <view class="label required">所有权性质</view>
+        <picker class="picker" mode="selector" :range="ownershipList" @change="handlePickerChange('ownership')">
+          <view class="picker-text">{{ selected.ownership || '集体土地所有权' }} ▽</view>
+        </picker>
+      </view>
+
+      <!-- 表单项：地块类别 -->
+      <view class="form-item">
+        <view class="label required">地块类别</view>
+        <picker class="picker" mode="selector" :range="landTypeList" @change="handlePickerChange('landType')">
+          <view class="picker-text">{{ selected.landType || '其它集体土地' }} ▽</view>
+        </picker>
+      </view>
+
+      <!-- 表单项：利用类型 -->
+      <view class="form-item">
+        <view class="label required">利用类型</view>
+        <picker class="picker" mode="selector" :range="useTypeList" @change="handlePickerChange('useType')">
+          <view class="picker-text">{{ selected.useType || '旱地' }} ▽</view>
+        </picker>
+      </view>
+
+      <!-- 表单项：地力等级 -->
+      <view class="form-item">
+        <view class="label required">地力等级</view>
+        <picker class="picker" mode="selector" :range="soilLevelList" @change="handlePickerChange('soilLevel')">
+          <view class="picker-text">{{ selected.soilLevel || '一等地' }} ▽</view>
+        </picker>
+      </view>
+
+      <!-- 表单项：土地用途 -->
+      <view class="form-item">
+        <view class="label required">土地用途</view>
+        <picker class="picker" mode="selector" :range="landUseList" @change="handlePickerChange('landUse')">
+          <view class="picker-text">{{ selected.landUse || '种植业' }} ▽</view>
+        </picker>
+      </view>
+
+      <!-- 表单项：基本农田 -->
+      <view class="form-item">
+        <view class="label required">基本农田</view>
+        <picker class="picker" mode="selector" :range="basicFarmlandList" @change="handlePickerChange('basicFarmland')">
+          <view class="picker-text">{{ selected.basicFarmland || '是' }} ▽</view>
+        </picker>
+      </view>
+
+      <!-- 表单项：地块东至 -->
+      <view class="form-item">
+        <view class="label required">地块东至</view>
+        <view class="read-only-text">田埂</view>
+      </view>
+
+      <!-- 表单项：地块西至 -->
+      <view class="form-item">
+        <view class="label required">地块西至</view>
+        <view class="read-only-text">桑枣村旱地</view>
+      </view>
+
+      <!-- 表单项：地块南至 -->
+      <view class="form-item">
+        <view class="label required">地块南至</view>
+        <view class="read-only-text">田埂</view>
+      </view>
+
+      <!-- 表单项：地块北至 -->
+      <view class="form-item">
+        <view class="label required">地块北至</view>
+        <view class="read-only-text">桑枣村旱地</view>
+      </view>
+
+      <!-- 表单项：范围选择 -->
+      <view class="form-item" @click="handleRangeSelect">
+        <view class="label">范围选择</view>
+        <view class="link-text">在地图上打点框选择大致范围</view>
+      </view>
+
+      <!-- 表单项：备注信息 -->
+      <view class="form-item">
+        <view class="label">备注信息</view>
+        <textarea class="textarea" placeholder="请输入" v-model="remark"></textarea>
+      </view>
+    </view>
+
+    <!-- 图片信息区域 -->
+    <view class="section">
+      <view class="section-title">图片信息</view>
+      <view class="form-item">
+        <view class="label">证明材料</view>
+        <view class="upload-area" @click="handleUpload">
+          <!-- <image class="upload-icon" src="/static/upload.png" mode="widthFix"></image> -->
+        </view>
+      </view>
+    </view>
+
+    <!-- 确定按钮 -->
+    <button class="confirm-btn" @click="handleConfirm">确定</button>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'; // 引入uni-icons组件
+// 下拉选择数据源
+const reasonList = ref(['变更理由1', '变更理由2', '变更理由3']);
+const ownershipList = ref(['集体土地所有权', '国有土地所有权']);
+const landTypeList = ref(['其它集体土地', '宅基地', '农用地']);
+const useTypeList = ref(['旱地', '水田', '林地']);
+const soilLevelList = ref(['一等地', '二等地', '三等地']);
+const landUseList = ref(['种植业', '林业', '畜牧业']);
+const basicFarmlandList = ref(['是', '否']);
+
+// 选中的下拉值
+const selected = reactive({
+  changeReason: '',
+  ownership: '集体土地所有权',
+  landType: '其它集体土地',
+  useType: '旱地',
+  soilLevel: '一等地',
+  landUse: '种植业',
+  basicFarmland: '是'
+});
+
+// 备注信息
+const remark = ref('');
+
+// 下拉选择事件
+const handlePickerChange = (key) => (e) => {
+  const value = e.target.value;
+  switch (key) {
+    case 'changeReason':
+      selected.changeReason = reasonList.value[value];
+      break;
+    case 'ownership':
+      selected.ownership = ownershipList.value[value];
+      break;
+    case 'landType':
+      selected.landType = landTypeList.value[value];
+      break;
+    case 'useType':
+      selected.useType = useTypeList.value[value];
+      break;
+    case 'soilLevel':
+      selected.soilLevel = soilLevelList.value[value];
+      break;
+    case 'landUse':
+      selected.landUse = landUseList.value[value];
+      break;
+    case 'basicFarmland':
+      selected.basicFarmland = basicFarmlandList.value[value];
+      break;
+  }
+};
+
+// 范围选择事件
+const handleRangeSelect = () => {
+  uni.showToast({ title: '跳转到地图选择页面', icon: 'none' });
+};
+
+// 上传证明材料
+const handleUpload = () => {
+  uni.chooseImage({
+    count: 1,
+    success: (res) => {
+      // 这里可处理图片上传逻辑
+      uni.showToast({ title: '选择图片成功', icon: 'success' });
+    }
+  });
+};
+
+// 确定按钮事件
+const handleConfirm = () => {
+  // 表单校验、提交逻辑
+  uni.showToast({ title: '提交成功', icon: 'success' });
+};
+</script>
+
+<style scoped>
+.container {
+  padding: 16rpx;
+  background-color: #f8f9fa;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+.section {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-bottom: 20rpx;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24rpx;
+  border-bottom: 2rpx solid #eee;
+  padding-bottom: 20rpx;
+}
+
+.label {
+  width: 200rpx;
+  font-size: 28rpx;
+}
+
+.required::after {
+  content: '*';
+  color: #ff3333;
+  margin-left: 4rpx;
+}
+
+.picker {
+  flex: 1;
+  text-align: right;
+}
+
+.picker-text {
+  font-size: 28rpx;
+  color: #333;
+}
+
+.read-only-text {
+  flex: 1;
+  text-align: right;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.link-text {
+  flex: 1;
+  text-align: right;
+  font-size: 28rpx;
+  color: #007bff;
+}
+
+.textarea {
+  flex: 1;
+  height: 160rpx;
+  border: 1px solid #eee;
+  border-radius: 8rpx;
+  padding: 12rpx;
+  font-size: 28rpx;
+}
+
+.upload-area {
+  width: 120rpx;
+  height: 120rpx;
+  border: 1px dashed #ccc;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.confirm-btn {
+  width: 90%;
+  height: 80rpx;
+  line-height: 80rpx;
+  background-color: #007bff;
+  color: #fff;
+  border-radius: 8rpx;
+  font-size: 32rpx;
+  margin: 0 auto;
+  display: block;
+}
+</style>

src/pages/map/map.vue

@@ -0,0 +1,267 @@
+<template>
+  <view class="map-container">
+    <!-- 地图容器 -->
+    <view id="map" class="map"></view>
+    
+    <!-- 控制按钮区域 -->
+    <view class="map-controls">
+      <button @click="centerToMyLocation" class="control-btn">
+        <uni-icons type="location" size="20" color="#fff"></uni-icons>
+      </button>
+      <button @click="addMarker" class="control-btn">
+        <uni-icons type="add" size="20" color="#fff"></uni-icons>
+      </button>
+    </view>
+    
+    <!-- 标记点弹窗（按需显示） -->
+    <uni-popup ref="markerPopup" type="center" :mask-click="true">
+      <view class="popup-content">
+        <view class="popup-title">{{ popupData.title }}</view>
+        <view class="popup-desc">{{ popupData.desc }}</view>
+        <button @click="closePopup" class="popup-btn">关闭</button>
+      </view>
+    </uni-popup>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive } from 'vue';
+
+// 天地图配置（替换为你的密钥）
+const TDT_KEY = 'dd717660232dd71af76bb693f8bef46f';
+// 地图实例引用
+const mapRef = ref<any>(null);
+// 弹窗数据
+const popupData = reactive({
+  title: '',
+  desc: ''
+});
+// 标记点集合
+const markers = ref<Array<any>>([]);
+
+/**
+ * 初始化地图
+ */
+const initMap = () => {
+  // 动态加载天地图JSAPI（避免重复加载）
+  if (window.T) return initMapCore();
+  
+  const script = document.createElement('script');
+  script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${TDT_KEY}`;
+  script.onload = initMapCore;
+  script.onerror = () => uni.showToast({ title: '地图加载失败', icon: 'none' });
+  document.head.appendChild(script);
+};
+
+/**
+ * 地图核心初始化逻辑
+ */
+const initMapCore = () => {
+  // 创建地图实例（中心点默认设为北京）
+  mapRef.value = new window.T.Map('map', {
+    projection: 'EPSG:4326', // WGS84坐标系
+    zoom: 14, // 初始缩放级别
+    center: new window.T.LngLat(116.404, 39.915) // 初始中心点经纬度
+  });
+  
+  // 添加矢量底图图层
+  const baseLayer = new window.T.TileLayer(
+    'https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={l}&tk=' + TDT_KEY,
+    { maxZoom: 18, minZoom: 3, subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+  );
+  mapRef.value.addLayer(baseLayer);
+  
+  // 添加矢量注记图层（显示地名）
+  const labelLayer = new window.T.TileLayer(
+    'https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={l}&tk=' + TDT_KEY,
+    { maxZoom: 18, minZoom: 3, subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+  );
+  mapRef.value.addLayer(labelLayer);
+  
+  // 监听地图加载完成
+  mapRef.value.addEventListener('load', () => {
+    console.log('地图加载完成');
+    // 自动定位到当前位置
+    getCurrentLocation();
+  });
+};
+
+/**
+ * 获取当前位置（Uni-app定位API）
+ */
+const getCurrentLocation = () => {
+  uni.getLocation({
+    type: 'gcj02', // 火星坐标系（天地图支持GCJ02和WGS84）
+    geocode: true, // 是否解析地址信息
+    success: (res) => {
+      const { longitude, latitude, address } = res;
+      console.log('当前位置：', longitude, latitude, address);
+      
+      // 移动地图到当前位置
+      const lngLat = new window.T.LngLat(longitude, latitude);
+      mapRef.value.panTo(lngLat);
+      
+      // 添加当前位置标记点
+      addMarkerToMap(lngLat, {
+        title: '我的位置',
+        desc: address.province + address.city + address.district + address.street
+      });
+    },
+    fail: (err) => {
+      uni.showToast({ title: '定位失败，请开启定位权限', icon: 'none' });
+      console.error('定位失败：', err);
+    }
+  });
+};
+
+/**
+ * 移动地图到当前位置
+ */
+const centerToMyLocation = () => {
+  getCurrentLocation();
+};
+
+/**
+ * 添加自定义标记点
+ */
+const addMarker = () => {
+  // 获取地图当前中心点
+  const center = mapRef.value.getCenter();
+  // 随机偏移一点经纬度，避免和现有标记点重叠
+  const randomLng = center.lng + (Math.random() - 0.5) * 0.01;
+  const randomLat = center.lat + (Math.random() - 0.5) * 0.01;
+  const lngLat = new window.T.LngLat(randomLng, randomLat);
+  
+  // 添加标记点
+  addMarkerToMap(lngLat, {
+    title: '自定义标记点',
+    desc: `经纬度：${randomLng.toFixed(6)}, ${randomLat.toFixed(6)}`
+  });
+};
+
+/**
+ * 向地图添加标记点
+ * @param lngLat 经纬度对象
+ * @param info 标记点信息
+ */
+const addMarkerToMap = (lngLat: any, info: { title: string; desc: string }) => {
+  // 创建标记点图标（可自定义图标）
+  const icon = new window.T.Icon(
+    'https://api.tianditu.gov.cn/v4.0/image/marker/mark_r.png', // 天地图默认红色标记
+    new window.T.Size(30, 30), // 图标大小
+    { anchor: new window.T.Point(15, 30) } // 图标锚点（底部中心点）
+  );
+  
+  // 创建标记点
+  const marker = new window.T.Marker(lngLat, { icon });
+  // 存储标记点信息
+  marker.info = info;
+  
+  // 添加标记点点击事件
+  marker.addEventListener('click', () => {
+    popupData.title = info.title;
+    popupData.desc = info.desc;
+  });
+  
+  // 添加到地图和标记点集合
+  mapRef.value.addOverLay(marker);
+  markers.value.push(marker);
+};
+
+/**
+ * 关闭弹窗
+ */
+const closePopup = () => {
+};
+
+/**
+ * 生命周期：页面加载时初始化地图
+ */
+onMounted(() => {
+  // 确保DOM渲染完成后再初始化地图
+    initMap();
+});
+
+/**
+ * 生命周期：页面卸载时销毁地图
+ */
+onUnmounted(() => {
+  if (mapRef.value) {
+    // 移除所有标记点
+    markers.value.forEach(marker => {
+      mapRef.value.removeOverLay(marker);
+    });
+    // 销毁地图实例
+    mapRef.value.destroy();
+    mapRef.value = null;
+  }
+});
+</script>
+
+<style scoped>
+.map-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}
+
+/* 控制按钮样式 */
+.map-controls {
+  position: absolute;
+  bottom: 30px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.control-btn {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #1989fa;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* 弹窗样式 */
+.popup-content {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  width: 80%;
+  max-width: 300px;
+}
+
+.popup-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.popup-desc {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
+.popup-btn {
+  width: 100%;
+  background-color: #1989fa;
+  color: #fff;
+  border-radius: 8px;
+  padding: 10px 0;
+  font-size: 16px;
+}
+</style>

src/pages/task/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <!-- 页面容器 -->
+  <view class="container">
+    <!-- 顶部标签栏 -->
+    <view class="tab-bar">
+      <view 
+        v-for="(tab, index) in tabs" 
+        :key="index"
+        :class="['tab-item', currentTab === index ? 'active' : '']"
+        @click="currentTab = index"
+      >
+        {{ tab }}
+      </view>
+    </view>
+
+    <!-- 搜索区域 -->
+    <view class="search-bar">
+      <input 
+        type="text" 
+        placeholder="请输入承包方姓名"
+        v-model="searchName"
+        class="search-input"
+      />
+      <button class="search-btn" @click="handleSearch">搜索</button>
+    </view>
+
+    <!-- 无数据占位区域 -->
+    <view class="empty-data" v-if="isDataEmpty">
+      <text class="empty-text">暂无数据</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 标签栏数据
+const tabs = ref(['未调查', '已调查', '内业已处理']);
+// 当前选中标签索引
+const currentTab = ref(0);
+// 搜索框绑定值
+const searchName = ref('');
+// 是否无数据（实际项目中根据接口返回值判断）
+const isDataEmpty = ref(true);
+
+// 搜索按钮点击事件
+const handleSearch = () => {
+  console.log('搜索关键词：', searchName.value);
+  // 实际项目中调用接口查询数据
+};
+</script>
+
+<style scoped>
+/* 页面容器 */
+.container {
+  padding: 10rpx;
+  background-color: #fff;
+  min-height: 100vh;
+}
+
+/* 标签栏样式 */
+.tab-bar {
+  display: flex;
+  margin-bottom: 20rpx;
+}
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 15rpx 0;
+  font-size: 28rpx;
+  color: #333;
+  border: 1px solid #e5e5e5;
+  border-right: none;
+}
+.tab-item:last-child {
+  border-right: 1px solid #e5e5e5;
+}
+.tab-item.active {
+  background-color: #2c83ff;
+  color: #fff;
+  border-color: #2c83ff;
+}
+
+/* 搜索栏样式 */
+.search-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 40rpx;
+}
+.search-input {
+  flex: 1;
+  height: 60rpx;
+  border: 1px solid #e5e5e5;
+  border-radius: 8rpx 0 0 8rpx;
+  padding: 0 20rpx;
+  font-size: 28rpx;
+}
+.search-btn {
+  width: 120rpx;
+  height: 60rpx;
+  background-color: #2c83ff;
+  color: #fff;
+  font-size: 28rpx;
+  border-radius: 0 8rpx 8rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 无数据占位样式 */
+.empty-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 100rpx;
+}
+.empty-img {
+  width: 200rpx;
+  margin-bottom: 20rpx;
+}
+.empty-text {
+  font-size: 28rpx;
+  color: #999;
+}
+</style>