修改编辑
This commit is contained in:
A1300399510
parent
8739abbba8
commit
814e003397
@ -23,13 +23,17 @@
|
||||
方式五 是 单行输入框 和 单位
|
||||
-->
|
||||
<!-- 出租方式 -->
|
||||
<div v-if="item.field === 'type'" class="form-option modeOne flexacenter">
|
||||
<el-popover placement="bottom" :width="640" :show-arrow="false" trigger="click"
|
||||
popper-style="padding:0; border-radius:16px;" popper-class="popover-leasetime"
|
||||
<div v-if="item.field === 'type'" ref="type" class="form-option modeOne flexacenter">
|
||||
<el-popover placement="bottom" :width="640" v-model:visible="typePopState" :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 class="modeOne-item flexacenter wid640" :class="{ 'pitch': info['type'] }"
|
||||
style="border-color: rgba(235, 235, 235, 1);">
|
||||
<div class="modeOne-text flexacenter" v-if="info['type']">
|
||||
{{ typeData[info['type'] >>> 0]['name'] }}
|
||||
<img class="form-arrows" src="@/assets/img/edit/thin-arrow.svg" />
|
||||
{{ typeValueUltimately }}
|
||||
</div>
|
||||
<div class="modeOne-text flexacenter" v-else style="color: #AAAAAA;">请选择</div>
|
||||
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
|
||||
@ -49,59 +53,91 @@
|
||||
<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="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-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="right flex1" v-if="typeData[typeValue]">
|
||||
<div class="item flexacenter" :class="{ 'pitch': item.key == info['type'] }"
|
||||
v-for="(item, index) in typeData[typeValue].data"
|
||||
@click="handleType(item.key, item.value), typePopState = false">
|
||||
<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">
|
||||
<img class="form-arrows" src="@/assets/img/edit/thin-arrow.svg" />
|
||||
{{ typeValueUltimately }}
|
||||
</template>
|
||||
</div>
|
||||
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
|
||||
<img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
|
||||
</div>
|
||||
|
||||
<div class="pop type-pop-box radius16" v-if="typePopState">
|
||||
<div class="type-pop-list flexflex">
|
||||
<div v-for="(item, index) in typeData[typeValue].data" class="type-pop-item flexcenter"
|
||||
:class="{ 'pitch': item.key == info.type }" :key="index"
|
||||
@click.stop="handleType(item.key, item.value)">{{
|
||||
item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- 出租时长 -->
|
||||
<div v-if="item.field === 'rentalduration'" class="form-option modeTwo flexacenter">
|
||||
<div class="modeTwo-item flexcenter" :class="{ 'pitch': info['rentalduration'] == 0 }"
|
||||
ref="rentalduration" @click="setValue('rentalduration', 0)">随时</div>
|
||||
<div class="modeTwo-item flexacenter" :class="{ 'pitch': info['rentalduration'] }"
|
||||
ref="rentalduration">
|
||||
<el-select class="flex1 modeTwo-select" v-model="info.rentalduration" placeholder="选择租期">
|
||||
<el-option :key="0" label="选择租期" :value="0" v-show="false"></el-option>
|
||||
<el-option v-for="item in item.choices" :key="item.key" :label="item.value"
|
||||
:value="item.key"></el-option>
|
||||
</el-select>
|
||||
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
|
||||
<img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
|
||||
</div>
|
||||
<div v-if="item.field === 'rentalduration'" class="form-option modeOne flexacenter">
|
||||
<el-popover placement="bottom" :width="640" v-model:visible="rentaldurationPopState"
|
||||
: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"
|
||||
:class="{ 'pitch': info['rentalduration'] != null }"
|
||||
style="border-color: rgba(235, 235, 235, 1);">
|
||||
<div class="modeOne-text flexacenter" v-if="info['rentalduration'] != null">
|
||||
{{ rentaldurationObj[info['rentalduration']] }}
|
||||
</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="!rentaldurationTwo">
|
||||
<div class="item flexacenter">
|
||||
<div class="dot"></div>
|
||||
<div class="content flex1 flexacenter"
|
||||
:class="{ 'pitch': info['rentalduration'] == 0 && info['rentalduration'] != null }"
|
||||
@click="setValue('rentalduration', 0), rentaldurationPopState = false">
|
||||
<div class="text">不限</div>
|
||||
<img class="icom"
|
||||
v-if="info['rentalduration'] == 0 && info['rentalduration'] != null"
|
||||
src="@/assets/img/edit/blue-tick.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<div class="dot"></div>
|
||||
<div class="content flex1 flexacenter" @click="rentaldurationTwo = true">
|
||||
<div class="text">选择租期</div>
|
||||
<img class="icon" src="@/assets/img/edit/thin-arrow-disabled.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-list flexflex" v-if="rentaldurationTwo">
|
||||
<div class="left">
|
||||
<div class="item flexacenter" @click="rentaldurationTwo = false">
|
||||
<div class="dot"></div>
|
||||
<div class="content flexacenter"
|
||||
@click="setValue('rentalduration', 0), rentaldurationPopState = false">
|
||||
<div class="text flex1">不限</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<div class="dot"></div>
|
||||
<div class="content flexacenter pitch" @click="handleType()">
|
||||
<div class="text flex1">选择租期</div>
|
||||
<img class="icon" src="@/assets/img/edit/thin-arrow.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right flex1 scrollbar" style="max-height: 360px;overflow: auto;">
|
||||
<div class="item flexacenter" :class="{ 'pitch': item.key == info['rentalduration'] }"
|
||||
v-for="(item, index) in item.choices"
|
||||
@click="setValue('rentalduration', item['key']), rentaldurationPopState = false">
|
||||
<div class="value">{{ item['value'] }}</div>
|
||||
<img class="icom" src="@/assets/img/edit/blue-tick.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- 起租日期 -->
|
||||
<div v-if="item.field === 'leasetime'" class="form-option modeOne flexacenter">
|
||||
@ -174,7 +210,9 @@
|
||||
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>
|
||||
ref="datePicker" popover-class="el-date-picker__popover--right">
|
||||
></el-date-picker>
|
||||
|
||||
</el-config-provider>
|
||||
</div>
|
||||
|
||||
@ -821,10 +859,12 @@ export default {
|
||||
type: "", // 编辑类型
|
||||
locationData: [],
|
||||
locationValue: 1,
|
||||
rentaldurationObj: [], // 起租日期的配置数据
|
||||
typeData: [], // 单独拿出 第一步 的出租类型的数据
|
||||
typeValue: 0, // 出租类型的临时值
|
||||
typeValueUltimately: "", // 出租类型的最终值
|
||||
typePopState: false, // 出租类型的弹窗状态
|
||||
rentaldurationPopState: false, // 出租时长的弹窗状态
|
||||
areaPopState: false, // 所在区域的弹窗状态
|
||||
base64: "",
|
||||
|
||||
@ -876,6 +916,8 @@ export default {
|
||||
|
||||
verified: 0, // 房源是否已经验证
|
||||
|
||||
rentaldurationTwo: false, // 出租时长的二级显示状态
|
||||
|
||||
loading: null, // 加载
|
||||
|
||||
}
|
||||
@ -926,8 +968,19 @@ export default {
|
||||
let data = res.data
|
||||
let fieldinfo = data.fieldinfo
|
||||
|
||||
let typeData = fieldinfo.basic[0]['choices'] || []
|
||||
let locationData = fieldinfo.address[0]['choices'] || []
|
||||
|
||||
let typeData = []
|
||||
let locationData = []
|
||||
let rentaldurationData = []
|
||||
|
||||
for (const key in fieldinfo) {
|
||||
fieldinfo[key].forEach(element => {
|
||||
if (element['field'] == 'type') typeData = element['choices'] || []
|
||||
if (element['field'] == 'location') locationData = element['choices'] || []
|
||||
if (element['field'] == 'rentalduration') rentaldurationData = element['choices']
|
||||
})
|
||||
}
|
||||
|
||||
let locationObj = {}
|
||||
locationData.forEach(element => {
|
||||
locationObj[element["key"]] = element["value"]
|
||||
@ -961,6 +1014,15 @@ export default {
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
let rentaldurationObj = {}
|
||||
rentaldurationObj = rentaldurationData.reduce(function (acc, item) {
|
||||
acc[item.key] = item.value
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
rentaldurationObj[0] = "不限"
|
||||
console.log("rentaldurationObj", rentaldurationObj);
|
||||
|
||||
|
||||
let info = data.info
|
||||
|
||||
@ -1001,11 +1063,11 @@ export default {
|
||||
if (info['rentalduration']) info['rentalduration'] = Number(info['rentalduration'])
|
||||
}
|
||||
|
||||
console.log("typeData", typeData);
|
||||
|
||||
this.fieldinfo = fieldinfo
|
||||
this.typeData = typeData
|
||||
this.locationData = locationData
|
||||
this.rentaldurationObj = rentaldurationObj
|
||||
this.fieldinfoBasic = fieldinfo.basic
|
||||
this.fieldinfoAddress = fieldinfo.address
|
||||
this.fieldinfoIntroduce = fieldinfo.introduce
|
||||
@ -1057,14 +1119,12 @@ export default {
|
||||
handleType(key, value) {
|
||||
if (key >>> 0 == key) {
|
||||
this.typeValue = key
|
||||
this.typePopState = true
|
||||
if (this.info['type'] >>> 0 != key) this.info['type'] = null
|
||||
|
||||
} else {
|
||||
this.info['type'] = key
|
||||
this.typeValueUltimately = value
|
||||
this.typePopState = false
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// 直接修改值
|
||||
@ -2940,11 +3000,14 @@ export default {
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
|
||||
&.pitch {
|
||||
color: #62B1FF;
|
||||
}
|
||||
|
||||
.dot {
|
||||
margin-right: 27px;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user