feat: 🚀 交通信息接口联调

public/static/offline/JSON/getMallIntroduce.json

@@ -0,0 +1,21 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 111,
+      "title": "商场介绍",
+      "content": {
+        "content": "欧时力(香港)集团全权代理意大利品牌欧时力(OCHIRLY)并组建欧时力(中国)有限公司，全权负责OCHIRLY在大中华区的品牌经营。欧时力自1999年进入中国市场以来欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿在北京、上海、广州、深圳、大连、成都、重庆、西安、长沙等省会城市的太平洋、新世界、SOGO、迈凯乐、百盛、茂业、银泰、平和堂等知名时尚百货店欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿欧时力(香港)集团全权代理意大利品牌欧时力(OCHIRLY)并组建欧时力(中国)有限公司，全权负责OCHIRLY在大中华区的品牌经营。欧时力自1999年进入中国市场以来欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿在北京、上海、广州、深圳、大连、成都、重庆、西安、长沙等省会城市的太平洋、新世界、SOGO、迈凯乐、百盛、茂业、银泰、平和堂等知名时尚百货店欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿",
+        "contentEn": "frtg",
+        "file_code": [
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg",
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg",
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/TDc5S9Z6KiVElVCqooqMj.jpg"
+        ],
+        "name": "成都SKP",
+        "nameEn": "成都SKP"
+      }
+    }
+  ]
+}

public/static/offline/JSON/getParkingQrList.json

@@ -0,0 +1,17 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 203,
+      "title": "扫码停车",
+      "content": {
+        "name": "扫码停车",
+        "nameEn": "123321",
+        "file_code": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230714/Yg0O4nh2ZgIc33xhY2mOe.png"
+        ]
+      }
+    }
+  ]
+}

public/static/offline/JSON/getTraffic.json

@@ -0,0 +1,18 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 137,
+      "title": "fa",
+      "content": {
+        "photo_h": [
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
+        ],
+        "photo_s": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230714/hB1BF43JF7pYviTziiQSA.png"
+        ]
+      }
+    }
+  ]
+}

src/components/PictureText/PictureText.vue

@@ -1,44 +1,46 @@
 <template>
-  <div class="picture-container">
+  <div v-if="acList.length" class="picture-container">
     <div>
       <swiper
-        v-if="acList.length"
+        v-if="acList.length && acList[0].content.file_code.length"
         :modules="[Autoplay]"
         :observer="true"
-        :loop="acList.length > 1"
-        :autoplay="acList.length !== 1 ? { delay: 5000, disableOnInteraction: false } : false"
+        :loop="acList[0].content.file_code.length > 1"
+        :autoplay="acList[0].content.file_code.length !== 1 ? { delay: 5000, disableOnInteraction: false } : false"
         class="myswiper"
       >
-        <swiper-slide v-for="item in acList" :key="item.activityId">
-          <img :src="item.fileUrl" />
+        <swiper-slide v-for="item in acList[0].content.file_code" :key="item">
+          <img :src="item" />
         </swiper-slide>
       </swiper>
       <img v-else class="empty" src="@/assets/images/empty_big.svg" alt="" />
     </div>
     <div class="info">
-      <div class="name"></div>
-      <ScrollView :list="[]" class="myscroll">
-        <div class="intro"></div>
+      <div class="name">{{ switchLanguage(acList[0].content, 'name') }}</div>
+      <ScrollView :list="switchLanguage(acList[0].content, 'content')" class="myscroll" scrollbar>
+        <div class="intro">{{ switchLanguage(acList[0].content, 'content') }}</div>
       </ScrollView>
-      <div v-if="qrList && qrList.length" class="qr-container">
+      <div v-if="qrList.length && qrList[0].content.name" class="qr-container">
         <div class="item">
-          <img src="" alt="" />
-          <div class="name"></div>
+          <img :src="qrList[0].content.file_code[0]" alt="" />
+          <div class="name">{{ switchLanguage(qrList[0].content, 'name') }}</div>
         </div>
       </div>
     </div>
   </div>
+  <img v-else class="empty_big" src="@/assets/images/empty_big.svg" alt="" />
 </template>
 
 <script setup lang="ts">
+import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Autoplay } from 'swiper'
 import 'swiper/css'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
-
+const { switchLanguage } = useSwitchLanguage()
 interface Props {
-  acList: Activity[]
-  qrList: Activity[]
+  acList: PicText[]
+  qrList: Qr[]
 }
 
 defineProps<Props>()
@@ -58,7 +60,7 @@ defineProps<Props>()
   }
 }
 .picture-container {
-  @include fl();
+  @include fl(flex-start, flex-start);
 
   position: fixed;
   top: 268px;
@@ -95,6 +97,7 @@ defineProps<Props>()
       line-height: 32px;
     }
     .myscroll {
+      position: relative;
       overflow: hidden;
       width: 708px;
       height: 308px;
@@ -133,4 +136,11 @@ defineProps<Props>()
     }
   }
 }
+.empty_big {
+  position: fixed;
+  top: 268px;
+  left: 56px;
+  width: 1808px;
+  height: 576px;
+}
 </style>

src/http/api/mall/index.ts

@@ -0,0 +1,8 @@
+import { request } from '@/http/http'
+import { PREFIX } from '@/enums'
+
+// 获取商场介绍
+export const getMallIntroduce = () => request<PicText[]>({ url: `${PREFIX.STATIC_URL}/JSON/getMallIntroduce.json` })
+
+// 周边交通
+export const getTraffic = () => request<Traffic[]>({ url: `${PREFIX.STATIC_URL}/JSON/getTraffic.json` })

src/types/car.d.ts

@@ -9,3 +9,12 @@ declare interface CarInfo {
   parkingTime: string // 停车时长
   placeCode: string //车位号
 }
+
+declare interface Traffic {
+  id: number
+  title: string
+  content: {
+    photo_h: string[]
+    photo_s: string[]
+  }
+}

src/types/picText.d.ts

@@ -0,0 +1,11 @@
+declare type PicText = {
+  id: number
+  title: string
+  content: {
+    content: string
+    contentEn: string
+    file_code: string[]
+    name: string
+    nameEn: string
+  }
+}

src/types/qr.d.ts

@@ -0,0 +1,9 @@
+declare type Qr = {
+  id: number
+  title: string
+  content: {
+    file_code: string[]
+    name: string
+    nameEn: string
+  }
+}

src/views/Traffic/Traffic.vue

@@ -9,12 +9,13 @@
     :list="list"
     @click="handleSwitch"
   />
-  <PictureText v-if="isCurrent" :ac-list="[]" :qr-list="[]" />
-  <img v-else class="tra" src="" alt="" />
+  <PictureText v-if="isCurrent" :ac-list="mallIntro" :qr-list="[]" />
+  <img v-else class="tra" :src="traImg ? traImg : require('@/assets/images/empty_big.svg')" alt="" />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { getMallIntroduce, getTraffic } from '@/http/api/mall'
 import switchtab from '@/components/SwitchTab/SwitchTab.vue'
 import PictureText from '@/components/PictureText/PictureText.vue'
 
@@ -38,6 +39,18 @@ const isCurrent = ref(true)
 function handleSwitch() {
   isCurrent.value = !isCurrent.value
 }
+
+// 获取商场介绍信息
+const mallIntro = ref<PicText[]>([])
+getMallIntroduce().then(({ data }) => {
+  mallIntro.value = data
+})
+
+// 获取周边交通图
+const traImg = ref('')
+getTraffic().then(({ data }) => {
+  traImg.value = data.length ? data[0].content.photo_h[0] : ''
+})
 </script>
 
 <style lang="scss" scoped>