新增 货主信息卡片组件

src/components/CargoOwnderCard.vue

@@ -0,0 +1,64 @@
+// 货主信息卡片
+<template>
+  <TitleLine
+    icon="user"
+    title="货主信息"
+    :type="1"
+    :endText="cargoOwnerInfo.cargoOwnerName"
+  ></TitleLine>
+  <IconInfo
+    style="margin-top: 25px"
+    :type="0"
+    :info="[
+      cargoOwnerInfo.cargo,
+      cargoOwnerInfo.tons,
+      cargoOwnerInfo.shipRoute,
+    ]"
+  ></IconInfo>
+  <div
+    class="openContract pointer"
+    @click="openContract(cargoOwnerInfo.contractId)"
+  >
+    查看电子合同
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+import { mapState } from "vuex";
+
+export default {
+  computed: mapState(["cargoOwnerInfo"]),
+  setup() {
+    function init() {}
+
+    function openContract(contractId = 1) {
+      console.log("查看电子合同:", contractId);
+    }
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+      openContract,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.openContract {
+  width: 328px;
+  height: 30px;
+  line-height: 30px;
+  border: 1px solid #4f7879;
+  margin: 24px auto;
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  text-align: center;
+}
+</style>