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.
606 lines
18 KiB
606 lines
18 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="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>
|