领料出库页面初步完善

src/App.vue

@@ -12,6 +12,38 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 /*每个页面公共css */
+view,
+navigator,
+input,
+scroll-view {
+    box-sizing: border-box;
+}
+
+button::after {
+    border: none;
+}
+
+swiper,
+scroll-view {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+}
+
+image {
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+}
+
+// 两行省略
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
 </style>

src/pages/picking/outbound/index.vue

@@ -4,6 +4,7 @@
       
     </view> -->
 
+    <view class="page-container">
         <view class="complete-btn">
             <view class="btn" @click="changeTab(1)">
                 <span>已完成</span>
@@ -37,18 +38,18 @@
         </uni-row>
 
         <scroll-view scroll-y @scrolltolower="onScrollTolower" class="scroll-container">
-        <div
+            <view
                 class="table-list-item"
                 v-for="(item, index) in tableList"
                 :key="index"
                 @click="handleItem(item)"
             >
-            <div class="title">
+                <view class="title">
                     <span style="font-size: 15px; font-weight: 800">新购验收</span>
                     <span :style="{ color: item.status == 1 ? '#ff4d4f' : '#3784fb' }">{{
                         item.taskStatus == 2 ? '未完成' : '已完成'
                     }}</span>
-            </div>
+                </view>
                 <div class="line"></div>
                 <uni-row :gutter="24">
                     <uni-col :span="6">到货时间：</uni-col>
@@ -78,8 +79,10 @@
                     <uni-col :span="6">验收数量：</uni-col>
                     <uni-col :span="18"><div class="cont"></div></uni-col>
                 </uni-row>
-        </div>
+            </view>
+            <view class="loading-text"> {{ finish ? '没有更多数据了~' : '正在加载...' }} </view>
         </scroll-view>
+    </view>
 </template>
 
 <script setup>
@@ -89,13 +92,14 @@ import { onLoad } from '@dcloudio/uni-app'
 const active = ref(1)
 const tableList = ref([])
 const statusList = ref(['3', '13', '4', '14', '19'])
+const finish = ref(false) // 判断数据是否加载完毕
 // 查询参数
 const queryParams = ref({
     startTime: '', // 开始时间
     endTime: '', // 结束时间
     keyWord: '',
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 3,
 })
 const dateArray = ref([]) //日期范围
 
@@ -108,16 +112,29 @@ const onChangeDate = (val) => {
 
 // 获取列表数据
 const getTableList = async () => {
-    const res = await getPickingOutboundListAPI(queryParams)
+    console.log('queryParams.value查询参数', queryParams.value)
-    // console.log('res列表数据', res)
+    const res = await getPickingOutboundListAPI(queryParams.value)
-    tableList.value = res.rows
+    if (res.total > tableList.value.length) {
+        tableList.value = [...tableList.value, ...res.rows]
+    } else {
+        finish.value = true
+    }
 }
 
+// 页面加载完毕
+onLoad(() => {
+    getTableList()
+})
+
 // 滚动触底事件
 const onScrollTolower = () => {
-    console.log('滚动触底--')
+    if (!finish.value) {
+        queryParams.value.pageNum++
+    }
+    getTableList()
 }
 
+// tap 栏切换
 const changeTab = (index) => {
     active.value = index
     if (index == 1) {
@@ -128,22 +145,21 @@ const changeTab = (index) => {
         getTableList()
     }
 }
-const maskClick = () => {}
+// 点击跳转
 const handleItem = (item) => {
     console.log('🚀 ~ handleItem ~ item:', item)
-    uni.navigateTo({ url: '/pages/new-purchase/accept/acceptDetails' })
+    // uni.navigateTo({ url: '/pages/new-purchase/accept/acceptDetails' })
 }
-onLoad((options) => {
+
-    getTableList()
+const maskClick = () => {}
-})
 </script>
 
 <style lang="scss" scoped>
-page {
+.page-container {
     display: flex;
+    height: 100%;
     padding: 0 15rpx;
     flex-direction: column;
-    overflow: hidden;
 
     .complete-btn {
         display: flex;
@@ -177,8 +193,6 @@ page {
     }
 
     .scroll-container {
-        flex: 1;
-
         .table-list-item {
             margin: 20rpx 0;
             padding: 20rpx;
@@ -203,66 +217,11 @@ page {
         }
     }
 }
-// .accept {
+// 加载提示文字
-//     height: 100%;
+.loading-text {
-//     display: flex;
+    text-align: center;
-//     flex-direction: column;
+    font-size: 28rpx;
-//     word-break: break-all;
+    color: #666;
-
+    padding: 20rpx 0;
-//     .scroll-container {
+}
-//         flex: 1;
-//     }
-//     .complete-btn {
-//         display: flex;
-//         padding: 20rpx;
-//         .btn {
-//             display: flex;
-//             flex-direction: column;
-//             align-items: center;
-//             font-size: 30rpx;
-//             font-weight: 800;
-//         }
-//         .bt-line {
-//             width: 80rpx;
-//             height: 4rpx;
-//             background-color: #3784fb;
-//         }
-//     }
-
-//     .search-form {
-//         display: flex;
-//         align-items: center;
-//         box-sizing: content-box;
-//     }
-
-//     .search {
-//         height: 65rpx;
-//         background-color: #3784fb;
-//         text-align: center;
-//         line-height: 65rpx;
-//         color: #fff;
-//     }
-// }
-// .table-list-item {
-//     margin: 20rpx 0;
-//     padding: 20rpx;
-//     background-color: #fff;
-//     min-height: 300rpx;
-//     border-radius: 10rpx;
-//     .title {
-//         display: flex;
-//         justify-content: space-between;
-//         align-items: center;
-//     }
-//     .cont {
-//         display: flex;
-//         justify-content: flex-end;
-//         line-height: 1.9;
-//     }
-//     .line {
-//         margin: 20rpx 0;
-//         height: 1px;
-//         background-color: #e8e8e8;
-//     }
-// }
 </style>

src/styles/reset.css

@@ -120,6 +120,6 @@ a:hover {
 }
 
 page {
-    height: 100%;
+    /* height: 100%; */
     font-size: 16px;
 }

src/utils/http.js

@@ -6,7 +6,7 @@ import { useMemberStore } from '@/stores'
  *  baseURL 设置请求ip地址和端口
  */
 const ENV = process.env.NODE_ENV
-const baseURL = ENV === 'development' ? '/api' : '***'
+const baseURL = ENV === 'development' ? 'http://192.168.2.246:18080' : '***'
 
 /**
  * httpInterceptor 分别拦截 request 和 uploadFile 请求