更新 航次详情,运输记录-样式

miniprogram/pages/voyages/detail/detail.js

@@ -9,7 +9,7 @@ import {
 Page({
   data: {
     id: '',
-    tab: 1,
+    tab: 2,
     shipDischargeCurrentPage: 1,
     truckLoadCurrentPage: 1,
     coordinates: [],

miniprogram/pages/voyages/detail/detail.wxml

@@ -70,115 +70,155 @@
   </view>
   <view class="type2" wx:if="{{tab==2}}">
     <view class="line">
-      <view class="line-full-item">
-        <view class="line-full-title">到达装货港时间:</view>
-        <picker disabled="{{tab2disabled}}" mode="date" model:value="{{arrivalLoadPortTime}}" style="width: 40vw;">
-          <view>
-            {{arrivalLoadPortTime ||"请选择"}}
-          </view>
-        </picker>
+      <view class="line-full-item jcsb">
+        <view class="df">
+          <view class="line-full-title">到达装货港时间:</view>
+          <picker class="" disabled="{{tab2disabled}}" mode="date" model:value="{{arrivalLoadPortTime}}">
+            <view>
+              {{arrivalLoadPortTime ||"请选择时间"}}
+            </view>
+          </picker>
+        </view>
+        <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
       </view>
     </view>
     <view class="line">
-      <view class="line-full-item">
-        <view class="line-full-title">实际货量:</view>
-        <input class="d-input" disabled="{{tab2disabled}}" model:value="{{actualLoadTons}}" type="text" style="width: 20vw;" />
-        <view style="margin-right:10rpx">{{' 吨'}}</view>
-        <input class="d-input" disabled="{{tab2disabled}}" model:value="{{actualLoadPieces}}" type="text" style="width: 10vw;" />
-        <view style="margin-right:10rpx">{{' 件'}}</view>
+      <view class="line-full-item aic jcsb">
+        <view class="df aic">
+          <view class="line-full-title">实际货量:</view>
+          <input class="d-input" disabled="{{tab2disabled}}" model:value="{{actualLoadTons}}" type="text" />
+          <view style="margin-right:10rpx;color:#333">{{' 吨'}}</view>
+        </view>
       </view>
     </view>
     <view class="line">
       <view class="line-full-item">
-        <view class="line-full-title">装货开始时间:</view>
-        <picker disabled="{{tab2disabled}}" mode="date" model:value="{{loadStartTime}}" style="width: 40vw;">
-          <view>
-            {{loadStartTime||"请选择"}}
-          </view>
-        </picker>
+        <view class="line-full-title"></view>
+        <input class="d-input" disabled="{{tab2disabled}}" model:value="{{actualLoadPieces}}" type="text" />
+        <view style="margin-right:10rpx;color:#333">{{' 件'}}</view>
       </view>
     </view>
     <view class="line">
-      <view class="line-full-item">
-        <view class="line-full-title">装货结束时间:</view>
-        <picker disabled="{{tab2disabled}}" mode="date" model:value="{{loadEndTime}}" style="width: 40vw;">
-          <view>
-            {{loadEndTime||"请选择"}}
-          </view>
-        </picker>
+      <view class="line-full-item jcsb">
+        <view class="df">
+          <view class="line-full-title">装货开始时间:</view>
+          <picker disabled="{{tab2disabled}}" mode="date" model:value="{{loadStartTime}}">
+            <view>
+              {{loadStartTime||"请选择时间"}}
+            </view>
+          </picker>
+        </view>
+        <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
+      </view>
+    </view>
+    <view class="line">
+      <view class="line-full-item jcsb">
+        <view class="df">
+          <view class="line-full-title">装货结束时间:</view>
+          <picker disabled="{{tab2disabled}}" mode="date" model:value="{{loadEndTime}}">
+            <view>
+              {{loadEndTime||"请选择时间"}}
+            </view>
+          </picker>
+        </view>
+        <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
+
       </view>
     </view>
     <view class="line">
       <view class="line-full-item">
         <view class="line-full-title">合理卸货天数:</view>
-        <input class="d-input" disabled="{{tab2disabled}}" model:value="{{reasonableUnloadingDays}}" type="text" style="width: 40vw;" />
+        <input class="d-input" disabled="{{tab2disabled}}" model:value="{{reasonableUnloadingDays}}" type="text" />
+        <view class="unit">天</view>
       </view>
     </view>
-    <view class="df aic jcsa p20" style="border-top: 1px solid #999;">
-      <view wx:for="{{voyageDetails}}" wx:key="portId" class="tabsview {{tab==2?'current-tab':''}}" bindtap="changeDischargeTab" data-index="{{index}}" style="color:{{currentDischargeIndex==index?'#0d8fcc':''}};border-bottom:{{currentDischargeIndex==index?'2rpx solid #0d8fcc':''}}">{{item.portName}}</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>
-    <view class="line" style="padding: 20rpx 0 10rpx 0;border-top: 1px solid grey;margin-top: 10rpx;">
-      {{voyageDetails[currentDischargeIndex].portName}} # {{currentDischargeIndex+1}}
+    <view class="line">
+      <view class="line-full-item jcsb">
+        <view class="df aic">
+          <view class="line-full-title">开航时间:</view>
+          <picker bindchange="bindDischargePortChange" data-index="{{currentDischargeIndex}}" data-param="setSailTime" disabled="{{tab2disabled}}" mode="date" value="{{voyageDetails[currentDischargeIndex].setSailTime}}">
+            <view>
+              {{voyageDetails[currentDischargeIndex].setSailTime||"请选择时间"}}
+            </view>
+          </picker>
+        </view>
+        <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
+
+      </view>
     </view>
     <view class="line">
-      <view class="line-full-item">
-        <view class="line-full-title">开航时间:</view>
-        <picker bindchange="bindDischargePortChange" data-index="{{currentDischargeIndex}}" data-param="setSailTime" disabled="{{tab2disabled}}" mode="date" value="{{voyageDetails[currentDischargeIndex].setSailTime}}" style="width: 40vw;">
-          <view>
-            {{voyageDetails[currentDischargeIndex].setSailTime||"请选择"}}
-          </view>
-        </picker>
+      <view class="line-full-item jcsb">
+        <view class="df aic">
+          <view class="line-full-title">预计到港时间:</view>
+          <picker bindchange="bindDischargePortChange" data-index="{{currentDischargeIndex}}" data-param="expectedArrivalTime" disabled="{{tab2disabled}}" mode="date" value="{{voyageDetails[currentDischargeIndex].expectedArrivalTime}}">
+            <view>
+              {{voyageDetails[currentDischargeIndex].expectedArrivalTime||"请选择时间"}}
+            </view>
+          </picker>
+        </view>
+        <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
+
       </view>
     </view>
     <view class="line">
-      <view class="line-full-item">
-        <view class="line-full-title">预计到港时间:</view>
-        <picker bindchange="bindDischargePortChange" data-index="{{currentDischargeIndex}}" data-param="expectedArrivalTime" disabled="{{tab2disabled}}" mode="date" value="{{voyageDetails[currentDischargeIndex].expectedArrivalTime}}" style="width: 40vw;">
-          <view>
-            {{voyageDetails[currentDischargeIndex].expectedArrivalTime||"请选择"}}
-          </view>
-        </picker>
+      <view class="line-full-item jcsb">
+        <view class="df aic">
+          <view class="line-full-title">实际到港时间:</view>
+          <picker bindchange="bindDischargePortChange" data-index="{{currentDischargeIndex}}" data-param="actualArrivalTime" disabled="{{tab2disabled}}" mode="date" value="{{voyageDetails[currentDischargeIndex].actualArrivalTime}}">
+            <view>
+              {{voyageDetails[currentDischargeIndex].actualArrivalTime||"请选择时间"}}
+            </view>
+          </picker>
+        </view>
+        <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
       </view>
     </view>
     <view class="line">
-      <view class="line-full-item">
-        <view class="line-full-title">实际到港时间:</view>
-        <picker bindchange="bindDischargePortChange" data-index="{{currentDischargeIndex}}" data-param="actualArrivalTime" disabled="{{tab2disabled}}" mode="date" value="{{voyageDetails[currentDischargeIndex].actualArrivalTime}}" style="width: 40vw;">
-          <view>
-            {{voyageDetails[currentDischargeIndex].actualArrivalTime||"请选择"}}
-          </view>
-        </picker>
+      <view class="line-full-item jcsb">
+        <view class="df aic">
+          <view class="line-full-title">卸货开始时间:</view>
+          <picker bindchange="bindDischargePortChange" data-index="{{currentDischargeIndex}}" data-param="dischargeStartTime" disabled="{{tab2disabled}}" mode="date" value="{{voyageDetails[currentDischargeIndex].dischargeStartTime}}">
+            <view>
+              {{voyageDetails[currentDischargeIndex].dischargeStartTime||"请选择时间"}}
+            </view>
+          </picker>
+        </view>
+
+        <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
       </view>
     </view>
     <view class="line">
-      <view class="line-full-item">
-        <view class="line-full-title">卸货开始时间:</view>
-        <picker bindchange="bindDischargePortChange" data-index="{{currentDischargeIndex}}" data-param="dischargeStartTime" disabled="{{tab2disabled}}" mode="date" value="{{voyageDetails[currentDischargeIndex].dischargeStartTime}}" style="width: 40vw;">
-          <view>
-            {{voyageDetails[currentDischargeIndex].dischargeStartTime||"请选择"}}
-          </view>
-        </picker>
+      <view class="line-full-item jcsb">
+        <view class="df aic">
+          <view class="line-full-title">卸货结束时间:</view>
+          <picker bindchange="bindDischargePortChange" data-index="{{currentDischargeIndex}}" data-param="dischargeEndTime" disabled="{{tab2disabled}}" mode="date" value="{{voyageDetails[currentDischargeIndex].dischargeEndTime}}">
+            <view>
+              {{voyageDetails[currentDischargeIndex].dischargeEndTime||"请选择时间"}}
+            </view>
+          </picker>
+        </view>
+        <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
+
       </view>
     </view>
     <view class="line">
       <view class="line-full-item">
-        <view class="line-full-title">卸货结束时间:</view>
-        <picker bindchange="bindDischargePortChange" data-index="{{currentDischargeIndex}}" data-param="dischargeEndTime" disabled="{{tab2disabled}}" mode="date" value="{{voyageDetails[currentDischargeIndex].dischargeEndTime}}" style="width: 40vw;">
-          <view>
-            {{voyageDetails[currentDischargeIndex].dischargeEndTime||"请选择"}}
-          </view>
-        </picker>
+        <view class="line-full-title">实际卸货量:</view>
+        <input class="d-input" disabled="{{tab2disabled}}" bindblur="bindDischargePortChange" value="{{voyageDetails[currentDischargeIndex].actualDischargeTons}}" data-index="{{currentDischargeIndex}}" data-param="actualDischargeTons" type="text" />
+        <view class="unit">吨</view>
       </view>
     </view>
     <view class="line">
       <view class="line-full-item">
-        <view class="line-full-title">实际卸货量:</view>
-        <input class="d-input" disabled="{{tab2disabled}}" bindblur="bindDischargePortChange" value="{{voyageDetails[currentDischargeIndex].actualDischargeTons}}" data-index="{{currentDischargeIndex}}" data-param="actualDischargeTons" type="text" style="width: 20vw;" />{{' 吨'}}
-        <input class="d-input" disabled="{{tab2disabled}}" bindblur="bindDischargePortChange" value="{{voyageDetails[currentDischargeIndex].actualDischargePieces}}" data-index="{{currentDischargeIndex}}" data-param="actualDischargePieces" type="text" style="width: 10vw;" />{{' 件'}}
+        <view class="line-full-title"></view>
+        <input class="d-input" disabled="{{tab2disabled}}" bindblur="bindDischargePortChange" value="{{voyageDetails[currentDischargeIndex].actualDischargePieces}}" data-index="{{currentDischargeIndex}}" data-param="actualDischargePieces" type="text" />
+        <view class="unit">件</view>
       </view>
     </view>
-    <view class="next" bindtap="updateVoyage" style="width: 400rpx;">更新航次</view>
-    <view style="height: 30px;"></view>
+    <view class="update" bindtap="updateVoyage">更新航次</view>
   </view>
   <view class="p30" wx:if="{{tab==4}}">
     <view>保险单</view>
@@ -199,7 +239,7 @@
     <scroll-view scroll-x="{{true}}" style="white-space: nowrap;">
       <view class="{{['port-btns',currentPortId == item.portId?'current-port-btn':'','mr20']}}" wx:for="{{voyageDetails}}" bindtap="changePort" wx:key="portId" data-id="{{item.portId}}">{{item.portName}}</view>
     </scroll-view>
-    <view class="df aic jcsb pb20" style="border-bottom: 2rpx solid #ddd;">
+    <view class="df aic jcsb pb20">
       <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>

miniprogram/pages/voyages/detail/detail.wxss

@@ -40,7 +40,7 @@
   padding-bottom: 50rpx;
   background: #FFFFFF;
   border-radius: 12rpx;
-  padding: 40rpx 30rpx;
+  padding: 0 30rpx 40rpx 30rpx;
 }
 
 .line {
@@ -89,12 +89,6 @@
   left: calc(50vw - 320rpx);
 }
 
-picker,
-.d-input {
-  border: 1rpx solid grey;
-  padding: 0rpx 10rpx;
-}
-
 .upload {
   width: 60%;
   height: 100rpx;
@@ -136,4 +130,92 @@ picker,
   color: #20252E;
   height: 102rpx;
   border-right: 1rpx solid rgba(0, 0, 0, 0.25);
+}
+
+.type2 .line-full-item {
+  padding: 32rpx 0;
+  border-bottom: 1rpx solid #EBEBEB;
+}
+
+.type2 .line {
+  margin-bottom: 0;
+  font-size: 30rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #6C6C6C;
+}
+
+.type2 .line-full-title {
+  width: 260rpx;
+  color: #20252E;
+}
+
+.arrow {
+  width: 20rpx;
+  height: 20rpx;
+  margin-right: 30rpx;
+}
+
+.d-input {
+  width: 30vw;
+}
+
+.update {
+  width: 590rpx;
+  height: 96rpx;
+  background: linear-gradient(270deg, #0089FD 0%, #43A9FF 100%);
+  border-radius: 20rpx;
+  text-align: center;
+  line-height: 96rpx;
+  font-size: 34rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+  margin: 113rpx auto;
+}
+
+.type2 .unit {
+  color: #333;
+}
+
+.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;
+}
+
+picker {
+  width: 45vw;
 }