更新 Swiper组件数据逻辑

src/components/IntelligentModule.vue

@@ -2,7 +2,10 @@
 <template>
   <div class="info-box">
     <ShipInfoCard></ShipInfoCard>
-    <Swiper style="height: 110px; margin: 10px 0"></Swiper>
+    <Swiper
+      :data="this.$store.state.certificates"
+      style="height: 110px; margin: 10px 0"
+    ></Swiper>
     <Radar class="mt10 mb10"></Radar>
     <TitleLine
       style="margin-top: 20px"

src/components/SafetyModule.vue

@@ -5,7 +5,7 @@
     <ShipInfoCard></ShipInfoCard>
     <CapacityCard></CapacityCard>
     <Swiper
-      :imgs="this.$store.state.imgs"
+      :data="this.$store.state.exhibitImgs"
       style="height: 150px; margin: 10px 0"
     ></Swiper>
   </div>

src/components/Swiper.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="swiper mySwiper">
     <div class="swiper-wrapper">
-      <div v-for="item in this.$store.state.imgs" class="swiper-slide">
+      <div v-for="item in data" class="swiper-slide">
         <img :src="item.viewUrl" alt="" />
       </div>
     </div>
@@ -17,6 +17,9 @@ import exchangeUrl from "utils/exchangeUrl";
 import store from "store/index";
 
 export default {
+  props: {
+    data: Array,
+  },
   setup(props) {
     let swiper = ref({});
     function init() {
@@ -29,7 +32,7 @@ export default {
     }
 
     watch(
-      () => store.state.imgs,
+      () => props.data,
       (a, b) => {
         let t = setTimeout(() => {
           update();

src/store/index.js

@@ -87,16 +87,8 @@ const store = createStore({
       shipStatus: 0,
     },
     numbers: [],
-    imgs: [
-      {
-        viewUrl:
-          "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
-      },
-      {
-        viewUrl:
-          "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
-      },
-    ],
+    certificates: [],
+    exhibitImgs: [],
     levelData: [
       { name: "项目1", score: 80, level: "高" },
       { name: "项目2", score: 80, level: "高" },
@@ -137,7 +129,7 @@ const store = createStore({
       state.cargoOwnerInfo.data[2].text =
         cargoownerDetail.loadPort + " - " + cargoownerDetail.dischargePort;
       state.shipInfo.shipName = shipDetail.shipName;
-      state.shipInfo.imgs = shipDetail.exhibitImgs;
+      state.exhibitImgs = shipDetail.exhibitImgs;
       state.shipInfo.shipOwnerName = shipDetail.shipownerName;
       state.shipInfo.shipOwnerId = shipDetail.shipownerIdcard;
       state.shipInfo.data[0].text = shipDetail.shipMmsi;
@@ -153,10 +145,7 @@ const store = createStore({
       state.shipInfo.data[1].text = data.shipLength;
       state.shipInfo.data[2].text = data.shipBreadth;
       state.voyages = data.historyVoyages;
-      state.imgs = data.certificates;
-    },
-    setImgs(state, imgs) {
-      state.imgs = imgs;
+      state.certificates = data.certificates;
     },
     setShipsCache(state, ships) {
       state.shipsCache = ships;