更新 icon组件逻辑

src/components/CargoOwnderCard.vue

@@ -9,11 +9,7 @@
   <IconInfo
     style="margin-top: 20px"
     :type="0"
-    :info="[
-      cargoOwnerInfo.cargo,
-      cargoOwnerInfo.tons,
-      cargoOwnerInfo.shipRoute,
-    ]"
+    :info="cargoOwnerInfo.data"
   ></IconInfo>
   <div
     class="openContract pointer"

src/components/IconInfo.vue

@@ -1,37 +1,18 @@
 // icon卡片展示
 <template>
   <div class="icon-info df aic jcsa">
-    <div class="box">
-      <div class="icon">
-        <img :src="exchangeUrl(type ? 'ship-fill' : 'cargo')" alt="" />
-      </div>
-      <div class="title">{{ type ? "MMSI" : "货种" }}</div>
-      <div class="text">
-        <span class="text1">{{ info[0] }}</span
-        ><span class="text2"></span>
-      </div>
-    </div>
-    <div class="short-line"></div>
-    <div class="box">
-      <div class="icon">
-        <img :src="exchangeUrl(type ? 'ship-length' : 'ship')" alt="" />
-      </div>
-      <div class="title">{{ type ? "船长" : "吨位" }}</div>
-      <div class="text">
-        <span class="text1">{{ info[1] }}</span
-        ><span class="text2">{{ type ? "米" : "吨" }}</span>
-      </div>
-    </div>
-    <div class="short-line"></div>
-    <div class="box">
-      <div class="icon">
-        <img :src="exchangeUrl(type ? 'ship-width' : 'hangxian')" alt="" />
-      </div>
-      <div class="title">{{ type ? "船宽" : "航线" }}</div>
-      <div class="text">
-        <span class="text1">{{ info[2] }}</span
-        ><span v-if="type" class="text2">米</span>
+    <div v-for="item in info" :key="item" class="df aic jcsa">
+      <div class="box">
+        <div class="icon">
+          <img :src="exchangeUrl(item.icon)" alt="" />
+        </div>
+        <div class="title">{{ item.title }}</div>
+        <div class="text">
+          <span class="text1">{{ item.text }}</span
+          ><span class="text2">{{ item.unit || "" }}</span>
+        </div>
       </div>
+      <div class="short-line"></div>
     </div>
   </div>
 </template>
@@ -47,7 +28,25 @@ export default {
     },
     info: {
       type: Array,
-      default: ["煤炭", "30", "秦皇岛-上海"],
+      default: [
+        {
+          title: "MMSI",
+          text: "410998998",
+          icon: "ship-fill",
+        },
+        {
+          title: "船长",
+          text: "30",
+          unit: "米",
+          icon: "ship-length",
+        },
+        {
+          title: "船宽",
+          text: "18",
+          unit: "米",
+          icon: "ship-width",
+        },
+      ],
     },
   },
   setup() {

src/components/ShipInfoCard.vue

@@ -16,7 +16,7 @@
     <IconInfo
       style="margin-top: 25px"
       :type="1"
-      :info="[shipInfo.mmsi, shipInfo.length, shipInfo.width]"
+      :info="shipInfo.data"
     ></IconInfo>
   </div>
 </template>