feat: 🚀 猜你喜欢加快

public/static/offline/JSON/getArtWorkList.json

@@ -9,10 +9,10 @@
         "name": "猩猩的太空漫步",
         "nameEn": "dddd",
         "file_code": [
-          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/vwcYXFrhK1CbEB6uFy76R.png"
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
         ],
         "point": "0_0_4",
-        "content": "vnasfkvl",
+        "content": "星巴克(Starbucks)是美国一家连锁咖啡公司的名称，1971年成立，为全球最大的咖啡连锁店，其总部坐落美国华盛顿州西雅图市。星巴克旗下零售产品包括30多款全球顶级的咖啡豆、手工制作的浓缩咖啡和多款咖啡冷热饮料、新鲜美味的各式糕点食品以及丰富多样的咖啡机、咖啡杯等商品。星巴克在全球范围内已经有近21300间分店，遍布北美、南美洲、欧洲、中东及太平洋区。星巴克(Starbucks)是美国一家连锁咖啡公司的名称，1971年成立，为全球最大的咖啡连锁店，其总部坐落美国华盛顿州西雅图市。星巴克旗下零售产品包括30多款全球顶级的咖啡豆、手工制作的浓缩咖啡和多款咖啡冷热饮料、新鲜美味的各式糕点食品以及丰富多样的咖啡机、咖啡杯等商品。星巴克在全球范围内已经有近21300间分店，遍布北美、南美洲、欧洲、中东及太平洋区。",
         "contentEn": "fwefwqe",
         "icon": [
           "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png"
@@ -29,7 +29,7 @@
         "name": "共生",
         "nameEn": "dddd",
         "file_code": [
-          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/CkR9FMDrKtej6Rt0GDAUR.png"
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
         ],
         "point": "0_0_129",
         "content": "1235",
@@ -49,7 +49,7 @@
         "name": "超新星",
         "nameEn": "dddd",
         "file_code": [
-          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/6DH-CKwe8pzVt4qmP-Knm.png"
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
         ],
         "point": "0_0_129",
         "content": "1326",
@@ -69,7 +69,7 @@
         "name": "盛开的山谷",
         "nameEn": "dadd",
         "file_code": [
-          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/fH0IKTz9Nhg7nnVhtJg_o.png"
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
         ],
         "point": "0_0_84",
         "content": "i7u",
@@ -89,7 +89,7 @@
         "name": "琥珀",
         "nameEn": "t534",
         "file_code": [
-          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/rQjWB5AzY05NM7YSmWgtT.png"
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
         ],
         "point": "0_0_84",
         "content": "213",

public/static/offline/JSON/getColumnBtn.json

@@ -0,0 +1,19 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 127,
+      "title": "餐饮推荐",
+      "content": {
+        "isOpen": "开启",
+        "logo_code": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230714/436WqGHBEswCHsCHwiZfx.png"
+        ],
+        "name": "餐饮推荐",
+        "nameEn": "DINING RECOMMENDATION",
+        "type": "好吃的"
+      }
+    }
+  ]
+}

public/static/offline/JSON/getColumnList.json

@@ -0,0 +1,32 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 128,
+      "title": "泽德",
+      "content": {
+        "name": "特别好的",
+        "nameEn": "24213",
+        "logo_code": [
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
+        ],
+        "point": "0_0_204",
+        "shopCode": ""
+      }
+    },
+    {
+      "id": 131,
+      "title": "VS",
+      "content": {
+        "name": "cn下周才",
+        "nameEn": "dqwd",
+        "logo_code": [
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
+        ],
+        "point": "0_3_197",
+        "shopCode": ""
+      }
+    }
+  ]
+}

src/assets/images/art/poi.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 13.9339L11.3 10.6339C11.9526 9.98127 12.397 9.14975 12.577 8.24452C12.7571 7.33928 12.6646 6.401 12.3114 5.5483C11.9582 4.69561 11.36 3.9668 10.5926 3.45404C9.82519 2.94129 8.92296 2.6676 8 2.6676C7.07704 2.6676 6.17481 2.94129 5.40739 3.45404C4.63997 3.9668 4.04183 4.69561 3.68861 5.5483C3.33539 6.401 3.24294 7.33928 3.42297 8.24452C3.603 9.14975 4.0474 9.98127 4.7 10.6339L8 13.9339ZM8 15.8193L3.75734 11.5766C2.91823 10.7375 2.34679 9.66838 2.11529 8.5045C1.88378 7.34061 2.0026 6.13422 2.45673 5.03787C2.91086 3.94151 3.6799 3.00445 4.66659 2.34516C5.65328 1.68588 6.81332 1.33398 8 1.33398C9.18669 1.33398 10.3467 1.68588 11.3334 2.34516C12.3201 3.00445 13.0891 3.94151 13.5433 5.03787C13.9974 6.13422 14.1162 7.34061 13.8847 8.5045C13.6532 9.66838 13.0818 10.7375 12.2427 11.5766L8 15.8193V15.8193ZM8 8.66727C8.35362 8.66727 8.69276 8.52679 8.94281 8.27674C9.19286 8.02669 9.33333 7.68755 9.33333 7.33393C9.33333 6.98031 9.19286 6.64117 8.94281 6.39112C8.69276 6.14108 8.35362 6.0006 8 6.0006C7.64638 6.0006 7.30724 6.14108 7.05719 6.39112C6.80714 6.64117 6.66667 6.98031 6.66667 7.33393C6.66667 7.68755 6.80714 8.02669 7.05719 8.27674C7.30724 8.52679 7.64638 8.66727 8 8.66727ZM8 10.0006C7.29276 10.0006 6.61448 9.71965 6.11438 9.21955C5.61429 8.71945 5.33334 8.04118 5.33334 7.33393C5.33334 6.62669 5.61429 5.94841 6.11438 5.44831C6.61448 4.94822 7.29276 4.66727 8 4.66727C8.70725 4.66727 9.38552 4.94822 9.88562 5.44831C10.3857 5.94841 10.6667 6.62669 10.6667 7.33393C10.6667 8.04118 10.3857 8.71945 9.88562 9.21955C9.38552 9.71965 8.70725 10.0006 8 10.0006Z" fill="#8E9090"/>
+</svg>

src/components/Header/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header-container">
-    <div class="left" @click="go">
-      <div class="search-container">
+    <div class="left">
+      <div class="search-container" @click="go">
         <img src="@/assets/images/header/search.svg" alt="" />
         <div class="line"></div>
         <div>
@@ -9,9 +9,9 @@
           <div class="text_en">SEARCH</div>
         </div>
       </div>
-      <div v-if="columnList.length && columnList[0].moduleType" class="recommend" @click="show">
+      <div v-if="columnList.length && columnList[0].title" class="recommend" @click="show">
         <img class="rem" src="@/assets/images/header/zan.svg" alt="" />
-        <div>{{ $t('header.recommend') }}</div>
+        <div>{{ switchLanguage(columnList[0].content, 'name') }}</div>
       </div>
     </div>
     <div class="right">
@@ -22,10 +22,11 @@
 </template>
 
 <script setup lang="ts">
+import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
 import { useRootStore } from '@/store/root'
 import { toRefs } from 'vue'
 import WeaAndTime from './WeaAndTime.vue'
-
+const { switchLanguage } = useSwitchLanguage()
 const store = useRootStore()
 const { columnList } = toRefs(store)
 

src/components/PictureText/PictureText.vue

@@ -114,12 +114,15 @@ defineProps<Props>()
     }
     .qr-container {
       @include fl();
+
+      overflow: hidden;
+      width: 708px;
       .item {
         width: 80px;
         height: 102px;
         margin-right: 24px;
         text-align: center;
-        .img {
+        img {
           width: 80px;
           height: 80px;
           margin-bottom: 8px;

src/components/PublicComponent/PublicComponent.vue

@@ -10,7 +10,7 @@
 
   <Search v-if="showSearch"></Search>
   <!-- 推荐弹窗 -->
-  <RecommendDialog v-if="showColumnList" />
+  <RecommendDialog />
 
   <shopdetail v-if="showDetail"></shopdetail>
 
@@ -38,7 +38,7 @@ const RecommendDialog = defineAsyncComponent(() => import('@/components/Recommen
 const router = useRouter()
 const route = useRoute()
 const store = useRootStore()
-const { language, showSearch, showDetail, shopList, showColumnList } = storeToRefs(store)
+const { language, showSearch, showDetail, shopList } = storeToRefs(store)
 const { checkHandleScreen, showCountDownDialog, title, toIndexTime, toWallpaperTime, isWallpaper } = useHandleScreen(handleScreen)
 
 //指定时间返回首页时做的操作

src/components/Recommend/Recommend.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="recommend-container">
+  <div v-if="showColumnList" class="recommend-container">
     <div class="masker" @click="close"></div>
     <div class="close-icon" @click="close">
       <img src="@/assets/images/shopDetail/close.svg" alt="" />
@@ -7,21 +7,21 @@
 
     <div class="content">
       <div class="name-container">
-        <div class="name">餐饮推荐</div>
+        <div class="name">{{ columnList[0].content.name }}</div>
         <div class="line">/</div>
-        <div class="nameEn">DINING RECOMMENDATION</div>
+        <div class="nameEn">{{ columnList[0].content.nameEn }}</div>
       </div>
       <ScrollView v-if="list?.length" :pull-up="false" observe-image :list="list" class="shop-scroll" scrollbar>
         <div v-masonry transition-duration="0.5s" :gutter="24" class="item" item-selector=".card">
           <div v-for="(item, index) in list" :key="index" v-masonry-tile class="card" @click="clickShop(item)">
-            <img :src="item.fileUrl" alt="" class="imgs" />
+            <img :src="item.content.logo_code[0]" alt="" class="imgs" />
             <div class="bottom">
-              <div class="name">{{ switchLanguage(item, 'name') }}</div>
-              <div v-if="item.shopCode" class="pos">
-                <div class="shopName">{{ switchLanguage(item, 'shopName') }}</div>
+              <div class="name">{{ switchLanguage(item.content, 'name') }}</div>
+              <div v-if="item.content.shopCode" class="pos">
+                <div class="shopName">{{ switchLanguage(shopMap[item.content.shopCode], 'shopName') }}</div>
                 <div class="number">
-                  <img src="" alt="" />
-                  <div>{{ item.houseNumber }}</div>
+                  <img src="@/assets/images/art/poi.svg" alt="" />
+                  <div>{{ shopMap[item.content.shopCode].houseNumber }}</div>
                 </div>
               </div>
             </div>
@@ -33,42 +33,48 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { toRefs, ref } from 'vue'
 import { useRootStore } from '@/store/root'
 import { useRouter } from 'vue-router'
 import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
+import { getColumnList } from '@/http/api/base'
 import Brand from '@/utils/Class/Brand'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
 const store = useRootStore()
-const { shopList } = toRefs(store)
-const list: any = []
+const { columnList, showColumnList, shopMap } = toRefs(store)
 const router = useRouter()
 const { switchLanguage } = useSwitchLanguage()
 
-const emits = defineEmits(['close'])
 function close() {
-  emits('close')
+  showColumnList.value = false
 }
 function clickShop(item: FeaturedList) {
-  if (item.shopCode) {
-    const arr = shopList.value.filter(shop => shop.shopCode === item.shopCode)
-    store.SET_SHOP(arr[0])
+  if (item.content.shopCode) {
+    store.SET_SHOP(shopMap[item.content.shopCode])
     store.SET_SHOW_DETAIL(true)
-  } else {
+  } else if (item.content.point) {
+    // 点位信息
+    const poi = item.content.point.split('_')
+    const floors = store.currentBuildingFloorsList.filter(item => item.floorOrder === Number(poi[1]))
     store.SET_SHOP(
       new Brand({
-        shopName: item.name,
-        floorOrder: item.floorOrder,
-        floor: item.floor,
-        logoUrl: item.fileUrl,
-        yaxis: item.point,
-        shopCode: item.shopCode,
-        shopNameEn: item.nameEn
+        shopName: item.content.name,
+        floorOrder: floors[0].floorOrder,
+        floor: floors[0].floor,
+        logoUrl: item.content.logo_code[0],
+        yaxis: poi[2],
+        shopCode: '',
+        shopNameEn: item.content.nameEn
       })
     )
     router.push('/nav')
   }
 }
+
+const list = ref<FeaturedList[]>([])
+getColumnList().then(({ data }) => {
+  list.value = data
+})
 </script>
 
 <style lang="scss" scoped>
@@ -150,9 +156,11 @@ function clickShop(item: FeaturedList) {
     }
     .shop-scroll {
       overflow: hidden;
+      width: 1482px;
       height: 712px;
       .item {
         display: block;
+        width: 1452px;
         .card {
           width: 354px;
           margin-bottom: 12px;

src/composables/useInitConfigAndMallInfo.ts

@@ -1,5 +1,5 @@
 import { useRootStore } from '@/store/root'
-import { getConfig, getFacilitiesList, getWeather } from '@/http/api/base'
+import { getConfig, getFacilitiesList, getWeather, getColumnBtn } from '@/http/api/base'
 import { getShopAndBuildingList } from '@/http/api/shop'
 import { getDeviceInfo } from '@/http/api/building'
 import { getArtWorkList } from '@/http/api/art'
@@ -12,17 +12,27 @@ export const useInitConfigAndMallInfo = async () => {
     const store = useRootStore()
     store.SET_CONFIG(_config.data)
 
-    const [_DeviceInfo, _shopAndBuilding, _facilityList, _weather, _shopListByFloor, _shopListByIndustry, _brandInfo, _artWorkList] =
-      await Promise.all([
-        getDeviceInfo(),
-        getShopAndBuildingList(),
-        getFacilitiesList(),
-        getWeather(),
-        getShopListByFloor(),
-        getShopListByIndustry(),
-        getBrandInfo(),
-        getArtWorkList()
-      ])
+    const [
+      _DeviceInfo,
+      _shopAndBuilding,
+      _facilityList,
+      _weather,
+      _shopListByFloor,
+      _shopListByIndustry,
+      _brandInfo,
+      _artWorkList,
+      _colomList
+    ] = await Promise.all([
+      getDeviceInfo(),
+      getShopAndBuildingList(),
+      getFacilitiesList(),
+      getWeather(),
+      getShopListByFloor(),
+      getShopListByIndustry(),
+      getBrandInfo(),
+      getArtWorkList(),
+      getColumnBtn()
+    ])
 
     const { shopList, buildingList } = _shopAndBuilding.data
     store.SET_DEVICE(_DeviceInfo.data)
@@ -34,6 +44,7 @@ export const useInitConfigAndMallInfo = async () => {
     store.SET_FACILITY_LIST(_facilityList.data)
     store.SET_WEATHER(_weather.data)
     store.SET_ART_PLACE_LIST(_artWorkList.data)
+    store.SET_COLUMN_LIST(_colomList.data)
   } catch (error) {
     Message({ text: '初始化数据失败', type: 'success' })
   }

src/http/api/base/index.ts

@@ -29,3 +29,9 @@ export const getFloorPicList = () => request<FloorPic[]>({ url: `${PREFIX.STATIC
 
 // 获取区域缩略图
 export const getAreaPicList = () => request<AreaPic[]>({ url: `${PREFIX.STATIC_URL}/JSON/getAreaPicList.json` })
+
+// 获取专栏按钮列表
+export const getColumnBtn = () => request<Featured[]>({ url: `${PREFIX.STATIC_URL}/JSON/getColumnBtn.json` })
+
+// 获取专栏列表
+export const getColumnList = () => request<FeaturedList[]>({ url: `${PREFIX.STATIC_URL}/JSON/getColumnList.json` })

src/types/featured.d.ts

@@ -1,22 +1,23 @@
 declare interface Featured {
-  moduleType: string
-  name: string //名称
-  nameEn: string //英文名称
-  introduce: string
-  introduceEn: string
-  crossFileCode: string //横屏图片
-  verticalFileCode: string //竖屏图片
+  id: number
+  title: string
+  content: {
+    isOpen: '开启' | '关闭'
+    logo_code: string[]
+    name: string
+    nameEn: string
+    type: '好吃的' | '好玩的' | '值得买'
+  }
 }
 
 declare interface FeaturedList {
-  nameEn: string
-  shopNameEn: string
-  point: number
-  floorOrder: number
-  floor: string
-  shopCode: stirng
-  shopName: string
-  name: string
-  houseNumber: string
-  fileUrl: string
+  id: number
+  title: string
+  content: {
+    name: string
+    nameEn: string
+    logo_code: string[]
+    point: string
+    shopCode: string
+  }
 }

src/views/Art/Art.vue

@@ -2,10 +2,10 @@
   <div class="art-container">
     <div class="name">艺术装置</div>
     <div class="nameEn">ARTWORK</div>
-    <ScrollView class="myScroll" :list="[]" scroll-x>
+    <ScrollView class="myScroll" :list="artPlaceList" scroll-x scrollbar>
       <div style="display: inline-block">
         <div class="lists">
-          <ArtItem />
+          <ArtItem v-for="item in artPlaceList" :key="item.id" :art-info="item" />
         </div>
       </div>
     </ScrollView>
@@ -13,22 +13,26 @@
 </template>
 
 <script setup lang="ts">
-import ScrollView from '@/base/ScrollView/ScrollView.vue'
+import { toRefs } from 'vue'
+import { useRootStore } from '@/store/root'
 import ArtItem from './ArtItem.vue'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+
+const store = useRootStore()
+const { artPlaceList } = toRefs(store)
 </script>
 
 <style lang="scss" scoped>
-:deep(.bscroll-vertical-scrollbar) {
-  width: 500px;
-  height: 1px !important;
+:deep(.bscroll-horizontal-scrollbar) {
+  z-index: 3 !important;
+  width: 500px !important;
   background: rgb(0 0 0 / 10%);
-  border-radius: 1px;
+  border-radius: 6px;
   opacity: 1 !important;
   .bscroll-indicator {
-    height: 2px !important;
     background: #e00068 !important;
     border: none !important;
-    border-radius: 1px !important;
+    border-radius: 6px !important;
   }
 }
 .art-container {

src/views/Art/ArtItem.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="art-item">
-    <img class="pic" src="" alt="" />
+    <img class="pic" :src="artInfo.content.file_code[0]" alt="" />
     <div class="info">
       <div class="top">
         <div>
-          <div class="title"></div>
-          <div class="titleEn"></div>
+          <div class="title">{{ artInfo.content.name }}</div>
+          <div class="titleEn">{{ artInfo.content.nameEn }}</div>
         </div>
         <img src="@/assets/images/art/go.svg" alt="" />
       </div>
-      <ScrollView :list="[]" class="intro-scroll">
-        <div class="intro"></div>
+      <ScrollView :list="switchLanguage(artInfo.content, 'content')" class="intro-scroll" scrollbar>
+        <div class="intro">{{ switchLanguage(artInfo.content, 'content') }}</div>
       </ScrollView>
     </div>
   </div>
@@ -18,6 +18,12 @@
 
 <script setup lang="ts">
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
+import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
+const { switchLanguage } = useSwitchLanguage()
+type Prop = {
+  artInfo: ArtPlace
+}
+defineProps<Prop>()
 </script>
 
 <style lang="scss" scoped>
@@ -80,10 +86,12 @@ import ScrollView from '@/base/ScrollView/ScrollView.vue'
       }
     }
     .intro-scroll {
+      position: relative;
       overflow: hidden;
       width: 296px;
       height: 166px;
       .intro {
+        width: 274px;
         font-size: 12px;
         font-family: 'font_regular';
         color: #8e9090;

src/views/Guide/FloorPicList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="floor-pic-list">
+  <div class="floor-pic-lists">
     <div
       v-for="(item, index) in picList"
       :key="item.id"
@@ -32,9 +32,9 @@ getFloorPicList().then(({ data }) => {
 </script>
 
 <style lang="scss" scoped>
-.floor-pic-list {
+.floor-pic-lists {
   position: fixed;
-  top: 232px;
+  top: 246px;
   right: 50px;
   z-index: 998;
   .floor {