更新 picker

.gitignore

@@ -28,3 +28,4 @@ build/Release
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 node_modules
 
+project.private.config.json

miniprogram/components/localPicker/localPicker.js

@@ -0,0 +1,77 @@
+// components/localPicker/localPicker.js
+import {
+  postApi
+} from "../../apis/api"
+Component({
+  properties: {
+    url: {
+      type: String
+    },
+    params: {
+      type: Object
+    },
+    inputStyle: {
+      type: String
+    },
+    disabled: {
+      type: Boolean
+    },
+    value: {
+      type: String || Number
+    },
+    label: {
+      type: String
+    },
+    placeholder: {
+      type: String
+    },
+  },
+  data: {
+    arr: [],
+    index: ''
+  },
+  lifetimes: {
+    ready() {
+      this._getList()
+    }
+  },
+  methods: {
+    async _getList() {
+      let res = await postApi(this.data.url, {
+        ...this.data.params,
+        term: this.data.label
+      })
+      this.setData({
+        arr: res.data.result,
+        label: ''
+      })
+    },
+    _selectItem(e) {
+      let index = e.detail.value
+      let {
+        value: label,
+        key: value
+      } = this.data.arr[index]
+      this.setData({
+        label,
+        value,
+        index,
+      })
+
+      this.triggerEvent('selectItem', {
+        label,
+        value
+      })
+
+    },
+    _handlerOne() {
+      this.setData({
+        arr: [],
+        visable: true
+      })
+    },
+  },
+  options: {
+    styleIsolation: 'isolated'
+  }
+})

miniprogram/components/localPicker/localPicker.json

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

miniprogram/components/localPicker/localPicker.wxml

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

miniprogram/components/localPicker/localPicker.wxss

@@ -0,0 +1,32 @@
+/* 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;
+}

miniprogram/components/newPicker/newPicker.js

@@ -0,0 +1,84 @@
+// components/newPicker/newPicker.js
+import {
+  postApi
+} from "../../apis/api"
+import {
+  debounce
+} from "../../utils/utils"
+Component({
+  properties: {
+    url: {
+      type: String
+    },
+    params: {
+      type: Object
+    },
+    inputStyle: {
+      type: String
+    },
+    disabled: {
+      type: Boolean
+    },
+    value: {
+      type: String || Number
+    },
+    label: {
+      type: String
+    },
+    placeholder: {
+      type: String
+    },
+  },
+  data: {
+    arr: [],
+    visable: false,
+    isLoading: false,
+    isInit: true,
+    index: -1
+  },
+  methods: {
+    _getList: debounce(async function (e) {
+      this.setData({
+        isInit: false
+      })
+      let res = await postApi(this.data.url, {
+        ...this.data.params,
+        term: e.detail.value
+      })
+      this.setData({
+        arr: res.data.result
+      })
+    }, 600),
+    _selectItem(e) {
+      let {
+        label,
+        value
+      } = e.currentTarget.dataset
+
+      this.triggerEvent('selectItem', {
+        label,
+        value,
+      })
+      this.setData({
+        label
+      })
+      this.cancel()
+    },
+    showModal() {
+      this.setData({
+        visable: true,
+      })
+    },
+    cancel() {
+      this.setData({
+        visable: false,
+        isInit: true,
+        arr: [],
+        index: -1
+      })
+    }
+  },
+  options: {
+    styleIsolation: 'isolated'
+  }
+})

miniprogram/components/newPicker/newPicker.json

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

miniprogram/components/newPicker/newPicker.wxml

@@ -0,0 +1,16 @@
+<!--components/newPicker/newPicker.wxml-->
+<view wx:if="{{visable}}" style="position:fixed;top: 0;right: 0;bottom: 0;left: 0;background: #fff;z-index: 10;">
+  <view class="df jcsa">
+    <input type="text" class="search" placeholder="{{placeholder}}" bindconfirm="_getList" bindinput="_getList" value="{{label}}" />
+    <view class="cancel" bindtap="cancel">返回</view>
+  </view>
+  <view style="position: relative;width: 90vw;margin: 0 auto;">
+    <scroll-view wx:if="{{arr.length}}" scroll-y="true" class="scroll">
+      <view class="items" wx:for="{{arr}}" wx:key="key" bindtap="_selectItem" data-label="{{item.value}}" data-value="{{item.key}}">
+        {{item.value}}
+      </view>
+    </scroll-view>
+    <view wx:if="{{!isInit&&!arr.length}}" class="items" style="color:#ddd;text-align:center">暂无数据</view>
+  </view>
+</view>
+<view bindtap="showModal" class="btn" style="color:{{label?'#333':'#777'}}">{{label||placeholder}}</view>

miniprogram/components/newPicker/newPicker.wxss

@@ -0,0 +1,39 @@
+/* components/newPicker/newPicker.wxss */
+.search {
+  width: 78vw;
+  text-align: center;
+  margin: 30rpx auto;
+  height: 80rpx;
+  line-height: 80rpx;
+  background: #eee;
+}
+
+.cancel {
+  margin: 30rpx auto;
+  height: 80rpx;
+  line-height: 80rpx;
+  font-size: 32rpx;
+  color: #999;
+}
+
+.items {
+  height: 100rpx;
+  line-height: 100rpx;
+  border-bottom: 1rpx solid #eee;
+}
+
+.df {
+  display: flex;
+}
+
+.jcsa {
+  justify-content: space-around;
+}
+
+.btn {
+  padding-left: 20rpx;
+  border: 1px solid grey;
+  height: 80rpx;
+  line-height: 80rpx;
+  width: 50vw;
+}

miniprogram/pages/index/index.js

@@ -55,9 +55,16 @@ Page({
         url
       })
     } else {
-      wx.navigateTo({
-        url
-      })
+      if (url == '/pages/voyageManage/createVoyage/createVoyage') {
+        wx.redirectTo({
+          url
+        })
+      } else {
+        wx.navigateTo({
+          url
+        })
+      }
+
     }
 
   },

miniprogram/pages/shipOwnerManage/shipOwnerList/shipOwnerList.wxml

@@ -1,10 +1,10 @@
 <scroll-view scroll-y="true" style="height: 90vh;padding-top: 5vw;" scroll-into-view="{{currentLetter}}">
   <input model:value="{{term}}" class="ship-owner-phone" type="text" placeholder-style="text-align:left" confirm-type="search" bindconfirm="getShipOwnerList" placeholder="搜索船东" />
-  <block wx:for="{{shipOwnerList}}">
+  <block wx:for="{{shipOwnerList}}" wx:key="letter">
     <view class="letter" id="{{item.letter=='?'?'index':item.letter}}">
       {{item.letter}}
     </view>
-    <view class="df aic jcsb phones" wx:for="{{item.data}}" wx:for-item="item1">
+    <view class="df aic jcsb phones" wx:for="{{item.data}}" wx:for-item="item1" wx:key="userId">
       <view style="width: 200rpx;">{{item1.userName}}</view>
       <view class="tac" style="width: 360rpx;text-align: left;">{{item1.shipName}}</view>
       <view class="tac" style="width: 120rpx;text-align: left;">{{item1.cargo}}</view>
@@ -14,5 +14,5 @@
 </scroll-view>
 <view bindtap="addShipOwner" class="next">新建船东</view>
 <view class="letter-bar">
-  <view style="padding-bottom: 4rpx;" bindtap="tapLetter" data-letter="{{item.letter=='?'?'index':item.letter}}" wx:for="{{shipOwnerList}}">{{item.letter}}</view>
+  <view style="padding-bottom: 4rpx;" bindtap="tapLetter" data-letter="{{item.letter=='?'?'index':item.letter}}" wx:for="{{shipOwnerList}}" wx:key="letter">{{item.letter}}</view>
 </view>

miniprogram/pages/voyageManage/createVoyage/createVoyage.js

@@ -13,17 +13,9 @@ Page({
     dischargePortIds: [''],
     voyage: {},
     startTime: '',
-    index: '',
-    cargoOwners: []
-  },
-  async getCargoOwners() {
-    let res = await postApi('/user/cargoOwner/select')
-
-    this.setData({
-      cargoOwners: res.data.result
-    })
   },
   selectShip(e) {
+    console.log(e)
     this.data.voyage.shipId = e.detail.value
   },
   selectCargoOwner(e) {
@@ -182,17 +174,4 @@ Page({
       }
     })
   },
-  bindCargoOwnerChange(e) {
-    let {
-      value: index
-    } = e.detail
-    this.data.voyage.cargoOwnerId = this.data.cargoOwners[index].key
-    this.setData({
-      index
-    })
-
-  },
-  onLoad() {
-    this.getCargoOwners()
-  }
 })

miniprogram/pages/voyageManage/createVoyage/createVoyage.json

@@ -1,6 +1,8 @@
 {
   "usingComponents": {
-    "RemotePicker": "/components/remotePicker/remotePicker"
+    "RemotePicker": "/components/remotePicker/remotePicker",
+    "NewPicker": "/components/newPicker/newPicker",
+    "LocalPicker": "/components/localPicker/localPicker"
   },
   "navigationBarTitleText": "创建航次"
 }

miniprogram/pages/voyageManage/createVoyage/createVoyage.wxml

@@ -2,36 +2,31 @@
   <view class="df aic jcsb line">
     <view>选择船舶</view>
     <view>
-      <RemotePicker placeholder="选择船舶" bind:selectItem="selectShip" url="/ship/select" params="{{defaultParams}}"></RemotePicker>
+      <NewPicker placeholder="请搜索船舶" bind:selectItem="selectShip" url="/ship/select" params="{{defaultParams}}"></NewPicker>
     </view>
   </view>
   <view class="df aic jcsb line">
     <view>选择货主</view>
     <view>
-      <!-- <RemotePicker placeholder="选择货主" bind:selectItem="selectCargoOwner" url="/user/cargoOwner/select" params="{{defaultParams}}"></RemotePicker> -->
-      <picker bindchange="bindCargoOwnerChange" range-key='value' value="{{index}}" range="{{cargoOwners}}">
-        <view class="picker">
-          {{cargoOwners[index].value||'请选择货主'}}
-        </view>
-      </picker>
+      <LocalPicker placeholder="请选择货主" bind:selectItem="selectCargoOwner" url="/user/cargoOwner/select" params="{{defaultParams}}"></LocalPicker>
     </view>
   </view>
   <view class="df aic jcsb line">
     <view>选择货种</view>
     <view>
-      <RemotePicker placeholder="选择货种" bind:selectItem="selectCargo" url="/cargo/select"></RemotePicker>
+      <LocalPicker placeholder="请选择货种" bind:selectItem="selectCargo" url="/cargo/select"></LocalPicker>
     </view>
   </view>
   <view class="df aic jcsb line">
     <view>装货港</view>
     <view>
-      <RemotePicker placeholder="选择装货港" bind:selectItem="selectLoadPort" url="/port/getCol"></RemotePicker>
+      <NewPicker placeholder="选择装货港" bind:selectItem="selectLoadPort" url="/port/getCol"></NewPicker>
     </view>
   </view>
   <view class="df aic jcsb line" wx:for="{{dischargePorts}}" wx:key="key">
     <view>卸货港 #{{index+1}}</view>
     <view>
-      <RemotePicker placeholder="输入卸货港" id="{{'disc'+index}}" style="width: 200rpx;" bind:selectItem="selectDiscPort" data-index="{{index}}" url="/port/getCol"></RemotePicker>
+      <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>

miniprogram/utils/utils.js

@@ -4,7 +4,7 @@ function subTimeStr(str) {
   return str.substring(0, index);
 }
 
-function datetimeFormat(type = "yyyy-MM-dd HH:mm:ss",t = new Date()) {
+function datetimeFormat(type = "yyyy-MM-dd HH:mm:ss", t = new Date()) {
   let timer, W;
   let _d = new Date(t);
   let yyyy = _d.getFullYear();
@@ -74,7 +74,37 @@ function datetimeFormat(type = "yyyy-MM-dd HH:mm:ss",t = new Date()) {
   return timer;
 }
 
-export {
+const throttle = (fn, wait) => { //节流
+  var prev = Date.now();
+  return function () {
+    var context = this;
+    var args = arguments;
+    var now = Date.now();
+    console.log(now - prev > wait)
+    if (now - prev > wait) {
+      fn.apply(context, args)
+      prev = Date.now()
+    }
+  }
+}
+const debounce = (func, wait) => { //防抖
+  // wait：500ms；func：被频繁触发的事件
+  let timeout;
+  return function () {
+    let context = this;
+    let args = arguments;
+    let later = () => {
+      timeout = null;
+      func.apply(context, args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  }
+}
+
+module.exports = {
   subTimeStr,
-  datetimeFormat
-};
+  datetimeFormat,
+  throttle,
+  debounce
+}

project.private.config.json

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