修改编辑页面
This commit is contained in:
A1300399510
parent
7d0c5331d5
commit
bd05d9d205
@ -82,8 +82,10 @@ export default {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 600px;
|
||||
height: 800px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// width: 600px;
|
||||
// height: 800px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
|
||||
@ -24,7 +24,48 @@
|
||||
-->
|
||||
<!-- 出租方式 -->
|
||||
<div v-if="item.field === 'type'" class="form-option modeOne flexacenter">
|
||||
<div ref="type" class="modeOne-item flexacenter" :class="{ 'pitch': typeValue == index }"
|
||||
<el-popover placement="bottom" :width="640" :show-arrow="false" trigger="click"
|
||||
popper-style="padding:0; border-radius:16px;" popper-class="popover-leasetime"
|
||||
:disabled="verified == 1">
|
||||
<template #reference>
|
||||
<div class="modeOne-item flexacenter wid640" style="border-color: rgba(170, 170, 170, 1);">
|
||||
<div class="modeOne-text flexacenter" v-if="info['leasetime']">{{ info['leasetime'] }}
|
||||
</div>
|
||||
<div class="modeOne-text flexacenter" v-else style="color: #AAAAAA;">请选择</div>
|
||||
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="one-list" v-if="!typeValue">
|
||||
<div class="item flexacenter" v-for="(item, index) in typeData">
|
||||
<div class="dot"></div>
|
||||
<div class="content flex1 flexacenter" @click="handleType(index)">
|
||||
<div class="text">{{ item['name'] }}</div>
|
||||
<img class="icon" src="@/assets/img/edit/thin-arrow-disabled.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-list flexflex" v-else>
|
||||
<div class="left">
|
||||
<div class="item flexacenter" v-for="(item, index) in typeData">
|
||||
<div class="dot"></div>
|
||||
<div class="content flexacenter" :class="{ 'pitch': index == typeValue }" @click="handleType(index)">
|
||||
<div class="text flex1">{{ item['name'] }}</div>
|
||||
<img v-if="index == typeValue" class="icon" src="@/assets/img/edit/thin-arrow.svg">
|
||||
<img v-else class="icon" src="@/assets/img/edit/thin-arrow-disabled.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right flex1" v-if="typeData[1]">
|
||||
<div class="item flexacenter" :class="{ 'pitch': index == 1 }"
|
||||
v-for="(item, index) in typeData[1].data">
|
||||
<div class="value">{{ item['value'] }}</div>
|
||||
<img class="icom" src="@/assets/img/edit/blue-tick.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<!-- <div ref="type" class="modeOne-item flexacenter" :class="{ 'pitch': typeValue == index }"
|
||||
v-for="(item, index) in typeData" @click="handleType(index)" :key="index">
|
||||
<div class="modeOne-text flexacenter">{{ item.name }}
|
||||
<template v-if="typeValueUltimately && Math.floor(info.type) == index">
|
||||
@ -44,7 +85,7 @@
|
||||
item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- 出租时长 -->
|
||||
@ -63,18 +104,83 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 起租日期 -->
|
||||
<div v-if="item.field === 'leasetime'" class="form-option modeTwo flexacenter">
|
||||
<div class="modeTwo-item flexcenter" :class="{ 'pitch': info['leasetime'] == 0 }" ref="leasetime"
|
||||
<div v-if="item.field === 'leasetime'" class="form-option modeOne flexacenter">
|
||||
<!-- <div class="modeTwo-item flexcenter" :class="{ 'pitch': info['leasetime'] == 0 }" ref="leasetime"
|
||||
@click="setValue('leasetime', 0)">随时</div>
|
||||
<div class="modeTwo-item flexacenter" :class="{ 'pitch': info['leasetime'] }" ref="leasetime">
|
||||
<el-config-provider :locale="locale">
|
||||
<el-date-picker prefix-icon="" clear-icon="" :disabled-date="disabledDate"
|
||||
v-model="info.leasetime" type="date" placeholder="选择日期"></el-date-picker>
|
||||
</el-config-provider>
|
||||
<!-- {{ locale }} -->
|
||||
<img class="arrows-icon rotate0" src="@/assets/img/edit/arrows.svg" />
|
||||
<img class="arrows-icon-pitch rotate0" src="@/assets/img/edit/blue-arrow.svg" />
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="modeOne-item flexacenter wid640" style="border-color: rgba(170, 170, 170, 1);">
|
||||
<div class="modeOne-text flexacenter" v-if="info['leasetime']">{{ info['leasetime'] }}</div>
|
||||
<div class="modeOne-text flexacenter" v-else style="color: #AAAAAA;">请选择</div>
|
||||
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" /> -->
|
||||
<!-- <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg"
|
||||
style="transform: rotate(0);" />
|
||||
<img class="arrows-icon arrows-disabled-icon" style="transform: rotate(0);"
|
||||
src="@/assets/img/edit/disabled-icon.svg" /> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<el-popover placement="bottom" :width="640" :show-arrow="false" trigger="click"
|
||||
popper-style="padding:0; border-radius:16px;" popper-class="popover-leasetime"
|
||||
:disabled="verified == 1">
|
||||
<template #reference>
|
||||
<div class="modeOne-item flexacenter wid640" style="border-color: rgba(170, 170, 170, 1);">
|
||||
<div class="modeOne-text flexacenter" v-if="info['leasetime']">{{ info['leasetime'] }}
|
||||
</div>
|
||||
<div class="modeOne-text flexacenter" v-else style="color: #AAAAAA;">请选择</div>
|
||||
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="one-list" v-if="false">
|
||||
<div class="item flexacenter">
|
||||
<div class="dot"></div>
|
||||
<div class="content flex1 flexacenter">
|
||||
<div class="text">随时</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<div class="dot"></div>
|
||||
<div class="content flex1 flexacenter">
|
||||
<div class="text">起租日期</div>
|
||||
<img class="icon" src="@/assets/img/edit/thin-arrow-disabled.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-list flexflex">
|
||||
<div class="left">
|
||||
<div class="item flexacenter">
|
||||
<div class="dot"></div>
|
||||
<div class="content flexacenter">
|
||||
<div class="text">随时</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<div class="dot"></div>
|
||||
<div class="content pitch flexacenter">
|
||||
<div class="text flex1">起租日期</div>
|
||||
<img class="icon" src="@/assets/img/edit/thin-arrow.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right flex1">
|
||||
<el-config-provider :locale="locale">
|
||||
<!-- <el-date-picker prefix-icon="" clear-icon="" :disabled-date="disabledDate"
|
||||
v-model="info.leasetime" type="date" placeholder="选择日期" ref="daterange"
|
||||
:pickerVisible.sync="true" @blur="chooseDate"></el-date-picker> -->
|
||||
<el-date-picker v-model="info.leasetime" :picker-options="pickerOptions"
|
||||
ref="datePicker"></el-date-picker>
|
||||
</el-config-provider>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 月租 -->
|
||||
@ -352,18 +458,18 @@
|
||||
|
||||
<!-- 所属小区 -->
|
||||
<div class="form-item" v-if="info['address'] && verified == 0">
|
||||
<div class="form-title flexacenter">所属小区
|
||||
</div>
|
||||
<div class="form-title flexacenter">所属小区</div>
|
||||
<div class="form-option modeOne flexacenter">
|
||||
<el-popover v-if="info['communityid'] !== 0" v-model:visible="residentialAreaState"
|
||||
placement="bottom" :width="640" :show-arrow="false" trigger="click"
|
||||
<!-- <el-popover v-if="info['communityid'] !== 0" v-model:visible="residentialAreaState" -->
|
||||
<el-popover v-if="!isCommunityListNoData" v-model:visible="residentialAreaState" placement="bottom"
|
||||
:width="640" :show-arrow="false" trigger="contextmenu"
|
||||
popper-style="padding:0; border-radius:16px;" :disabled="verified == 1">
|
||||
<template #reference>
|
||||
<div ref="communityname" class="modeOne-item flexacenter"
|
||||
:class="{ 'pitch': info['communityname'], 'disabled': verified == 1 }"
|
||||
style="width: 640px;border-color: rgb(170, 170, 170);" @click="handleResidentialArea()">
|
||||
<div class="modeOne-text flexacenter" v-if="info['communityname']">{{ info.communityname
|
||||
}}
|
||||
<div class="modeOne-text ellipsis flex1" v-if="info['communityname']"
|
||||
style="padding-right: 10px;">{{ info.communityname }}
|
||||
</div>
|
||||
<div class="modeOne-text flexacenter" style="color: #AAAAAA;" v-else>请选择</div>
|
||||
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
|
||||
@ -381,6 +487,16 @@
|
||||
<div class="residential-text flex1 flexacenter"
|
||||
:class="{ 'pitchpitch': item.id == info['communityid'] }">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="residential-item flexacenter">
|
||||
<div class="residential-dot"></div>
|
||||
<div class="residential-text flex1 flexacenter">以上都不是：</div>
|
||||
</div>
|
||||
<div class="residential-item flexacenter">
|
||||
<div class="residential-dot" style="background-color: transparent;"></div>
|
||||
<input class="residential-text residential-input flex1" maxlength="150"
|
||||
@blur="info['communityid'] = 0" v-model="info.communityname" placeholder="请填写小区名称"
|
||||
@keyup.enter="residentialAreaState = false" />
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div v-else ref="communityname" class="modeOne-item flexacenter"
|
||||
@ -389,7 +505,6 @@
|
||||
<input class="communityname-input" v-model="info.communityname" placeholder="请填写" />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -680,6 +795,9 @@ export default {
|
||||
name: 'ZufangEdit',
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
disabledDate: () => false
|
||||
},
|
||||
locale: zhCn,
|
||||
value: '',
|
||||
user: {},
|
||||
@ -883,6 +1001,7 @@ export default {
|
||||
if (info['rentalduration']) info['rentalduration'] = Number(info['rentalduration'])
|
||||
}
|
||||
|
||||
console.log("typeData", typeData);
|
||||
|
||||
this.fieldinfo = fieldinfo
|
||||
this.typeData = typeData
|
||||
@ -1317,47 +1436,41 @@ export default {
|
||||
info['longitude'] = value['latlng']['lng']
|
||||
|
||||
this.mapComponentState = false
|
||||
this.isResidentialAreaUpdate = true
|
||||
// this.isResidentialAreaUpdate = true
|
||||
},
|
||||
|
||||
// 初始化时判断所属小区是否需要获取列表
|
||||
|
||||
// 处理所属小区判断，并获取数据
|
||||
handleResidentialArea() {
|
||||
if (this.isResidentialAreaUpdate) {
|
||||
|
||||
let info = this.info
|
||||
let location = `${info['longitude'] || 114.160151},${info['latitu1de'] || 22.247117}`
|
||||
this.$post("/tenement/pc/api/publish/placeAround", {
|
||||
location
|
||||
}).then(res => {
|
||||
if (res.code != 200) return
|
||||
if (res.code != 200) {
|
||||
this.isCommunityListNoData = true
|
||||
this.$forceUpdate();
|
||||
return
|
||||
}
|
||||
let data = res.data
|
||||
data.push({
|
||||
name: "以上都不是"
|
||||
})
|
||||
this.communityList = data
|
||||
this.residentialAreaState = true
|
||||
this.isResidentialAreaUpdate = false
|
||||
})
|
||||
}
|
||||
// else this.residentialAreaState = true
|
||||
|
||||
} else this.residentialAreaState = true
|
||||
},
|
||||
|
||||
// 点击所属小区选项
|
||||
clickResidentialArea(id, name) {
|
||||
let info = this.info
|
||||
|
||||
if (!id) {
|
||||
info['communityid'] = 0
|
||||
info['communityname'] = null
|
||||
} else {
|
||||
info['communityid'] = id
|
||||
info['communityname'] = name
|
||||
}
|
||||
info['communityid'] = id
|
||||
info['communityname'] = name
|
||||
|
||||
this.info = info
|
||||
this.residentialAreaState = false
|
||||
|
||||
},
|
||||
|
||||
// 判断 求房源的 同住人性别要求应不应该显示
|
||||
@ -1388,7 +1501,12 @@ export default {
|
||||
return false; // 返回 false 表示日期未被禁用
|
||||
},
|
||||
|
||||
chooseDate() {
|
||||
|
||||
console.log(this.$refs.daterange);
|
||||
return
|
||||
this.$refs.daterange.focus(); // 选择日期后依旧触发焦点
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -1403,6 +1521,10 @@ export default {
|
||||
position: relative;
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
|
||||
.wid640 {
|
||||
width: 640px !important;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
@ -1632,7 +1754,7 @@ export default {
|
||||
height: auto;
|
||||
|
||||
.modeThree-item {
|
||||
width: 200px;
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
@ -2751,15 +2873,132 @@ export default {
|
||||
color: #62b1ff;
|
||||
|
||||
}
|
||||
|
||||
&.residential-input {
|
||||
border: 1px solid rgba(170, 170, 170, 1);
|
||||
border-radius: 10px;
|
||||
height: 50px;
|
||||
padding: 0 20px;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
&:not(:nth-last-child(-n+2)) {
|
||||
border-bottom: 1px solid rgba(242, 242, 242, 1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.el-popover.popover-leasetime {
|
||||
background-color: #50e3c2;
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #62b1ff;
|
||||
margin: 0 47px 0 30px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 7px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.one-list {
|
||||
padding: 10px 0;
|
||||
|
||||
.item {
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-of-type) .content {
|
||||
border-bottom: 1px solid rgba(242, 242, 242, 1);
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
margin-right: 26px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.two-list {
|
||||
padding: 10px 0;
|
||||
align-items: flex-start;
|
||||
|
||||
.left {
|
||||
.item {
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
|
||||
.dot {
|
||||
margin-right: 27px;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
|
||||
&.pitch {
|
||||
color: #62B1FF;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin: 0 30px;
|
||||
|
||||
.item {
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid rgba(235, 235, 235, 1);
|
||||
}
|
||||
|
||||
&.pitch {
|
||||
color: #62B1FF;
|
||||
|
||||
.icom {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.icom {
|
||||
display: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.el-popover.popover-leasetime {}
|
||||
|
||||
.rotate0 {
|
||||
transform: rotate(0deg) !important;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user