Browse Source

feat: 🚀 首页接口调试

pull/1/head
liyongle 3 years ago
parent
commit
ee8345e935
  1. 15
      public/static/offline/JSON/getArtWorkList.json
  2. 66
      public/static/qm/MainMap_QM.js
  3. 3
      src/assets/images/guide/arrow.svg
  4. 3
      src/assets/images/guide/triangle.svg
  5. 121
      src/components/Map/Map.vue
  6. 9
      src/composables/useGuideFilterShop.ts
  7. 18
      src/composables/useGuideMapOperation.ts
  8. 8
      src/composables/useInitMap.ts
  9. 1
      src/i18n/lang/en.json
  10. 1
      src/i18n/lang/zh.json
  11. 3
      src/types/art.d.ts
  12. 13
      src/types/map.d.ts
  13. 1
      src/views/Guide/Area.vue
  14. 41
      src/views/Guide/ArtList.vue
  15. 3
      src/views/Guide/Floor.vue
  16. 1
      src/views/Guide/FloorPicList.vue
  17. 53
      src/views/Guide/Guide.vue
  18. 1
      src/views/Guide/Place.vue
  19. 4
      src/views/Guide/list.ts

15
public/static/offline/JSON/getArtWorkList.json

@ -16,6 +16,9 @@
"contentEn": "fwefwqe", "contentEn": "fwefwqe",
"icon": [ "icon": [
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png" "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png"
],
"icon_sel": [
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png"
] ]
} }
}, },
@ -33,6 +36,9 @@
"contentEn": "fwerf", "contentEn": "fwerf",
"icon": [ "icon": [
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/RyWHWQugQvDwEjEY_MwHb.png" "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/RyWHWQugQvDwEjEY_MwHb.png"
],
"icon_sel": [
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png"
] ]
} }
}, },
@ -50,6 +56,9 @@
"contentEn": "56456", "contentEn": "56456",
"icon": [ "icon": [
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/ea-Q5M6K-ri1xw3UfY18_.png" "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/ea-Q5M6K-ri1xw3UfY18_.png"
],
"icon_sel": [
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png"
] ]
} }
}, },
@ -67,6 +76,9 @@
"contentEn": "hhrt", "contentEn": "hhrt",
"icon": [ "icon": [
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/j49AhcyUGy3ooRveXNTAt.png" "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/j49AhcyUGy3ooRveXNTAt.png"
],
"icon_sel": [
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png"
] ]
} }
}, },
@ -84,6 +96,9 @@
"contentEn": "545", "contentEn": "545",
"icon": [ "icon": [
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/GeJT_PoeLfW6e2SgxCGmQ.png" "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/GeJT_PoeLfW6e2SgxCGmQ.png"
],
"icon_sel": [
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png"
] ]
} }
} }

66
public/static/qm/MainMap_QM.js

@ -2203,6 +2203,7 @@ MainMap_QM.prototype = {
* *
*/ */
showFloor: function (fIndex = -1, callBack = undefined) { showFloor: function (fIndex = -1, callBack = undefined) {
Map_QM.changeMapModel("3D");
Map_QM.resetFloorState(); Map_QM.resetFloorState();
Map_QM.clearFloor(fIndex); Map_QM.clearFloor(fIndex);
if (fIndex != -1) { if (fIndex != -1) {
@ -2426,7 +2427,7 @@ MainMap_QM.prototype = {
* *
*/ */
onShowDeviceSite: function () { onShowDeviceSite: function () {
this.changeMapModel("3D");
//this.changeMapModel("3D");
this.showFloor(this.util.deviceObj.floor); this.showFloor(this.util.deviceObj.floor);
}, },
/** /**
@ -2930,7 +2931,7 @@ MainMap_QM.prototype = {
if(Map_QM.mapArr[Map_QM.util.selectBuild] && Map_QM.mapArr[Map_QM.util.selectBuild][Map_QM.util.selectFloor]){ if(Map_QM.mapArr[Map_QM.util.selectBuild] && Map_QM.mapArr[Map_QM.util.selectBuild][Map_QM.util.selectFloor]){
Map_QM.labelRenderer.renderObject( Map_QM.mapArr[Map_QM.util.selectBuild][Map_QM.util.selectFloor].labelObj, Map_QM.camera ); Map_QM.labelRenderer.renderObject( Map_QM.mapArr[Map_QM.util.selectBuild][Map_QM.util.selectFloor].labelObj, Map_QM.camera );
} }
Map_QM.CSSObject && Map_QM.labelRenderer.renderObject( Map_QM.CSSObject, Map_QM.camera);
Map_QM.CSSObject && Map_QM.labelRenderer.renderObject( Map_QM.CSSObject, Map_QM.camera);
for (let item of Map_QM.mixers) { for (let item of Map_QM.mixers) {
item.update(T); item.update(T);
} }
@ -3053,13 +3054,13 @@ MainMap_QM.prototype = {
*/ */
addElementByNode: function (divObj, node, type='tip') { addElementByNode: function (divObj, node, type='tip') {
Map_QM.elementDestroy(type); Map_QM.elementDestroy(type);
floorOrder == -1 && (floorOrder = Map_QM.util.selectFloor);
let pathData = Config.allMap[Config.selectBuild].buildArr[floorOrder].mapData.path;
let floorOrder = Map_QM.util.selectFloor;
let pathData = Map_QM.util.allMap[Map_QM.util.selectBuild].buildArr[floorOrder].mapData.path;
if (!pathData || !divObj ) { if (!pathData || !divObj ) {
return; return;
} }
if(pathData.nodes.length > 0){ if(pathData.nodes.length > 0){
pathData.nodes.sort(Config.sortNode);
pathData.nodes.sort(Map_QM.util.sortNode);
let shopInfo = new THREE.CSS2DObject(divObj); let shopInfo = new THREE.CSS2DObject(divObj);
shopInfo.position.set(pathData.nodes[parseInt(node)].x, -1*pathData.nodes[parseInt(node)].y, 60 ) shopInfo.position.set(pathData.nodes[parseInt(node)].x, -1*pathData.nodes[parseInt(node)].y, 60 )
shopInfo.applyMatrix4(Map_QM.mapArr[Map_QM.util.selectBuild][floorOrder].allObj.matrix); shopInfo.applyMatrix4(Map_QM.mapArr[Map_QM.util.selectBuild][floorOrder].allObj.matrix);
@ -3070,6 +3071,25 @@ MainMap_QM.prototype = {
return; return;
}, },
showAreaAnimate:function (aName="-"){
if(aName=="-"){
isJUZ = false;
Map_QM.controls.setZoom(1)
Map_QM.controls.reset()
let angle = Map_QM.util.options.deviceAng ? Map_QM.util.deviceObj.angle : Map_QM.util.mapAngle
Map_QM.rotationAngle(angle)
return;
}
TweenMax.killAll(true)
Map_QM.mapArr[Map_QM.util.selectBuild][Map_QM.util.selectFloor].allObj.traverse((obj) => {
if(obj.userData && obj.userData.type == "build"){
if(obj.name == aName){
Map_QM.onShowLocalSite({x:obj.userData.xaxis,y:obj.userData.yaxis});
}
}
});
},
/** /**
* @api {方法} changeShowShopName() 修改房间显示名称 * @api {方法} changeShowShopName() 修改房间显示名称
* @apiGroup 地图显示 * @apiGroup 地图显示
@ -3237,6 +3257,7 @@ MainMap_QM.prototype = {
for (let i = 0; i < intersects.length; i++) { for (let i = 0; i < intersects.length; i++) {
//房间BOX点击 //房间BOX点击
console.log(intersects);
if (intersects[i].object.userData && intersects[i].object.userData.type == "shop" && intersects[i].object.name != "") { if (intersects[i].object.userData && intersects[i].object.userData.type == "shop" && intersects[i].object.name != "") {
if (Map_QM.endModel && Map_QM.endModel.visible) { if (Map_QM.endModel && Map_QM.endModel.visible) {
Map_QM.endModel.visible = false; Map_QM.endModel.visible = false;
@ -5293,7 +5314,32 @@ FloorMap_QM.prototype = {
}, },
initArt:function(){ initArt:function(){
if (Map_QM.util.artUrl.length > 0) { if (Map_QM.util.artUrl.length > 0) {
let _this = this;
Map_QM.util.artUrl.forEach((item)=>{
let url = Map_QM.util.beforPath + item.content.icon[0];
let spriteMap = new THREE.TextureLoader().load(url);
let spriteMaterial = new THREE.SpriteMaterial({ //sizeAttenuation: false 禁止跟随鼠标缩放
map: spriteMap,
depthTest: true,
transparent: true,
alphaTest: 0.1
});
let sprite = new MySprite_QM(spriteMaterial);
sprite.scale.set(64, 64, 1);
sprite.imgUrl = url;
sprite.center = new THREE.Vector2(0.5, 0);
sprite.userData = item;
sprite.userData.type = "art";
sprite.userData.use = "all";
sprite.userData.src = url;
let pathData = Map_QM.util.allMap[_this.buildOrder].buildArr[_this.floorOrder].mapData.path;
if(pathData.nodes.length > 0){
pathData.nodes.sort(Config.sortNode);
sprite.position.set(pathData.nodes[parseInt(item.content.point)].x, -1*pathData.nodes[parseInt(item.content.point)].y, 60);
sprite.renderOrder = 300;
_this.serObj.add(sprite);
}
})
} }
}, },
initLogos: function () { initLogos: function () {
@ -5432,10 +5478,12 @@ FloorMap_QM.prototype = {
mash.castShadow = false; mash.castShadow = false;
mash.userData = { mash.userData = {
"type": "build", "type": "build",
"order": this.floorOrder
"order": this.floorOrder,
"xaxis":mapData.buildArea[i].xaxis,
"yaxis":mapData.buildArea[i].yaxis,
}; };
mash.userData.opacity = mapData.buildArea[i].alphaModle / 100 || 0; mash.userData.opacity = mapData.buildArea[i].alphaModle / 100 || 0;
mash.name = "floor";
mash.name = mapData.buildArea[i].name;
this.allObj.add(mash); this.allObj.add(mash);
} }
//房间 //房间
@ -6147,7 +6195,7 @@ MyModel_QM.prototype.MyModelShape = function (areaArr, howllowArr, opObj, entity
let cubeEdges = new THREE.EdgesGeometry(scanGeometry, 60); let cubeEdges = new THREE.EdgesGeometry(scanGeometry, 60);
let cubeLine = new THREE.LineSegments(cubeEdges, material); let cubeLine = new THREE.LineSegments(cubeEdges, material);
cubeLine.renderOrder = indexOrder - 5; cubeLine.renderOrder = indexOrder - 5;
mesh.add(cubeLine);
//mesh.add(cubeLine);
} }
if (opObj.name != "floor") { if (opObj.name != "floor") {
mesh.position.z = opObj.site || 0; mesh.position.z = opObj.site || 0;

3
src/assets/images/guide/arrow.svg

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.66171 2.54796L7.88871 8.75296L6.36871 5.71296L3.55021 4.58546L9.66171 2.54796ZM10.6947 1.14996L1.29171 4.28396C1.24304 4.30009 1.20051 4.3308 1.16988 4.37191C1.13925 4.41303 1.122 4.46257 1.12047 4.51382C1.11894 4.56506 1.13321 4.61554 1.16134 4.65841C1.18946 4.70128 1.23009 4.73446 1.27771 4.75346L5.64421 6.49996L7.85671 10.925C7.87922 10.97 7.91482 11.0072 7.95884 11.0317C8.00287 11.0562 8.05326 11.0668 8.10341 11.0622C8.15357 11.0575 8.20115 11.0378 8.23992 11.0057C8.2787 10.9735 8.30686 10.9304 8.32071 10.882L11.0142 1.45546C11.0267 1.41167 11.027 1.3653 11.015 1.32136C11.0031 1.27742 10.9793 1.23758 10.9464 1.20614C10.9135 1.17469 10.8726 1.15284 10.8281 1.14294C10.7837 1.13304 10.7374 1.13547 10.6942 1.14996H10.6947Z" fill="#8E9090"/>
</svg>

After

Width:  |  Height:  |  Size: 866 B

3
src/assets/images/guide/triangle.svg

@ -0,0 +1,3 @@
<svg width="12" height="5" viewBox="0 0 12 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 5L0 0H12L6 5Z" fill="#E2DCD5"/>
</svg>

After

Width:  |  Height:  |  Size: 145 B

121
src/components/Map/Map.vue

@ -3,7 +3,7 @@
<!-- 地图容器 --> <!-- 地图容器 -->
<div v-show="route.meta.showMap" id="mapContainer" /> <div v-show="route.meta.showMap" id="mapContainer" />
<!-- 地图弹框 -->
<!-- 地图店铺弹框 -->
<div id="shopInfo" class="boxShop boxShop2"> <div id="shopInfo" class="boxShop boxShop2">
<div id="shopNum"> <div id="shopNum">
<Marquees :content="shopName"> <Marquees :content="shopName">
@ -15,6 +15,36 @@
<div class="go-button" @click="handleGO">{{ $t('nav') }}</div> <div class="go-button" @click="handleGO">{{ $t('nav') }}</div>
</div> </div>
</div> </div>
<!-- 地图艺术弹框 -->
<div id="artInfo">
<div class="top">
<div class="name">{{ shop.shopName }}</div>
<div class="nameEn">{{ shop.shopNameEn }}</div>
</div>
<div class="middle" @click="handleGO">
<img src="@/assets/images/guide/arrow.svg" alt="" />
<div class="label">{{ $t('nav2') }}</div>
</div>
<div class="triangle">
<img src="@/assets/images/guide/triangle.svg" alt="" />
</div>
<div class="circle">{{ shop.industryCode }}</div>
</div>
<!-- 地图艺术装置弹框 -->
<div id="artWorkInfo">
<img class="door" :src="shop.doorMaterialList && shop.doorMaterialList[0]" alt="" />
<div class="top" style="border-radius: 0">
<div class="name">{{ shop.shopName }}</div>
<div class="nameEn">{{ shop.shopNameEn }}</div>
</div>
<div class="middle" @click="handleGO">
<img src="@/assets/images/guide/arrow.svg" alt="" />
<div class="label">{{ $t('nav2') }}</div>
</div>
<div class="triangle">
<img src="@/assets/images/guide/triangle.svg" alt="" />
</div>
</div>
<div id="moveFloorBG"> <div id="moveFloorBG">
<span id="moveFloor"></span> <span id="moveFloor"></span>
<div id="floorBox"></div> <div id="floorBox"></div>
@ -145,4 +175,93 @@ function handleDetail() {
line-height: 24px; line-height: 24px;
user-select: none; user-select: none;
} }
#artInfo {
position: absolute;
z-index: 500;
width: 200px;
height: 110px;
visibility: hidden;
.circle {
@include fl(center);
position: absolute;
bottom: 0;
left: 50%;
width: 20px;
height: 20px;
font-size: 10px;
font-family: 'font_regular';
color: #fff;
background: #e00068;
border-radius: 50%;
font-style: normal;
font-weight: 400;
line-height: 12px;
}
}
#artWorkInfo {
position: absolute;
z-index: 500;
width: 200px;
height: 110px;
visibility: hidden;
.door {
width: 200px;
height: 112px;
border-radius: 14px 14px 0 0;
}
}
.top {
width: 200px;
height: 56px;
padding-top: 9px;
padding-left: 16px;
background: #8a766a;
border-radius: 14px 14px 0 0;
.name {
margin-bottom: 4px;
font-size: 14px;
font-family: 'font_bold';
color: #fff;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
.nameEn {
font-size: 10px;
font-family: 'font_bold';
color: rgb(255 255 255 / 60%);
font-style: normal;
font-weight: 700;
line-height: 12px;
}
}
.middle {
width: 200px;
height: 32px;
padding: 10px 16px;
background: #e2dcd5;
border-radius: 0 0 14px 14px;
img {
width: 12px;
height: 12px;
margin-right: 6px;
}
.label {
font-size: 10px;
font-family: 'bold_regular';
color: #615c59;
font-style: normal;
font-weight: 400;
line-height: 12px;
}
}
.triangle {
text-align: center;
img {
width: 12px;
height: 5px;
}
}
</style> </style>

9
src/composables/useGuideFilterShop.ts

@ -22,11 +22,18 @@ export const useGuideFilterShop = () => {
areaName.value = name areaName.value = name
if (name === '全部区域') { if (name === '全部区域') {
selectedShopList.value = shopList.value.filter(item => item.floorOrder === floorIdx.value) selectedShopList.value = shopList.value.filter(item => item.floorOrder === floorIdx.value)
window.Map_QM.showAreaAnimate()
} else { } else {
selectedShopList.value = selectedShopList.value.filter(item => item.regionName === name) selectedShopList.value = selectedShopList.value.filter(item => item.regionName === name)
window.Map_QM.showAreaAnimate(name)
} }
hideMapDialog() hideMapDialog()
} }
return { areaName, floorIdx, selectedShopList, changeFloor, changeArea }
// 筛选美食业态
function changeFoodShopList() {
selectedShopList.value = shopList.value.filter(item => item.isSpecial)
}
return { areaName, floorIdx, selectedShopList, changeFloor, changeArea, changeFoodShopList }
} }

18
src/composables/useGuideMapOperation.ts

@ -4,7 +4,7 @@ import { list, MapControl } from '@/views/Guide/list'
import type { Item } from '@/views/Guide/list' import type { Item } from '@/views/Guide/list'
import { useRootStore } from '@/store/root' import { useRootStore } from '@/store/root'
export const useGuideMapOperation = (callback: (index: number) => void) => {
export const useGuideMapOperation = (callback: (index: number) => void, changeFoodShopList: () => void) => {
const mapIdx = ref(-1) const mapIdx = ref(-1)
const mapTimer = ref<any>() const mapTimer = ref<any>()
const store = useRootStore() const store = useRootStore()
@ -20,11 +20,6 @@ export const useGuideMapOperation = (callback: (index: number) => void) => {
hideMapDialog() hideMapDialog()
window.Map_QM.onShowDeviceSite() window.Map_QM.onShowDeviceSite()
} }
//活动品牌
function onClickShopAct() {
hideMapDialog()
window.Map_QM.changeStateShopPro(true)
}
function handleMapIcon(item: Item, index: number) { function handleMapIcon(item: Item, index: number) {
clearTimeout(mapTimer.value) clearTimeout(mapTimer.value)
@ -46,8 +41,8 @@ export const useGuideMapOperation = (callback: (index: number) => void) => {
onClickMeDirect() onClickMeDirect()
break break
case MapControl.ACTIVITY_BRAND:
onClickShopAct()
case MapControl.FOOD:
changeFoodShopList()
break break
default: default:
@ -55,15 +50,10 @@ export const useGuideMapOperation = (callback: (index: number) => void) => {
} }
} }
//切换楼层
function switchFloor(floorOrder: number) {
hideMapDialog()
window.Map_QM.showFloor(floorOrder)
}
onBeforeUnmount(() => { onBeforeUnmount(() => {
hideMapDialog() hideMapDialog()
clearTimeout(mapTimer.value) clearTimeout(mapTimer.value)
}) })
return { switchFloor, handleMapIcon, list, mapIdx }
return { handleMapIcon, list, mapIdx }
} }

8
src/composables/useInitMap.ts

@ -6,7 +6,7 @@ import { PREFIX } from '@/enums'
export const useInitMap = async function () { export const useInitMap = async function () {
const store = useRootStore() const store = useRootStore()
const { device, facilityList, shopList } = storeToRefs(store)
const { device, facilityList, shopList, artPlaceList } = storeToRefs(store)
try { try {
const { data } = await getMapData() const { data } = await getMapData()
const delPrefixOfFacilityList = facilityList.value.map(item => ({ const delPrefixOfFacilityList = facilityList.value.map(item => ({
@ -27,6 +27,7 @@ export const useInitMap = async function () {
navPoint: device.value.location, navPoint: device.value.location,
angle: device.value.angle, angle: device.value.angle,
iconUrl: delPrefixOfFacilityList, iconUrl: delPrefixOfFacilityList,
artUrl: artPlaceList,
mapData: data, mapData: data,
shopData: shopList.value.slice() shopData: shopList.value.slice()
} }
@ -49,9 +50,14 @@ function onClickShop(event: any) {
hideMapDialog() hideMapDialog()
} }
} }
//地图弹框消失 //地图弹框消失
export function hideMapDialog() { export function hideMapDialog() {
window.shopInfo.style.visibility = 'hidden' window.shopInfo.style.visibility = 'hidden'
const art: any = document.getElementById('artInfo')
const artWork: any = document.getElementById('artWorkInfo')
art.style.visibility = 'hidden'
artWork.style.visibility = 'hidden'
} }
//显示地图弹框 //显示地图弹框

1
src/i18n/lang/en.json

@ -1,6 +1,7 @@
{ {
"detail": "Detail", "detail": "Detail",
"nav": "Navigate", "nav": "Navigate",
"nav2": "Navigate",
"energy": "Energy", "energy": "Energy",
"replay": "Replay", "replay": "Replay",
"pause": "Pause", "pause": "Pause",

1
src/i18n/lang/zh.json

@ -1,6 +1,7 @@
{ {
"detail": "详情", "detail": "详情",
"nav": "导航", "nav": "导航",
"nav2": "立即导航",
"energy": "新能源", "energy": "新能源",
"replay": "重播", "replay": "重播",
"pause": "暂停", "pause": "暂停",

3
src/types/art.d.ts

@ -18,6 +18,7 @@ declare type ArtPlace = {
point: string point: string
content: string content: string
contentEn: string contentEn: string
icon: string[]
icon: string[] // 图标
icon_sel: string[] // 选中图标
} }
} }

13
src/types/map.d.ts

@ -361,6 +361,19 @@ export declare global {
* @param cDist * @param cDist
*/ */
setCameraDist(cDist: number): void setCameraDist(cDist: number): void
/**
*
* @param name
*/
showAreaAnimate(name?: string): void
/**
*
* @param divObject ui
* @param node
*/
addElementByNode(divObject, node): void
} }
pathCameraState: '2D' | '3D' pathCameraState: '2D' | '3D'

1
src/views/Guide/Area.vue

@ -26,6 +26,7 @@ function changeArea(name: string) {
emit('changeArea', name) emit('changeArea', name)
} }
//
const areaList = ref<Region[]>([]) const areaList = ref<Region[]>([])
getRegionList().then(({ data }) => { getRegionList().then(({ data }) => {
areaList.value = [ areaList.value = [

41
src/views/Guide/ArtList.vue

@ -8,7 +8,7 @@
> >
<ScrollView v-if="artList.length" class="myScroll" :list="artList" :pull-up="false"> <ScrollView v-if="artList.length" class="myScroll" :list="artList" :pull-up="false">
<div class="lists"> <div class="lists">
<div v-for="(item, index) in artList" :key="item.id" class="item">
<div v-for="(item, index) in artList" :key="item.id" class="item" :class="{ ac: current === index }" @click="show(item, index)">
<div class="order">{{ index + 1 }}</div> <div class="order">{{ index + 1 }}</div>
<div> <div>
<div class="name">{{ item.content.name }}</div> <div class="name">{{ item.content.name }}</div>
@ -25,10 +25,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { getArtList } from '@/http/api/art' import { getArtList } from '@/http/api/art'
import { hideMapDialog } from '@/composables/useInitMap'
import { useRootStore } from '@/store/root'
import ScrollView from '@/base/ScrollView/ScrollView.vue' import ScrollView from '@/base/ScrollView/ScrollView.vue'
const store = useRootStore()
const artList = ref<Art[]>([]) const artList = ref<Art[]>([])
// //
const empty = ref(true) const empty = ref(true)
//
getArtList() getArtList()
.then(({ data }) => { .then(({ data }) => {
artList.value = data artList.value = data
@ -36,6 +42,31 @@ getArtList()
.catch(() => { .catch(() => {
empty.value = false empty.value = false
}) })
const current = ref(-1)
//
function show(item: Art, index: number) {
current.value = index
//
const poi = item.content.point.split('_')
console.log(poi)
hideMapDialog()
window.Map_QM.addElementByNode(document.getElementById('artInfo'), Number(poi[2]))
const art: any = document.getElementById('artInfo')
art.style.visibility = 'visibility'
const floors = store.currentBuildingFloorsList.filter(item => item.floorOrder === Number(poi[1]))
const shop = {
shopCode: '',
shopName: item.content.name,
shopNameEn: item.content.nameEn,
floorOrder: floors[0].floorOrder,
floor: floors[0].floor,
logoUrl: '',
yaxis: Number(poi[2])
}
store.SET_SHOP(shop)
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -70,7 +101,7 @@ getArtList()
font-size: 14px; font-size: 14px;
font-family: 'font_regular'; font-family: 'font_regular';
text-align: center; text-align: center;
color: var(--unnamed, #534f46);
color: #534f46;
background: #ceb9ab; background: #ceb9ab;
border-radius: 12px; border-radius: 12px;
font-style: normal; font-style: normal;
@ -97,6 +128,12 @@ getArtList()
line-height: 12px; line-height: 12px;
} }
} }
.ac {
.order {
color: #fff;
background: #e00068;
}
}
} }
} }
} }

3
src/views/Guide/Floor.vue

@ -1,8 +1,5 @@
<template> <template>
<div class="floor-list"> <div class="floor-list">
<!-- <div class="floor all" :class="floorIdx === -1 && 'ac'" @click="changeFloor(-1)">
<div class="name">ALL</div>
</div> -->
<div <div
v-for="item in currentBuildingFloorsList" v-for="item in currentBuildingFloorsList"
:key="item.floorCode" :key="item.floorCode"

1
src/views/Guide/FloorPicList.vue

@ -18,6 +18,7 @@ import { getFloorPicList } from '@/http/api/base'
const store = useRootStore() const store = useRootStore()
const { currentBuildingFloorsList } = toRefs(store) const { currentBuildingFloorsList } = toRefs(store)
//
const picList = ref<FloorPic[]>([]) const picList = ref<FloorPic[]>([])
getFloorPicList().then(({ data }) => { getFloorPicList().then(({ data }) => {
currentBuildingFloorsList.value.forEach(item => { currentBuildingFloorsList.value.forEach(item => {

53
src/views/Guide/Guide.vue

@ -2,12 +2,12 @@
<div class="guide-container"> <div class="guide-container">
<!-- 楼层列表 --> <!-- 楼层列表 -->
<Transition appear enter-active-class="animate__animated animate__fadeInRight"> <Transition appear enter-active-class="animate__animated animate__fadeInRight">
<Floor :floor-idx="floorIdx" @change-floor="changeFloor" />
<Floor :floor-idx="floorIdx" @change-floor="changeFloors" />
</Transition> </Transition>
<!-- 区域列表 --> <!-- 区域列表 -->
<Transition appear enter-active-class="animate__animated animate__fadeIn"> <Transition appear enter-active-class="animate__animated animate__fadeIn">
<Area v-if="floorIdx !== -1" :area-name="areaName" @change-area="changeArea" />
<Area v-if="floorIdx !== 6" :area-name="areaName" @change-area="changeAreas" />
</Transition> </Transition>
<!-- 店铺列表 --> <!-- 店铺列表 -->
@ -19,8 +19,8 @@
<ScrollView :list="facilityList" :scroll-x="true" class="art-myScroll"> <ScrollView :list="facilityList" :scroll-x="true" class="art-myScroll">
<div style="display: inline-block"> <div style="display: inline-block">
<div class="artList"> <div class="artList">
<div v-for="item in artPlaceList" :key="item.id" class="art-item">
<img class="logo" :src="item.content.icon[0]" alt="" />
<div v-for="item in artPlaceList" :key="item.id" class="art-item" @click="show(item)">
<img class="logo" :src="currentArtName === item.content.name ? item.content.icon_sel[0] : item.content.icon[0]" alt="" />
<div class="name">{{ switchLanguage(item.content, 'name') }}</div> <div class="name">{{ switchLanguage(item.content, 'name') }}</div>
</div> </div>
</div> </div>
@ -95,6 +95,7 @@ import { useFacilityNav } from '@/composables/useFacilityNav'
import { useGuideFilterShop } from '@/composables/useGuideFilterShop' import { useGuideFilterShop } from '@/composables/useGuideFilterShop'
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
import { getAreaPicList } from '@/http/api/base' import { getAreaPicList } from '@/http/api/base'
import { hideMapDialog } from '@/composables/useInitMap'
import ScrollView from '@/base/ScrollView/ScrollView.vue' import ScrollView from '@/base/ScrollView/ScrollView.vue'
import Floor from './Floor.vue' import Floor from './Floor.vue'
import Area from './Area.vue' import Area from './Area.vue'
@ -105,17 +106,55 @@ import FloorPicList from './FloorPicList.vue'
const store = useRootStore() const store = useRootStore()
const { switchLanguage } = useSwitchLanguage() const { switchLanguage } = useSwitchLanguage()
const { language, facilityList, artPlaceList } = toRefs(store) const { language, facilityList, artPlaceList } = toRefs(store)
const { floorIdx, areaName, selectedShopList, changeFloor, changeArea } = useGuideFilterShop() //
const { handleMapIcon, list, mapIdx } = useGuideMapOperation(changeFloor) //
const { floorIdx, areaName, selectedShopList, changeFloor, changeArea, changeFoodShopList } = useGuideFilterShop() //
const { handleMapIcon, list, mapIdx } = useGuideMapOperation(changeFloor, changeFoodShopList) //
const { handleFacility } = useFacilityNav() // const { handleFacility } = useFacilityNav() //
// handleMapIcon(list[1], 1)
//
const areaPic = ref({}) const areaPic = ref({})
getAreaPicList().then(({ data }) => { getAreaPicList().then(({ data }) => {
data.forEach(item => { data.forEach(item => {
areaPic.value[item.content.name] = item.content.file_code[0] areaPic.value[item.content.name] = item.content.file_code[0]
}) })
}) })
//
function changeFloors(floorOrder: number) {
changeFloor(floorOrder)
mapIdx.value = -1
currentArtName.value = ''
}
//
function changeAreas(name: string) {
changeArea(name)
mapIdx.value = -1
currentArtName.value = ''
}
const currentArtName = ref('')
//
function show(item: ArtPlace) {
currentArtName.value = item.content.name
//
const poi = item.content.point.split('_')
hideMapDialog()
window.Map_QM.addElementByNode(document.getElementById('artWorkInfo'), Number(poi[2]))
const art: any = document.getElementById('artWorkInfo')
art.style.visibility = 'visibility'
const floors = store.currentBuildingFloorsList.filter(item => item.floorOrder === Number(poi[1]))
const shop = {
shopCode: '',
shopName: item.content.name,
shopNameEn: item.content.nameEn,
floorOrder: floors[0].floorOrder,
floor: floors[0].floor,
logoUrl: '',
yaxis: Number(poi[2])
}
store.SET_SHOP(shop)
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

1
src/views/Guide/Place.vue

@ -19,6 +19,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { getPlaceList } from '@/http/api/place' import { getPlaceList } from '@/http/api/place'
//
const placeList = ref<PlaceType[]>([]) const placeList = ref<PlaceType[]>([])
getPlaceList().then(({ data }) => { getPlaceList().then(({ data }) => {
placeList.value = data placeList.value = data

4
src/views/Guide/list.ts

@ -1,7 +1,7 @@
export enum MapControl { export enum MapControl {
RESET = '复位', RESET = '复位',
DIRECTION = '我的方向', DIRECTION = '我的方向',
ACTIVITY_BRAND = '餐饮服务'
FOOD = '餐饮服务'
} }
export type Item = { export type Item = {
@ -13,7 +13,7 @@ export type Item = {
export const list: Item[] = [ export const list: Item[] = [
{ {
name: MapControl.ACTIVITY_BRAND,
name: MapControl.FOOD,
nameEn: 'food', nameEn: 'food',
icon: require('@/assets/images/guide/food.svg'), icon: require('@/assets/images/guide/food.svg'),
iconActive: require('@/assets/images/guide/brand_active.svg') iconActive: require('@/assets/images/guide/brand_active.svg')

Loading…
Cancel
Save