houserent-front/pages_subpack/house/other.vue

<template>
	<view class="container">
		<view class="header">
			<view class="title">其他农村资源录入</view>
		</view>
		
		<view class="form-container">
			<uv-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="80" labelStyle="font-size:28rpx;">
				
				<!-- 必填项 -->
				<view class="section-title">基本信息（必填）</view>
				
				<!-- 1. 出租/流转 -->
				<uv-form-item label="类型" prop="type" required>
					<uv-radio-group v-model="form.type" placement="row" @change="debounceSaveFormData">
						<uv-radio name="rent" label="出租"></uv-radio>
						<uv-radio name="transfer" customStyle="margin-left:30rpx;" label="流转"></uv-radio>
					</uv-radio-group>
				</uv-form-item>
				
				<!-- 2. 地址 -->
				<uv-form-item label="地址" prop="address" required @click="handleAddressSelect()">
					<uv-input v-model="form.address" @click="handleAddressSelect()" disabled disabledColor="#ffffff" placeholder="请选择资源位置" border="none">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				
				<!-- 3. 联系人和电话 -->
				<uv-form-item label="联系人" prop="contactName" required>
					<uv-input v-model="form.contactName" type="text" placeholder="请输入联系人姓名" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;" @input="debounceSaveFormData"></uv-input>
				</uv-form-item>
				
				<uv-form-item label="联系电话" prop="contactPhone" required>
					<uv-input v-model="form.contactPhone" type="number" placeholder="请输入联系电话" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;" @input="debounceSaveFormData"></uv-input>
				</uv-form-item>
				
				<!-- 4. 照片和视频 -->
				<uv-form-item label="资源照片" labelWidth="250" prop="images" labelPosition="top" required>
					<view class="upload-tip">请上传资源相关照片</view>
					<uv-upload customStyle="margin-top:20rpx;" 
					:fileList="form.images" @afterRead="afterImageRead" 
					@delete="deleteImagePic" name="1"
						multiple :maxCount="10"></uv-upload>
				</uv-form-item>
				
				<uv-form-item label="资源视频" labelWidth="250" prop="videos" labelPosition="top" required>
					<view class="upload-tip">请上传资源视频，时长不超过1分钟，最多上传3个视频</view>
					<uv-upload customStyle="margin-top:20rpx;" accept="video" :fileList="form.videos" @afterRead="afterVideoRead" @delete="deleteVideoPic" name="1"
						multiple :maxCount="3"></uv-upload>
				</uv-form-item>
				
				<!-- 5. 价格 -->
				<uv-form-item label="价格" prop="price" required>
					<view class="price-container">
						<uv-input v-model="form.price" type="digit" placeholder="请输入价格" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;flex:1;" @input="debounceSaveFormData"></uv-input>
						<text class="price-unit">元</text>
					</view>
					<view class="input-tip">请输入数字，支持小数点后两位</view>
				</uv-form-item>
				
				<!-- 6. 资源介绍 -->
				<uv-form-item label="资源介绍" prop="description" labelPosition="top" required>
					<uv-input 
						v-model="form.description" 
						type="textarea" 
						placeholder="请详细介绍资源类型、用途、特色、优势等信息" 
						customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:10px;"
						:autoHeight="true"
						:maxlength="1000"
						@input="debounceSaveFormData"
					></uv-input>
					<view class="char-count">{{form.description.length}}/1000</view>
					<view class="input-tip">请详细描述资源的类型、用途、特色、规模、优势等</view>
				</uv-form-item>
				
				<!-- 分类标识 -->
				<uv-form-item label="分类标识" prop="classId" @click="handleClass()">
					<uv-input v-model="form.className" @click="handleClass()" disabled disabledColor="#ffffff" placeholder="选择分类标识" border="none">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				
				<!-- 代理协议 -->
				<view class="section-title">代理协议</view>
				<view class="agreement-container">
					<view class="agreement-content">
						<text class="agreement-title">代理协议</text>
						<text class="agreement-text">
							本人同意授权我平台发布信息、代理销售等。本人承诺所提供的信息真实有效，并同意平台进行相关推广和销售代理。
						</text>
					</view>
					<uv-checkbox v-model="form.agreeProtocol" 
					name="1"
					shape="circle" activeColor="#1EC77A"
					@change="onAgreementChange">
						<text class="agreement-label">我已阅读并同意代理协议</text>
					</uv-checkbox>
				</view>
				
				<uv-form-item>
					<uv-button type="primary" text="提交信息" customStyle="margin-top: 30px;background-color: #1EC77A;border-radius: 30px;" @click="submit"></uv-button>
				</uv-form-item>
			</uv-form>
		</view>
		
		<!-- 分类选择器 -->
		<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
	</view>
</template>

<script>
	import { saveOrUpdateHouse, houseType } from "@/common/api.js"
	import formStorage from "@/utils/formStorage.js"
	
	export default {
			data() {
				return {
					formKey: 'other_form', // 表单存储唯一标识
					saveTimer: null, // 防抖定时器
					commonClass: '', // 所属分类ID
				form: {
					type: '', // 出租/流转
					address: '', // 地址
					contactName: '', // 联系人
					contactPhone: '', // 联系电话
					images: [], // 资源照片
					videos: [], // 资源视频
					price: '', // 价格（开放式）
					description: '', // 资源介绍
					agreeProtocol: false, // 同意代理协议
					longitude: '', // 经度
					latitude: '', // 纬度
					classId: '', // 分类标识
					className: '' // 分类名称
				},
				columns: [], // 分类选择器数据
				houseTypeList: [], // 分类列表
				rules: {
					type: [
						{ required: true, message: '请选择出租或流转', trigger: ['blur', 'change'] }
					],
					address: [
						{ required: true, message: '请选择资源地址', trigger: ['blur', 'change'] }
					],
					contactName: [
						{ required: true, message: '请输入联系人姓名', trigger: ['blur', 'change'] }
					],
					contactPhone: [
						{ required: true, message: '请输入联系电话', trigger: ['blur', 'change'] },
						{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
					],
					price: [
						{ required: true, message: '请输入价格', trigger: ['blur', 'change'] },
						{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的价格格式', trigger: ['blur', 'change'] }
					],
					description: [
						{ required: true, message: '请输入资源介绍', trigger: ['blur', 'change'] },
						{ min: 10, message: '资源介绍至少需要10个字符', trigger: ['blur', 'change'] }
					],
					classId: [
						{ required: true, message: '请选择分类标识', trigger: ['blur', 'change'] }
					]
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			// 设置页面标题
			uni.setNavigationBarTitle({
				title: '其他农村资源录入'
			})
			
			// 接收传递的commonClass参数
			if(options.commonClass) {
				this.commonClass = options.commonClass
			}
			
			// 如果是编辑模式，设置classId用于回显
			if(options.classId) {
				this.form.classId = options.classId
			}
			
			// 初始化分类数据
			this.onHouseType()
			
			// 恢复表单数据
			this.restoreFormData()
		},
		onUnload() {
			// 页面卸载时保存数据
			this.saveFormData()
			// 清除定时器
			if (this.saveTimer) {
				clearTimeout(this.saveTimer)
			}
		},
		methods: {
			// 恢复表单数据
			restoreFormData() {
				const savedData = formStorage.getFormData(this.formKey)
				if (savedData) {
					// 合并保存的数据到表单
					this.form = { ...this.form, ...savedData }
				}
			},
			
			// 保存表单数据
			saveFormData() {
				formStorage.saveFormData(this.formKey, this.form)
			},
			
			// 防抖保存表单数据
			debounceSaveFormData() {
				clearTimeout(this.saveTimer)
				this.saveTimer = setTimeout(() => {
					this.saveFormData()
				}, 1000)
			},
			// 获取分类数据
			onHouseType(){
				let that = this
				houseType({}).then(response=>{
					let arr=[]
					that.houseTypeList = response.result
					response.result.forEach(items=>{
						arr.push(items.title)
						// 数据回显：如果当前classId匹配，设置className
						if(items.id == that.form.classId){
							that.form.className = items.title
						}
					})
					that.columns[0]=arr
				}).catch(error=>{
					
				})
			},
			
			// 地址选择
			handleAddressSelect() {
				const that = this;
				wx.chooseLocation({
					success: function (res) {
						console.log('选择的位置：', res);
						that.form.longitude = res.longitude
						that.form.latitude = res.latitude
						that.form.address = res.address
					}
				})
			},
			
			// 资源照片上传
			async afterImageRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.images.push({
							url
						})
						// 上传完成后保存表单数据
						self.debounceSaveFormData()
					})
				})
			},
			
			deleteImagePic(event) {
				this.form.images.splice(event.index, 1)
				// 删除后保存表单数据
				this.debounceSaveFormData()
			},
			
			// 视频上传
			async afterVideoRead(e) {
				let self = this
				for (let file of e.file) {
					try {
						// 检查视频时长
						const duration = await this.getVideoDuration(file.url)
						if (duration > 60) {
							uni.showToast({
								title: '视频时长不能超过1分钟',
								icon: 'none'
							})
							continue // 跳过这个视频
						}
						
						self.$Oss.ossUpload(file.url).then(url => {
							self.form.videos.push({
								url
							})
							// 上传完成后保存表单数据
							self.debounceSaveFormData()
						})
					} catch (error) {
						console.error('视频处理失败：', error)
						// 如果获取时长失败，仍然允许上传
						self.$Oss.ossUpload(file.url).then(url => {
							self.form.videos.push({
								url
							})
							// 上传完成后保存表单数据
							self.debounceSaveFormData()
						})
					}
				}
			},
			
			// 获取视频时长的辅助方法
			getVideoDuration(videoUrl) {
				return new Promise((resolve, reject) => {
					// #ifdef MP-WEIXIN
					uni.getVideoInfo({
						src: videoUrl,
						success: (res) => {
							resolve(res.duration)
						},
						fail: (err) => {
							reject(err)
						}
					})
					// #endif
					
					// #ifdef APP-PLUS
					plus.io.getVideoInfo({
						filePath: videoUrl,
						success: (res) => {
							resolve(res.duration)
						},
						fail: (err) => {
							reject(err)
						}
					})
					// #endif
					
					// #ifdef H5
					// H5环境暂不支持视频时长检测，直接通过
					resolve(0)
					// #endif
				})
			},
			
			deleteVideoPic(event) {
				this.form.videos.splice(event.index, 1)
				// 删除后保存表单数据
				this.debounceSaveFormData()
			},
			
			// 分类选择
			handleClass() {
				this.$refs.picker.open();
			},
			
			// 代理协议状态变化
			onAgreementChange(e) {
				console.log('代理协议状态变化：', e);
				this.form.agreeProtocol = e;
				// 状态变化后保存表单数据
				this.debounceSaveFormData()
			},
			
			confirm(e) {
				let that = this
				let {indexs,value,values} = e
				that.form.classId = that.houseTypeList[indexs[0]].id;
				that.form.className = that.houseTypeList[indexs[0]].title;
				// 选择后保存表单数据
				that.debounceSaveFormData()
			},
			
			// 提交表单
			submit() {
				console.log(this.form.agreeProtocol);
				// 检查是否同意代理协议
				if (!this.form.agreeProtocol) {
					uni.showToast({
						title: '请先同意代理协议',
						icon: 'none'
					});
					return;
				}
				
				this.$refs.form.validate().then(res => {
					// 验证必填的图片和视频
					if (this.form.images.length === 0) {
						uni.showToast({
							title: '请上传资源照片',
							icon: 'none'
						});
						return;
					}
					
					if (this.form.videos.length === 0) {
						uni.showToast({
							title: '请上传资源视频',
							icon: 'none'
						});
						return;
					}
					
					// 构建与index.vue兼容的提交参数
					const params = {
						userId: uni.getStorageSync('userInfo')?.id || "",
						id: "", // 新增数据，无ID
						classId: this.form.classId, // 使用分类标识
						commonClass: this.commonClass, // 所属分类
						address: this.form.address, // 地址
						homeAge: "", // 户主年龄 - 其他资源无此字段
						homeAz: "", // 是否经过安置 - 默认否
						homeBian: "", // 房屋周边 - 其他资源无此字段
						homeBjsx: "", // 报建手续 - 其他资源无此字段
						homeCai: "", // 菜地 - 其他资源无此字段
						homeCat: "", // 停车 - 其他资源无此字段
						homeGz: "", // 房屋主体是否改造 - 默认否
						homeHb: "", // 房屋朝向及海拔 - 其他资源无此字段
						homeBz: this.form.description, // 备注 - 使用资源介绍
						homeJg: "其他农村资源", // 房屋结构 - 使用固定值
						homeJl: "", // 距离场镇距离 - 其他资源无此字段
						homeJt: "", // 交通 - 其他资源无此字段
						homeJtzy: "", // 户主家庭职业 - 其他资源无此字段
						homeMi: "", // 面积 - 其他资源无此字段
						homeMj: "", // 房屋面积 - 其他资源无此字段
						homeMoney: "", // 佣金 - 其他资源无此字段
						homeNo: "", // 房屋编号 - 其他资源无此字段
						homeNum: "", // 房间数量 - 其他资源无此字段
						homePay: this.form.price, // 付款方式及押金 - 使用价格信息
						homePj: "", // 邻居对房东评价 - 其他资源无此字段
						homeSd: "", // 水电气网 - 其他资源无此字段
						homeShjl: "", // 距离成都西三环 - 其他资源无此字段
						homeSw: "", // 非正常死亡 - 默认无
						homeTf: "", // 府市民云房屋信息档案查询 - 其他资源无此字段
						homeTime: "", // 租期 - 其他资源无此字段
						homeType: this.form.type === 'rent' ? '出租' : '流转', // 户型 - 使用类型
						homeYs: "", // 钥匙 - 默认无
						homeYzmj: "", // 院子总面积 - 其他资源无此字段
						homeZy: "", // 坟包及电塔 工厂噪音 - 其他资源无此字段
						iconName: "其他农村资源", // 热点名称
						iconTitle: "其他资源", // 标签
						num: "0", // 浏览量 - 默认0
						price: this.form.price, // 价格
						timeGo: "", // 年限 - 其他资源无此字段
						title: `${this.form.type === 'rent' ? '出租' : '流转'}-其他农村资源-${this.form.address.split('市')[1] || this.form.address}`, // 标题 - 自动生成
						unit: "元", // 单位 - 其他资源价格单位灵活
						image: this.form.images.map(item => item.url).join(','), // 图片 - 使用资源照片
						iconImage: "", // 左上角图标
						homeImage: "", // 产权证照片 - 其他资源可能无产权证
						homeMp4: this.form.videos.map(item => item.url).join(','), // 视频
						latitude: this.form.latitude,
						longitude: this.form.longitude,
						// 新增字段用于标识其他资源
						category: 'other',
						contactName: this.form.contactName,
						contactPhone: this.form.contactPhone
					};
					
					console.log('其他资源提交参数：', params);
					
					uni.showLoading({
						title: '提交中...'
					});
					
					// 调用统一API
			saveOrUpdateHouse(params).then(response => {
				uni.hideLoading();
				// 提交成功后清除本地存储的表单数据
				formStorage.removeFormData(this.formKey);
				uni.showToast({
					title: response.message || '提交成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.redirectTo({
						url: "/pages_subpack/successful-apply/index"
					});
				}, 2000);
			}).catch(error => {
						uni.hideLoading();
						uni.showToast({
							title: error.message || '提交失败',
							icon: 'none'
						});
						console.error('其他资源提交失败：', error);
					});
					
				}).catch(errors => {
					console.log('表单验证失败：', errors);
                    uni.showToast({
                        title: '请补全必填项',
                        icon: 'none'
                    });
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.header {
		background: linear-gradient(135deg, #1EC77A 0%, #4CAF50 100%);
		padding: 40rpx 40rpx 60rpx;
		color: white;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}
	
	.form-container {
		background: white;
		margin: -30rpx 20rpx 20rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin: 40rpx 0 30rpx;
		padding-left: 20rpx;
		border-left: 6rpx solid #1EC77A;
	}
	
	.section-title:first-child {
		margin-top: 0;
	}
	
	.input-tip {
		font-size: 22rpx;
		color: #999;
		margin-top: 10rpx;
		line-height: 1.4;
	}
	
	.upload-tip {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
		line-height: 1.5;
	}
	
	.price-container {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	.price-unit {
		font-size: 26rpx;
		color: #1EC77A;
		font-weight: bold;
		margin-left: 10rpx;
	}
	
	.char-count {
		font-size: 22rpx;
		color: #999;
		text-align: right;
		margin-top: 10rpx;
	}
	
	.agreement-container {
		margin: 30rpx 0;
		padding: 30rpx;
		background: #f8f9fa;
		border-radius: 15rpx;
		border: 2rpx solid #e9ecef;
	}
	
	.agreement-content {
		margin-bottom: 30rpx;
	}
	
	.agreement-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.agreement-text {
		display: block;
		font-size: 24rpx;
		color: #666;
		line-height: 1.6;
	}
	
	.agreement-label {
		font-size: 26rpx;
		color: #333;
		margin-left: 10rpx;
	}
</style>