todo 航次详情

miniprogram/app.json

@@ -3,7 +3,8 @@
     "pages/index/index",
     "pages/voyages/voyages",
     "pages/me/me",
-    "pages/login/login"
+    "pages/login/login",
+    "pages/voyages/detail/detail"
   ],
   "window": {
     "backgroundColor": "#F6F6F6",
@@ -13,7 +14,8 @@
     "navigationBarTextStyle": "black"
   },
   "tabBar": {
-    "list": [{
+    "list": [
+      {
         "pagePath": "pages/index/index",
         "text": "首页"
       },

miniprogram/components/voyages/voyages.js

@@ -4,7 +4,10 @@ import {
 } from "../../apis/api"
 Component({
   properties: {
-
+    height: {
+      type: Number,
+      value: 620,
+    }
   },
   data: {
     term: '',
@@ -22,10 +25,15 @@ Component({
         currentPage: this.data.currentPage,
         size: this.data.size
       })
-      this.setData({
-        list: [...res.data.result,...res.data.result,...res.data.result]
-      })
-      console.log(res)
+      if (res.data.status == 0) {
+        this.setData({
+          list: res.data.result
+        })
+      } else {
+        this.setData({
+          list: []
+        })
+      }
     },
     changeStatus(e) {
       let {
@@ -38,5 +46,13 @@ Component({
       })
       this.getVoyageList()
     },
+    goToDetail(e) {
+      let {
+        id
+      } = e.currentTarget.dataset
+      wx.navigateTo({
+        url: `/pages/voyages/detail/detail?id=${id}`,
+      })
+    }
   }
 })

miniprogram/components/voyages/voyages.wxml

@@ -1,10 +1,10 @@
 <input model:value="{{term}}" class="p10 m30a search" type="text" placeholder="搜索船舶信息" />
 <view class="df aic jcsa tabs">
-  <view class="tabsview" bindtap="changeStatus" data-status="{{1}}" style="color:{{status==1?'blue':''}};border-bottom:{{status==1?'4rpx solid blue':''}}">运输中</view>
-  <view class="tabsview" bindtap="changeStatus" data-status="{{2}}" style="color:{{status==2?'blue':''}};border-bottom:{{status==2?'4rpx solid blue':''}}">卸货中</view>
+  <view class="tabsview" bindtap="changeStatus" data-status="{{1}}" style="color:{{status==1?'#0d8fcc':''}};border-bottom:{{status==1?'4rpx solid #0d8fcc':''}}">运输中</view>
+  <view class="tabsview" bindtap="changeStatus" data-status="{{2}}" style="color:{{status==2?'#0d8fcc':''}};border-bottom:{{status==2?'4rpx solid #0d8fcc':''}}">卸货中</view>
 </view>
-<scroll-view scroll-y="true" style="height:calc(100vh - 620rpx);background: #fff;">
-  <view class="df aic jcsb list" wx:for="{{list}}" wx:key="index">
+<scroll-view scroll-y="true" style="height:calc(100vh - {{height}}rpx);background: #fff;">
+  <view class="df aic jcsb list" wx:for="{{list}}" wx:key="index" data-id="{{item.id}}" bindtap="goToDetail">
     <view class="col-1">{{item.shipName}}</view>
     <view class="col-2">{{item.loadPort}}-{{item.dischargeProt}}</view>
     <view class="col-3">{{item.cargo}}</view>

miniprogram/components/voyages/voyages.wxss

@@ -34,7 +34,8 @@
   width: 100%;
   height: 100rpx;
   background: #fff;
-  box-shadow: rgb(209, 206, 206) 5rpx 5rpx 10rpx
+  box-shadow: rgb(209, 206, 206) 5rpx 5rpx 10rpx;
+  border-bottom: 2rpx solid grey;
 }
 
 .tabsview {
@@ -43,7 +44,7 @@
 }
 
 .p10 {
-  padding: 10rpx;
+  padding: 10rpx 20rpx;
 }
 
 .m30a {

miniprogram/pages/index/index.wxss

@@ -6,19 +6,19 @@
 }
 
 .block-line:first-child>view:first-child {
-  background: purple;
+  background: rgb(131, 38, 131);
 }
 
 .block-line:first-child>view:last-child {
-  background: red;
+  background: rgb(170, 37, 37);
 }
 
 .block-line:last-child>view:first-child {
-  background: blue;
+  background: rgb(28, 28, 112);
 }
 
 .block-line:last-child>view:last-child {
-  background: green;
+  background: rgb(26, 95, 26);
 }
 
 .block-line>view>view:first-child {

miniprogram/pages/voyages/detail/detail.js

@@ -0,0 +1,44 @@
+// pages/voyages/detail/detail.js
+import {
+  postApi
+} from "../../../apis/api"
+Page({
+  data: {
+    id: '',
+    tab: 1,
+    recordCurrentPage: 1,
+    dischargeCurrentPage: 1
+  },
+  changeTab(e) {
+    let {
+      tab
+    } = e.currentTarget.dataset
+    this.setData({
+      tab
+    })
+  },
+
+  async getVoyageDetail() {
+    let res = await postApi("/voyage/detail", {
+      voyageId: this.data.id
+    })
+  },
+
+  async getCarLoadRecordList() {
+    let res = await postApi("/voyage/getCarLoadRecordList", {
+      voyageId: this.data.id
+    })
+  },
+
+  async getDischargeList() {
+    let res = await postApi("/voyage/getDischargeList", {
+      voyageId: this.data.id
+    })
+  },
+  onLoad(options) {
+    this.setData({
+      id: options.id
+    })
+    this.getVoyageDetail()
+  },
+})

miniprogram/pages/voyages/detail/detail.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

miniprogram/pages/voyages/detail/detail.wxml

@@ -0,0 +1,8 @@
+<map style="width: 100%;height: 400rpx;" name="map"></map>
+<view class="df aic jcsb p20">
+  <view class="tabsview" bindtap="changeTab" data-tab="{{1}}" style="color:{{tab==1?'#0d8fcc':''}};border-bottom:{{tab==1?'2rpx solid #0d8fcc':''}}">航次信息</view>
+  <view class="tabsview" bindtap="changeTab" data-tab="{{2}}" style="color:{{tab==2?'#0d8fcc':''}};border-bottom:{{tab==2?'2rpx solid #0d8fcc':''}}">航次详情</view>
+  <view class="tabsview" bindtap="changeTab" data-tab="{{3}}" style="color:{{tab==3?'#0d8fcc':''}};border-bottom:{{tab==3?'2rpx solid #0d8fcc':''}}">单据信息</view>
+  <view class="tabsview" bindtap="changeTab" data-tab="{{4}}" style="color:{{tab==4?'#0d8fcc':''}};border-bottom:{{tab==4?'2rpx solid #0d8fcc':''}}">卸货信息</view>
+  <view class="tabsview" bindtap="changeTab" data-tab="{{5}}" style="color:{{tab==5?'#0d8fcc':''}};border-bottom:{{tab==5?'2rpx solid #0d8fcc':''}}">航次照片</view>
+</view>

miniprogram/pages/voyages/detail/detail.wxss

@@ -0,0 +1,50 @@
+/* components/voyages/Voyages.wxss */
+page {
+  background: #fff;
+}
+
+.df {
+  display: flex;
+}
+
+.jcsb {
+  justify-content: space-between;
+}
+
+.jcc {
+  justify-content: center;
+}
+
+.jcfe {
+  justify-content: flex-end;
+}
+
+.jcsa {
+  justify-content: space-around;
+}
+
+.aic {
+  align-items: center;
+}
+
+.search {
+  border: 1rpx solid grey;
+  width: 80%;
+  background: #fff;
+}
+
+.tabs {
+  width: 100%;
+  height: 100rpx;
+  background: #fff;
+  box-shadow: rgb(209, 206, 206) 5rpx 5rpx 10rpx;
+  border-bottom: 2rpx solid grey;
+}
+
+.tabsview {
+  width: 130rpx;
+  height: 50rpx;
+  font-size: 28rpx;
+  text-align: center;
+  color: #333;
+}

miniprogram/pages/voyages/voyages.js

@@ -1,66 +1,11 @@
 // pages/voyages/voyages.js
 Page({
 
-  /**
-   * 页面的初始数据
-   */
   data: {
 
   },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
   onLoad: function (options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
+    const child = this.selectComponent('.voyages');
+    child.getVoyageList()
   },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  }
 })

miniprogram/pages/voyages/voyages.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "Voyages": "/components/voyages/voyages"
+  }
 }

miniprogram/pages/voyages/voyages.wxml

@@ -1,2 +1 @@
-<!--pages/voyages/voyages.wxml-->
-<text>pages/voyages/voyages.wxml</text>
+<Voyages height="{{220}}" class="voyages"></Voyages>

project.private.config.json

@@ -15,6 +15,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/voyages/detail/detail",
+          "query": "id=46",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }