更新 我的船东-样式

miniprogram/pages/shipOwnerManage/shipOwnerList/shipOwnerList.js

@@ -9,7 +9,8 @@ Page({
   data: {
     shipOwnerList: [],
     term: '',
-    currentLetter: ''
+    currentLetter: '',
+    timer: new Date().toJSON().substring(0, 10)
   },
   async getShipOwnerList(type) {
     if (!wx.getStorageSync('loginAccountId')) {
@@ -73,7 +74,10 @@ Page({
 
   createVoyage(e) {
     console.log(e)
-    let {shipId,shipName} =  e.currentTarget.dataset.shipowner
+    let {
+      shipId,
+      shipName
+    } = e.currentTarget.dataset.shipowner
     wx.showModal({
       title: '是否创建航次?',
       content: shipName,

miniprogram/pages/shipOwnerManage/shipOwnerList/shipOwnerList.wxml

@@ -1,18 +1,31 @@
-<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}}" wx:key="letter">
+<view class="timer">
+  今日日期: {{ timer}}
+</view>
+<view class="df aic func">
+  <view class="search df aic">
+    <input model:value="{{term}}" confirm-type="search" bindconfirm="getShipOwnerList" type="text" placeholder="搜索船东" placeholder-class="placeholder" />
+    <image src="../../../images/newUI/hmbb.png" class="avatar" bindtap="getShipOwnerList"></image>
+  </view>
+  <view class="create" bindtap="addShipOwner">创建船东</view>
+  <view class="bar">
+    <view style="padding-bottom: 4rpx;" bindtap="tapLetter" data-letter="{{item.letter=='?'?'index':item.letter}}" wx:for="{{shipOwnerList}}" wx:key="userPhone">{{item.letter}}</view>
+  </view>
+</view>
+<scroll-view scroll-y="true" style="height: calc(100vh - 200rpx);margin-top: 12rpx;" scroll-into-view="{{currentLetter}}">
+  <view 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" wx:key="userId" bindtap="createVoyage" data-shipowner="{{item1}}">
-      <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>
-      <image mode="aspectFit" style="width: 52rpx;height: 52rpx;" catchtap="call" data-phone="{{item1.userPhone}}" src="../../../images/phone.png"></image>
+    <view class="letter-block">
+      <view class="phones" wx:for="{{item.data}}" wx:for-index="index1" wx:for-item="item1" wx:key="userId" bindtap="createVoyage" data-shipowner="{{item1}}">
+        <view class="df aic">
+          <view class="col col-1">{{item1.userName}}</view>
+          <view class="col col-2">{{item1.shipName}}</view>
+          <view class="col col-3">{{item1.cargo}}</view>
+          <image mode="aspectFit" class="col col-4" style="width: 40rpx;height: 40rpx;" catchtap="call" data-phone="{{item1.userPhone}}" src="../../../images/phone.png"></image>
+        </view>
+        <view wx:if="{{index1!=item1.length-1}}" class="long-line"></view>
+      </view>
     </view>
-  </block>
-</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}}" wx:key="letter">{{item.letter}}</view>
-</view>
+  </view>
+</scroll-view>

miniprogram/pages/shipOwnerManage/shipOwnerList/shipOwnerList.wxss

@@ -1,48 +1,125 @@
-/* pages/shipOwnerManage/shipOwnerList/shipOwnerList.wxss */
-.ship-owner-phone {
-  width: 70vw;
-  height: 60rpx;
-  border: 1rpx solid grey;
-  margin: 0 auto;
-  margin-bottom: 3vw;
-  border-radius: 6rpx;
-  padding-left: 20rpx;
+.timer {
+  width: 100vw;
+  height: 80rpx;
+  background: #0089FD;
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 80rpx;
+  text-align: center;
+  margin-bottom: 32rpx;
 }
 
-.letter {
-  width: 80vw;
-  padding: 10rpx 0;
-  margin: 0 auto;
-  border-bottom: 2rpx solid grey;
-  margin-bottom: 10rpx;
+.search {
+  width: 450rpx;
+  height: 76rpx;
+  background: #FFFFFF;
+  box-shadow: 0px 3rpx 9rpx 3rpx rgba(92, 123, 111, 0.26);
+  border-radius: 12rpx;
+  padding-left: 50rpx;
+  color: #333;
+  margin-left: 24rpx;
+  margin-right: 20rpx;
 }
 
-.phones {
-  width: 70vw;
-  padding: 6rpx 0;
-  margin: 24rpx auto;
+.placeholder {
   font-size: 28rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #777;
 }
 
-.next {
+.create {
+  width: 190rpx;
+  height: 76rpx;
+  line-height: 76rpx;
+  background: linear-gradient(270deg, #0089FD 0%, #43A9FF 100%);
+  box-shadow: 0px 4rpx 10rpx 1rpx rgba(0, 137, 253, 0.41);
+  border-radius: 20rpx;
+  font-size: 30rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
   text-align: center;
-  width: 300rpx;
-  height: 80rpx;
-  line-height: 80rpx;
-  color: #fff;
-  background: #0094FE;
-  border-radius: 10rpx;
-  margin: 0 auto;
-  margin-top: 1vh;
 }
 
-.letter-bar {
+.avatar {
+  background: grey;
+  width: 52rpx;
+  height: 52rpx;
+  border-radius: 50%;
+}
+
+.bar {
+  width: 48rpx;
+  height: calc(100vh - 80rpx);
+  background: rgba(0, 137, 253, 0.07);
   position: fixed;
-  top: 5vh;
-  right: 3vw;
-  width: 50rpx;
-  background: #fff;
+  top: 80rpx;
+  right: 0;
+  padding-top: 100rpx;
   text-align: center;
-  box-shadow: 0px 0px 3px grey;
-  padding: 20rpx 5rpx;
+  font-size: 24rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0089FD;
+  z-index: 100;
+}
+
+.bar>view {
+  width: 80%;
+}
+
+.letter {
+  font-size: 32rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #20252E;
+  margin: 24rpx 28rpx;
+}
+
+.letter-block {
+  width: 674rpx;
+  background: #FFFFFF;
+  border-radius: 12rpx;
+  padding: 32rpx 0 32rpx 32rpx;
+  margin-left: 20rpx;
+}
+
+.col-1 {
+  width: 200rpx;
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0089FD;
+}
+
+.col-2 {
+  width: 220rpx;
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #6C6C6C;
+}
+
+.col-3 {
+  width: 120rpx;
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #6C6C6C;
+}
+
+.col-4 {
+  width: 40rpx;
+}
+
+.long-line {
+  width: 620rpx;
+  height: 1rpx;
+  background: #D8D8D8;
+  border-radius: 1rpx;
+  opacity: 0.38;
+  margin: 26rpx auto;
 }

project.private.config.json

@@ -22,6 +22,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/shipOwnerManage/shipOwnerList/shipOwnerList",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }