todo:卸货信息;单据信息;我

miniprogram/app.wxss

@@ -4,7 +4,9 @@ page {
   background: #e7e6e6;
 }
 
-view {
+view,
+scroll-view,
+cover-view {
   box-sizing: border-box
 }
 

miniprogram/pages/voyages/detail/detail.js

@@ -7,7 +7,13 @@ Page({
     id: '',
     tab: 1,
     recordCurrentPage: 1,
-    dischargeCurrentPage: 1
+    dischargeCurrentPage: 1,
+    coordinates: [],
+    medias: [],
+    policys: [],
+    voyage: [],
+    waybills: [],
+    infoType:'ship'
   },
   changeTab(e) {
     let {
@@ -20,25 +26,65 @@ Page({
 
   async getVoyageDetail() {
     let res = await postApi("/voyage/detail", {
-      voyageId: this.data.id
+      voyageId: this.data.id,
+    })
+
+    let {
+      coordinates,
+      medias,
+      policys,
+      voyage,
+      waybills
+    } = res.data.result
+    this.setData({
+      coordinates,
+      medias,
+      policys,
+      voyage,
+      waybills
     })
   },
 
-  async getCarLoadRecordList() {
+  async getCarLoadRecordList(isScroll) {
     let res = await postApi("/voyage/getCarLoadRecordList", {
-      voyageId: this.data.id
+      voyageId: this.data.id,
+      size: 10,
+      currentPage: this.data.recordCurrentPage
     })
   },
 
-  async getDischargeList() {
+  async getDischargeList(isScroll) {
     let res = await postApi("/voyage/getDischargeList", {
-      voyageId: this.data.id
+      voyageId: this.data.id,
+      size: 10,
+      currentPage: this.data.dischargeCurrentPage
     })
   },
+
+  previewImage(e) {
+    let {
+      src
+    } = e.currentTarget.dataset
+    wx.previewImage({
+      current: src, // 当前显示图片的http链接
+      urls: [src] // 需要预览的图片http链接列表
+    })
+  },
+
+  changeInfoType(e){
+    let {type} = e.currentTarget.dataset
+    this.setData({
+      infoType:type
+    })
+  },
+
+
   onLoad(options) {
     this.setData({
       id: options.id
     })
     this.getVoyageDetail()
+    this.getCarLoadRecordList()
+    this.getDischargeList()
   },
 })

miniprogram/pages/voyages/detail/detail.wxml

@@ -1,8 +1,155 @@
 <map style="width: 100%;height: 400rpx;" name="map"></map>
-<view class="df aic jcsb p20">
+<view class="df aic jcsb p20" style="border-bottom: 1px solid #999;border-top: 1px solid #999;">
   <view class="tabsview" bindtap="changeTab" data-tab="{{1}}" style="color:{{tab==1?'#0d8fcc':''}};border-bottom:{{tab==1?'2rpx solid #0d8fcc':''}}">航次信息</view>
   <view class="tabsview" bindtap="changeTab" data-tab="{{2}}" style="color:{{tab==2?'#0d8fcc':''}};border-bottom:{{tab==2?'2rpx solid #0d8fcc':''}}">航次详情</view>
   <view class="tabsview" bindtap="changeTab" data-tab="{{3}}" style="color:{{tab==3?'#0d8fcc':''}};border-bottom:{{tab==3?'2rpx solid #0d8fcc':''}}">单据信息</view>
   <view class="tabsview" bindtap="changeTab" data-tab="{{4}}" style="color:{{tab==4?'#0d8fcc':''}};border-bottom:{{tab==4?'2rpx solid #0d8fcc':''}}">卸货信息</view>
   <view class="tabsview" bindtap="changeTab" data-tab="{{5}}" style="color:{{tab==5?'#0d8fcc':''}};border-bottom:{{tab==5?'2rpx solid #0d8fcc':''}}">航次照片</view>
-</view>
+</view>
+<scroll-view scroll-y="true" style="padding: 30rpx 50rpx;font-size: 28rpx;color:#222">
+  <view wx:if="{{tab==1}}">
+    <view class="line">
+      <view class="line-full-item">
+        <view class="line-full-title">航次名称:</view>
+        <view class="line-full-text">{{voyage.voyageName}}</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-item">
+        <view class="line-title">船舶名称:</view>
+        <view class="line-text">{{voyage.shipName}}</view>
+      </view>
+      <view class="line-item">
+        <view class="line-title">MMSI:</view>
+        <view class="line-text">{{voyage.shipMmsi}}</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-item">
+        <view class="line-title">装货港:</view>
+        <view class="line-text">{{voyage.loadPort}}</view>
+      </view>
+      <view class="line-item">
+        <view class="line-title">卸货港:</view>
+        <view class="line-text">{{voyage.dischargeProt}}</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-item">
+        <view class="line-title">货种:</view>
+        <view class="line-text">{{voyage.cargo}}</view>
+      </view>
+      <view class="line-item">
+        <view class="line-title">吨位:</view>
+        <view class="line-text">{{voyage.tons}}</view>
+      </view>
+    </view>
+  </view>
+  <view class="type2" wx:if="{{tab==2}}">
+    <view class="line">
+      <view class="line-full-item">
+        <view class="line-full-title">到达装货港时间:</view>
+        <view class="line-full-text">{{voyage.arrivalLoadPortTime}}</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-full-item">
+        <view class="line-full-title">实际货量:</view>
+        <view class="line-full-text">{{voyage.actualLoadTons}}吨-{{voyage.actualLoadPieces}}件</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-full-item">
+        <view class="line-full-title">装货开始时间:</view>
+        <view class="line-full-text">{{voyage.loadStartTime}}</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-full-item">
+        <view class="line-full-title">装货结束时间:</view>
+        <view class="line-full-text">{{voyage.loadEndTime}}</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-full-item">
+        <view class="line-full-title">开航时间:</view>
+        <view class="line-full-text">{{voyage.setSailTime}}</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-full-item">
+        <view class="line-full-title">预计到港时间:</view>
+        <view class="line-full-text">{{voyage.expectedArrivalTime}}</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-full-item">
+        <view class="line-full-title">实际到港时间:</view>
+        <view class="line-full-text">{{voyage.actualArrivalTime}}</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-full-item">
+        <view class="line-full-title">卸货开始时间:</view>
+        <view class="line-full-text">{{voyage.dischargeStartTime}}</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-full-item">
+        <view class="line-full-title">卸货结束时间:</view>
+        <view class="line-full-text">{{voyage.dischargeEndTime}}</view>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-full-item">
+        <view class="line-full-title">实际卸货量:</view>
+        <view class="line-full-text">{{voyage.actualDischargeTons}}吨-{{voyage.actualDischargePieces}}件</view>
+      </view>
+    </view>
+  </view>
+  <view wx:if="{{tab==3}}">单据信息</view>
+  <view wx:if="{{tab==4}}">
+    <view class="df aic jcsb">
+      <view bindtap="changeInfoType" data-type="ship" style="color:{{infoType=='ship'?'#0d8fcc':''}};border-bottom:{{infoType=='ship'?'2rpx solid #0d8fcc':''}}">船舶卸货记录</view>
+      <view bindtap="changeInfoType" data-type="truck" style="color:{{infoType=='truck'?'#0d8fcc':''}};border-bottom:{{infoType=='truck'?'2rpx solid #0d8fcc':''}}">汽车装货记录</view>
+    </view>
+    <view wx:if="{{infoType=='ship'}}">
+      <view class="df aic jcsb">
+        <view>卸货时间</view>
+        <view>卸货吨位</view>
+        <view>卸货件数</view>
+        <view>磅单</view>
+      </view>
+      <view wx:for="{{shipDischargeList}}" class="df aic jcsb">
+        <view></view>
+        <view></view>
+        <view></view>
+        <view></view>
+      </view>
+    </view>
+    <view wx:if="{{infoType=='truck'}}">
+      <view class="df aic jcsb">
+        <view>车号</view>
+        <view>毛重</view>
+        <view>皮重</view>
+        <view>净重</view>
+        <view>称重时间</view>
+        <view>单据</view>
+      </view>
+      <view wx:for="{{truckLoadList}}" class="df aic jcsb">
+        <view></view>
+        <view></view>
+        <view></view>
+        <view></view>
+        <view></view>
+        <view></view>
+      </view>
+    </view>
+  </view>
+  <view wx:if="{{tab==5}}">
+    <view wx:for="{{medias}}" wx:key="index" style="margin-bottom:50rpx;">
+      <view style="color: #0c81b8;padding-bottom: 10rpx;margin-bottom: 20rpx; border-bottom: 4rpx dashed rgb(197, 194, 194);">{{item.createTime}}</view>
+      <image data-src="{{item.viewUrl}}" bindtap="previewImage" src="{{item.viewUrl}}" style="width: 90%;" mode="aspectFit"></image>
+    </view>
+  </view>
+</scroll-view>

miniprogram/pages/voyages/detail/detail.wxss

@@ -47,4 +47,44 @@ page {
   font-size: 28rpx;
   text-align: center;
   color: #333;
+}
+
+.line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30rpx;
+  color: #333;
+}
+
+.line-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 45%;
+}
+
+.line-full-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.line-full-title {
+  width: 25%;
+}
+
+
+.line-title,
+.line-text {
+  width: 50%;
+}
+
+.line-title,
+.line-full-title {
+  color: #444;
+}
+
+.type2 .line-full-title {
+  width: 50%;
 }