新增 多港口组件

miniprogram/app.json

@@ -36,8 +36,7 @@
     "navigationBarTextStyle": "black"
   },
   "tabBar": {
-    "list": [
-      {
+    "list": [{
         "pagePath": "pages/index/index",
         "text": "首页",
         "iconPath": "images/tabBar/index.png",
@@ -73,7 +72,8 @@
     "RemotePicker": "/components/remotePicker/remotePicker",
     "NewPicker": "/components/newPicker/newPicker",
     "DateBar": "/components/dateBar/dateBar",
-    "VoyageCard": "/components/voyageCard/voyageCard"
+    "VoyageCard": "/components/voyageCard/voyageCard",
+    "PortsBar": "/components/portsBar/portsBar"
   },
   "sitemapLocation": "sitemap.json",
   "style": "v2"

miniprogram/components/portsBar/portsBar.js

@@ -0,0 +1,32 @@
+// components/portsBar/portsBar.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    arr: {
+      type: Array
+    },
+    key: {
+      type: String
+    },
+    label: {
+      type: String
+    },
+    currentIndex: {
+      type: Number
+    }
+  },
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    changeTab(e) {
+      this.triggerEvent('tapTab', e.currentTarget.dataset.index)
+    }
+  }
+})

miniprogram/components/portsBar/portsBar.json

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

miniprogram/components/portsBar/portsBar.wxml

@@ -0,0 +1,3 @@
+<view class="ports df jcc">
+  <view wx:for="{{arr}}" wx:key="{{key}}" class="port {{index==0?'first-port':''}} {{index==arr.length-1?'last-port':''}} {{currentIndex==index?'current-port':''}} {{arr.length==1?'one-port':''}}" catchtap="changeTab" data-index="{{index}}">{{item[label]}}</view>
+</view>

miniprogram/components/portsBar/portsBar.wxss

@@ -0,0 +1,47 @@
+/* components/portsBar/portsBar.wxss */
+
+.ports {
+  margin: 40rpx 0 39rpx 0;
+}
+
+.ports>view {
+  width: 150rpx;
+  height: 60rpx;
+  font-size: 26rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0089FD;
+  line-height: 58rpx;
+  text-align: center;
+  border-top: 1rpx solid #0089FD;
+  border-bottom: 1rpx solid #0089FD;
+  border-left: 1rpx solid #0089FD;
+}
+
+.first-port {
+  border-radius: 20rpx 0px 0px 20rpx;
+}
+
+.last-port {
+  border-radius: 0px 20rpx 20rpx 0px;
+  border-right: 1rpx solid #0089FD;
+}
+
+.current-port {
+  color: #fff !important;
+  background: linear-gradient(270deg, #0089FD 0%, #43A9FF 100%);
+  border: none !important;
+  line-height: 60rpx;
+}
+
+.one-port {
+  border-radius: 20rpx 20rpx 20rpx 20rpx;
+}
+
+.df{
+  display: flex;
+}
+
+.jcc{
+  justify-content: center;
+}

miniprogram/pages/voyages/detail/detail.js

@@ -370,8 +370,8 @@ Page({
 
   changeDischargeTab(e) {
     let {
-      index: currentDischargeIndex
-    } = e.currentTarget.dataset
+      detail: currentDischargeIndex
+    } = e
     this.setData({
       currentDischargeIndex
     })

miniprogram/pages/voyages/detail/detail.wxml

@@ -132,9 +132,7 @@
         <view class="unit">天</view>
       </view>
     </view>
-    <view class="ports df jcc">
-      <view wx:for="{{voyageDetails}}" wx:key="portId" class="port {{index==0?'first-port':''}} {{index==voyageDetails.length-1?'last-port':''}} {{currentDischargeIndex==index?'current-port':''}} {{voyageDetails.length==1?'one-port':''}}" bindtap="changeDischargeTab" data-index="{{index}}">{{item.portName}}</view>
-    </view>
+    <PortsBar arr="{{voyageDetails}}" key="portId" currentIndex="{{currentDischargeIndex}}" label="portName" bind:tapTab="changeDischargeTab"></PortsBar>
     <view class="line">
       <view class="line-full-item jcsb">
         <view class="df aic">

project.private.config.json

@@ -58,6 +58,13 @@
           "launchMode": "default",
           "scene": null
         },
+        {
+          "name": "",
+          "pathName": "pages/voyages/detail/detail",
+          "query": "id=270",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "",
           "pathName": "pages/voyages/detail/detail",