houserent-front/pages_subpack/house/commercial.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="propertyImages" labelPosition="top" required>
					<view class="upload-tip">请上传房产证、土地证或不动产权证照片</view>
					<uv-upload customStyle="margin-top:20rpx;" :fileList="form.propertyImages" @afterRead="afterPropertyRead" @delete="deletePropertyPic" name="1"
						multiple :maxCount="5"></uv-upload>
				</uv-form-item>
				
				<!-- 5. 土地面积 -->
				<uv-form-item label="土地面积" prop="landArea" required>
					<view class="input-with-unit">
						<uv-input v-model="form.landArea" type="digit" placeholder="请输入土地面积" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;" @input="debounceSaveFormData"></uv-input>
						<text class="unit">亩</text>
					</view>
					<view class="input-tip">请录入土地使用证或不动产权证面积，仅输入数字</view>
				</uv-form-item>
				
				<!-- 6. 地块视频 -->
				<uv-form-item label="地块视频" labelWidth="250" prop="videos" labelPosition="top" required>
					<view class="upload-tip">请上传地块视频，时长不超过1分钟，最多上传2个视频</view>
					<uv-upload customStyle="margin-top:20rpx;" accept="video" :fileList="form.videos" @afterRead="afterVideoRead" @delete="deleteVideoPic" name="1"
						multiple :maxCount="2"></uv-upload>
				</uv-form-item>
				
				<!-- 7. 价格 -->
				<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" v-if="form.type === 'rent'">元/亩/年</text>
						<text class="price-unit" v-else-if="form.type === 'transfer'">万元/亩</text>
						<text class="price-unit" v-else>元</text>
					</view>
					<view class="input-tip">请输入数字，支持小数点后两位</view>
				</uv-form-item>
				
				<!-- 8. 地块图片 -->
				<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="分类标识" 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>
				
				<!-- 8. 地块介绍 -->
				<uv-form-item label="地块介绍" prop="description" labelPosition="top">
					<uv-input 
						v-model="form.description" 
						type="textarea" 
						placeholder="请详细介绍地块情况、用途规划、周边环境等" 
						customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:10px;"
						:autoHeight="true"
						:maxlength="500"
						@input="debounceSaveFormData"
					></uv-input>
				</uv-form-item>
				
				<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: 'commercial_form', // 表单存储唯一标识
					saveTimer: null, // 防抖定时器
					commonClass: '', // 所属分类ID
				form: {
					type: '', // 出租/出让
					address: '', // 地址
					contactName: '', // 联系人
					contactPhone: '', // 联系电话
					propertyImages: [], // 产权证照片
					landArea: '', // 土地面积
					videos: [], // 地块视频
					price: '', // 价格
					images: [], // 地块图片
					description: '', // 地块介绍
					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'] }
					],
					landArea: [
						{ required: true, message: '请输入土地面积', trigger: ['blur', 'change'] },
						{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: ['blur', 'change'] }
					],
					price: [
						{ required: true, message: '请输入价格', trigger: ['blur', 'change'] },
						{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的价格格式', trigger: ['blur', 'change'] }
					],
					images: [
						{ 
							required: true, 
							message: '请上传地块图片', 
							trigger: ['blur', 'change'],
							validator: (rule, value, callback) => {
								if (!value || value.length === 0) {
									callback(new Error('请上传地块图片'));
								} else {
									callback();
								}
							}
						}
					],
					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
					}
				})
			},
			
			// 分类选择
			handleClass() {
				this.$refs.picker.open();
			},
			
			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()
			},
			
			// 产权证照片上传
			async afterPropertyRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.propertyImages.push({
							url
						})
						// 上传完成后保存表单数据
						self.debounceSaveFormData()
					})
				})
			},
			
			deletePropertyPic(event) {
				this.form.propertyImages.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)
						
						// 检查视频时长是否超过60秒
						// 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)
						uni.showToast({
							title: '视频格式不支持',
							icon: 'none'
						})
					}
				}
			},
			
			// 获取视频时长的辅助方法
			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()
			},
			
			// 地块图片上传
			async afterImageRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.images.push({
							url
						})
						// 上传完成后保存表单数据
						self.debounceSaveFormData()
						// 触发表单验证更新
						self.$refs.form.validateField('images')
					})
				})
			},
			
			deleteImagePic(event) {
				this.form.images.splice(event.index, 1)
				// 删除后保存表单数据
				this.debounceSaveFormData()
				// 触发表单验证更新
				this.$refs.form.validateField('images')
			},
			
			// 提交表单
			submit() {
				this.$refs.form.validate().then(res => {
					// 验证必填的图片和视频
					if (this.form.propertyImages.length === 0) {
						uni.showToast({
							title: '请上传产权证照片',
							icon: 'none'
						});
						return;
					}
					
					if (this.form.videos.length === 0) {
						uni.showToast({
							title: '请上传地块视频',
							icon: 'none'
						});
						return;
					}
					
					if (this.form.images.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: this.form.landArea, // 面积 - 使用土地面积
						homeMj: this.form.landArea, // 房屋面积 - 使用土地面积
						homeMoney: "", // 佣金 - 经营性用地无此字段
						homeNo: "", // 房屋编号 - 经营性用地无此字段
						homeNum: "", // 房间数量 - 经营性用地无此字段
						homePay: "", // 付款方式及押金 - 经营性用地无此字段
						homePj: "", // 邻居对房东评价 - 经营性用地无此字段
						homeSd: "", // 水电气网 - 经营性用地无此字段
						homeShjl: "", // 距离成都西三环 - 经营性用地无此字段
						homeSw: "", // 非正常死亡 - 默认无
						homeTf: "", // 府市民云房屋信息档案查询 - 经营性用地无此字段
						homeTime: "", // 租期 - 经营性用地无此字段
						homeType: this.form.type === 'rent' ? '出租' : '出让', // 户型 - 使用类型
						homeYs: "", // 钥匙 - 默认无
						homeYzmj: this.form.landArea, // 院子总面积 - 使用土地面积
						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: this.form.type === 'rent' ? '元/亩/年' : '万元/亩', // 单位
						image: this.form.images.map(item => item.url).join(','), // 地块图片
						iconImage: "", // 左上角图标
						homeImage: this.form.propertyImages.map(item => item.url).join(','), // 产权证照片
						homeMp4: this.form.videos.map(item => item.url).join(','), // 视频
						latitude: this.form.latitude,
						longitude: this.form.longitude,
						// 新增字段用于标识经营性用地
						category: 'commercial',
						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-with-unit {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	.unit {
		font-size: 26rpx;
		color: #666;
		margin-left: 10rpx;
	}
	
	.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: #FF6B35;
		font-weight: bold;
		margin-left: 10rpx;
	}
</style>