You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
609 lines
19 KiB
609 lines
19 KiB
<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>
|