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> |
||||