Agency_WebApp/src/views/voyage/portDeclarationDetail.vue

<template>
  <div class="container-title df aic jcsb">
    <div class="df aic">
      <div class="mr30">船东信息</div>
    </div>
  </div>
  <div class="line-container-p24">
    <div class="df aic mb30">
      <div class="df aic">
        <div class="title">船东姓名</div>
        <div class="text">{{ detail.userName }}</div>
      </div>
      <div class="df aic">
        <div class="title">手机号</div>
        <div class="text">{{ detail.phone }}</div>
      </div>
    </div>
    <div class="df aic mb30">
      <div class="df aic">
        <div class="title">身份证号</div>
        <div class="text">{{ detail.idcardNo }}</div>
      </div>
    </div>
    <div class="df aic">
      <div class="df aic">
        <div class="title">身份证国徽面</div>
        <div class="text">
          <el-image
            :preview-src-list="previewListIds"
            fit="contain"
            :src="detail.idcardBackViewUrl"
          ></el-image>
        </div>
      </div>
      <div class="df aic">
        <div class="title">身份证头像面</div>
        <div class="text">
          <el-image
            :preview-src-list="previewListIds"
            fit="contain"
            :src="detail.idcardFrontViewUrl"
          ></el-image>
        </div>
      </div>
    </div>
  </div>
  <div class="container-title df aic jcsb">
    <div class="df aic">
      <div class="mr30">船舶信息</div>
    </div>
  </div>
  <div class="line-container-p24">
    <div class="df aic mb30">
      <div class="df aic">
        <div class="title">船舶名称</div>
        <div class="text">{{ detail.shipname }}</div>
      </div>
      <div class="df aic">
        <div class="title">MMSI</div>
        <div class="text">{{ detail.mmsi }}</div>
      </div>
    </div>
    <Certs ref="certs"></Certs>
  </div>
  <div class="container-title df aic jcsb">
    <div class="df aic">
      <div class="mr30">航次信息</div>
    </div>
  </div>
  <div class="line-container-p24">
    <div class="df aic mb30">
      <div class="df aic">
        <div class="title">航次名称</div>
        <div class="text">{{ detail.voyageName }}</div>
      </div>
      <div class="df aic">
        <div class="title">货种</div>
        <div class="text">{{ detail.cargo }}</div>
      </div>
    </div>
    <div class="df aic">
      <div class="df aic">
        <div class="title">货量</div>
        <div class="text">
          {{ detail.actualLoadTons + " 吨" }} /
          {{ detail.actualLoadPieces + " 件" }}
        </div>
      </div>
      <div class="df aic">
        <div class="title">预计到港时间</div>
        <div class="text">{{ detail.expectedArrivalTime }}</div>
      </div>
    </div>
  </div>
  <div class="df jcfe mt20 mr20">
    <el-button @click="portReport" type="primary">申请报港</el-button>
  </div>
</template>
<script setup>
import { ref, h, reactive, toRefs, onMounted } from "vue";
import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
import store from "../../store";
import router from "../../router";
import md5 from "md5";
import api from "../../apis/fetch";
import { useRoute } from "vue-router";

const route = useRoute();
let detail = ref({});
let certs = ref(null);
let previewListIds = ref([]);

async function getReportDetail() {
  let res = await api.getReportDetail({
    voyageId: route.query.id,
  });
  detail.value = res.data.result;
  previewListIds.value = [
    detail.value.idcardFrontViewUrl,
    detail.value.idcardBackViewUrl,
  ];
  // certs.value.initCerts(detail.value.shipAudits);
}
async function portReport() {
  let res = await api.portReport({
    voyageId: route.query.id,
  });
  if (res.data.status == 0) {
    ElMessage({
      type: "success",
      message: "报港成功!",
    });
    router.push("/voyage/portDeclarationList");
  } else {
    ElMessage({
      type: "error",
      message: "报港失败!",
    });
    console.log(res);
  }
}
onMounted(() => {
  getReportDetail();
});
</script>
<style scoped>
.title {
  color: #555;
  width: 100px;
  text-align: right;
  margin-right: 30px;
  font-size: 14px;
}

.text {
  width: 280px;
}

.el-image {
  width: 240px;
  height: 160px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
</style>