<template>
|
<div class="act_add">
|
<v-header :title="(!$route.query.id ? '新增' : '编辑') + '房源'"></v-header>
|
<el-form
|
:model="form"
|
:rules="rules"
|
label-position="right"
|
ref="ruleForm"
|
label-width="150px"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="地址" required>
|
<el-input
|
suffix-icon="el-icon-location-outline"
|
placeholder="请输入地址"
|
size="small"
|
class="textarea-style"
|
type="textarea"
|
resize="none"
|
:rows="4"
|
v-model="form.address"
|
maxlength="50"
|
@focus="mapCheck"
|
></el-input>
|
</el-form-item>
|
<div class="fl-fw">
|
<el-form-item label="小区名称" prop="villageName">
|
<el-input placeholder="请输入" class="rent-form-width" v-model="form.villageName"></el-input>
|
</el-form-item>
|
<el-form-item label="街/路/巷" prop="alley">
|
<el-input placeholder="请输入街/路/巷" class="rent-form-width" v-model="form.alley"></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="街/路/巷号" prop="houseNum">
|
<el-input type="number" placeholder="请输入数字" class="rent-form-width" v-model="form.houseNum"></el-input>
|
</el-form-item>
|
<el-form-item label="楼栋号">
|
<el-input type="number" placeholder="请输入数字" class="rent-form-width" v-model="form.buildingNo"></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="单元号">
|
<el-input type="number" placeholder="请输入数字" class="rent-form-width" v-model="form.unitNo"></el-input>
|
</el-form-item>
|
<el-form-item label="楼层号">
|
<el-input type="number" placeholder="请输入数字" class="rent-form-width" v-model="form.floor"></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="户室号">
|
<el-input type="number" placeholder="请输入数字" class="rent-form-width" v-model="form.houseNo"></el-input>
|
</el-form-item>
|
<el-form-item label="看房电话" prop="seeHourseTelephone">
|
<el-input
|
placeholder="请输入"
|
class="rent-form-width"
|
v-model="form.seeHourseTelephone"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="租房标题" prop="title">
|
<el-input placeholder="请输入" class="rent-form-width" v-model="form.title"></el-input>
|
</el-form-item>
|
<el-form-item label="房型" required>
|
<el-input maxlength="2" type="number" placeholder="几" class="num-width" v-model="form.brn"></el-input>
|
<span>室</span>
|
<el-input maxlength="2" type="number" placeholder="几" class="num-width" v-model="form.lrn"></el-input>
|
<span>厅</span>
|
<el-input maxlength="2" type="number" placeholder="几" class="num-width" v-model="form.wcn"></el-input>
|
<span>卫</span>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="月租金" prop="monthlyRentMoney">
|
<el-input
|
class="rent-form-width"
|
type="number" placeholder="请输入数字"
|
v-model="form.monthlyRentMoney"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="保证金" prop='depositMoney'>
|
<el-input
|
class="rent-form-width"
|
type="number" placeholder="请输入数字"
|
v-model="form.depositMoney"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="服务费" prop="serverCharge">
|
<el-input
|
class="rent-form-width"
|
type="number" placeholder="请输入数字"
|
v-model="form.serverCharge"
|
>
|
<i slot="suffix">元</i>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="定金" prop="dingMoney">
|
<el-input
|
type="number" placeholder="请输入数字"
|
class="rent-form-width"
|
v-model="form.dingMoney"
|
>
|
<i slot="suffix">元/7天</i>
|
</el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="面积">
|
<el-input
|
onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="请输入数字"
|
class="rent-form-width"
|
v-model.trim="form.constructArea"
|
>
|
<i slot="suffix">㎡</i>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="总楼层数" prop="totalFloor">
|
<el-input type="number" placeholder="请输入数字" class="rent-form-width" v-model="form.totalFloor"></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="朝向">
|
<el-select
|
v-model="form.orientation"
|
class="rent-form-width"
|
filterable
|
clearable
|
placeholder="请选择朝向"
|
>
|
<el-option
|
v-for="item in cxType"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="装修" prop="decoration">
|
<el-select
|
v-model="form.decoration"
|
class="rent-form-width"
|
filterable
|
clearable
|
placeholder="请选择装修情况"
|
>
|
<el-option
|
v-for="item in zxType"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="看房时间">
|
<div class="rent-form-width">
|
<el-radio-group v-model="form.seeHourseDate" size="medium">
|
<el-radio-button :label="1">随时看房</el-radio-button>
|
<el-radio-button :label="2">提前预约</el-radio-button>
|
</el-radio-group>
|
</div>
|
</el-form-item>
|
<!-- <el-form-item label="预约时间">
|
<el-date-picker
|
format="yyyy-MM-dd HH:mm"
|
value-format="yyyy-MM-dd HH:mm"
|
v-model="form.name"
|
class="rent-form-width"
|
type="datetime"
|
placeholder="选择预约时间"
|
></el-date-picker>
|
</el-form-item> -->
|
</div>
|
|
<el-form-item label="房源介绍">
|
<el-input
|
placeholder="请输入房源介绍"
|
class="textarea-style"
|
type="textarea"
|
resize="none"
|
:rows="4"
|
v-model="form.hourseDescription"
|
maxlength="300"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="入住要求">
|
<el-input
|
placeholder="请输入入住要求"
|
class="textarea-style"
|
type="textarea"
|
resize="none"
|
:rows="4"
|
v-model="form.checkInRequirement"
|
maxlength="300"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="房内物品">
|
<el-button size="mini" @click="addInput()">新增</el-button>
|
<div v-for="(item,index) in hourseItemList" :key="index" class="mr-t-10">
|
<el-input placeholder="请输入物品名" class="thing-name" v-model="item.name"></el-input>
|
<el-input placeholder="数量" class="num-width2" v-model="item.number"></el-input>
|
<el-button size="mini" class="mr-l-20" type="text" @click="deleteInput(index)">删除</el-button>
|
</div>
|
</el-form-item>
|
<el-form-item label="房源标签">
|
<!-- <el-input placeholder="请输入" class="rent-form-width" v-model="form.label"></el-input> -->
|
<el-checkbox-group v-model="labelTag" size="small">
|
<el-checkbox v-for="label in tagList" :label="label" :key="label">{{label}}</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item label="房源图片">
|
<UploadImg :imgShow="houseSrc" @fileHandle="fileHandle" />
|
</el-form-item>
|
<h4>认证信息</h4>
|
<el-form-item label="产权证明" required="">
|
<UploadImg :imgShow="propertySrc" @fileHandle="fileHandle1" />
|
</el-form-item>
|
<el-form-item label="房主姓名" prop="hourseOwnerName">
|
<el-input placeholder="请输入" class="rent-form-width" v-model="form.hourseOwnerName"></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号" prop="hourseIdCard">
|
<el-input
|
placeholder="请输入"
|
maxlength="18"
|
class="rent-form-width"
|
v-model="form.hourseIdCard"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="房主电话" prop="hoursePhone">
|
<el-input
|
placeholder="请输入"
|
maxlength="11"
|
class="rent-form-width"
|
v-model="form.hoursePhone"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="证件照片" required>
|
<UploadImg :imgShow="credentials" @fileHandle="fileHandle2" />
|
</el-form-item>
|
<el-form-item label>
|
<el-button size="small" :loading="btnLoading" type="primary" @click="send(1, 'form')">提交</el-button>
|
<el-button size="small" @click="$router.go(-1)">取消</el-button>
|
</el-form-item>
|
</el-form>
|
<!-- 地图弹框 -->
|
<el-dialog
|
title="房源地址"
|
:visible.sync="dialogVisibleMap"
|
:before-close="handleCloseMap"
|
append-to-body
|
>
|
<MapBox ref="mapContent" @setLocation="setLocation" />
|
<div style="text-align: center; margin-top: 20px">
|
<el-button @click="handleCloseMap">取 消</el-button>
|
<el-button type="primary" @click="mapComfirm">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {isvalidPhone,isIdcard} from '../../../assets/js/fromValidate';
|
import { objCopyPro } from "../../../utils/common";
|
import MapBox from "com/map/map.vue";
|
import UploadImg from 'com/upload/uploadImg.vue'
|
import { zxType2, cxType2 } from '../../../utils/keys';
|
var validPhone=(rule, value,callback)=>{
|
if (!value){
|
callback(new Error('请输入电话号码'))
|
}else if (!isvalidPhone(value)){
|
callback(new Error('请输入正确的11位手机号码'))
|
}else {
|
callback()
|
}
|
}
|
var validIdcrad=(rule, value,callback)=>{
|
if (!value){
|
callback(new Error('请输入身份证号码'))
|
}else if (!isIdcard(value)){
|
callback(new Error('请输入正确的身份证号码'))
|
}else {
|
callback()
|
}
|
}
|
export default {
|
components: {
|
MapBox,
|
UploadImg
|
},
|
data() {
|
return {
|
labelTag:[],
|
btnLoading: false,
|
zxType: zxType2(), // 装修情况
|
cxType: cxType2(), // 朝向
|
dialogVisibleMap: false,
|
mapObj: {},
|
form: {
|
authStatus:1,
|
id:'',
|
address: '',
|
latitude:'',
|
longitude:'',
|
orientation:'',
|
villageName:'',
|
alley:'',
|
seeHourseTelephone:'',
|
houseNum:'',
|
buildingNo:'',
|
unitNo:'',
|
floor:'',
|
houseNo:'',
|
title:'',
|
brn:'',
|
lrn:'',
|
wcn:'',
|
monthlyRentMoney:'',
|
depositMoney:'',
|
serverCharge:'',
|
dingMoney:'',
|
constructArea:'',
|
totalFloor:'',
|
decoration:'',
|
seeHourseDate:'1',
|
hourseDescription:'',
|
checkInRequirement:'',
|
hourseItem:'',
|
label:'',
|
housePictures:[],
|
propertyPictures:[],
|
hourseOwnerName:'',
|
hourseIdCard:'',
|
hoursePhone:'',
|
credentialsPictures:[],
|
|
},
|
hourseItemList:[{
|
name:'',
|
number:''
|
}],
|
houseSrc:'',
|
propertySrc:'',
|
credentials:'',
|
rules: {
|
hourseOwnerName: [
|
{
|
required: true,
|
message: "请输入房主姓名",
|
trigger: "blur",
|
},
|
],
|
hourseIdCard: [
|
{
|
required: true,
|
trigger: "blur",
|
validator:validIdcrad
|
},
|
],
|
hoursePhone: [
|
{
|
required: true,
|
trigger: "blur",
|
validator: validPhone,
|
},
|
],
|
decoration: [
|
{
|
required: true,
|
message: "请选择装修情况",
|
trigger: "change",
|
},
|
],
|
totalFloor: [
|
{
|
required: true,
|
message: "请输入总楼层数",
|
trigger: "blur",
|
},
|
],
|
dingMoney: [
|
{
|
required: true,
|
message: "请输入定金",
|
trigger: "blur",
|
},
|
],
|
monthlyRentMoney: [
|
{
|
required: true,
|
message: "请输入月租金",
|
trigger: "blur",
|
},
|
],
|
depositMoney: [
|
{
|
required: true,
|
message: "请输入保证金",
|
trigger: "blur",
|
},
|
],
|
serverCharge: [
|
{
|
required: true,
|
message: "请输入服务费",
|
trigger: "blur",
|
},
|
],
|
title: [
|
{
|
required: true,
|
message: "请输入租房标题",
|
trigger: "blur",
|
},
|
],
|
villageName: [
|
{
|
required: true,
|
message: "请输入小区名称",
|
trigger: "blur",
|
},
|
],
|
alley: [
|
{
|
required: true,
|
message: "请输入街/路/巷",
|
trigger: "blur",
|
},
|
],
|
houseNum: [
|
{
|
required: true,
|
message: "请输入街/路/巷号",
|
trigger: "blur",
|
},
|
],
|
seeHourseTelephone :[
|
{
|
required: true,
|
validator: validPhone,
|
trigger: "blur",
|
},
|
],
|
},
|
positionData: {},
|
tagList:[],
|
};
|
},
|
methods: {
|
getTags() {
|
this.$api.get("renting/houses/getConfig", {type:6}, (e) => {
|
this.tagList = e.value.split(",");
|
console.log(this.tagList)
|
});
|
},
|
addInput() {
|
this.hourseItemList.push({
|
name:'',
|
number:''
|
})
|
},
|
deleteInput(index) {
|
this.hourseItemList.splice(index, 1)
|
},
|
fileHandle(data) {
|
if (data.type === 'loading') {
|
this.btnLoading = data.val
|
} else {
|
this.houseSrc= data.val
|
this.btnLoading = false
|
}
|
},
|
fileHandle1(data) {
|
if (data.type === 'loading') {
|
this.btnLoading = data.val
|
} else {
|
this.propertySrc= data.val
|
this.btnLoading = false
|
}
|
},
|
fileHandle2(data) {
|
if (data.type === 'loading') {
|
this.btnLoading = data.val
|
} else {
|
this.credentials= data.val
|
this.btnLoading = false
|
}
|
},
|
mapCheck() {
|
this.dialogVisibleMap = true;
|
this.$nextTick(() => {
|
this.$refs.mapContent.getLocation({});
|
this.$refs.mapContent.getLocation({
|
val: this.form.address,
|
l: this.form.latitude,
|
r: this.form.longitude,
|
});
|
});
|
},
|
handleCloseMap() {
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
},
|
mapComfirm() {
|
if (this.positionData.addr) {
|
this.form.address = this.positionData.addr;
|
this.form.latitude = this.positionData.lat;
|
this.form.longitude = this.positionData.lng;
|
}
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
},
|
setLocation(obj) {
|
this.positionData = obj;
|
},
|
// 获取数据-编辑
|
getData(id) {
|
this.$api.get("renting/houses/get", {registerId:id}, (e) => {
|
this.form = objCopyPro(this.form, e);
|
this.houseSrc = this.form.housePictures ? this.form.housePictures.join(",") : '';
|
this.propertySrc = this.form.propertyPictures ? this.form.propertyPictures.join(",") : '';
|
this.credentials = this.form.credentialsPictures ? this.form.credentialsPictures.join(",") : '';
|
this.hourseItemList = JSON.parse(this.form.hourseItem);
|
// this.tagList = this.form.label.split(",");
|
this.labelTag = this.form.label.split(",");
|
|
});
|
},
|
// 保存
|
send(v, f) {
|
this.$refs["ruleForm"].validate((valid) => {
|
if(this.form.address == '') {
|
return this.$message('地址不能为空')
|
}
|
if(this.form.brn == '' || this.form.lrn == '' || this.form.wcn == '') {
|
return this.$message('房型不能为空')
|
}
|
if(this.propertySrc == '') {
|
return this.$message('产权证明不能为空')
|
}
|
if(this.credentials == '') {
|
return this.$message('证件照片不能为空')
|
}
|
if(+this.form.monthlyRentMoney < +this.form.dingMoney) {
|
return this.$message('定金不能超过月租金')
|
}
|
this.form.housePictures = this.houseSrc.split(",");
|
this.form.propertyPictures = this.propertySrc.split(",");
|
this.form.credentialsPictures = this.credentials.split(",");
|
if(this.labelTag.length) {
|
this.form.label = this.labelTag.join(",");
|
}
|
|
if (valid) {
|
this.form.hourseItem = JSON.stringify(this.hourseItemList)
|
if (!this.$route.query.id) {
|
this.$api.post("renting/houses/register", this.form, (e) => {
|
demo.toast("新增成功");
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
} else {
|
this.form.id = this.$route.query.id;
|
this.$api.post("renting/houses/update", this.form, (e) => {
|
demo.toast("编辑成功");
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
}
|
}
|
});
|
},
|
},
|
mounted() {
|
if (this.$route.query.id) {
|
this.getData(this.$route.query.id);
|
}
|
this.getTags()
|
|
},
|
};
|
</script>
|
<style >
|
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none !important;}
|
input[type="number"]{-moz-appearance:textfield;}
|
</style>
|
<style lang='less' scoped>
|
.act_add {
|
overflow-y: auto;
|
.edit {
|
margin-bottom: 10px;
|
padding: 0 40px;
|
}
|
.sec:last-child {
|
margin-bottom: 0;
|
}
|
.up {
|
margin-top: 8px;
|
}
|
.sec {
|
.label {
|
width: 120px;
|
}
|
article {
|
width: calc(~"100% - 120px");
|
max-width: 300px;
|
&.more {
|
max-width: 100%;
|
}
|
.label {
|
text-align: left;
|
}
|
.item {
|
display: flex;
|
flex-wrap: wrap;
|
article {
|
margin: 0 10px 10px 0;
|
width: 140px;
|
box-sizing: border-box;
|
padding: 5px 20px 5px 0;
|
text-align: center;
|
.avatar {
|
margin: 0 auto 5px;
|
}
|
.el-input {
|
margin-bottom: 5px;
|
}
|
}
|
.btn {
|
display: flex;
|
justify-content: space-between;
|
width: 120px;
|
.add,
|
.del {
|
width: 40px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
font-size: 28px;
|
font-weight: 700;
|
display: block;
|
border-radius: 50%;
|
border: 1px solid #ccc;
|
color: #666;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
}
|
.update-img {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 260px;
|
height: 154px;
|
border: 1px dashed #999;
|
}
|
.fz-15 {
|
font-size: 30px;
|
}
|
.img-shwo-item {
|
cursor: pointer;
|
width: 260px;
|
height: 154px;
|
}
|
.img-list-item {
|
margin-bottom: 10px;
|
width: 260px;
|
height: 154px;
|
position: relative;
|
border: 1px dashed #fff;
|
}
|
.check-img {
|
cursor: pointer;
|
z-index: 999;
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 20px;
|
height: 20px;
|
}
|
.fl-f {
|
display: flex;
|
}
|
.fl-fw {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.mr-r-10 {
|
margin-right: 10px;
|
}
|
.cropper-content .cropper {
|
width: auto;
|
height: 500px !important;
|
}
|
.fl-al {
|
display: flex;
|
align-items: center;
|
}
|
.el-dialog {
|
width: 800px !important;
|
}
|
.input-width {
|
width: 300px;
|
}
|
.input-width2 {
|
width: 200px;
|
}
|
.class-label-box {
|
margin-right: 10px;
|
cursor: pointer;
|
padding: 12px;
|
border: 1px solid #333;
|
line-height: 1 !important;
|
}
|
.check-box {
|
border: 1px solid rgb(23, 116, 192) !important;
|
color: rgb(23, 116, 192);
|
}
|
.textarea-style {
|
width: 400px;
|
}
|
.rent-form-width {
|
width: 200px;
|
}
|
.num-width {
|
width: 50px;
|
}
|
.num-width2 {
|
width: 70px;
|
}
|
.thing-name {
|
width: 150px;
|
}
|
</style>
|
