From f55e6384824129a14ad99268d4798714d2cca364 Mon Sep 17 00:00:00 2001 From: deepblues <452698686@qq.com> Date: Tue, 9 May 2023 14:36:12 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0=E8=89=BA=E6=9C=AF?= =?UTF-8?q?=E7=9A=84=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/offline/JSON/getArtData.json | 162 +++++++++++++++++++++ src/components/Map/Map.vue | 2 + src/components/ShopItem/ShopItem.vue | 2 +- src/http/api/art/index.ts | 10 ++ src/types/art.d.ts | 93 ++++++++++++ src/types/shop.d.ts | 2 + src/views/Art/Art.vue | 95 ++++++++---- src/views/Art/ArtMapItem.vue | 16 +- src/views/Art/ArtRightItem.vue | 4 +- src/views/Brand/Brand.vue | 6 +- src/views/Nav/Nav.vue | 1 + 11 files changed, 354 insertions(+), 39 deletions(-) create mode 100644 public/static/offline/JSON/getArtData.json create mode 100644 src/http/api/art/index.ts create mode 100644 src/types/art.d.ts diff --git a/public/static/offline/JSON/getArtData.json b/public/static/offline/JSON/getArtData.json new file mode 100644 index 0000000..3a4aeb2 --- /dev/null +++ b/public/static/offline/JSON/getArtData.json @@ -0,0 +1,162 @@ +{ + "code": 200, + "msg": "操作成功", + "data": { + "artFloorList": [{ + "id": 10, + "projectCode": "project-bffju2pfalsylhcfcuzgaa", + "fileCode": "dSZh63lMJALCTq2H4BZvx", + "fileUrl": "/iotFile/2023/04/18/qcivkL9KGHO-0DonwV8UR.png", + "artFloorCode": "MfVCgPyK9hS2XErT1J63N", + "artFloorName": "测试的666", + "buildingCode": "fYqhuYPU-kclTGNAMtdEn", + "floorCode": "kswkhGsmfPMO7pMCxSQT0", + "floorName": "B2", + "status": 0, + "artworkNumber": 0, + "floorOrder": 5 + + }, + { + "id": 9, + "projectCode": "project-bffju2pfalsylhcfcuzgaa", + "fileCode": "AQOoO0YmlD52hKcbSypLu", + "fileUrl": "/iotFile/2023/04/18/miGcfMCie6YfZsYEjclmB.png", + "artFloorCode": "q4pnmJy5ScRikzTEvHQzj", + "artFloorName": "艺术楼层5", + "buildingCode": "fYqhuYPU-kclTGNAMtdEn", + "floorCode": "oY78y2PdtRhul4FdQhYOc", + "floorName": "L5", + "floorOrder": 4, + "status": 1, + "artworkNumber": 0 + }, + { + "id": 8, + "projectCode": "project-bffju2pfalsylhcfcuzgaa", + "fileCode": "csd12E0mDZ3ShN-4HI6L1", + "fileUrl": "/iotFile/2023/04/18/qfS_4xP8Wrs4FZuLe6u32.png", + "artFloorCode": "0WP2TBMU1SK5ypfY0Mj1v", + "artFloorName": "测试3", + "buildingCode": "fYqhuYPU-kclTGNAMtdEn", + "floorCode": "UC06wuVCxXmVQ1WXtRSKN", + "floorName": "空中花园", + "floorOrder": 3, + "status": 0, + "artworkNumber": 0 + }, + { + "id": 7, + "projectCode": "project-bffju2pfalsylhcfcuzgaa", + "fileCode": "lpcf8e03fdNpE5rlKOni9", + "fileUrl": "/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png", + "artFloorCode": "MvCFxZuebdA6FURyHNKIf", + "artFloorName": "测试", + "buildingCode": "fYqhuYPU-kclTGNAMtdEn", + "floorCode": "nQZLlF9WB0zaMeSvUL3op", + "floorName": "L3", + "floorOrder": 2, + "status": 0, + "artworkNumber": 0 + }, + { + "id": 5, + "projectCode": "project-bffju2pfalsylhcfcuzgaa", + "fileCode": "yhrzaO7RHZ-xYH_bBCtT7", + "fileUrl": "/iotFile/2023/04/18/qcivkL9KGHO-0DonwV8UR.png", + "artFloorCode": "dxt-_I67KdLIaJw69806u", + "artFloorName": "艺术楼层2楼", + "buildingCode": "fYqhuYPU-kclTGNAMtdEn", + "floorCode": "fXikXvRBbcfNjRz3Tc7H5", + "floorName": "L2", + "floorOrder": 1, + "status": 0, + "artworkNumber": 0 + }, + { + "id": 2, + "projectCode": "project-bffju2pfalsylhcfcuzgaa", + "fileCode": "FPtIgw4blIIAjUnmOnwZ3", + "fileUrl": "/iotFile/2023/04/18/qfS_4xP8Wrs4FZuLe6u32.png", + "artFloorCode": "EnHgskSGDk2R6RM14Bow-", + "artFloorName": "艺术楼1层", + "buildingCode": "fYqhuYPU-kclTGNAMtdEn", + "floorCode": "m98RaT7oQ5LzJxECix64d", + "floorName": "L1", + "floorOrder": 0, + "status": 0, + "artworkNumber": 3 + } + ], + "artworkList": [{ + "id": 3, + "projectCode": "project-bffju2pfalsylhcfcuzgaa", + "fileCode": "FPtIgw4blIIAjUnmOnwZ3", + "artFloorName": "艺术楼1层", + "buildingCode": "fYqhuYPU-kclTGNAMtdEn", + "floorCode": "m98RaT7oQ5LzJxECix64d", + "artworkCode": "zBMuBD-nBUWHBxupN-iF8", + "artworkName": "长置日思1", + "artworkNameEn": "hahaha", + "author": "王赢", + "material": "陶瓷", + "dimension": "100x100", + "point": 31, + "ord": 1, + "creationYear": 2023, + "floorOrder": 1, + "urlList": [ + "/iotFile/2023/04/06/3_Q635rTW2Ydl0Eeg7MJr.png", + "/iotFile/project-bffju2pfalsylhcfcuzgaa/20230505/FPtIgw4blIIAjUnmOnwZ3.png", + "/iotFile/project-bffju2pfalsylhcfcuzgaa/20230506/Fmk6kcf07YcAJp7sw2ZQb.png" + ] + }, + { + "id": 4, + "projectCode": "project-bffju2pfalsylhcfcuzgaa", + "fileCode": "FPtIgw4blIIAjUnmOnwZ3", + "artFloorName": "艺术楼1层", + "buildingCode": "fYqhuYPU-kclTGNAMtdEn", + "floorCode": "m98RaT7oQ5LzJxECix64d", + "artworkCode": "FxIFTBGRGa5OK4yxvGF61", + "artworkName": "长置日思2", + "artworkNameEn": "hahaha", + "author": "王赢", + "material": "玻璃", + "dimension": "100x100", + "point": 31, + "ord": 1, + "creationYear": 2023, + "floorOrder": 2, + "urlList": [ + "/iotFile/2023/04/06/3_Q635rTW2Ydl0Eeg7MJr.png", + "/iotFile/project-bffju2pfalsylhcfcuzgaa/20230505/FPtIgw4blIIAjUnmOnwZ3.png", + "/iotFile/project-bffju2pfalsylhcfcuzgaa/20230506/Fmk6kcf07YcAJp7sw2ZQb.png" + ] + }, + { + "id": 5, + "projectCode": "project-bffju2pfalsylhcfcuzgaa", + "fileCode": "FPtIgw4blIIAjUnmOnwZ3", + "artFloorName": "艺术楼1层", + "buildingCode": "fYqhuYPU-kclTGNAMtdEn", + "floorCode": "m98RaT7oQ5LzJxECix64d", + "artworkCode": "FTckVC_UDaKCdB5JD1Lmd", + "artworkName": "长置日思3", + "artworkNameEn": "hahaha", + "author": "王赢", + "material": "塑料", + "dimension": "100x100", + "point": 31, + "ord": 1, + "creationYear": 2023, + "floorOrder": 3, + "urlList": [ + "/iotFile/2023/04/06/5CYODhtY43yA6ViGG3CIb.png", + "/iotFile/project-bffju2pfalsylhcfcuzgaa/20230505/FPtIgw4blIIAjUnmOnwZ3.png", + "/iotFile/project-bffju2pfalsylhcfcuzgaa/20230506/Fmk6kcf07YcAJp7sw2ZQb.png" + ] + } + ] + } +} diff --git a/src/components/Map/Map.vue b/src/components/Map/Map.vue index 764e58d..6ffe585 100644 --- a/src/components/Map/Map.vue +++ b/src/components/Map/Map.vue @@ -99,6 +99,7 @@ function handleDetail() { /* stylelint-disable-next-line selector-id-pattern */ #moveFloorBG { position: absolute; + z-index: 500 !important; width: 48px; background-color: #fff; border-radius: 5px; @@ -109,6 +110,7 @@ function handleDetail() { position: absolute; bottom: 2px; left: 2px; + z-index: -1; width: 48px; height: 48px; background-color: #dbb186; diff --git a/src/components/ShopItem/ShopItem.vue b/src/components/ShopItem/ShopItem.vue index 2b60062..7b436a3 100644 --- a/src/components/ShopItem/ShopItem.vue +++ b/src/components/ShopItem/ShopItem.vue @@ -15,7 +15,7 @@
- 111 + {{ shop.star }}
diff --git a/src/http/api/art/index.ts b/src/http/api/art/index.ts new file mode 100644 index 0000000..60f14fd --- /dev/null +++ b/src/http/api/art/index.ts @@ -0,0 +1,10 @@ +import { request } from '@/http/http' +import type { ArtFloor, ArtItem } from '@/types/art' + +type ArtType = { + artFloorList: ArtFloor[] + artworkList: ArtItem[] +} + +//获取商场活动 +export const getArtData = () => request({ url: `/JSON/getArtData.json` }) diff --git a/src/types/art.d.ts b/src/types/art.d.ts new file mode 100644 index 0000000..886a40f --- /dev/null +++ b/src/types/art.d.ts @@ -0,0 +1,93 @@ +export interface ArtFloor { + artFloorCode: string + /** + * 艺术楼名称 + */ + artFloorName: string + artworkNumber: number + buildingCode: string + fileCode: string + /** + * 艺术楼图片地址 + */ + fileUrl: string + /** + * 楼层编码 + */ + floorCode: string + floorOrder: number + /** + * 楼层名称 + */ + floorName: string + id: number + projectCode: string + status: number +} + +export interface ArtItem { + /** + * 楼层order + */ + floorOrder: number + /** + * 艺术楼名称 + */ + artFloorName: string + /** + * 艺术品编码 + */ + artworkCode: string + /** + * 艺术品名称 + */ + artworkName: string + /** + * 艺术品英文名称 + */ + artworkNameEn: string + /** + * 作者 + */ + author: string + buildingCode: string + /** + * 年份 + */ + creationYear: number + /** + * 尺寸 + */ + dimension: string + fileCode: string + /** + * 楼层编码 + */ + floorCode: string + id: number + /** + * 中文介绍 + */ + introduce: string + /** + * 英文介绍 + */ + introduceEn: string + /** + * 材质 + */ + material: string + /** + * 排序 + */ + ord: number + /** + * 导航点 + */ + point: number + projectCode: string + /** + * 艺术品图片集合 + */ + urlList: string[] +} diff --git a/src/types/shop.d.ts b/src/types/shop.d.ts index 287ddb8..e6ad169 100644 --- a/src/types/shop.d.ts +++ b/src/types/shop.d.ts @@ -42,4 +42,6 @@ declare interface Shop { activityList?: Activity[] //店铺活动图 //艺术点位 artAuthor?: string //艺术点位的作者 + //点赞数量 + star?: number //点赞数量 } diff --git a/src/views/Art/Art.vue b/src/views/Art/Art.vue index 07cef8f..a394e65 100644 --- a/src/views/Art/Art.vue +++ b/src/views/Art/Art.vue @@ -5,10 +5,10 @@
  • - +
    • @@ -17,7 +17,7 @@
    ([]) +// ref([ +// '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png', +// '/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png', +// '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png', +// '/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png', +// '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png', +// '/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png' +// ]) + +const artListLeft = ref([]) +/**ref([ { fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png', title: '啥的了开发就阿索拉卡的就飞拉萨的发', @@ -194,7 +203,9 @@ const artListLeft = ref([ point: 5 } ]) -const artListRight = ref([ +*/ +const artListRight = ref([]) +/**ref([ { fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png', title: '啥的了开发就阿索拉卡的就飞拉萨的发', @@ -292,8 +303,9 @@ const artListRight = ref([ point: 5 } ]) - -const artListAll = ref([ +**/ +const artListAll = ref([]) +/** ref([ { fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png', title: '啥的了开发就阿索拉卡的就飞拉萨的发', @@ -440,18 +452,44 @@ const artListAll = ref([ point: 5 } ]) -function clickGo(item: any) { + */ + +getData() +function getData() { + getArtData() + .then(res => { + if (res.code === 200) { + const arr = res.data.artFloorList + if (arr) { + arr.sort((a, b) => b.floorOrder - a.floorOrder) + } + mapList.value = arr + artListAll.value = res.data.artworkList + console.log('mapList :>> ', mapList) + for (let t = 0; t < artListAll.value.length; t += 2) { + artListLeft.value?.push(artListAll.value[t]) + artListRight.value?.push(artListAll.value[t + 1]) + } + artListLeft.value.sort((a, b) => b.floorOrder - a.floorOrder) + artListRight.value.sort((a, b) => b.floorOrder - a.floorOrder) + } + }) + .catch(err => { + console.log('err :>> ', err) + }) +} +function clickGo(item: ArtItem) { const shop = new Brand({ - shopName: item.title, + shopName: item.artworkName, floorOrder: item.floorOrder, - floor: item.floor, - logoUrl: item.fileUrl, + floor: item.artFloorName, + logoUrl: item.urlList[0], yaxis: item.point, shopCode: '-11', - intro: item.intro, - introEn: item.introEn, + intro: item.introduce, + introEn: item.introduceEn, artAuthor: item.author, - doorMaterialList: item.doorMaterialList + doorMaterialList: item.urlList }) store.SET_SHOP(shop) router.push('/nav?type=art') @@ -462,6 +500,9 @@ function clickGo(item: any) { :deep(.swiper-wrapper) { transition-timing-function: linear; } +:deep(.bscroll-vertical-scrollbar) { + z-index: 1 !important; +} .art-container { position: relative; width: 100vw; diff --git a/src/views/Art/ArtMapItem.vue b/src/views/Art/ArtMapItem.vue index 08e21e9..4c3fe57 100644 --- a/src/views/Art/ArtMapItem.vue +++ b/src/views/Art/ArtMapItem.vue @@ -1,14 +1,19 @@