From 07bf6666266ab4f91ac6a20d86b234f65beee91e Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Tue, 19 Nov 2024 12:15:43 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=86=E6=96=99=E5=87=BA=E5=BA=93=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=88=9D=E6=AD=A5=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          |  34 +++-
 src/pages/picking/outbound/index.vue | 257 +++++++++++----------------
 src/styles/reset.css                 |   2 +-
 src/utils/http.js                    |   2 +-
 4 files changed, 143 insertions(+), 152 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4e87f6e..2e2c79b 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/pages/picking/outbound/index.vue b/src/pages/picking/outbound/index.vue
index e0d6b20..ccf7b8d 100644
--- a/src/pages/picking/outbound/index.vue
+++ b/src/pages/picking/outbound/index.vue
@@ -4,82 +4,85 @@
       
     </view> -->
 
-    <view class="complete-btn">
-        <view class="btn" @click="changeTab(1)">
-            <span>已完成</span>
-            <div v-if="active == 1" class="bt-line"></div>
-        </view>
-        <view class="btn" style="margin-left: 120rpx" @click="changeTab(2)">
-            <span>未完成</span>
-            <div v-if="active == 2" class="bt-line"></div>
-        </view>
-    </view>
-    <uni-row :gutter="24" class="search-form">
-        <uni-col :span="12">
-            <view>
-                <uni-datetime-picker
-                    v-model="dateArray"
-                    type="daterange"
-                    @maskClick="maskClick"
-                    @change="onChangeDate"
-                    placeholder="选择日期范围"
-                />
+    <view class="page-container">
+        <view class="complete-btn">
+            <view class="btn" @click="changeTab(1)">
+                <span>已完成</span>
+                <div v-if="active == 1" class="bt-line"></div>
             </view>
-        </uni-col>
-        <uni-col :span="8">
-            <view>
-                <uni-easyinput placeholder="请输入内容" v-model="queryParams.keyWord" />
+            <view class="btn" style="margin-left: 120rpx" @click="changeTab(2)">
+                <span>未完成</span>
+                <div v-if="active == 2" class="bt-line"></div>
             </view>
-        </uni-col>
-        <uni-col :span="4">
-            <view class="search" @click="getTableList()">搜索</view>
-        </uni-col>
-    </uni-row>
+        </view>
+        <uni-row :gutter="24" class="search-form">
+            <uni-col :span="12">
+                <view>
+                    <uni-datetime-picker
+                        v-model="dateArray"
+                        type="daterange"
+                        @maskClick="maskClick"
+                        @change="onChangeDate"
+                        placeholder="选择日期范围"
+                    />
+                </view>
+            </uni-col>
+            <uni-col :span="8">
+                <view>
+                    <uni-easyinput placeholder="请输入内容" v-model="queryParams.keyWord" />
+                </view>
+            </uni-col>
+            <uni-col :span="4">
+                <view class="search" @click="getTableList()">搜索</view>
+            </uni-col>
+        </uni-row>
 
-    <scroll-view scroll-y @scrolltolower="onScrollTolower" class="scroll-container">
-        <div
-            class="table-list-item"
-            v-for="(item, index) in tableList"
-            :key="index"
-            @click="handleItem(item)"
-        >
-            <div class="title">
-                <span style="font-size: 15px; font-weight: 800">新购验收</span>
-                <span :style="{ color: item.status == 1 ? '#ff4d4f' : '#3784fb' }">{{
-                    item.taskStatus == 2 ? '未完成' : '已完成'
-                }}</span>
-            </div>
-            <div class="line"></div>
-            <uni-row :gutter="24">
-                <uni-col :span="6">到货时间：</uni-col>
-                <uni-col :span="18"
-                    ><div class="cont">{{ item.arrivalTime }}</div></uni-col
-                >
-            </uni-row>
-            <uni-row :gutter="24">
-                <uni-col :span="6">采购单号：</uni-col>
-                <uni-col :span="18"
-                    ><div class="cont">{{ item.code }}</div></uni-col
-                >
-            </uni-row>
-            <uni-row :gutter="24">
-                <uni-col :span="6">采购物资：</uni-col>
-                <uni-col :span="18"
-                    ><div class="cont">{{ item.purchaseMaTypeName }}</div></uni-col
-                >
-            </uni-row>
-            <uni-row :gutter="24">
-                <uni-col :span="6">到货数量：</uni-col>
-                <uni-col :span="18"
-                    ><div class="cont">{{ item.purchaseMaNumber }}</div></uni-col
-                >
-            </uni-row>
-            <uni-row :gutter="24">
-                <uni-col :span="6">验收数量：</uni-col>
-                <uni-col :span="18"><div class="cont"></div></uni-col>
-            </uni-row>
-        </div>
-    </scroll-view>
+        <scroll-view scroll-y @scrolltolower="onScrollTolower" class="scroll-container">
+            <view
+                class="table-list-item"
+                v-for="(item, index) in tableList"
+                :key="index"
+                @click="handleItem(item)"
+            >
+                <view class="title">
+                    <span style="font-size: 15px; font-weight: 800">新购验收</span>
+                    <span :style="{ color: item.status == 1 ? '#ff4d4f' : '#3784fb' }">{{
+                        item.taskStatus == 2 ? '未完成' : '已完成'
+                    }}</span>
+                </view>
+                <div class="line"></div>
+                <uni-row :gutter="24">
+                    <uni-col :span="6">到货时间：</uni-col>
+                    <uni-col :span="18"
+                        ><div class="cont">{{ item.arrivalTime }}</div></uni-col
+                    >
+                </uni-row>
+                <uni-row :gutter="24">
+                    <uni-col :span="6">采购单号：</uni-col>
+                    <uni-col :span="18"
+                        ><div class="cont">{{ item.code }}</div></uni-col
+                    >
+                </uni-row>
+                <uni-row :gutter="24">
+                    <uni-col :span="6">采购物资：</uni-col>
+                    <uni-col :span="18"
+                        ><div class="cont">{{ item.purchaseMaTypeName }}</div></uni-col
+                    >
+                </uni-row>
+                <uni-row :gutter="24">
+                    <uni-col :span="6">到货数量：</uni-col>
+                    <uni-col :span="18"
+                        ><div class="cont">{{ item.purchaseMaNumber }}</div></uni-col
+                    >
+                </uni-row>
+                <uni-row :gutter="24">
+                    <uni-col :span="6">验收数量：</uni-col>
+                    <uni-col :span="18"><div class="cont"></div></uni-col>
+                </uni-row>
+            </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('res列表数据', res)
-    tableList.value = res.rows
+    console.log('queryParams.value查询参数', queryParams.value)
+    const res = await getPickingOutboundListAPI(queryParams.value)
+    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%;
-//     display: flex;
-//     flex-direction: column;
-//     word-break: break-all;
-
-//     .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;
-//     }
-// }
+// 加载提示文字
+.loading-text {
+    text-align: center;
+    font-size: 28rpx;
+    color: #666;
+    padding: 20rpx 0;
+}
 </style>
diff --git a/src/styles/reset.css b/src/styles/reset.css
index 4fdba9d..b7d2330 100644
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -120,6 +120,6 @@ a:hover {
 }
 
 page {
-    height: 100%;
+    /* height: 100%; */
     font-size: 16px;
 }
diff --git a/src/utils/http.js b/src/utils/http.js
index bac5bdb..b08770f 100644
--- a/src/utils/http.js
+++ b/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 请求