修改编辑页面

src/components/edit/map.vue

@@ -82,8 +82,10 @@ export default {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 600px;
+    width: 100vw;
-    height: 800px;
+    height: 100vh;
+    // width: 600px;
+    // height: 800px;
     background: #fff;
     border-radius: 20px;
     padding: 20px;

src/views/edit.vue

@@ -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 v-if="item.field === 'leasetime'" class="form-option modeOne flexacenter">
-                        <div class="modeTwo-item flexcenter" :class="{ 'pitch': info['leasetime'] == 0 }" ref="leasetime"
+                        <!-- <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 class="form-title flexacenter">所属小区</div>
-                    </div>
                     <div class="form-option modeOne flexacenter">
-                        <el-popover v-if="info['communityid'] !== 0" v-model:visible="residentialAreaState"
+                        <!-- <el-popover v-if="info['communityid'] !== 0" v-model:visible="residentialAreaState" -->
-                            placement="bottom" :width="640" :show-arrow="false" trigger="click"
+                        <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'] = id
-                info['communityid'] = 0
+            info['communityname'] = name
-                info['communityname'] = null
-            } else {
-                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;
 }