From 232b7c290cc45d500ef4b8e7f45c62f3270aeafe Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Wed, 5 Jul 2023 19:16:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9C=B0=E5=9B=BE=EF=BC=8C?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/edit/about-pop.vue |   4 -
 src/components/edit/map.vue       |  92 +++++++++++++++++
 src/views/edit.vue                | 158 ++++++++++++++++++++++--------
 3 files changed, 209 insertions(+), 45 deletions(-)
 create mode 100644 src/components/edit/map.vue

diff --git a/src/components/edit/about-pop.vue b/src/components/edit/about-pop.vue
index fb738e6..a931597 100644
--- a/src/components/edit/about-pop.vue
+++ b/src/components/edit/about-pop.vue
@@ -69,10 +69,6 @@ export default {
             tab.value = tabvalue;
         };
 
-
-
-
-        console.log("cutTabArray", cutTabArray);
         return {
             tabList,
             tab,
diff --git a/src/components/edit/map.vue b/src/components/edit/map.vue
new file mode 100644
index 0000000..4792ccd
--- /dev/null
+++ b/src/components/edit/map.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="flexcenter pop-mask">
+        <div class="pop">
+            <div id="map"></div>
+            <iframe id="mapPage" width="100%" height="100%" frameborder=0
+                :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${key}&referer=myapp&coord=${latlng.longitude},${latlng.latitude}`">
+            </iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'GterFangMap',
+    props: ["info"],
+
+    data() {
+        return {
+            longitudeLatitude: { // 默认 地图 经纬度 longitude and latitude
+                0: {
+                    longitude: 22.2795,
+                    latitude: 114.1692
+                },
+                1: {
+                    longitude: 22.2795,
+                    latitude: 114.1692
+                },
+                2: {
+                    longitude: 22.3171,
+                    latitude: 114.1794
+                },
+                3: {
+                    longitude: 22.3926,
+                    latitude: 114.1332
+                }
+            },
+
+            key: "MVNBZ-PEFWI-O4OGT-5ADVJ-7QAYJ-NBFY4",
+            latlng: {
+                longitude: 22.2795,
+                latitude: 114.1692,
+            },
+        };
+    },
+
+    mounted() {
+        let that = this
+        let info = this.info
+
+        if (!info['latitude']) {
+            this.latlng = {
+                longitude: info['longitude'],
+                latitude: info['latitude'],
+            }
+        } else if (info['location']) {
+            let longitudeLatitude = this.longitudeLatitude
+            this.latlng = longitudeLatitude[info['location'] >>> 0]
+        }
+
+        window.addEventListener('message', function (event) {
+            // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
+            var loc = event.data;
+            if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
+                console.log('location', loc);
+                let { latlng, poiname } = loc
+                that.$emit('choosingLocation', {
+                    poiname,
+                    latlng,
+                });
+            }
+        }, false);
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.pop {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    height: 800px;
+    background: #fff;
+    border-radius: 20px;
+    padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/edit.vue b/src/views/edit.vue
index e5bb931..7af4249 100644
--- a/src/views/edit.vue
+++ b/src/views/edit.vue
@@ -1,4 +1,7 @@
 <template>
+    <!-- <div id="container"></div> -->
+    <map-component v-if="mapComponentState" :info="info" @choosingLocation="choosingLocation" />
+
     <div class="content-box flexflex">
         <div class="user-box shadow radius16 flexflex">
             <img class="user-img" :src="user.avatar">
@@ -71,9 +74,8 @@
                          -->
                     <!-- 出租方式 -->
                     <div v-if="item.field === 'type'" class="form-option modeOne flexacenter">
-                        <div ref="type" class="modeOne-item flexacenter"
-                            :class="{ 'pitch': Math.floor(info.type) == index }" v-for="(item, index) in typeData"
-                            @click="handleType(index)" :key="index">
+                        <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" />
@@ -83,6 +85,16 @@
                             <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>
 
                     <!-- 出租时长 -->
@@ -303,11 +315,34 @@
                             <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                             <img class="arrows-icon arrows-disabled-icon" src="@/assets/img/edit/disabled-icon.svg" />
                             <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
+
+                            <div class="pop area-pop-box radius16" style="position: absolute;top: 58px;height: 614px;"
+                                v-if="areaPopState">
+                                <!-- <div class="area-pop-header">所在区域</div> -->
+                                <div class="area-box flexflex" style="height: 100%;">
+                                    <div class="area-left">
+                                        <div class="area-item flexacenter" :class="{ 'pitchpitch': index == locationValue }"
+                                            v-for="(item, index) in locationData" :key="index"
+                                            @click.stop="handleArea(index)">
+                                            <div class="dot"></div>
+                                            {{ item.name }}
+                                        </div>
+                                    </div>
+                                    <div class="area-right flex1">
+                                        <div class="area-item flexacenter" :class="{ 'pitchpitch': info['location'] == index }"
+                                            v-for="(item, index) in locationData[locationValue].data" :key="index"
+                                            @click.stop="handleArea(index, item)">
+                                            <div class="area-item-name">{{ item }}</div>
+                                            <img class="area-item-pitch" src="@/assets/img/edit/blue-tick.svg" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
 
                         <!-- 地址 -->
-                        <div v-if="item.field == 'address'" class="modeOne-item flexacenter"
-                            style="width: 640px;border-color: rgba(170, 170, 170, 1);">
+                        <div v-if="item.field == 'address' && info['location']" class="modeOne-item flexacenter"
+                            style="width: 640px;border-color: rgba(170, 170, 170, 1);" @click="handleLocationData">
                             <div class="modeOne-text flexacenter" 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" />
@@ -481,7 +516,7 @@
 
     <!-- 弹窗区域 -->
     <!-- 类型弹窗 -->
-    <div class="flexcenter pop-mask" @click="typePopState = false" v-if="typePopState">
+    <!-- <div class="flexcenter pop-mask" @click="typePopState = false" v-if="typePopState">
         <div class="pop type-pop-box radius16">
             <div class="type-pop-title">{{ typeData[typeValue].name }}</div>
             <div class="type-pop-list flexflex">
@@ -492,10 +527,10 @@
                 </div>
             </div>
         </div>
-    </div>
+    </div> -->
 
     <!-- 所在区域 -->
-    <div class="flexcenter pop-mask" @click="areaPopState = false" v-if="areaPopState">
+    <!-- <div class="flexcenter pop-mask" @click="areaPopState = false" v-if="areaPopState">
         <div class="pop area-pop-box radius16">
             <div class="area-pop-header">所在区域</div>
             <div class="area-box flexflex">
@@ -516,7 +551,7 @@
                 </div>
             </div>
         </div>
-    </div>
+    </div> -->
 
     <!-- 目标区域 - 弹窗 -->
     <div class="flexcenter pop-mask" @click="targetAreaState = false" v-if="targetAreaState">
@@ -646,11 +681,11 @@
     </div>
     <about-pop :popState="aboutPopState" :intermediary="intermediary" @close="handleAboutPopState"></about-pop>
 </template>
-<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>
+<!-- <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script> -->
 <script>
-import { onMounted, watch, ref, } from 'vue';
 
 import aboutPop from '@/components/edit/about-pop.vue'
+import mapComponent from '@/components/edit/map.vue'
 
 export default {
     setup() {
@@ -726,8 +761,10 @@ export default {
             failPopState: false, // 失败弹窗
             aboutPopState: false, // 关于弹窗的展开状态
             submitState: false, // 发布提交接口请求状态
-
             isbindweixin: 0, // 是否绑定微信
+
+            mapComponentState: false, // 选择地址 的地图 弹窗状态
+
             id: 0,
             offshelftime: "",
             offshelftime: "",
@@ -788,9 +825,15 @@ export default {
         this.init();
     },
     components: {
-        aboutPop
+        aboutPop,
+        mapComponent
     },
     methods: {
+
+        updateMap(evtModel) {
+            console.log("evtModel", evtModel);
+        },
+
         require(url) {
             return require(url)
         },
@@ -928,11 +971,15 @@ export default {
 
         // 处理出租方式
         handleType(key, value) {
-            this.typePopState = !this.typePopState
-            if (key >>> 0 == key) this.typeValue = key
-            else {
+            // this.typePopState = !this.typePopState
+            if (key >>> 0 == key) {
+                this.typeValue = key
+                this.info['type'] = null
+                this.typePopState = true
+            } else {
                 this.info['type'] = key
                 this.typeValueUltimately = value
+                this.typePopState = false
             }
         },
 
@@ -1247,6 +1294,23 @@ export default {
             this.aboutPopState = !this.aboutPopState
         },
 
+        // 点击选择地址弹窗 处理经纬度
+        handleLocationData() {
+
+            let info = this.info
+            console.log(info);
+            // console.log(info['location'], info['latitude'], info['longitude']);
+
+
+            this.mapComponentState = true
+        },
+
+        // 选择地点后
+        choosingLocation(value) {
+            console.log(value);
+            // this.mapComponentState = false
+        },
+
 
 
 
@@ -1484,6 +1548,7 @@ export default {
                 .form-option {
                     width: 100%;
                     height: 50px;
+                    position: relative;
 
                     .pitch {
                         color: #62B1FF !important;
@@ -1541,6 +1606,11 @@ export default {
                                 margin-right: 0;
                             }
 
+                            .arrows-icon,
+                            .arrows-icon-pitch {
+                                transform: rotate(90deg);
+                            }
+
                             &.disabled {
                                 color: #AAAAAA !important;
                                 border-color: rgba(170, 170, 170, 1) !important;
@@ -1639,7 +1709,6 @@ export default {
                                 color: #d7d7d7;
                                 border: 1px solid rgba(235, 235, 235, 1);
                             }
-
                         }
                     }
 
@@ -2364,31 +2433,24 @@ export default {
     }
 
     &.type-pop-box {
-        width: 700px;
-        height: 272px;
+        width: 640px;
+        height: 181px;
         background: inherit;
         background-color: rgba(255, 255, 255, 1);
-        border: none;
-        border-radius: 20px;
-        -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
-        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
-        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
-        padding: 40px 30px;
+        border: 1px solid rgba(235, 235, 235, 1);
+        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
+        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
+        padding: 30px;
 
-        .type-pop-title {
-            font-weight: 650;
-            font-style: normal;
-            font-size: 20px;
-            color: #000000;
-            margin-bottom: 30px;
-
-        }
+        position: absolute;
+        top: 58px;
 
         .type-pop-list {
             flex-wrap: wrap;
 
             .type-pop-item {
-                width: 200px;
+                width: 179px;
                 height: 50px;
                 background-color: rgba(246, 246, 246, 1);
                 border-radius: 10px;
@@ -2412,10 +2474,10 @@ export default {
     }
 
     &.area-pop-box {
-        width: 700px;
+        width: 640px;
         height: 695px;
+        left: 0;
         background-color: rgba(255, 255, 255, 1);
-        border-radius: 20px;
         -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
         -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
         box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
@@ -2432,9 +2494,10 @@ export default {
         }
 
         .area-box {
-            height: calc(100% - 98px);
+            // height: calc(100% - 98px);
 
             .area-left {
+                // padding-top: 16px;
                 background-color: rgba(246, 246, 246, 1);
 
                 .area-item {
@@ -2449,11 +2512,23 @@ export default {
                     padding-left: 48px;
                     cursor: pointer;
 
-                    &.pitch {
+                    // border-bottom: 1px solid rgba(242, 242, 242, 1);
+
+                    &:first-of-type {
+                        padding-top: 16px;
+                        height: 86px;
+
+                        .dot {
+                            top: calc(50% + 8px);
+                        }
+                    }
+
+                    &.pitchpitch {
                         position: relative;
                         background-color: #fff;
-                        color: #000;
-                        font-weight: 650;
+                        color: #000 !important;
+                        font-weight: 650 !important;
+                        border: none !important;
 
                         .dot {
                             display: block;
@@ -2480,6 +2555,7 @@ export default {
             margin-left: 40px;
             margin-right: 6px;
             overflow: auto;
+            padding-top: 16px;
 
             /*滚动条样式*/
             &::-webkit-scrollbar {
@@ -2512,7 +2588,7 @@ export default {
                 font-size: 16px;
                 justify-content: space-between;
 
-                &.pitch {
+                &.pitchpitch {
                     color: #62B1FF;
 
                     .area-item-pitch {