From becfe41039540f0e89acda88490451fc03dd1f5d Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Tue, 25 Jul 2023 12:18:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E5=9C=B0=E5=9B=BE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/publicImage/u1704.png | Bin 0 -> 1686 bytes
 src/assets/img/publicImage/u353.svg  |   6 +
 src/components/public/viewMap.vue    | 178 +++++++++++++++++++++++++++
 src/views/apartmentDetail.vue        |  33 +++--
 4 files changed, 209 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/img/publicImage/u1704.png
 create mode 100644 src/assets/img/publicImage/u353.svg
 create mode 100644 src/components/public/viewMap.vue

diff --git a/src/assets/img/publicImage/u1704.png b/src/assets/img/publicImage/u1704.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c8f865822ff01782dcfc558e27fac1f825260cd
GIT binary patch
literal 1686
zcmV;H25I?;P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91K%fHv1ONa40RR91KmY&$07g+lumAuC07*naRCodHo84~}MHt2@(V|lE
z9}qAIg2-nG7iyFsL?kWoMu{KsR<Dd26L0*g3W$k+h(-(;L=wQ(k^qKyp;18%meO(o
z@k#_#npl4iISbRbv(wq#IeSjizR8oFulISMnKL_`o!!owHDfa)(2@}t8yo8e=fMcr
z+7c114BF^8m+Lm%DlHwY3aoCsu{$s~Usrl|U4hy)&MkEa<Hue?oCm>ruox@=<BT>x
zQ*aLa4o-p-Oo}sHr>4=N`@u)xH&E7o!ErZOHf2Tuv5$j3@E=HJ;`$nFZrg!C+*&XI
znr#}~)u{%e^2&>tIf!`=ybki#l&jPYfaBl?FbIAEuB{-m2&@4Qfeqkx;ImN*KL)+5
z6W4qVYAK`h3&Ba?GfmsW;AwD&6=WSe^>b;n9cb$3-A><9H(^1wTusRncs=+7`0NV`
zSA_ywr%Bqbru}~F)5u@sx-R6OypDhy!Cwsl?q!fn)I#MtDIFt{W?R5nVC@nGx@DSg
z1kx|BfYv^tpet4ZZS@S0S@c#Ihk0O6=IC6dskt+O01JU{+P@Xs@vI#@TY&~)7(9`c
z$6RUO0eXQo-463(I10Cccn<I_crO<wOXPr_SAn$?6m%vEagzp8?dq%*{^f5nrb!{l
zHxqWGVQ;VyWEHq(djDzCASKDrq}$;$qivM@+LDwL-5|3&JgxT83*JP=v?XZK!gvn2
zb|gs@7`3;z7WJntiGWBF1Zq*Wwkgs*zZs1EhIL<l>(<tw^MKJ>Z5BYb9Jt$1rGq=X
zRt^E$)&SR}cWG%&INO!~aA~rd9MRklT-#MTG%UZmOr)PGO;(d58lN$mPnQY}$r3|!
zh5X!7WHmaWu?zfdwBMU2A#^CJGd$M@c=o>H7PMm;jhE4N)M&GPxltV&03BeucFfIG
zN%QMG3BCcB8|de{tqP~{wOVaoOmj~bK?i|rJ)UNTiy+h?XP)gWOz3fdTm$UdSDt3!
zBD_zz45XKbJtnV(!wNGYu4gL`G%PC&v5wrshC?^dySi8_{7w&IP5a5LFRXNYEo5nQ
zL*yP%OeQj`k3PtdY@B?jNEugly)?dy;T%qtbcYtfaOCFIMjel(3hxfUi;$i#Ks-WQ
z`4qA5A{xiEacP>Po2k`|MQ~d-&jZ(Pw|8aIa7QnK?hLT8^rF(W+})JhD3oTCvY-0U
z-h2mb4um)&>#WwHJipKYoH0&GUPsZvH{sQ$rypq7CTQjFq3&(2DNJvdT(f;~>-=e^
z(F<mp9`v_tzfyD`GTNUntP+C7hU6;wsqip#CpzuJ(4xWvAP0!_e%`h1rHE>DLhN&{
zVA7{T;X`YH{Os}9OChp0sk48Y_m<Yh=q&^GNX#xUrTJ4kqE+80xF+rQRf+?FUQfHG
zKV@xch_p|zhbjw&bhF$0MtVzS;=}~#>hb7&EJ+xM`waP6^7E3ACm=z~T|h5cU90}<
zXWC$03GAz}eUw%H#3qYT_9_kFbKu&)WF9EX>Ggwfmm8sx?)5gVu@D^}cyzs=TmnHl
zfxgMH_Db?#k%S0&&59v^4BQ$?QLGun3xGaCu=Xwmg>DDhXD2yjPL?$7eZTw#%I_}L
ztAecwunzb>k=a9e^ukD6_atXHRtA1r@b&_0e^QX{m3T-Hfi?i&APi9+_3c0H##ty{
zR)>TB)Y;WuJnH<TS-V=U1k_CM-3}CweF=g)Mm2IRB${^G;n_`2=B{a9&o6I95_mq)
zH#vEx{ll}M%i}xF$5XGTIz8BgPLj3YRl4U3EnHTl@(AeU@(y?d<gLE{P<Ip@2j2sI
z68|G`Z6z6<<Y?wR3?2cu0iWsf*xf)UNTa?6wU;pv+AP`U28xoK4m;9ra#D^K;x>UJ
zKu=<+OkC>t#*|u{%7xga;6rd4lr^19?*!EzX#+j2yaoigZ&c9%-P`WJ%-loXzH8LU
z%@EK5X7(>LgQS~kwG4o-2bvOYIg43Kw9IxzOviL92f%#|H!|%8pF2PwHtKnx@Ymwg
gZm?!L+{6+19|#$1*5;!-3jhEB07*qoM6N<$g6F^f8~^|S

literal 0
HcmV?d00001

diff --git a/src/assets/img/publicImage/u353.svg b/src/assets/img/publicImage/u353.svg
new file mode 100644
index 0000000..4599d6f
--- /dev/null
+++ b/src/assets/img/publicImage/u353.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="6px" height="12px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -4105 -1574 )">
+    <path d="M 5.89690721649484 5.72344689378758  C 5.96563573883162 5.80360721442886  6 5.89579158316633  6 6  C 6 6.10420841683367  5.96563573883162 6.19639278557114  5.89690721649484 6.27655310621242  L 1.09278350515464 11.8797595190381  C 1.02405498281787 11.9599198396794  0.945017182130584 12  0.855670103092783 12  C 0.766323024054983 12  0.687285223367698 11.9599198396794  0.618556701030928 11.8797595190381  L 0.103092783505155 11.2785571142285  C 0.0343642611683849 11.1983967935872  0 11.1062124248497  0 11.002004008016  C 0 10.8977955911824  0.0343642611683849 10.8056112224449  0.103092783505155 10.7254509018036  L 4.15463917525773 6  L 0.103092783505155 1.27454909819639  C 0.0343642611683849 1.19438877755511  0 1.10220440881763  0 0.997995991983968  C 0 0.893787575150299  0.0343642611683849 0.801603206412824  0.103092783505155 0.721442885771542  L 0.618556701030928 0.120240480961924  C 0.687285223367698 0.0400801603206409  0.766323024054983 0  0.855670103092783 0  C 0.945017182130584 0  1.02405498281787 0.0400801603206409  1.09278350515464 0.120240480961924  L 5.89690721649484 5.72344689378758  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 4105 1574 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/public/viewMap.vue b/src/components/public/viewMap.vue
new file mode 100644
index 0000000..b612cd3
--- /dev/null
+++ b/src/components/public/viewMap.vue
@@ -0,0 +1,178 @@
+<template>
+    <div class="flexcenter" :class="{ 'pop-mask': show }">
+
+        <div class="" :class="{ 'pop': show }">
+            <div class="close flexcenter" @click="showPop">
+                <!-- <img class="icon" src="@/assets/img/publicImage/circle-close.png"> -->
+                <img class="icon" src="@/assets/img/publicImage/white-cross.svg">
+            </div>
+            <div id="container">
+                <div class="location-bj flexcenter" @click="showPop" v-if="!show">
+                    <div class="location-site flexacenter">
+                        <img class="tracingPoint" src="@/assets/img/publicImage/u1704.png" />
+                        <div class="location-name">{{ props.info['address'] }}</div>
+                        <img class="location-arrows" src="@/assets/img/publicImage/u353.svg" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue';
+
+const props = defineProps({
+    info: Object,
+})
+
+// coordinate
+
+let coordinate = props.info['coordinate']
+console.log("coordinate", coordinate);
+
+let key = ref("MVNBZ-PEFWI-O4OGT-5ADVJ-7QAYJ-NBFY4")
+
+const initMap = () => {
+
+    let center = new TMap.LatLng(coordinate[0], coordinate[1]);
+    let map = new TMap.Map("container", {
+        zoom: 15,
+        disableDefaultUI: true,                                                //禁止所有控件
+        zoomControl: false,
+        center: center,
+    });
+
+    map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
+    map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
+
+
+    let marker = new TMap.MultiMarker({
+        id: "marker-layer",
+        map: map,
+        geometries: [{
+            "position": new TMap.LatLng(coordinate[0], coordinate[1]),
+        }]
+    });
+}
+
+const loadScript = (url, callback) => {
+    let script = document.createElement('script');
+    script.type = "text/javascript";
+    script.src = url;
+    script.onload = callback;
+    document.body.appendChild(script);
+}
+
+loadScript(`https://map.qq.com/api/gljs?v=1.exp&key=${key.value}&callback=initMap`, initMap)
+
+let show = ref(false)  // 弹窗状态
+
+const showPop = () => {
+    show.value = !show.value
+    console.log("showPop", showPop);
+}
+
+</script>
+
+<style lang="less" scoped>
+.pop-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.698039215686274);
+    z-index: 1000;
+}
+
+.pop {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 1200px;
+    height: 800px;
+    background: #fff;
+    border-radius: 20px;
+    padding: 20px;
+
+    #container {
+        width: 100%;
+        height: 100%;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+}
+
+.close {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    position: absolute;
+    top: -25px;
+    right: -25px;
+    cursor: pointer;
+    z-index: 1002;
+
+    .icon {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+#container {
+    cursor: pointer;
+    width: 816px;
+    height: 180px;
+    margin-top: 20px;
+    margin-bottom: 40px;
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+}
+
+.location-site {
+    display: flex;
+    align-items: center;
+    background-color: rgba(51, 51, 51, 0.8);
+    padding: 0 10px;
+    line-height: 40px;
+    font-size: 18px;
+    border-radius: 10px;
+    z-index: 22;
+}
+
+.location-bj {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1001;
+
+    background-color: rgba(51, 51, 51, 0.298039215686275);
+
+}
+
+.tracingPoint {
+    width: 18px;
+    height: 18px;
+}
+
+.location-name {
+    color: #fff;
+    font-weight: 400;
+    min-width: 170px;
+    max-width: 740px;
+    font-size: 14px;
+    color: #FFFFFF;
+    padding: 0 8px;
+}
+
+.location-arrows {
+    width: 6px;
+    height: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/apartmentDetail.vue b/src/views/apartmentDetail.vue
index 79fc1aa..b81c1d9 100644
--- a/src/views/apartmentDetail.vue
+++ b/src/views/apartmentDetail.vue
@@ -82,7 +82,8 @@
         <div class="details-box flexflex">
             <div class="details-left flex1">
                 <!-- 房间类型 -->
-                <div class="type-box" v-if="roomList.length != 0" ref="roomEle">
+                <!-- <div class="type-box" v-if="roomList.length != 0" ref="roomEle"> -->
+                <div class="type-box" v-if="false" ref="roomEle">
                     <div class="type-item flexacenter" v-for="item in roomList">
                         <img class="type-icon" v-if="item['status'] == 1"
                             src="@/assets/img/apartmentDetail/apartment-have.svg" />
@@ -140,6 +141,8 @@
                         <img class="icon" src="@/assets/img/apartmentDetail/location-icon.png">
                         {{ info.location || '位置' }}
                     </div>
+                    <view-map :info="info"></view-map>
+
 
                     <!-- 交通 -->
                     <div class="traffic-box" v-if="info['traffic']">
@@ -208,10 +211,10 @@
                 </div>
             </div>
             <div class="details-right flexacenter">
-                <div class="QRcode-box apartment-QRcode flexflex" v-if="false">
+                <div class="QRcode-box apartment-QRcode flexflex" v-if="true">
                     <img class="mini-program-title" src="@/assets/img/apartmentDetail/mini-program-title.png">
                     <div class="QRcode-case flexcenter">
-                        <img class="QRcode-img" src="" alt="">
+                        <img class="QRcode-img" :src="qrcode" alt="">
                     </div>
 
                     <div class="apartment-QRcode-hint flexacenter">
@@ -219,16 +222,17 @@
                         手机查看该公寓
                     </div>
                 </div>
-                <div class="QRcode-box group-QRcode flexflex" v-if="false">
+                <div class="QRcode-box group-QRcode flexflex" v-if="true">
                     <img class="group-title" src="@/assets/img/apartmentDetail/group-title.png">
                     <div class="QRcode-case flexcenter">
-                        <img class="QRcode-img" src="" alt="">
+                        <img class="QRcode-img" :src="wechat['wechatqrcode']" alt="">
                     </div>
 
                     <div class="group-QRcode-hint flexacenter">
                         <img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
                         入群请添加
-                        <b>方同学的小助手</b>
+                        <!-- <b>方同学的小助手</b> -->
+                        <b>{{ wechat['nickname'] }}</b>
                     </div>
                 </div>
                 <!-- 同品牌公寓 -->
@@ -315,16 +319,23 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick } from 'vue';
+import { ref, onMounted, toRefs, watch, getCurrentInstance, nextTick } from 'vue';
 import { ElMessage } from 'element-plus'
+import { useStore } from 'vuex';
 
 import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
 import footerpage from '@/components/footer/footer.vue'
+import viewMap from '@/components/public/viewMap.vue'
 
 import { copyToClipboard } from '@/utils/util.js'
 const uniqid = "aWqSz58aKKvn"
 // uniqid=aWqSz58aKKvn
 const { proxy } = getCurrentInstance()
+const store = useStore();
+
+const { wechat } = toRefs(store.state);
+
+let mapState = ref(false)  // 地图弹窗状态
 
 // 房间类型
 let roomList = ref([])
@@ -341,18 +352,23 @@ let attachment = ref([])  // 轮播图数据
 
 let company = {} // 品牌数据
 let token = ""
-
+let qrcode = ref("") // 小程序详情二维码
 
 
 proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
     if (res.code != 200) return
     let data = res.data
     roomList.value = data['roomList']
+    data['info']['coordinate'] = data['info']['coordinate'].split(',').map(item => {
+        return +item
+    })
+    console.log(data['info']['coordinate']);
     info.value = data['info']
     attachment.value = data['info']['attachment']
     withsameapartments.value = data['withsameapartments']
     company = data['company']
     token = data['token']
+    qrcode.value = data['qrcode']
 
     handleNavData()
     if (data.withsameapartments > 0) dualBrandData()
@@ -1116,6 +1132,7 @@ const contactReservationService = () => {
                         .QRcode-img {
                             width: 103px;
                             height: 103px;
+                            border-radius: 70px;
                         }
                     }