liyongle
3 years ago
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 201 B |
|
Before Width: | Height: | Size: 531 B After Width: | Height: | Size: 534 B |
|
Before Width: | Height: | Size: 534 B After Width: | Height: | Size: 540 B |
|
Before Width: | Height: | Size: 531 B After Width: | Height: | Size: 543 B |
|
Before Width: | Height: | Size: 534 B After Width: | Height: | Size: 540 B |
|
After Width: | Height: | Size: 451 B |
|
Before Width: | Height: | Size: 285 B After Width: | Height: | Size: 334 B |
|
After Width: | Height: | Size: 289 B |
|
After Width: | Height: | Size: 624 B |
|
Before Width: | Height: | Size: 242 B After Width: | Height: | Size: 356 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 629 B |
|
Before Width: | Height: | Size: 245 B After Width: | Height: | Size: 299 B |
|
After Width: | Height: | Size: 778 B |
|
Before Width: | Height: | Size: 274 B After Width: | Height: | Size: 333 B |
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,209 @@ |
|||
<template> |
|||
<ScrollView v-if="directionInfo" ref="myScroll" scrollbar :pull-up="false" class="way-scroll" :list="pathShopList"> |
|||
<div class="way-list"> |
|||
<div class="line"></div> |
|||
<div class="way-li"> |
|||
<div class="tab" :class="{ tab_ac: playIdx === -1 }"></div> |
|||
<div class="way-right" :class="{ 'way-right-end': playIdx === -1 }"> |
|||
<p class="way-logo"> |
|||
<img :src="directionInfo.thumbIcon" alt="" /> |
|||
</p> |
|||
<p class="way-name">{{ positionStr }}</p> |
|||
</div> |
|||
</div> |
|||
<div v-for="(item, idx) of pathShopList" :id="item.shopNum" :key="item.shopCode" class="way-li"> |
|||
<div class="tab" :class="{ tab_ac: playIdx === idx }"></div> |
|||
<div class="way-right" :class="{ 'way-right-end': playIdx === idx }"> |
|||
<p class="way-logo"> |
|||
<img |
|||
:src="item.logoUrl ? item.logoUrl : item.logoPath ? item.logoPath : require('@/assets/images/header/logo.svg')" |
|||
width="24" |
|||
height="24" |
|||
alt="" |
|||
/> |
|||
</p> |
|||
<p class="way-name"> |
|||
{{ item.shopName ? switchLanguage(item, 'shopName') : switchLanguage(item, 'name') }} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div class="way-li"> |
|||
<div class="tab" :class="{ tab_ac: playIdx === pathShopList.length }"></div> |
|||
<div class="way-right" :class="{ 'way-right-end': playIdx === pathShopList.length }"> |
|||
<p class="way-logo"> |
|||
<img :src="shop.logoUrl ? shop.logoUrl : require('@/assets/images/header/logo.svg')" alt="" /> |
|||
</p> |
|||
<p class="way-name">{{ lastStr }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ScrollView> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onBeforeMount, onBeforeUnmount, shallowRef, computed } from 'vue' |
|||
import { storeToRefs } from 'pinia' |
|||
import { useRootStore } from '@/store/root' |
|||
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' |
|||
import ScrollView from '@/base/ScrollView/ScrollView' |
|||
|
|||
const store = useRootStore() |
|||
const { switchLanguage } = useSwitchLanguage() |
|||
const { shop, device, language } = storeToRefs(store) |
|||
const myScroll = shallowRef() |
|||
const props = defineProps({ |
|||
directionInfo: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
pathShopList: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}) |
|||
const positionStr = computed(() => { |
|||
if (language.value === 'zh') { |
|||
return `您在${device.value.floor}层，${switchLanguage(props.directionInfo, 'text')}` |
|||
} else if (language.value === 'en') { |
|||
return `You are on ${device.value.floor}，${switchLanguage(props.directionInfo, 'text')}` |
|||
} |
|||
return `您在${device.value.floor}層，${switchLanguage(props.directionInfo, 'text')}` |
|||
}) |
|||
const lastStr = computed(() => { |
|||
if (language.value === 'zh') { |
|||
return `到达${shop.value.shopName}` |
|||
} else if (language.value === 'en') { |
|||
return `arrive ${shop.value.shopNameEn}` |
|||
} |
|||
return `到達${switchLanguage(shop.value, 'shopName')}` |
|||
}) |
|||
const playIdx = ref(-1) |
|||
onBeforeMount(() => { |
|||
window.Map_QM && window.Map_QM.addEventListener('PathPlaying', onPathPlaying, false) |
|||
window.Map_QM && window.Map_QM.addEventListener('PathPlayOver', onPathPlayOver, false) |
|||
}) |
|||
onBeforeUnmount(() => { |
|||
window.Map_QM.removeEventListener('PathPlaying', onPathPlaying) |
|||
window.Map_QM.removeEventListener('PathPlayOver', onPathPlayOver) |
|||
}) |
|||
|
|||
function onPathPlayOver() { |
|||
playIdx.value = props.pathShopList.length |
|||
} |
|||
|
|||
function onPathPlaying(e) { |
|||
// console.log(e.data) //返回小人位置 {"pathArrIn": 0, "pathIndex": 1, "shopNum":"" } |
|||
const { shopNum } = e.data |
|||
if (shopNum) { |
|||
const idx2 = props.pathShopList.findIndex(val => val.shopNum === shopNum) |
|||
playIdx.value = idx2 |
|||
myScroll.value.scrollToElement(document.getElementById(e.data.shopNum)) |
|||
} |
|||
} |
|||
//重置playIdx |
|||
function resetPlayIdx() { |
|||
playIdx.value = -1 |
|||
} |
|||
defineExpose({ |
|||
resetPlayIdx, |
|||
myScroll |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
:deep(.bscroll-vertical-scrollbar) { |
|||
width: 6px; |
|||
height: 120px !important; |
|||
background: rgb(0 0 0 / 3%); |
|||
border-radius: 6px; |
|||
opacity: 1 !important; |
|||
.bscroll-indicator { |
|||
background: rgb(0 0 0 / 6%) !important; |
|||
border: none !important; |
|||
border-radius: 6px !important; |
|||
} |
|||
} |
|||
.way-scroll { |
|||
overflow: hidden; |
|||
width: 296px; |
|||
height: 348px; |
|||
.way-list { |
|||
position: relative; |
|||
.line { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 4px; |
|||
width: 1px; |
|||
height: 100%; |
|||
border: 1px dashed #8a766a; |
|||
} |
|||
.way-li { |
|||
@include fl(); |
|||
|
|||
position: relative; |
|||
margin-bottom: 8px; |
|||
.tab { |
|||
position: absolute; |
|||
top: 16px; |
|||
left: 0; |
|||
width: 10px; |
|||
height: 10px; |
|||
background-color: #fff; |
|||
border: 1px solid #8a766a; |
|||
border-radius: 50%; |
|||
} |
|||
.tab_ac { |
|||
background: #e00068; |
|||
border-color: #e00068; |
|||
} |
|||
.way-right { |
|||
@include fl(); |
|||
|
|||
max-width: 250px; |
|||
height: 40px; |
|||
padding: 4px 16px 4px 4px; |
|||
margin-left: 15px; |
|||
background: #fff; |
|||
background: rgb(255 255 255 / 30%); |
|||
border: 1px solid #fff; |
|||
border-radius: 8px; |
|||
.way-logo { |
|||
@include fl(center); |
|||
|
|||
padding: 4px; |
|||
margin-right: 16px; |
|||
background: #fff; |
|||
border-radius: 6px; |
|||
img { |
|||
width: 24px; |
|||
height: 24px; |
|||
object-fit: scale-down; |
|||
} |
|||
} |
|||
.way-name { |
|||
@include no-wrap; |
|||
|
|||
max-width: 180px; |
|||
padding-left: 12px; |
|||
font-size: 12px; |
|||
font-family: 'font_regular'; |
|||
color: #615c59; |
|||
font-weight: 400; |
|||
line-height: 14px; |
|||
} |
|||
} |
|||
.way-right-end { |
|||
background: #fff; |
|||
border: 1px solid #e00068; |
|||
.way-name { |
|||
font-size: 12px; |
|||
font-family: font-bold; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||