更新 首页

src/views/index/Index.vue

@@ -14,7 +14,7 @@
   </div>
   <div id="map-container" class="map-container"></div>
   <div v-if="ship.code" class="p20 bgf">
-    <div class="container-title">船舶信息</div>
+    <div id="voyage" class="container-title">船舶信息</div>
     <div style="max-width: 1200px">
       <div class="df aic jcsb pl20">
         <div class="df aic">
@@ -33,22 +33,24 @@
         </div>
 
         <div class="df aic">
-          <div class="c5 mr10">icon</div>
+          <div class="c5 mr10" style="padding-top: 4px">
+            <img style="width: 20px; height: 20px" :src="icon" alt="" />
+          </div>
           <div class="c5">汇很多科技认证</div>
         </div>
       </div>
       <div class="df aic jcsa">
-        <div class="df aic card">
-          <div>航行</div>
-          <div>√</div>
+        <div class="card" @click="goTo('voyage')">
+          航行
+          <img :src="currentType == 'voyage' ? checked : unchecked" alt="" />
         </div>
-        <div class="df aic card">
-          <div>证书</div>
-          <div>√</div>
+        <div class="card" @click="goTo('certs')">
+          证书
+          <img :src="currentType == 'certs' ? checked : unchecked" alt="" />
         </div>
-        <div class="df aic card">
-          <div>保险</div>
-          <div>√</div>
+        <div class="card" @click="goTo('insurance')">
+          保险
+          <img :src="currentType == 'insurance' ? checked : unchecked" alt="" />
         </div>
       </div>
       <div class="df aic jcsb pl20">
@@ -80,6 +82,45 @@
           <div class="unit c5">年</div>
         </div>
       </div>
+      <div id="certs" class="container-title">船舶证书</div>
+      <div class="mb30" v-for="item in certs" :key="item.type">
+        <div class="df">
+          <div class="type-name c5 ml20 mr30">{{ item.typeName }}</div>
+          <div class="date c5" v-if="item.endValidTime">
+            有效期:{{ item.startValidTime }}-{{ item.endValidTime }}
+          </div>
+        </div>
+        <div class="df">
+          <div v-for="item1 in item.certs" :key="item1.id">
+            <el-image
+              class="certs-img"
+              :preview-src-list="[item1.viewUrl]"
+              :src="item1.viewUrl"
+              alt=""
+            />
+          </div>
+        </div>
+      </div>
+      <!-- <el-button type="primary" size="large" @click="">更多</el-button> -->
+      <div id="insurance" class="container-title mt50">船舶保险</div>
+      <div v-for="item in insurance" :key="item.type">
+        <div class="df">
+          <div class="type-name c5 ml20 mr30">{{ item.typeName }}</div>
+          <div class="date c5" v-if="item.endValidTime">
+            有效期:{{ item.startValidTime }}-{{ item.endValidTime }}
+          </div>
+        </div>
+        <div class="df">
+          <div v-for="item1 in item.certs" :key="item1.id">
+            <el-image
+              class="certs-img"
+              :preview-src-list="[item1.viewUrl]"
+              :src="item1.viewUrl"
+              alt=""
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -88,9 +129,13 @@ import moment from "moment";
 import "moment/dist/locale/zh-cn";
 import { onMounted, ref } from "vue";
 import api from "../../apis/fetch";
+import checked from "../../assets/checked.png";
+import unchecked from "../../assets/unchecked.png";
+import icon from "../../assets/hui.png";
+icon;
 
 let today = ref(moment().format("YYYY年MM月DD日 dddd"));
-
+let currentType = ref("voyage");
 const map = ref({});
 function initMap() {
   map.value = new AMap.Map("map-container", {
@@ -165,6 +210,18 @@ async function getShipDetail(shipCode) {
   });
   if (data.status == 0) {
     ship.value = data.result;
+    certs.value = [];
+    insurance.value = [];
+    for (let i of ship.value.shipCerts) {
+      if (i.type == 5) {
+        insurance.value.push(i);
+      } else {
+        certs.value.push(i);
+      }
+    }
+    setTimeout(() => {
+      goTo("voyage");
+    }, 100);
   } else {
     ship.value = {};
   }
@@ -173,6 +230,8 @@ async function getShipDetail(shipCode) {
 let shipNum = ref("");
 let shipLoadTons = ref("");
 let ships = ref([]);
+let certs = ref([]);
+let insurance = ref([]);
 async function getIndexData() {
   let { data } = await api.getIndexData({});
   shipNum.value = data.result.shipNum;
@@ -181,17 +240,19 @@ async function getIndexData() {
   initMap();
 }
 
+function goTo(type) {
+  currentType.value = type;
+  document.querySelector(`#${type}`).scrollIntoView({
+    behavior: "smooth",
+    block: "center",
+    inline: "nearest",
+  });
+}
+
 onMounted(() => {
+  // getShipDetail("1536A9C15076F89BB01FCF28EAD7C2CC");
   getIndexData();
 });
-
-// navigator.geolocation.getCurrentPosition(showPosition, showError);
-// function showPosition(position) {
-//   console.log(position);
-// }
-// function showError(position) {
-//   console.log(position);
-// }
 </script>
 <style scoped>
 .map-container {
@@ -202,4 +263,44 @@ onMounted(() => {
 .unit {
   margin-left: 5px;
 }
+
+.card {
+  width: 33.3%;
+  height: 120px;
+  font-size: 26px;
+  border: 1px solid grey;
+  text-align: center;
+  line-height: 120px;
+  margin: 20px;
+  color: #fff;
+  position: relative;
+}
+
+.card:first-child {
+  background: #1240ab;
+}
+.card:nth-child(2) {
+  background: #4671d5;
+}
+
+.card:last-child {
+  background: #6c8cd5;
+}
+
+.card img {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  right: 25px;
+  top: 38px;
+}
+
+.certs-img {
+  width: 200px;
+  height: 160px;
+  object-fit: contain;
+  border: 5px solid rgba(0, 0, 0, 0.3);
+  margin-top: 20px;
+  margin-left: 20px;
+}
 </style>