封装地图组件

This commit is contained in:
A1300399510
2023-07-25 12:18:24 +08:00
parent bbd1bfe6b2
commit becfe41039
4 changed files with 209 additions and 8 deletions

View File

@@ -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;
}
}