css

assets/css/pda/logisticsList.scss

-.rePackage {
-    .refresh {
-        padding: 24rpx 24rpx 0 24rpx;
-        justify-content: flex-end;
-        background: #fff;
-        .icon-a-juxing12 {
-            font-size: 36rpx;
+.logisticsList {
+    .tab {
+        height: 114rpx;
+        background-color: #fff;
+        padding: 0 24rpx;
+        .box {
+            position: relative;
+            font-size: 26rpx;
             color: #404547;
+            margin-right: 44rpx;
+            transition: all 0.4s ease;
+            .t2 {
+                display: block;
+            }
             &.curr {
-                animation: spin 1s infinite linear;
+                color: #1e2021;
+                font-size: 32rpx;
+                font-weight: bold;
+                .t2 {
+                    display: flex;
+                }
+                &:after {
+                    position: absolute;
+                    bottom: -16rpx;
+                    left: 0;
+                    right: 0;
+                    width: 100%;
+                    height: 6rpx;
+                    background: #197adb;
+                    border-radius: 3rpx;
+                    content: '';
+                }
             }
         }
-        .t1 {
-            font-size: 22rpx;
-            color: #404547;
-            margin-left: 8rpx;
-        }
     }
     .uni-list-cell {
         padding: 0 24rpx;
-        height: 73rpx;
+        border-bottom: 1px solid #cad9e0;
+        height: 120rpx;
         background: #fff;
         .uni-list-cell-left {
             font-size: 28rpx;
@@ -35,7 +53,7 @@
         }
     }
     .uni-table {
-        padding: 0 24rpx 120rpx 24rpx;
+        padding: 24rpx 24rpx 120rpx 24rpx;
         background: #fff;
         .uni-th {
             height: 62rpx;
@@ -43,7 +61,7 @@
             border-top: 1px solid #cad9e0;
             border-bottom: 1px solid #cad9e0;
             text {
-                flex: 0 0 25%;
+                flex: 0 0 20%;
                 font-size: 22rpx;
                 color: #404547;
                 border-right: 1px solid #cad9e0;

pages/pda/logisticsList.vue

 <template>
-    <view class="rePackage">
-        <view class="row verCenter refresh" @click="refresh()">
-            <text class="iconfont icon-a-juxing12" :class="{ curr: refreshTransition }"></text>
-            <text class="t1">刷新</text>
-        </view>
+    <view class="logisticsList">
         <view class="uni-list-cell row verCenter bothSide">
-            <view class="uni-list-cell-left">日期选择</view>
+            <view class="uni-list-cell-left">报关日期选择</view>
             <view class="uni-list-cell-db row">
                 <picker mode="date" :value="today" :start="startDate" :end="endDate" @change="bindDateChange">
                     <text class="uni-input">{{ today }}</text>
@@ -13,12 +9,18 @@
                 </picker>
             </view>
         </view>
+        <view class="tab row verCenter">
+            <view class="box row" @click="changeTab(index)" :class="{ curr: index == currentIndex }" :key="index" v-for="(item, index) in textArr">
+                <text class="t1">{{ item }}</text>
+            </view>
+        </view>
         <view class="uni-table">
             <view class="uni-th row">
-                <text class="row verCenter rowCenter">卡板号</text>
-                <text class="row verCenter rowCenter">合计货物箱数</text>
-                <text class="row verCenter rowCenter">扫描状态</text>
-                <text class="row verCenter rowCenter">装载状态</text>
+                <text class="row verCenter rowCenter">入仓号</text>
+                <text class="row verCenter rowCenter">车序</text>
+                <text class="row verCenter rowCenter">汇总件数</text>
+                <text class="row verCenter rowCenter">入库</text>
+                <text class="row verCenter rowCenter">出库</text>
             </view>
             <template v-if="total > 0">
                 <view class="uni-tr row verCenter" v-for="(item, index) in rePackageList" :key="index">
@@ -26,6 +28,7 @@
                     <text class="row verCenter rowCenter" :class="{ color: item.scan_status_cn == '全部已经扫描' }">{{ item.have_load_box_num }}</text>
                     <text class="row verCenter rowCenter" :class="{ color: item.scan_status_cn != '全部已经扫描' }">{{ item.scan_status_cn }}</text>
                     <text class="row verCenter rowCenter">{{ item.audit_status_cn || '' }}</text>
+                    <text class="row verCenter rowCenter">{{ item.audit_status_cn || '' }}</text>
                 </view>
             </template>
             <template v-else>
@@ -44,14 +47,15 @@ export default {
             format: true
         });
         return {
+            currentIndex: 0,
+            textArr: ['全部', '未入库', '未出库'],
             today: currentDate,
             total: 1,
             page: 1,
             limit: 1000,
             is_loading: false,
             loading: false,
-            rePackageList: [],
-            refreshTransition: false
+            rePackageList: []
         };
     },
     computed: {
@@ -72,6 +76,9 @@ export default {
         this.getData();
     },
     methods: {
+        changeTab(index) {
+            this.currentIndex = index;
+        },
         getDate(type) {
             const date = new Date();
             let year = date.getFullYear();
@@ -94,18 +101,6 @@ export default {
             this.rePackageList = [];
             this.getData();
         },
-        refresh() {
-            //刷新图标交互
-            this.refreshTransition = true;
-            this.loading = true;
-            setTimeout(() => {
-                this.refreshTransition = false;
-            }, 3000);
-            this.total = 0;
-            this.page = 1;
-            this.rePackageList = [];
-            this.getData();
-        },
         getData() {
             this.request(API.rePackageList, 'POST', { page: this.page, limit: this.limit, today: this.today }, this.loading).then(res => {
                 if (res.err_code === 0) {