LandSurveyApplet/pages/EntryPage/backstageAdd.vue

<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';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	// 信息描述内容
	const infoDesc = ref('');
	// 上传的图片地址
	const imageUrl = ref('');

	// 初始化数据，避免undefined
	const groupInfo = ref({});
	
	/**
	 * 解析页面参数
	 * @param {Object} options - 页面跳转参数
	 * @returns {Object} 解析后的承包方数据
	 */
	const parseOptions = (options) => {
		try {
			if (!options?.groupInfo) {
				console.warn('未传入groupInfo参数');
				return {};
			}
	
			// 解码并解析JSON
			const decodedData = decodeURIComponent(options.groupInfo);
			const parsedData = JSON.parse(decodedData);
	
			return parsedData;
		} catch (error) {
			console.error('解析groupInfo失败:', error);
			uni.showToast({
				title: '数据解析失败',
				icon: 'none'
			});
			return {};
		}
	};
	
	// 页面加载时解析参数
	onLoad((options) => {
		groupInfo.value = {
			...groupInfo.value,
			...parseOptions(options)
		};
		console.log('解析后的承包方数据:', groupInfo.value._value);
	});

	// 选择图片（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>