fix: 增加艺术的接口

3 years ago · f55e638482
11 changed files with 354 additions and 39 deletions
--- a/public/static/offline/JSON/getArtData.json
+++ 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"
+        ]
+      }
+    ]
+  }
+}
--- 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;
--- a/src/components/ShopItem/ShopItem.vue
+++ b/src/components/ShopItem/ShopItem.vue
@ -15,7 +15,7 @@
          </span>
          <div class="likes">
            <img src="@/assets/images/brand/icon_heart.svg" alt="" />
-            111
+            {{ shop.star }}
          </div>
        </div>
      </div>
--- a/src/http/api/art/index.ts
+++ 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<ArtType>({ url: `/JSON/getArtData.json` })
--- a/src/types/art.d.ts
+++ 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[]
+}
--- 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 //点赞数量
 }
--- a/src/views/Art/Art.vue
+++ b/src/views/Art/Art.vue
@ -5,10 +5,10 @@
      <li
        v-for="(item, index) in mapList"
        :key="index"
-        :style="{ 'animation-delay': (mapList.length - index) * delaytime + 's' }"
+        :style="{ 'animation-delay': item.floorOrder * delaytime + 's' }"
        class="animate__animated animate__fadeInDown"
      >
-        <img :src="item" alt="" />
+        <img :src="item.fileUrl" alt="" />
      </li>
    </ul>
    <!-- 地图左侧的列表 -->
@ -17,7 +17,7 @@
        <artMapItem
          v-for="(item, index) in artListLeft"
          :key="index"
-          :style="{ 'animation-delay': (mapList.length - index) * delaytime + 's' }"
+          :style="{ 'animation-delay': item.floorOrder * delaytime + 's' }"
          class="animate__animated animate__fadeInDown"
          :art-info="item"
          @go="clickGo"
@ -41,12 +41,16 @@
    <!-- 右侧的列表 -->
    <div class="right-bg"></div>
    <swiper
-      :autoplay="{
-        delay: 0,
-        disableOnInteraction: true
-      }"
+      :autoplay="
+        artListAll.length > 8
+          ? {
+              delay: 0,
+              disableOnInteraction: true
+            }
+          : false
+      "
      :speed="5000"
-      :loop="true"
+      :loop="artListAll.length > 8"
      :loop-prevents-sliding="false"
      :loop-additional-slides="3"
      :looped-slides="8"
@ -78,6 +82,8 @@ import artMapItem from './ArtMapItem.vue'
 import artRightItem from './ArtRightItem.vue'
 import scrollView from '@/base/ScrollView/ScrollView.vue'
 import Brand from '@/utils/Class/Brand'
+import { getArtData } from '@/http/api/art'
+import type { ArtFloor, ArtItem } from '@/types/art'

 // import { storeToRefs } from 'pinia'
 import { useRootStore } from '@/store/root'
@ -87,16 +93,19 @@ const store = useRootStore()
 const router = useRouter()

 const delaytime = 0.5 //延迟时间
-const mapList = 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([
+const mapList = ref<ArtFloor[]>([])
+//   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<ArtItem[]>([])
+/**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<ArtItem[]>([])
+/**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<ArtItem[]>([])
+/** 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;
--- a/src/views/Art/ArtMapItem.vue
+++ b/src/views/Art/ArtMapItem.vue
@ -1,14 +1,19 @@
 <template>
  <div class="art-item">
    <!-- 图 -->
-    <img class="banner" :src="artInfo.fileUrl" alt="" />
+    <img class="banner" :src="artInfo?.urlList[0]" alt="" />
    <div class="intro-container">
      <!-- 标题 -->
-      <h3 class="art-title">{{ switchLanguage(artInfo, 'title') }}</h3>
+      <h3 class="art-title">{{ switchLanguage(artInfo, 'artworkName') }}</h3>
      <!-- 作者 -->
      <h5 class="art-author">{{ artInfo.author }}</h5>
      <!-- 介绍 -->
-      <p class="art-intro">{{ switchLanguage(artInfo, 'intro') }}</p>
+      <div class="art-intro">
+        <p>{{ artInfo.creationYear }}</p>
+        <p>{{ artInfo.material }}</p>
+        <p>{{ artInfo.dimension }}</p>
+        <!-- {{ switchLanguage(artInfo, 'intro') }} -->
+      </div>
    </div>
    <!-- 编号 -->
    <p class="art-number">{{ artInfo.artNum }}</p>
@ -19,7 +24,6 @@

 <script setup>
 // import { ref } from 'vue'
-
 const emits = defineEmits(['go'])
 const props = defineProps({
  artInfo: {
@ -83,9 +87,9 @@ function clickGo() {
      color: #9b8c85;
      font-style: normal;
      font-weight: 400;
-      line-height: 150%;
+      line-height: 15px;

-      @include more-wrap(3);
+      @include no-wrap();
    }
  }
  .art-number {
--- a/src/views/Art/ArtRightItem.vue
+++ b/src/views/Art/ArtRightItem.vue
@ -1,10 +1,10 @@
 <template>
  <div class="art-item">
    <!-- 图 -->
-    <img class="banner" :src="artInfo.fileUrl" alt="" />
+    <img class="banner" :src="artInfo?.urlList[0]" alt="" />
    <div class="intro-container">
      <!-- 标题 -->
-      <h3 class="art-title">{{ switchLanguage(artInfo, 'title') }}</h3>
+      <h3 class="art-title">{{ switchLanguage(artInfo, 'artworkName') }}</h3>
      <!-- 作者 -->
      <h5 class="art-author">{{ artInfo.author }}</h5>
      <!-- 导航按钮 -->
--- a/src/views/Brand/Brand.vue
+++ b/src/views/Brand/Brand.vue
@ -91,7 +91,7 @@ getBrandInfo().then(({ data }) => {
  formatList.value.push({
    fileUrl: '',
    isSpecial: 0,
-    industryCode: 0,
+    industryCode: '0',
    industryName: '全部类别',
    industryNameEn: '',
    shopNum: 0,
@ -100,7 +100,7 @@ getBrandInfo().then(({ data }) => {
  zmList.value.push({
    fileUrl: '',
    isSpecial: 0,
-    industryCode: 0,
+    industryCode: '0',
    industryName: 'ALL',
    industryNameEn: '',
    shopNum: 0,
@ -123,7 +123,7 @@ getBrandInfo().then(({ data }) => {
  letters.split('').forEach(letter => {
    const temp = {
      fileUrl: '',
-      industryCode: 0,
+      industryCode: '0',
      industryNameEn: '',
      shopNum: 0,
      industryList: []
--- a/src/views/Nav/Nav.vue
+++ b/src/views/Nav/Nav.vue
@ -249,6 +249,7 @@ watch(shop, newVal => {
 <style lang="scss" scoped>
 .nav-container {
  position: absolute;
+  overflow: hidden;
  width: 100vw;
  height: 100vh;
  pointer-events: none;