XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改编辑

Browse Source
This commit is contained in:
A1300399510
2023-08-08 11:59:27 +08:00
parent 8739abbba8
commit 814e003397
1 changed files with 115 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/views/edit.vue
View File

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