From 547af02be5ad2928347b6456fac227b1275ae390 Mon Sep 17 00:00:00 2001
From: liyongle <liyongle@123>
Date: Fri, 14 Jul 2023 15:59:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E4=BA=A4=E9=80=9A?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/offline/JSON/getMallIntroduce.json | 21 ++++++++++
 .../static/offline/JSON/getParkingQrList.json | 17 ++++++++
 public/static/offline/JSON/getTraffic.json    | 18 ++++++++
 src/components/PictureText/PictureText.vue    | 42 ++++++++++++-------
 src/http/api/mall/index.ts                    |  8 ++++
 src/types/car.d.ts                            |  9 ++++
 src/types/picText.d.ts                        | 11 +++++
 src/types/qr.d.ts                             |  9 ++++
 src/views/Traffic/Traffic.vue                 | 17 +++++++-
 9 files changed, 134 insertions(+), 18 deletions(-)
 create mode 100644 public/static/offline/JSON/getMallIntroduce.json
 create mode 100644 public/static/offline/JSON/getParkingQrList.json
 create mode 100644 public/static/offline/JSON/getTraffic.json
 create mode 100644 src/http/api/mall/index.ts
 create mode 100644 src/types/picText.d.ts
 create mode 100644 src/types/qr.d.ts

diff --git a/public/static/offline/JSON/getMallIntroduce.json b/public/static/offline/JSON/getMallIntroduce.json
new file mode 100644
index 0000000..d377c2e
--- /dev/null
+++ b/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"
+      }
+    }
+  ]
+}
diff --git a/public/static/offline/JSON/getParkingQrList.json b/public/static/offline/JSON/getParkingQrList.json
new file mode 100644
index 0000000..0687e95
--- /dev/null
+++ b/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"
+        ]
+      }
+    }
+  ]
+}
diff --git a/public/static/offline/JSON/getTraffic.json b/public/static/offline/JSON/getTraffic.json
new file mode 100644
index 0000000..31d70c9
--- /dev/null
+++ b/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"
+        ]
+      }
+    }
+  ]
+}
diff --git a/src/components/PictureText/PictureText.vue b/src/components/PictureText/PictureText.vue
index c7dbcbe..e3644d0 100644
--- a/src/components/PictureText/PictureText.vue
+++ b/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>
diff --git a/src/http/api/mall/index.ts b/src/http/api/mall/index.ts
new file mode 100644
index 0000000..d8956fd
--- /dev/null
+++ b/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` })
diff --git a/src/types/car.d.ts b/src/types/car.d.ts
index cbd30cc..6d5344b 100644
--- a/src/types/car.d.ts
+++ b/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[]
+  }
+}
diff --git a/src/types/picText.d.ts b/src/types/picText.d.ts
new file mode 100644
index 0000000..e3cdc1e
--- /dev/null
+++ b/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
+  }
+}
diff --git a/src/types/qr.d.ts b/src/types/qr.d.ts
new file mode 100644
index 0000000..ece0450
--- /dev/null
+++ b/src/types/qr.d.ts
@@ -0,0 +1,9 @@
+declare type Qr = {
+  id: number
+  title: string
+  content: {
+    file_code: string[]
+    name: string
+    nameEn: string
+  }
+}
diff --git a/src/views/Traffic/Traffic.vue b/src/views/Traffic/Traffic.vue
index 5e1d0db..c28c00c 100644
--- a/src/views/Traffic/Traffic.vue
+++ b/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>