houserent-front/pages_subpack/house/index.vue

<template>
	<view class="se-p-40 se-bgc-white">
		<uv-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="60" labelStyle="font-size:26rpx;">
			<uv-form-item label="标题" prop="title" >
				<uv-input v-model="form.title" 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="price">
				<uv-input v-model="form.price" 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="house">
				<uv-input v-model="form.house" 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="proportion">
				<uv-input v-model="form.proportion" 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="address" @click="handleAreaChange()">
				<uv-input v-model="form.address" @click="handleAreaChange()" disabled disabledColor="#ffffff" placeholder="选择所在位置" border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="编号" prop="number">
				<uv-input v-model="form.number" 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="perimeter">
				<uv-input v-model="form.perimeter" 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="iconTitle">
				<uv-input v-model="form.iconTitle" 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="housesNumber">
				<uv-number-box v-model="form.housesNumber" :min="1" :max="10"></uv-number-box>
			</uv-form-item>
			<uv-form-item label="房屋主体是否改造"  labelWidth="200" prop="revamp">
				<uv-radio-group v-model="form.revamp" placement="row">
					<uv-radio name="1" label="是"></uv-radio>
					<uv-radio name="0" customStyle="margin-left:30rpx;" label="否"></uv-radio>
				</uv-radio-group>
			</uv-form-item>
			<uv-form-item label="是否经过安置"  labelWidth="200" prop="resettle">
				<uv-radio-group v-model="form.resettle" placement="row">
					<uv-radio name="1" label="是"></uv-radio>
					<uv-radio name="0" customStyle="margin-left:30rpx;" label="否"></uv-radio>
				</uv-radio-group>
			</uv-form-item>
			<uv-form-item label="院子总面积"  labelWidth="100" prop="yardProportion">
				<uv-input v-model="form.yardProportion" 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="坟包及电塔工厂噪音" labelWidth="150" prop="noise">
				<uv-input v-model="form.noise" 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="net">
				<uv-input v-model="form.net" 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="park">
				<uv-input v-model="form.park" 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="付款方式及押金" labelWidth="120" prop="deposit">
				<uv-input v-model="form.deposit" 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="天府市民云房屋信息档案查询" labelWidth="100" prop="archival" labelPosition="top">
				<uv-input v-model="form.archival" 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="tenancy">
				<uv-input v-model="form.tenancy" 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="邻居对房东的评价" labelWidth="120" prop="evaluate">
				<uv-input v-model="form.evaluate" 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="非正常死亡" labelWidth="80" prop="death">
				<uv-input v-model="form.death" 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="key">
				<uv-radio-group v-model="form.key" placement="row">
					<uv-radio name="1" label="有"></uv-radio>
					<uv-radio name="0" customStyle="margin-left:30rpx;" label="无"></uv-radio>
				</uv-radio-group>
				<!-- <uv-input v-model="form.key" 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="commission">
				<uv-input v-model="form.commission" 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="timeGo">
				<uv-input v-model="form.timeGo" 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="procedures">
				<uv-input v-model="form.procedures" 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="产权证照片" labelWidth="250" prop="isOwnershipList" labelPosition="top">
				<uv-upload customStyle="margin-top:20rpx;" :fileList="form.ownershipList" @afterRead="afterOwnershipRead" @delete="deleteOwnershipPic" name="1"
					multiple :maxCount="10"></uv-upload>
			</uv-form-item>
			<uv-form-item label="房屋照片/视频" labelWidth="250" prop="isHouseList" labelPosition="top">
				<uv-upload customStyle="margin-top:20rpx;" :fileList="form.houseList" @afterRead="afterHouseRead" @delete="deleteHousePic" name="1"
					multiple :maxCount="10"></uv-upload>
			</uv-form-item>
			<uv-form-item label="视频" labelWidth="250" prop="isMp4List" labelPosition="top">
				<uv-upload customStyle="margin-top:20rpx;" :fileList="form.mp4List" @afterRead="aftermp4Read" @delete="deletemp4Pic" name="1"
					multiple :maxCount="10"></uv-upload>
			</uv-form-item>
			<uv-form-item label="备注" prop="remark" labelPosition="top">
				<uv-input v-model="form.remark" type="text" placeholder="请输入备注" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></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>
		<!-- 地址 -->
		<citySelect ref="citySelectRef" :zIndex="0" @city-change="handleCityChange"></citySelect>
	</view>
</template>

<script>
	import { saveOrUpdateHouse } from "@/common/api.js"
	import citySelect from "@/components/cityselect/index.vue"
	import QQMapWX from "@/util/qqmap-wx-jssdk.min.js"
	export default{
		components:{
			citySelect
		},
		data(){
			return{
				id:"",
				form:{
					// title:"这是标题",//标题
					// price:"32.34",//价格
					// house:"这是户型",//户型
					// proportion:"89",//面积
					// address:"湖南长沙岳麓区",//所属位置
					// number:"2006",//编号
					// perimeter:"商场,地铁",//房屋周边
					// iconTitle:"商场,地铁,学校",//标签
					// housesNumber:1,//房间数量
					// revamp:0,//房屋主体是否改造
					// resettle:0,//是否经过安置
					// yardProportion:"无",//院子总面积
					// noise:"大",//噪音
					// net:"有",//水电气网
					// park:"有一个停车位",//停车
					// deposit:"1200",//押金
					// archival:"档案查询",//档案查询
					// tenancy:"租期",//租期
					// evaluate:"评价",//评价
					// death:"非正常死亡",//非正常死亡
					// key:"1",//钥匙
					// commission:"230",//佣金
					// timeGo:"",//年限
					// procedures:"20",//手续
					// isOwnershipList:"1",
					// ownershipList:[
					// 	{
					// 		url:"https://tennis-oss.xzaiyp.top/2024-12-04/61d46ae3-bf72-430f-8046-698b92b18f81.jpg"
					// 	},
					// 	{
					// 		url:"https://tennis-oss.xzaiyp.top/2024-12-04/3987c047-1c50-43e4-940d-9ce96cd06225.jpg"
					// 	}
					// ],
					// isHouseList:"1",
					// houseList:[
					// 	{
					// 		url:"https://tennis-oss.xzaiyp.top/2024-12-04/61d46ae3-bf72-430f-8046-698b92b18f81.jpg"
					// 	},
					// 	{
					// 		url:"https://tennis-oss.xzaiyp.top/2024-12-04/3987c047-1c50-43e4-940d-9ce96cd06225.jpg"
					// 	}
					// ],
					// isMp4List:"1",
					// mp4List:[],
					// remark:""
					
					title:"",//标题
					price:"",//价格
					house:"",//户型
					proportion:"",//面积
					address:"",//所属位置
					number:"",//编号
					perimeter:"",//房屋周边
					iconTitle:"",//标签
					housesNumber:1,//房间数量
					revamp:0,//房屋主体是否改造
					resettle:0,//是否经过安置
					yardProportion:"",//院子总面积
					noise:"",//噪音
					net:"",//水电气网
					park:"",//停车
					deposit:"",//押金
					archival:"",//档案查询
					tenancy:"",//租期
					evaluate:"",//评价
					death:"",//非正常死亡
					key:"1",//钥匙
					commission:"",//佣金
					timeGo:"",//年限
					procedures:"",//手续
					isOwnershipList:"",
					ownershipList:[],
					isHouseList:"",
					houseList:[],
					isMp4List:"",
					mp4List:[],
					remark:""
				},
				rules:{
					title:[
						{
							type: 'string',
							required: true,
							message: '请输入账号',
							trigger: ['blur', 'change']
						}
					],
					price:[
						{
							type: 'string',
							required: true,
							message: '请输入价格',
							trigger: ['blur', 'change']
						}
					],
					house:[
						{
							type: 'string',
							required: true,
							message: '请输入户型',
							trigger: ['blur', 'change']
						}
					],
					proportion:[
						{
							type: 'string',
							required: true,
							message: '请输入面积',
							trigger: ['blur', 'change']
						}
					],
					number:[
						{
							type: 'string',
							required: true,
							message: '请输入编号',
							trigger: ['blur', 'change']
						}
					],
					perimeter:[
						{
							type: 'string',
							required: true,
							message: '请输入房屋周边',
							trigger: ['blur', 'change']
						}
					],
					iconTitle:[
						{
							type: 'string',
							required: true,
							message: '请输入标签用，隔开',
							trigger: ['blur', 'change']
						}
					],
					yardProportion:[
						{
							type: 'string',
							required: true,
							message: '请输入院子总面积',
							trigger: ['blur', 'change']
						}
					],
					noise:[
						{
							type: 'string',
							required: true,
							message: '请输入坟包及电塔工厂噪音',
							trigger: ['blur', 'change']
						}
					],
					net:[
						{
							type: 'string',
							required: true,
							message: '请输入水电气网',
							trigger: ['blur', 'change']
						}
					],
					park:[
						{
							type: 'string',
							required: true,
							message: '请输入停车',
							trigger: ['blur', 'change']
						}
					],
					deposit:[
						{
							type: 'string',
							required: true,
							message: '请输入押金',
							trigger: ['blur', 'change']
						}
					],
					archival:[
						{
							type: 'string',
							required: true,
							message: '请输入天府市民云房屋信息档案查询',
							trigger: ['blur', 'change']
						}
					],
					tenancy:[
						{
							type: 'string',
							required: true,
							message: '请输入租期',
							trigger: ['blur', 'change']
						}
					],
					evaluate:[
						{
							type: 'string',
							required: true,
							message: '请输入邻居对房东的评价',
							trigger: ['blur', 'change']
						}
					],
					death:[
						{
							type: 'string',
							required: true,
							message: '请输入非正常死亡',
							trigger: ['blur', 'change']
						}
					],
					key:[
						{
							type: 'string',
							required: true,
							message: '请输入钥匙',
							trigger: ['blur', 'change']
						}
					],
					commission:[
						{
							type: 'string',
							required: true,
							message: '请输入佣金',
							trigger: ['blur', 'change']
						}
					],
					timeGo:[
						{
							type: 'string',
							required: true,
							message: '请输入年限',
							trigger: ['blur', 'change']
						}
					],
					procedures:[
						{
							type: 'string',
							required: true,
							message: '请输入报建手续',
							trigger: ['blur', 'change']
						}
					],
				}
			}
		},
		watch: {
			'form.ownershipList'(newValue, oldValue) {
			    if (newValue.length > 0) {
			    	this.form.isOwnershipList = '有'
			    } else {
			    	this.form.isOwnershipList = ''
			    }
			},
			'form.houseList'(newValue, oldValue) {
			    if (newValue.length > 0) {
			    	this.form.isHouseList = '有'
			    } else {
			    	this.form.isHouseList = ''
			    }
			},
			'form.mp4List'(newValue, oldValue) {
			    if (newValue.length > 0) {
			    	this.form.isMp4List = '有'
			    } else {
			    	this.form.isMp4List = ''
			    }
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.id = options.id
		},
		mounted() {
			
		},
		methods:{
			deleteHousePic(event) {
				this.form.houseList.splice(event.index, 1)
			},
			async afterHouseRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.houseList.push({
							url
						})
					})
				})
			},
			deleteOwnershipPic(event) {
				this.form.ownershipList.splice(event.index, 1)
			},
			async afterOwnershipRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.ownershipList.push({
							url
						})
					})
				})
			},
			deletemp4Pic(event) {
				this.form.mp4List.splice(event.index, 1)
			},
			async aftermp4Read(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.mp4List.push({
							url
						})
					})
				})
			},
			handleAreaChange(){
				const that = this;
				wx.chooseLocation({
					// type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						const qqmapsdk = new QQMapWX({
							key: 'TT7BZ-Z3LW4-KOAUB-KWHOA-SBJJ6-Y5B6R' // 必填
						});
						uni.showLoading({
							title:"获取中...."
						})
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(res) {
								uni.hideLoading()
								that.form.address = res.result.address
								console.log('逆地理编码结果：', res);
							},
							fail: function(error) {
								uni.hideLoading()
								console.error('逆地理编码失败：', error);
							}
						});
					}
				})
				// this.$refs.citySelectRef.open()
			},
			handleCityChange(e) {
				this.form.address = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			submit() {
				
				// price:"",//价格
				// house:"",//户型
				// proportion:"",//面积
				// address:"",//所属位置
				// number:"",//编号
				// perimeter:"",//房屋周边
				// housesNumber:1,//房间数量
				// revamp:0,//房屋主体是否改造
				// resettle:0,//是否经过安置
				// yardProportion:"",//院子总面积
				// noise:"",//噪音
				// net:"",//水电气网
				// park:"",//停车
				// deposit:"",//押金
				// archival:"",//档案查询
				// tenancy:"",//租期
				// evaluate:"",//评价
				// death:"",//非正常死亡
				// key:"",//钥匙
				// commission:"",//佣金
				// procedures:"",//手续
				// isOwnershipList:"",
				// ownershipList:[],
				// isHouseList:"",
				// houseList:[],
				// remark:""
				let that = this
				that.$refs.form.validate().then(res => {
					let params={
						userId:"",
						id:"",
						classId:"",//分类标识
						commonClass:"",//所属分类
						address:that.form.address,//地址
						homeAge:"",//户主年龄
						homeAz:"",//是否经过安置
						
						homeBian:that.form.perimeter,//房屋周边
						homeBjsx:"",//报建手续
						homeCai:"",//菜地
						homeCat:that.form.park,//停车
						homeGz:that.form.revamp,//房屋主体是否改造
						homeHb:"",//房屋朝向及海拔
						homeBz:that.form.remark,//备注
						homeJg:"",//房屋结构
						homeJl:"",//距离场镇距离
						homeJt:"",//交通
						homeJtzy:"",//户主家庭职业
						homeMi:"",//面积
						homeMj:that.form.proportion,//房屋面积
						homeMoney:that.form.commission,//佣金
						homeNo:"",//房屋编号
						homeNum:that.form.housesNumber,//房间数量
						homePay:that.form.deposit,//付款方式及押金
						homePj:that.form.evaluate,//邻居对房东评价
						homeSd:that.form.net,//水电气网
						homeShjl:"",//距离成都西三环
						homeSw:that.form.death,//非正常死亡
						homeTf:"",//府市民云房屋信息档案查询
						homeTime:that.form.tenancy,//租期
						homeType:that.form.house,//户型
						homeYs:that.form.key,//钥匙
						homeYzmj:that.form.yardProportion,//院子总面积
						homeZy:that.form.noise,//坟包及电塔 工厂噪音
						iconName:"",//热点名称
						iconTitle:that.form.iconTitle,//标签
						num:"",//浏览量
						price:that.form.price,//价格
						timeGo:that.form.timeGo,//年限
						title:that.form.title,//标题
						unit:"",//单位
						image:that.form.ownershipList.map(item => item.url).join(','),//图片
						iconImage:"",//左上角图标
						homeImage:that.form.houseList.map(item => item.url).join(','),//产权证照片
						homeMp4:"",//视频
					}
					saveOrUpdateHouse(params).then(response=>{
						console.info('response',response)
						uni.showToast({
							title: response.message,
							mask: false,
							icon: 'none',
							duration: 2000
						})
						setTimeout(()=>{
							uni.redirectTo({
								url:"/pages_subpack/successful-apply/index"
							})
						},2000)
						
					}).catch(error=>{
						
					})
				}).catch(errors => {
					console.info('errors',errors)
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
		
	}
</style>