project_sheasthospital
/
easthospital_iot-daoshi-v
forked from huangmh/client_iot-daoshi-template-v
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 导览品牌地图联动

潮流
jiannibang 4 years ago
parent
5f7549bd26
commit
c2673fea9b
6 changed files with 161 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      public/static/qm/MainMap_QM.js
  2. 186
      src/base/ShopItem/ShopItem.vue
  3. 12
      src/components/BrandScroll/BrandScroll.vue
  4. 2
      src/components/Map/Map.vue
  5. 30
      src/composables/useInitMap.js
  6. 12
      src/views/Guide/Guide.vue

12
public/static/qm/MainMap_QM.js
View File

@ -3541,6 +3541,18 @@ MainMap_QM.prototype = {
}
}
},
setSelectShopMatByName: function (ipName) {
// #775544 #AD8164
for (let i = 0; i < Map_QM.mapArr[Config.selectBuild].length; i++) {
let shopArr = Map_QM.mapArr[Config.selectBuild][i].allObj.children
for (let k = 0; k < shopArr.length; k++) {
if (shopArr[k].name == ipName) {
Map_QM.setSelectShopMat(shopArr[k])
break
}
}
}
},
/**
* @api {方法} getMapIPData(ipName) 获取POI 基础数据
* @apiGroup 地图交互

186
src/base/ShopItem/ShopItem.vue
View File

@ -1,17 +1,26 @@
<template>
<div :class="{ 'group-item': true, isRow, isFood }" @click="handleShop">
<div :class="{ 'logo-wrapper': true, hasFood: isFood && shop.foodMaterialList.length }">
<div :id="shop.houseNumber" class="group-item" :class="{ isRow, isFood, isActive }" @click="handleShop">
<div class="logo-wrapper" :class="{ hasFood: isFood && shop.foodMaterialList.length }">
<img loading="lazy" :src="config.sourceUrl + shop.logoUrl" alt="" class="shop-logo" />
</div>
<p class="name">
<span class="shop-name">{{ switchLanguage(shop, 'shopName') }}</span>
<span class="name-right" v-if="$route.path === '/guide'"> {{ shop.distance ? shop.distance + '米' : '' }}<img v-if="shop.dir" :src="shop.dir" /> </span>
<span class="name-right" v-if="$route.path === '/guide'"> {{ shop.distance ? shop.distance + '米' : '' }}<img v-if="shop.dir" class="dir" :src="shop.dir" /> </span>
<span class="name-right" v-else>{{ shop.floor }}</span>
</p>
<Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
<div v-if="isActive" class="qrcode-wrapper">
<div class="qrcode"></div>
扫码导航
</div>
</Transition>
</div>
</template>
<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
const props = defineProps({
shop: Object,
config: Object,
@ -19,6 +28,10 @@ const props = defineProps({
isFood: Boolean
})
const store = useStore()
const { shop: activeShop } = storeToRefs(store)
const isActive = computed(() => activeShop.value && activeShop.value.shopId === props.shop.shopId)
const emits = defineEmits(['click'])
function handleShop() {
emits('click', props.shop)
@ -32,55 +45,48 @@ function handleShop() {
background: rgba(255, 255, 255, 0.6);
border-radius: 8px;
overflow: hidden;
}
.logo-wrapper {
width: 230px;
height: 160px;
padding: 20px 55px;
background-color: #fff;
}
.shop-logo {
width: 100%;
height: 100%;
object-fit: contain;
}
.name {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 12px;
}
.shop-name {
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: rgba(0, 0, 0, 0.8);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.name-right {
display: flex;
align-items: center;
font-weight: 700;
font-size: 12px;
line-height: 14px;
font-family: 'font_bold';
color: rgba(0, 0, 0, 0.4);
img {
.logo-wrapper {
width: 230px;
height: 160px;
padding: 20px 55px;
background-color: #fff;
}
.shop-logo {
width: 100%;
height: 100%;
object-fit: contain;
}
.name {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 12px;
}
.shop-name {
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: rgba(0, 0, 0, 0.8);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.name-right {
display: flex;
align-items: center;
font-weight: 700;
font-size: 12px;
line-height: 14px;
font-family: 'font_bold';
color: rgba(0, 0, 0, 0.4);
}
.dir {
width: 20px;
height: 20px;
margin-left: 7px;
}
}
.format-icon {
width: 14px;
margin-right: 8px;
height: 14px;
}
.group-item {
&.isRow {
display: flex;
width: 460px;
@ -96,21 +102,21 @@ function handleShop() {
.name {
flex: 1;
padding: 0 24px;
.shop-name {
font-weight: 700;
font-size: 18px;
line-height: 21px;
color: rgba(0, 0, 0, 0.8);
}
.name-right {
font-weight: 500;
font-size: 18px;
line-height: 21px;
img {
width: 32px;
height: 32px;
}
}
}
.shop-name {
font-weight: 700;
font-size: 18px;
line-height: 21px;
color: rgba(0, 0, 0, 0.8);
}
.name-right {
font-weight: 500;
font-size: 18px;
line-height: 21px;
}
.dir {
width: 32px;
height: 32px;
}
}
&.isFood {
@ -137,22 +143,44 @@ function handleShop() {
.name {
display: block;
width: 100%;
.shop-name {
display: block;
margin-top: 12px;
text-align: center;
}
.name-right {
display: block;
text-align: center;
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 17px;
color: rgba(0, 0, 0, 0.6);
margin-top: 6px;
}
}
.shop-name {
display: block;
margin-top: 12px;
text-align: center;
}
.name-right {
display: block;
text-align: center;
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 17px;
color: rgba(0, 0, 0, 0.6);
margin-top: 6px;
}
}
&.isActive {
position: relative;
.qrcode-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
font-weight: 700;
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
text-align: center;
line-height: 40px;
}
.qrcode {
height: 160px;
background: #ffffff;
border-radius: 8px;
}
}
}

12
src/components/BrandScroll/BrandScroll.vue
View File

@ -6,7 +6,7 @@
{{ item.name }}<span class="meta">/ {{ item.shopList.length }}个</span> <span v-if="item.name === currentFloor.floor" class="current">您在本层</span>
</h1>
<TransitionGroup name="zoom" mode="out-in" tag="div" :class="{ group: true, isRow }">
<ShopItem :config="config" :isRow="isRow" :isFood="isFood" :shop="shop" @click="handleShop(shop)" v-for="shop of item.shopList" :key="shop.shopId" />
<ShopItem :config="config" :isRow="isRow" :isFood="isFood" :shop="el" @click="handleShop(el)" v-for="el of item.shopList" :key="el.shopId" />
</TransitionGroup>
</div>
</div>
@ -21,7 +21,7 @@ import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
const store = useStore()
const { currentFloor } = storeToRefs(store)
const { currentFloor, shop } = storeToRefs(store)
const scroll = ref(null)
const props = defineProps({
@ -42,6 +42,14 @@ watch(
scroll.value.refresh()
})
)
watch(shop, nxt => {
if (!nxt) return
const el = document.getElementById(nxt.houseNumber)
if (!el) return
nextTick(() => {
scroll.value.scrollToElement(el, 500, 0, -100)
})
})
</script>
<style lang="scss" scoped>

2
src/components/Map/Map.vue
View File

@ -5,7 +5,7 @@
<!-- 地图弹框 -->
<div id="shopInfo" class="boxShop">
<div>{{ switchLanguage(shop, 'shopName') }}</div>
<div>{{ shop ? switchLanguage(shop, 'shopName') : '' }}</div>
</div>
<div id="moveFloorBG">
<span id="moveFloor"></span>

30
src/composables/useInitMap.js
View File

@ -28,18 +28,32 @@ export const useInitMap = function () {
})
}
let lastShop
const bounceShopAndChangeColor = data => {
if (lastShop) window.Map_QM.changeMapIPState(lastShop.houseNumber, lastShop.formatColor)
lastShop = data
if (!data) return
const xaxis = JSON.parse(data.xaxis).map(Number)
showMapDialog()
window.Map_QM.addElementLabel(document.getElementById('shopInfo'), xaxis[0], xaxis[2])
window.Map_QM.changeMapIPState(data.houseNumber, '#516DD8')
}
export const setShopActive = shop => {
bounceShopAndChangeColor(shop)
window.Map_QM.setSelectShopMatByName(shop.houseNumber)
}
//点击地图店铺box
function onClickShop(event) {
console.log(event)
const store = useStore()
if (lastShop) window.Map_QM.changeMapIPState(lastShop.shopNum, lastShop.entColor)
lastShop = event.data
if (event.data) {
showMapDialog()
window.Map_QM.addElementLabel(document.getElementById('shopInfo'), event.data.xaxis, event.data.yaxis)
store.SET_SHOP(event.data.shopData)
window.Map_QM.changeMapIPState(event.data.shopNum, '#516DD8')
} else {
if (!event.data) {
store.SET_SHOP(null)
bounceShopAndChangeColor(null)
hideMapDialog()
} else {
store.SET_SHOP(event.data.shopData)
bounceShopAndChangeColor(event.data.shopData)
}
}

12
src/views/Guide/Guide.vue
View File

@ -69,7 +69,7 @@ import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
import { RESET, DIRECTION, ACTIVITY_BRAND, list as buttonList } from './list'
import View from '@/layouts/View.vue'
import { hideMapDialog } from '@/composables/useInitMap'
import { hideMapDialog, setShopActive } from '@/composables/useInitMap'
import { getBrandListByFormat, getBrandListByFloor } from '@/http/brand/api'
import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'
import ScrollView from '@/base/ScrollView/ScrollView.vue'
@ -158,7 +158,7 @@ function handleMapIcon(item, index) {
function handleShop(item) {
mapIdx.value = -1
store.SET_SHOP(item)
store.SET_SHOW_DETAIL(true)
setShopActive(item)
}
const floorIdx = ref(-1)
@ -189,7 +189,12 @@ function filterAboutCurrentInfo() {
floorIdx.value = currentBuildingFloorsList.value.findIndex(item => item.floorCode === currentFloor.value.floorCode)
selectedShopList.value = shopList.value.map(brand => ({
...brand,
shopList: brand.shopList.filter(shop => shop.floor === currentFloor.value.floor)
shopList: brand.shopList
.filter(shop => shop.floor === currentFloor.value.floor)
.map(shop => {
const meta = currentFloorShopMap.value[shop.shopId]
return { ...shop, ...(meta ? meta : {}) }
})
}))
})
}
@ -198,6 +203,7 @@ onBeforeUnmount(() => {
cancelIdleCallback(idle.value)
clearTimeout(mapTimer.value)
clearTimeout(mapIconTimer.value)
hideMapDialog()
})
watch(

Write Preview
Loading…
Cancel
Save