From 814e00339750194f110232728a40c7cbbbeb0c70 Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Tue, 8 Aug 2023 11:59:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/edit.vue | 167 +++++++++++++++++++++++++++++++--------------
 1 file changed, 115 insertions(+), 52 deletions(-)

diff --git a/src/views/edit.vue b/src/views/edit.vue
index 8ff29d5..a0d2fd1 100644
--- a/src/views/edit.vue
+++ b/src/views/edit.vue
@@ -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;