更新 创建航次;搜索选择组件

miniprogram/app.json

@@ -61,6 +61,9 @@
       "desc": "你的位置信息将用于小程序位置接口的效果展示"
     }
   },
+  "useExtendedLib": {
+    "weui": true
+  },
   "sitemapLocation": "sitemap.json",
   "style": "v2"
 }

miniprogram/app.wxss

@@ -1,7 +1,9 @@
 page,
 view,
 scroll-view,
-cover-view {
+cover-view,
+input,
+picker {
   box-sizing: border-box
 }
 

miniprogram/components/remotePicker/remotePicker.js

@@ -17,17 +17,18 @@ Component({
     label: '',
   },
   methods: {
-    async getList() {
+    async _getList() {
       let res = await postApi(this.data.url, {
         ...this.data.params,
         term: this.data.label
       })
       this.setData({
-        arr: res.data.result
+        arr: res.data.result,
+        label: ''
       })
       console.log(res)
     },
-    selectItem(e) {
+    _selectItem(e) {
       let {
         label,
         value
@@ -37,6 +38,22 @@ Component({
         value,
         arr: []
       })
+
+      this.triggerEvent('selectItem', {
+        label,
+        value
+      })
+
+    },
+    _handlerOne() {
+      this.setData({
+        arr: []
+      })
+    },
+    _clear(){
+      this.setData({
+        label:''
+      })
     }
   }
 })

miniprogram/components/remotePicker/remotePicker.wxml

@@ -1,9 +1,11 @@
 <!--components/remotePicker/remotePicker.wxml-->
-<input model:value="{{label}}" confirm-type="search" type="text" placeholder="模糊搜索" bindconfirm="getList" />
-<view style="position: relative;">
-  <scroll-view wx:if="{{arr.length}}" scroll-y="true" class="scroll">
-    <view wx:for="{{arr}}" bindtap="selectItem" data-label="{{item.value}}" data-value="{{item.key}}">
-      {{item.value}}
-    </view>
-  </scroll-view>
+<view bindtap="_handlerOne" capture-bind:tap="_handlerOne">
+  <input model:value="{{label}}" confirm-type="search" type="text" placeholder="模糊搜索" bindconfirm="_getList" class="remote-picker-input" />
+  <view style="position: relative;">
+    <scroll-view wx:if="{{arr.length}}" scroll-y="true" class="scroll">
+      <view wx:for="{{arr}}" bindtap="_selectItem" data-label="{{item.value}}" data-value="{{item.key}}">
+        {{item.value}}
+      </view>
+    </scroll-view>
+  </view>
 </view>

miniprogram/components/remotePicker/remotePicker.wxss

@@ -8,4 +8,10 @@
   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;
 }

miniprogram/pages/voyageManage/createVoyage/createVoyage.js

@@ -1,8 +1,79 @@
 // pages/voyageManage/createVoyage/createVoyage.js
 Page({
   data: {
-    shipParams: {
+    defaultParams: {
       loginAccountId: wx.getStorageSync('loginAccountId')
+    },
+    dischargePorts: [''],
+    dischargePortIds: [''],
+    voyage: {},
+    startTime: ''
+  },
+  selectShip(e) {
+    console.log(e)
+    this.data.voyage.shipId = e.detail.value
+  },
+  selectCargoOwner(e) {
+    this.data.voyage.cargoOwnerId = e.detail.value
+  },
+  selectCargo(e) {
+    this.data.voyage.cargo = e.detail.value
+  },
+  selectLoadPort(e) {
+    this.data.voyage.loadPortId = e.detail.value
+    this.data.voyage.loadPort = e.detail.label
+  },
+  selectDiscPort(e) {
+    this.data.dischargePortIds[e.currentTarget.dataset.index] = e.detail.value
+    this.data.dischargePorts[e.currentTarget.dataset.index] = e.detail.label
+    this.setData({
+      dischargePorts: this.data.dischargePorts,
+      dischargePortIds: this.data.dischargePortIds
+    })
+  },
+  addDischargePort() {
+    let dischargePorts = this.data.dischargePorts
+    let dischargePortIds = this.data.dischargePortIds
+    dischargePorts.push('')
+    dischargePortIds.push('')
+    this.setData({
+      dischargePortIds,
+      dischargePorts
+    })
+  },
+  deleteDischargePort(e) {
+    let dischargePorts = this.data.dischargePorts
+    let dischargePortIds = this.data.dischargePortIds
+    if (dischargePorts.length == 1) {
+      dischargePortIds = ['']
+      dischargePorts = ['']
+      this.selectComponent('#disc0')._clear()
+    } else {
+      dischargePorts.splice(e.currentTarget.dataset.index, 1)
+      dischargePortIds.splice(e.currentTarget.dataset.index, 1)
     }
+
+    this.setData({
+      dischargePortIds,
+      dischargePorts
+    })
   },
+  createVoyage() {
+    let dischargePortIds = this.data.dischargePortIds.filter(item => {
+      return item
+    })
+    let dischargePorts = this.data.dischargePorts.filter(item => {
+      return item
+    })
+    let startTime = this.data.startTime.replaceAll('-', '/')
+    let postData = {
+      ...this.data.voyage,
+      loginAccountId: wx.getStorageSync('loginAccountId'),
+      dischargePortIds: dischargePortIds.join(','),
+      dischargePorts: dischargePorts.join(','),
+      startTime
+    }
+
+    console.log(postData)
+  }
 })

miniprogram/pages/voyageManage/createVoyage/createVoyage.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
-    "RemotePicker": "/components/remotePicker/remotePicker"
+    "RemotePicker": "/components/remotePicker/remotePicker",
+    "mp-searchbar": "weui-miniprogram/searchbar/searchbar"
   },
   "navigationBarTitleText": "创建航次"
 }

miniprogram/pages/voyageManage/createVoyage/createVoyage.wxml

@@ -1,28 +1,58 @@
-<view class="df jcsb line">
-  <view>选择船舶</view>
-  <view>
-    <RemotePicker url="/ship/select" params="{{shipParams}}"></RemotePicker>
-  </view>
-</view>
-<view class="df jcsb line">
-  <view>选择货主</view>
-  <view><input model:value="{{shipId}}" type="text" placeholder="必填" /></view>
-</view>
-<view class="df jcsb line">
-  <view>选择货种</view>
-  <view>
-    <RemotePicker url="/cargo/select"></RemotePicker>
-  </view>
-</view>
-<view class="df jcsb line">
-  <view>装货港</view>
-  <view><input model:value="{{shipId}}" type="text" placeholder="必填" /></view>
-</view>
-<view class="df jcsb line">
-  <view>卸货港</view>
-  <view><input model:value="{{shipId}}" type="text" placeholder="必填" /></view>
-</view>
-<view class="df jcsb line">
-  <view>货量</view>
-  <view><input model:value="{{shipId}}" type="text" placeholder="必填" /></view>
+<view>
+  <view class="df jcsb line">
+    <view>选择船舶</view>
+    <view>
+      <RemotePicker bind:selectItem="selectShip" url="/ship/select" params="{{defaultParams}}"></RemotePicker>
+    </view>
+  </view>
+  <view class="df jcsb line">
+    <view>选择货主</view>
+    <view>
+      <RemotePicker bind:selectItem="selectCargoOwner" url="/user/cargoOwner/select" params="{{defaultParams}}"></RemotePicker>
+    </view>
+  </view>
+  <view class="df jcsb line">
+    <view>选择货种</view>
+    <view>
+      <RemotePicker bind:selectItem="selectCargo" url="/cargo/select"></RemotePicker>
+    </view>
+  </view>
+  <view class="df jcsb line">
+    <view>装货港</view>
+    <view>
+      <RemotePicker bind:selectItem="selectLoadPort" url="/port/backstage/getCol"></RemotePicker>
+    </view>
+  </view>
+  <view class="df jcsb line" wx:for="{{dischargePorts}}">
+    <view>卸货港 #{{index+1}}</view>
+    <view>
+      <RemotePicker id="{{'disc'+index}}" style="width: 200rpx;" bind:selectItem="selectDiscPort" data-index="{{index}}" url="/port/backstage/getCol"></RemotePicker>
+    </view>
+    <image bindtap="deleteDischargePort" data-index="{{index}}" src="../../../images/delete.png" style="position: absolute;right: 10rpx;top:4rpx;width: 40rpx;height: 40rpx;z-index: 100;"></image>
+  </view>
+  <view class="df jcsb line">
+    <view></view>
+    <view class="next" wx:if="{{dischargePorts[dischargePorts.length - 1]}}" bindtap="addDischargePort" style="width: 200rpx;height: 50rpx;line-height: 50rpx;font-size: 26rpx;margin: 0;">添加卸货港</view>
+  </view>
+  <view class="df jcsb line">
+    <view>货量</view>
+    <view class="df">
+      <view class="df mr50"><input style="width: 150rpx;padding-left: 20rpx;" model:value="{{tons}}" type="text" placeholder="必填" />
+        <view class="ml10">吨</view>
+      </view>
+      <view class="df"><input style="width: 100rpx;padding-left: 20rpx;" model:value="{{pieces}}" type="text" placeholder="必填" />
+        <view class="ml10">件</view>
+      </view>
+    </view>
+  </view>
+  <view class="df jcsb line">
+    <view>开始时间</view>
+    <picker mode="date" model:value="{{startTime}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" style="border: 1px solid grey;height: 48rpx;width: 50vw;padding-left: 20rpx;">
+      <view style="color: grey;">
+        {{startTime||'选择开始时间'}}
+      </view>
+    </picker>
+  </view>
+
+  <view bindtap="createVoyage" class="next">创建航次</view>
 </view>

miniprogram/pages/voyageManage/createVoyage/createVoyage.wxss

@@ -4,6 +4,7 @@
   width: 80%;
   margin: 30rpx auto;
   font-size: 28rpx;
+  position: relative;
 }
 
 .line view {
@@ -15,4 +16,16 @@
   border: 1px solid grey;
   height: 48rpx;
   width: 50vw;
+}
+
+.next {
+  text-align: center;
+  width: 300rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  color: #fff;
+  background: #0094FE;
+  border-radius: 10rpx;
+  margin: 0 auto;
+  margin-top: 1vh;
 }

project.private.config.json

@@ -57,6 +57,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/voyageManage/createVoyage/createVoyage",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }