更新 创建航次-样式

miniprogram/components/localPicker/localPicker.wxml

@@ -1,5 +1,5 @@
 <picker bindchange="_selectItem" range-key='value' value="{{index}}" range="{{arr}}">
-  <view class="picker" style="color:{{arr[index].value?'#333':'#777'}}">
+  <view class="picker" style="color:{{arr[index].value?'#6C6C6C':'#777'}}">
     {{arr[index].value||placeholder}}
   </view>
 </picker>

miniprogram/components/localPicker/localPicker.wxss

@@ -1,32 +1,4 @@
-/* components/localPicker/localPicker.wxss */
-.scroll {
-  max-height: 30vh;
-  width: 50vw;
-  border: 1px solid black;
-  position: absolute;
-  top: 10rpx;
-  background: rgba(256, 256, 256, 0.5);
-  backdrop-filter: blur(3px);
-  z-index: 100;
-  padding-left: 20rpx;
-  color: #333;
-}
-
-.remote-picker-input {
-  padding-left: 20rpx;
-  border: 1px solid grey;
-  height: 80rpx;
-  width: 50vw;
-}
-
-.items {
-  line-height: 80rpx
-}
-
 .picker {
-  padding-left: 20rpx;
-  border: 1px solid grey;
   height: 80rpx;
-  line-height: 80rpx;
-  width: 50vw;
+  line-height: 84rpx;
 }

miniprogram/components/newPicker/newPicker.js

@@ -60,7 +60,7 @@ Component({
         value,
       })
       this.setData({
-        label: ''
+        label: '',
       })
       this.cancel()
     },

miniprogram/pages/voyageManage/createVoyage/createVoyage.js

@@ -12,11 +12,15 @@ Page({
     dischargePorts: [{}],
     voyage: {},
     startTime: '',
-    currentCargoOwnerId: 0
+    currentCargoOwnerId: 0,
+    currentShipName: ''
   },
   selectShip(e) {
-    console.log(e)
+
     this.data.voyage.shipId = e.detail.value
+    this.setData({
+      currentShipName: e.detail.label
+    })
   },
   selectCargoOwner(e) {
     this.data.voyage.cargoOwnerId = e.detail.value
@@ -39,6 +43,9 @@ Page({
   selectLoadPort(e) {
     this.data.voyage.loadPortId = e.detail.value
     this.data.voyage.loadPort = e.detail.label
+    this.setData({
+      loadPort: e.detail.label
+    })
   },
   selectDiscPort(e) {
     console.log(e)
@@ -46,11 +53,20 @@ Page({
       label: dischargePort,
       value: id
     } = e.detail
-    this.data.dischargePorts[e.currentTarget.dataset.index] = {
-      dischargePort,
-      id,
-      reasonableUnloadingDays: 0
+    if (e.currentTarget.dataset.index || e.currentTarget.dataset.index == 0) {
+      this.data.dischargePorts[e.currentTarget.dataset.index] = {
+        dischargePort,
+        id,
+        reasonableUnloadingDays: 0
+      }
+    } else {
+      this.data.dischargePorts.push({
+        dischargePort,
+        id,
+        reasonableUnloadingDays: 0
+      })
     }
+
     this.setData({
       dischargePorts: this.data.dischargePorts,
     })
@@ -103,7 +119,7 @@ Page({
       })
       return
     }
-    if (!this.data.dischargePorts.length) {
+    if (!this.data.dischargePorts[0].id) {
       wx.showToast({
         title: '请添加卸货港',
         icon: "error"

miniprogram/pages/voyageManage/createVoyage/createVoyage.wxml

@@ -1,64 +1,90 @@
-<view style="padding-top: 80rpx;">
-  <view class="df aic jcsb line">
-    <view>选择船舶</view>
-    <view>
-      <view wx:if="{{voyage.shipName}}">{{voyage.shipName}}</view>
-      <NewPicker wx:else placeholder="请搜索船舶" bind:selectItem="selectShip" url="/ship/select" params="{{defaultParams}}"></NewPicker>
+<view class="type2">
+  <view class="line">
+    <view class="line-full-item jcsb">
+      <view class="df">
+        <view class="line-full-title">选择船舶</view>
+        <NewPicker placeholder="请搜索船舶" bind:selectItem="selectShip" url="/ship/select" params="{{defaultParams}}" value="{{currentShipName}}"></NewPicker>
+      </view>
+      <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
     </view>
   </view>
-  <view class="df aic jcsb line">
-    <view>选择货主</view>
-    <view>
-      <LocalPicker autoGet placeholder="请选择货主" bind:selectItem="selectCargoOwner" url="/user/cargoOwner/select" params="{{defaultParams}}"></LocalPicker>
+  <view class="line">
+    <view class="line-full-item jcsb" style="padding: 10rpx 0;">
+      <view class="df aic">
+        <view class="line-full-title">选择货主</view>
+        <view>
+          <LocalPicker autoGet placeholder="请选择货主" bind:selectItem="selectCargoOwner" url="/user/cargoOwner/select" params="{{defaultParams}}"></LocalPicker>
+        </view>
+      </view>
+      <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
     </view>
   </view>
-  <view class="df aic jcsb line" wx:if="{{currentCargoOwnerId}}">
-    <view>选择货种</view>
-    <view>
-      <LocalPicker id="cargoCmp" placeholder="请选择货种" bind:selectItem="selectCargo" url="/cargo/select"></LocalPicker>
+  <view class="line" wx:if="{{currentCargoOwnerId}}">
+    <view class="line-full-item jcsb" style="padding: 10rpx 0;">
+      <view class="df aic">
+        <view class="line-full-title">选择货种</view>
+        <view>
+          <LocalPicker id="cargoCmp" placeholder="请选择货种" bind:selectItem="selectCargo" url="/cargo/select"></LocalPicker>
+        </view>
+      </view>
+      <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
     </view>
   </view>
-  <view class="df aic jcsb line">
-    <view>装货港</view>
-    <view>
-      <NewPicker placeholder="选择装货港" bind:selectItem="selectLoadPort" url="/port/getCol"></NewPicker>
+  <view class="line">
+    <view class="line-full-item jcsb">
+      <view class="df aic">
+        <view class="line-full-title">装货港</view>
+        <view>
+          <NewPicker placeholder="选择装货港" value="{{loadPort}}" bind:selectItem="selectLoadPort" url="/port/getCol"></NewPicker>
+        </view>
+      </view>
+      <image class="arrow" src="../../../images/newUI/right-arrow.png"></image>
     </view>
   </view>
-  <view class="df aic jcsb line" wx:for="{{dischargePorts}}" wx:key="key">
+  <view class="line" wx:for="{{dischargePorts}}" wx:key="key">
+    <view class="line-full-item jcsb" style="position: relative;">
+      <view class="df aic">
+        <view class="line-full-title">卸货港 #{{index+1}}</view>
+        <view>
+          <NewPicker placeholder="选择卸货港" id="{{'disc'+index}}" style="width: 200rpx;" bind:selectItem="selectDiscPort" value="{{dischargePorts[index].dischargePort}}" data-index="{{index}}" url="/port/getCol"></NewPicker>
+        </view>
+      </view>
+      <image wx:if="{{dischargePorts[0].id}}" bindtap="deleteDischargePort" data-index="{{index}}" src="../../../images/newUI/delete.png" class="delete"></image>
+    </view>
+  </view>
+  <!-- <view class="df aic line" wx:for="{{dischargePorts}}" wx:key="key">
     <view>卸货港 #{{index+1}}</view>
     <view>
       <NewPicker placeholder="输入卸货港" id="{{'disc'+index}}" style="width: 200rpx;" bind:selectItem="selectDiscPort" data-index="{{index}}" url="/port/getCol"></NewPicker>
     </view>
-    <image bindtap="deleteDischargePort" data-index="{{index}}" src="../../../images/delete.png" class="delete"></image>
-  </view>
-  <view wx:if="{{dischargePorts[dischargePorts.length - 1]}}" class="df aic jcsb line">
+    <image bindtap="deleteDischargePort" data-index="{{index}}" src="../../../images/delete.png" cl ass="delete"></image>
+  </view> -->
+  <view wx:if="{{dischargePorts[0].id}}" class="line-full-item line jcsb" style="padding-top: 10rpx;">
     <view></view>
-    <view class="next" bindtap="addDischargePort" style="padding:0 30rpx;height: 70rpx;line-height: 70rpx;font-size: 30rpx;margin: 0;">添加卸货港</view>
+    <NewPicker placeholder="添加卸货港" inputStyle="width: 140rpx;height: 40rpx;font-size: 28rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #0089FD;line-height: 40rpx;text-align:center" bind:selectItem="selectDiscPort" url="/port/getCol"></NewPicker>
   </view>
-  <view class="df aic jcsb line">
-    <view>货量</view>
-    <view class="df aic">
-      <view class="df aic mr30"><input style="width: 150rpx;padding-left: 20rpx;border: 1px solid grey;height: 80rpx;" model:value="{{tons}}" type="digit" placeholder="必填" />
-        <view class="ml20">吨</view>
-      </view>
-      <view class="df aic"><input style="width: 100rpx;padding-left: 20rpx;border: 1px solid grey;height: 80rpx;" model:value="{{pieces}}" type="number" placeholder="" />
-        <view class="ml20">件</view>
+  <view class="line">
+    <view class="line-full-item aic jcsb">
+      <view class="df aic">
+        <view class="line-full-title">货量</view>
+        <input class="d-input" model:value="{{tons}}" type="text" />
+        <view style="margin-right:10rpx;color:#333">{{' 吨'}}</view>
       </view>
     </view>
   </view>
-  <view class="df aic jcsb line">
-    <view>合理卸货天数</view>
-    <view>
-      <input style="width: 50vw;padding-left: 10px;border: 1px solid grey;height: 40px;" model:value="{{reasonableUnloadingDays}}" type="number" placeholder="必填" />
+  <view class="line">
+    <view class="line-full-item">
+      <view class="line-full-title"></view>
+      <input class="d-input" model:value="{{pieces}}" type="text" />
+      <view style="margin-right:10rpx;color:#333">{{' 件'}}</view>
     </view>
   </view>
-  <!-- <view class="df aic jcsb line">
-    <view>开始时间</view>
-    <picker mode="date" model:value="{{startTime}}" style="border: 1px solid grey;height: 80rpx;width: 50vw;padding-left: 20rpx;">
-      <view style="color: grey;line-height: 80rpx;background: none;">
-        {{startTime||'选择开始时间'}}
-      </view>
-    </picker>
-  </view> -->
-  <view bindtap="createVoyage" class="next">创建航次</view>
-</view>
+  <view class="line">
+    <view class="line-full-item">
+      <view class="line-full-title">合理卸货天数</view>
+      <input class="d-input" model:value="{{reasonableUnloadingDays}}" type="number" />
+      <view class="unit">天</view>
+    </view>
+  </view>
+</view>
+<view bindtap="createVoyage" class="update">创建航次</view>

miniprogram/pages/voyageManage/createVoyage/createVoyage.wxss

@@ -1,39 +1,292 @@
-/* pages/voyageManage/createVoyage/createVoyage.wxss */
+.cancel-voyage {
+  width: 100vw;
+  height: 80rpx;
+  background: rgba(255, 100, 47, 0.15);
+  text-align: center;
+  line-height: 80rpx;
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FF6E38;
+  position: fixed;
+  top: 0;
+  z-index: 100;
+}
 
-.line {
-  width: 80%;
-  margin: 30rpx auto;
+
+.tabsview {
+  height: 80rpx;
+  line-height: 84rpx;
   font-size: 28rpx;
-  position: relative;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #9199A3;
 }
 
-/* .line view {
-  line-height: 48rpx;
+.current-tab {
+  color: #363F4A;
+  border-bottom: 6rpx solid #0089FD;
+  font-size: 32rpx;
+
 }
 
-.line input {
-  border: 1px solid grey;
-  height: 80rpx;
-  width: 50vw;
-} */
+.scroll {
+  width: 100vw;
+  background: #FFFFFF;
+  border-radius: 12rpx;
+  height: calc(100vh - 410rpx);
+  font-size: 28rpx;
+  color: #222;
+  padding-bottom: 50rpx;
+  background: #FFFFFF;
+  border-radius: 12rpx;
+  padding: 0 30rpx 40rpx 30rpx;
+}
+
+.line {
+  margin-bottom: 20rpx;
+}
+
+.line-full-item {
+  display: flex;
+  align-items: center;
+}
+
+.line-full-title {
+  width: 240rpx;
+  font-size: 30rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #BDC2C8;
+}
+
+.line-text {
+  flex: 1;
+  font-size: 30rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #6C6C6C;
+}
+
+
+.mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 101;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.mask>view {
+  width: 640rpx;
+  height: 362rpx;
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  position: fixed;
+  top: 358rpx;
+  left: calc(50vw - 320rpx);
+}
 
-.next {
+.upload {
+  width: 60%;
+  height: 100rpx;
   text-align: center;
+  line-height: 100rpx;
+  border: 1px solid grey;
+  margin: 3vw auto;
+}
+
+.ship-owner-title {
   width: 300rpx;
-  height: 80rpx;
-  line-height: 80rpx;
-  color: #fff;
-  background: #0094FE;
-  border-radius: 10rpx;
-  margin: 0 auto;
-  margin-top: 5vh;
+  text-align: center;
+  font-size: 34rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #20252E;
+  margin: 40rpx auto;
+}
+
+.btns {
+  height: 113rpx;
+  border-bottom-left-radius: 10rpx;
+  border-bottom-right-radius: 10rpx;
+  border-top: 1rpx solid rgba(0, 0, 0, 0.25);
+  margin-top: 50rpx;
+}
+
+.btn {
+  width: 50%;
+  line-height: 100rpx;
+  font-size: 34rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0089FD;
+  text-align: center;
+}
+
+.btn-1 {
+  color: #20252E;
+  height: 102rpx;
+  border-right: 1rpx solid rgba(0, 0, 0, 0.25);
+}
+
+.type2 {
+  padding: 0 30rpx;
+}
+
+.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: 200rpx;
+  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;
+}
+
+.info-types {
+  margin-bottom: 33rpx;
+}
+
+.info-types>view {
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+}
+
+.current-type {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  color: #239AFE !important;
+}
+
+.th {
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #BDC2C8;
+  margin-bottom: 22rpx;
+}
+
+.td {
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #363F4A;
+  margin-bottom: 20rpx;
+}
+
+.tr {
+  text-align: center;
+}
+
+.tr-time {
+  width: 170rpx;
+}
+
+.tr-2 {
+  min-width: 56rpx;
+}
+
+.tr-3 {
+  width: 90rpx;
+}
+
+.tr-4 {
+  width: 112rpx;
+}
+
+.tr-car-num {
+  min-width: 160rpx;
+}
+
+.no-data {
+  text-align: center;
+  color: #9199A3;
 }
 
 .delete {
   position: absolute;
-  right: 10rpx;
-  top: 14rpx;
-  width: 52rpx;
-  height: 52rpx;
+  right: 26rpx;
+  top: 40rpx;
+  width: 30rpx;
+  height: 30rpx;
   z-index: 5;
 }

miniprogram/pages/voyages/detail/detail.wxml

@@ -64,7 +64,7 @@
     <view class="line">
       <view class="line-full-item">
         <view class="line-full-title">合理卸货天数:</view>
-        <view class="line-text">{{reasonableUnloadingDays}}</view>
+        <view class="line-text">{{reasonableUnloadingDays}} <text>天</text> </view>
       </view>
     </view>
   </view>
@@ -128,7 +128,7 @@
     <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" />
+        <input class="d-input" disabled="{{tab2disabled}}" model:value="{{reasonableUnloadingDays}}" type="number" />
         <view class="unit">天</view>
       </view>
     </view>