新增 航次信息卡片组件

miniprogram/app.json

@@ -69,7 +69,8 @@
   "usingComponents": {
     "RemotePicker": "/components/remotePicker/remotePicker",
     "NewPicker": "/components/newPicker/newPicker",
-    "DateBar": "/components/dateBar/dateBar"
+    "DateBar": "/components/dateBar/dateBar",
+    "VoyageCard": "/components/voyageCard/voyageCard"
   },
   "sitemapLocation": "sitemap.json",
   "style": "v2"

miniprogram/components/voyageCard/voyageCard.js

@@ -0,0 +1,30 @@
+// components/voyageCard/voyageCard.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    item: {
+      type: Object
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    status: {
+      未开航: "not-started",
+      运输中: "transit",
+      卸货中: "transit",
+      卸货完成: "unload-finish"
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

miniprogram/components/voyageCard/voyageCard.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/components/voyageCard/voyageCard.wxml

@@ -0,0 +1,15 @@
+<view class="list">
+  <view class="df jcsb aic" style="margin-bottom: 30rpx;">
+    <view class="df aic">
+      <view class="icon"></view>
+      <view class="ship-name">{{item.shipName}}</view>
+      <view class="{{status[item.transStatusName]}}">{{item.transStatusName}}</view>
+    </view>
+    <slot></slot>
+  </view>
+  <view class="df text">
+    <view class="ports">{{item.loadPort}} - {{item.discPort}}</view>
+    <view class="shu">丨</view>
+    <view class="cargo">{{item.cargo}}</view>
+  </view>
+</view>

miniprogram/components/voyageCard/voyageCard.wxss

@@ -0,0 +1,153 @@
+view {
+  box-sizing: border-box;
+}
+
+.df {
+  display: flex;
+}
+
+.aic {
+  align-items: center;
+}
+
+.jcsb {
+  justify-content: space-between;
+}
+
+.search {
+  width: 686rpx;
+  height: 76rpx;
+  background: #FFFFFF;
+  box-shadow: 0px 3rpx 9rpx 3rpx rgba(92, 123, 111, 0.26);
+  border-radius: 12rpx;
+  padding-left: 50rpx;
+  color: #333;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  padding-right: 20rpx;
+}
+
+.avatar {
+  background: grey;
+  width: 52rpx;
+  height: 52rpx;
+  border-radius: 50%;
+}
+
+.tabsview {
+  height: 84rpx;
+  line-height: 84rpx;
+  font-size: 32rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #363F4A;
+}
+
+.tabsview-1 {
+  margin-left: 28rpx;
+  margin-right: 40rpx;
+}
+
+.tabs {
+  margin-bottom: 28rpx;
+}
+
+.list {
+  width: 694rpx;
+  height: 172rpx;
+  background: #FFFFFF;
+  border-radius: 12rpx;
+  padding: 32rpx;
+  margin: 0 auto;
+  margin-bottom: 10rpx;
+}
+
+.icon {
+  width: 42rpx;
+  height: 42rpx;
+  background: #0089FD;
+  border-radius: 4rpx;
+  margin-right: 20rpx;
+}
+
+.ship-name {
+  font-size: 32rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #20252E;
+  margin-right: 30rpx;
+}
+
+.not-started {
+  width: 117rpx;
+  height: 42rpx;
+  line-height: 40rpx;
+  background: rgba(0, 137, 253, 0.13);
+  border-radius: 2rpx;
+  border: 1rpx solid #0089FD;
+  text-align: center;
+  font-size: 24rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0089FD;
+}
+
+.go-to {
+  flex: 1;
+  text-align: right;
+  font-size: 26rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0089FD;
+}
+
+.text {
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #6C6C6C;
+}
+
+.shu {
+  margin-left: 16rpx;
+}
+
+.finish {
+  width: 137px;
+  height: 42rpx;
+  background: #15E3AB;
+  border-radius: 2rpx;
+  font-size: 24rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 40rpx;
+}
+
+.transit {
+  width: 117rpx;
+  height: 42rpx;
+  background: rgba(17, 232, 174, 0.08);
+  border-radius: 2rpx;
+  border: 1rpx solid #11E8AE;
+  font-size: 24rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #15E3AB;
+  line-height: 40rpx;
+  text-align: center;
+}
+
+.unload-finish {
+  width: 137rpx;
+  height: 42rpx;
+  background: #15E3AB;
+  border-radius: 2rpx;
+  font-size: 24rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 42rpx;
+  text-align: center;
+}