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.
450 lines
15 KiB
450 lines
15 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">
|
|
<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;"></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;"></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;"></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分钟内）</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;"></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>
|
|
|
|
<!-- 分类标识 -->
|
|
<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"
|
|
></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"
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
commonClass: '', // 所属分类ID
|
|
form: {
|
|
type: '', // 出租/出让
|
|
address: '', // 地址
|
|
contactName: '', // 联系人
|
|
contactPhone: '', // 联系电话
|
|
propertyImages: [], // 产权证照片
|
|
landArea: '', // 土地面积
|
|
videos: [], // 地块视频
|
|
price: '', // 价格
|
|
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'] }
|
|
],
|
|
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()
|
|
},
|
|
methods: {
|
|
// 获取分类数据
|
|
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;
|
|
},
|
|
|
|
// 产权证照片上传
|
|
async afterPropertyRead(e) {
|
|
let self = this
|
|
e.file.forEach(file => {
|
|
self.$Oss.ossUpload(file.url).then(url => {
|
|
self.form.propertyImages.push({
|
|
url
|
|
})
|
|
})
|
|
})
|
|
},
|
|
|
|
deletePropertyPic(event) {
|
|
this.form.propertyImages.splice(event.index, 1)
|
|
},
|
|
|
|
// 视频上传
|
|
async afterVideoRead(e) {
|
|
let self = this
|
|
e.file.forEach(file => {
|
|
self.$Oss.ossUpload(file.url).then(url => {
|
|
self.form.videos.push({
|
|
url
|
|
})
|
|
})
|
|
})
|
|
},
|
|
|
|
deleteVideoPic(event) {
|
|
this.form.videos.splice(event.index, 1)
|
|
},
|
|
|
|
// 提交表单
|
|
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;
|
|
}
|
|
|
|
// 构建与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: "", // 图片 - 经营性用地无房屋照片
|
|
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();
|
|
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>
|