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="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-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="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="备注" 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 citySelect from "@/components/cityselect/index.vue"
	export default{
		components:{
			citySelect
		},
		data(){
			return{
				form:{
					title:"",//标题
					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:""
				},
				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']
						}
					],
					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']
						}
					],
					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 = ''
			    }
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		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
						})
					})
				})
			},
			handleAreaChange(){
				this.$refs.citySelectRef.open()
			},
			handleCityChange(e) {
				this.form.address = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			submit() {
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'none',
						title: '校验通过'
					})
				}).catch(errors => {
					uni.showToast({
						icon: 'none',
						title: '校验失败'
					})
				})
			}
		}
	}
</script>

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