封装滑动分页+修复展开后显示bug

src/pages/components/ScrollRefresh.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="container" :style="{ height: height, overflowY: 'auto' }" @scroll.passive="getScroll($event)">
+        <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
+            <slot v-bind:list="list"></slot>
+            <template v-if="!refreshLoading && list.length > 0">
+                <div class="bottom_text" v-if="loading">
+                    加载中...
+                </div>
+                <div class="bottom_text" v-else-if="noData">
+                    已经到底啦...
+                </div>
+            </template>
+            <template v-if="list.length === 0">
+                <div>数据为空！</div>
+            </template>
+        </van-pull-refresh>
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ScrollRefresh',
+    props: {
+        height: {
+            required: true,
+        },
+        params: {
+            required: false,
+            type: Object,
+            default: function () {
+                return {}
+            }
+        },
+        request: {
+            required: true,
+            type: Function,
+        }
+    },
+    data() {
+        return {
+            noData: false,
+            loading: false,
+            refreshLoading: false,
+            pagination: {
+                page: 1,
+                limit: 3
+            },
+            list: []
+        };
+    },
+
+    mounted() {
+        this.loadData()
+    },
+    methods: {
+        // 刷新
+        async onRefresh() {
+            this.pagination.page = 1;
+            this.refreshLoading = true;
+            await this.loadData(true)
+            this.refreshLoading = false
+        },
+        getScroll(event) {
+            let scrollBottom =
+                event.target.scrollHeight -
+                event.target.scrollTop -
+                event.target.clientHeight;
+            // 距离底部20px以内 && 还有数据 && 没有正在加载中
+            if (scrollBottom <= 20 && !this.noData && !this.loading) {
+                this.pagination.page += 1;
+                this.getData();
+            }
+        },
+        async loadData(isClear) {
+            this.loading = true
+            let parmas = {
+                page: this.pagination.page, //   页数，
+                limit: this.pagination.limit, // 条数   
+            }
+            const res = await this.request({ ...parmas, ...this.params })
+            let list = res.data.map((item) => {
+                return {
+                    ...item,
+                }
+            })
+            if (isClear) {
+                this.list = list
+            } else {
+                this.list.push(...list)
+            }
+
+            this.loading = false
+            if (this.pagination.page * this.pagination.limit >= res.count) {
+                this.noData = true;
+            } else {
+                this.noData = false;
+            }
+        }
+    },
+
+
+
+    watch: {
+        params: {
+            handler() {
+                this.pagination.page = 1;
+                this.loadData(true)
+            },
+            deep: true,
+            immediate: false
+        }
+    },
+
+};
+</script>
+<style lang="less" scoped>
+.bottom_text {
+    text-align: center;
+    color: #969799;
+    font-size: 14px;
+}
+</style>

src/pages/components/Waitsent.vue

@@ -4,11 +4,9 @@
             <van-search style="width: 100%;" v-model="params.search" placeholder="请输入批次号" />
             <van-icon @click="onSearch" size="20" style="margin: 19px 8px 0 0px;" name="search" />
         </div>
-
-        <div class="batch_box" @scroll.passive="getScroll($event)"
-            style=" height: calc(100vh - 154px);overflow-y: auto;">
-            <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
-                <div class="batch" v-for="(item, index) in waiteList" :key="index">
+        <ScrollRefresh height="calc(100vh - 154px)" ref="scrollRefresh" :request="request">
+            <template v-slot="slotProps">
+                <div class="batch" v-for="(item, index) in slotProps.list" :key="index">
                     <div class="batch-top">
                         <div style="font-size: 16px;">批次号:{{ item.dispatchBatchNo
                             }}
@@ -18,53 +16,27 @@
                     <!-- 各个运单 -->
                     <div class="batchss"
                         :style="{ overflow: item.openCard ? 'auto' : 'hidden', height: item.openCard ? 'auto' : '130px', }">
-
-                        <div v-if="item.openCard == false" class="batch-middel">
+                        <div class="batch-middel" v-for="unfold in item.list" :key="unfold.id">
                             <div class="batch-middel-text">
-                                <div class="batch-middel-text-style">[{{ item.list.expressCompany }}]运单号:{{
-                item.list.expressNo }}</div>
-                                <div class="batch-middel-text-style">收件人：{{ item.list.recipient }}</div>
-                                <div class="batch-middel-text-style">部门：{{ item.list.departmentId }}</div>
-                                <div class="batch-middel-text-style">楼层：{{ item.list.floor }}</div>
-                                <div class="batch-middel-text-style">座位号：{{ item.list.sendSeat }}</div>
-                                <div style="display: flex;" class="batch-middel-text-style">联系方式:{{ item.list.phone }}
+                                <div class="batch-middel-text-style">[{{ unfold.expressCompany }}]运单号:{{
+                unfold.expressNo }}</div>
+                                <div class="batch-middel-text-style">收件人1：{{ unfold.recipient }}xxx</div>
+                                <div class="batch-middel-text-style">部门：{{ unfold.departmentId }}</div>
+                                <div class="batch-middel-text-style">楼层：{{ unfold.floor }}</div>
+                                <div class="batch-middel-text-style">座位号：{{ unfold.sendSeat }}</div>
+                                <div style="display: flex;" class="batch-middel-text-style">联系方式:{{ unfold.phone }}
                                     <van-button style="margin-top: -5px; border-radius: 6px;" type="info" plain
                                         size="mini">拨打</van-button>
                                 </div>
                             </div>
                             <div style="display: flex; justify-content:space-around; padding-top: 5px;">
                                 <van-button style="width: 100px; border-radius: 6px;" size="small" plain type="info"
-                                    @click="onReceiving(item, type = 1)">签收
+                                    @click="onReceiving(unfold, type = 2)">签收
                                 </van-button>
                                 <van-button style="width: 100px; border-radius: 6px;" size="small" plain type="danger"
-                                    @click="onSureRetention(item, type = 1)">设为滞留</van-button>
+                                    @click="onSureRetention(unfold, type = 2)">设为滞留</van-button>
                             </div>
                         </div>
-
-                        <div v-else>
-                            <div class="batch-middel" v-for="unfold in unfoldList" :key="unfold.id">
-                                <div class="batch-middel-text">
-                                    <div class="batch-middel-text-style">[{{ unfold.expressCompany }}]运单号:{{
-                unfold.expressNo }}</div>
-                                    <div class="batch-middel-text-style">收件人1：{{ unfold.recipient }}xxx</div>
-                                    <div class="batch-middel-text-style">部门：{{ unfold.departmentId }}</div>
-                                    <div class="batch-middel-text-style">楼层：{{ unfold.floor }}</div>
-                                    <div class="batch-middel-text-style">座位号：{{ unfold.sendSeat }}</div>
-                                    <div style="display: flex;" class="batch-middel-text-style">联系方式:{{ unfold.phone }}
-                                        <van-button style="margin-top: -5px; border-radius: 6px;" type="info" plain
-                                            size="mini">拨打</van-button>
-                                    </div>
-                                </div>
-                                <div style="display: flex; justify-content:space-around; padding-top: 5px;">
-                                    <van-button style="width: 100px; border-radius: 6px;" size="small" plain type="info"
-                                        @click="onReceiving(unfold, type = 2)">签收
-                                    </van-button>
-                                    <van-button style="width: 100px; border-radius: 6px;" size="small" plain
-                                        type="danger" @click="onSureRetention(unfold, type = 2)">设为滞留</van-button>
-                                </div>
-                            </div>
-                        </div>
-
                     </div>
 
                     <div @click="onUnfold(item)" class="batch-bottom">
@@ -72,20 +44,9 @@
                     </div>
 
                 </div>
-                <template v-if="!refreshLoading && waiteList.length > 0">
-                    <div class="bottom_text" v-if="loading">
-                        加载中...
-                    </div>
-                    <div class="bottom_text" v-else-if="noData">
-                        已经到底啦...
-                    </div>
-                </template>
-                <template v-if="waiteList.length === 0">
-                    <div>数据为空！</div>
-                </template>
+            </template>
+        </ScrollRefresh>
 
-            </van-pull-refresh>
-        </div>
 
         <!-- 签收 -->
         <van-popup v-model="receiving" style="width: 100%; height: 84%;">
@@ -152,16 +113,15 @@
 </template>
 
 <script>
+import ScrollRefresh from './ScrollRefresh.vue';
 import { appOutboundInquiry, appGetTheDetails, appSetStrands, appDelivery, appUploadTheSignature } from '@/api/index'
 export default {
     name: 'waitsent',
+    components: {
+        ScrollRefresh
+    },
     data() {
         return {
-            refreshLoading: false, // 刷新loading
-            loading: false, // 加载更多loading
-            noData: false, // 没有更多数据
-            waiteList: [],
-            unfoldList: [],//展开后获取的数据
             getOtherPhone: '',//他人签收
             otherCause: '',//滞留原因
             receiving: false,//签收
@@ -179,8 +139,6 @@ export default {
 
             params: {
                 search: '', //'SF202303221917',
-                page: 1,
-                limit: 3
             },
             onReceivingVlaue: {},//点击签收存放的数据
             onSureRetentionVlaue: {},//点击签收滞留的数据
@@ -190,66 +148,30 @@ export default {
     },
     mounted() {
         // 获取数据
-        this.getData();
+        // this.getData();
     },
     methods: {
-        // 刷新
-        async onRefresh() {
-            this.params.page = 1;
-            this.params.limit = 3;
-            this.refreshLoading = true;
-            await this.getData(true)
-            this.refreshLoading = false
-        },
+
         // 搜索批次号
         async onSearch() {
-            // 每次查询都查询第一页
-            this.params.page = 1;
-            this.getData(true)
+            this.$refs.scrollRefresh.loadData(true)
         },
-        async getData(isClear) {
-            this.loading = true
+        async request(_params) {
             let parmas = {
                 dispatchBatchNo: this.params.search, // 批次号
                 deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
                 isFinish: '2',//完成 1已完成 2未完成
-                page: this.params.page, //   页数，
-                limit: this.params.limit, // 条数
+                ..._params
 
             }
             const res = await appOutboundInquiry({ ...parmas }, { emulateJSON: true })
-            let waiteList = res.data.map((item) => {
-                return {
-                    ...item,
-                    openCard: false
-                }
+            res.data = res.data.map((item) => {
+                item.list = [item.list]
+                return item
             })
-            if (isClear) {
-                this.waiteList = waiteList
-            } else {
-                this.waiteList.push(...waiteList)
-            }
-
-            this.loading = false
-            if (this.params.page * this.params.limit >= res.count) {
-                this.noData = true;
-            } else {
-                this.noData = false;
-            }
-
-        },
-        // 滚动事件
-        getScroll(event) {
-            let scrollBottom =
-                event.target.scrollHeight -
-                event.target.scrollTop -
-                event.target.clientHeight;
-            // 距离底部20px以内 && 还有数据 && 没有正在加载中
-            if (scrollBottom <= 20 && !this.noData && !this.loading) {
-                this.params.page += 1;
-                this.getData();
-            }
-        },
+            return res
+        }
+        ,
         // 签收控制显示
         onReceiving(value, type) {
             if (type == 1) {
@@ -331,14 +253,12 @@ export default {
             }
 
             const res = await appDelivery({ ...params })
-            console.log(res, '........')
         },
         // 展开
         async onUnfold(waite) {
             const data = await appGetTheDetails({ dispatchBatchNo: waite.dispatchBatchNo })
-            console.log("===", data)
-            this.unfoldList = data.data
-            waite.openCard = !waite.openCard;
+            waite.list = [...data.data, ...data.data, ...data.data]
+            this.$set(waite, "openCard", !waite.openCard)
         }
     },
 }
@@ -351,11 +271,7 @@ export default {
     font-size: 12px;
 }
 
-.bottom_text {
-    text-align: center;
-    color: #969799;
-    font-size: 14px;
-}
+
 
 .container {
     height: 100%
@@ -394,9 +310,10 @@ export default {
             flex-wrap: wrap;
 
             &-style {
-                width: 165px;
+                width: 50%;
                 margin-top: 10px;
             }
+
         }
     }
 

src/pages/new/removal.vue

@@ -10,7 +10,7 @@
                     <van-cell :title="item">
                         <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                         <template #right-icon>
-                            <van-icon name="delete-o" @click="onDelete" class="delete" />
+                            <van-icon name="delete-o" @click="onDelete(item)" class="delete" />
                         </template>
                     </van-cell>
                 </van-cell-group>
@@ -26,6 +26,7 @@
 import { appDeliveryPersonDeliveries } from '../../api';
 import { Toast } from 'vant'
 import Batched from './batched.vue'
+import { getCompanyExpressNo } from "@/utils/utils"
 export default {
     name: 'Removal',
     components: {
@@ -57,12 +58,10 @@ export default {
         },
         // 生成批次
         async onBatch() {
-
-
             let data = {
                 deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
                 deliveryId: this.codes.join(','),    //快件单号
-                dispatchBatchNo: '202403261971'    //批次号
+                dispatchBatchNo: getCompanyExpressNo()    //批次号
             }
             const res = await appDeliveryPersonDeliveries({ ...data }, { emulateJSON: true })
             if (res.msg == 'success') {
@@ -70,8 +69,8 @@ export default {
             }
             console.log(res, 'res')
         },
-        onDelete(qwe) {
-            console.log('123', qwe)
+        onDelete(item) {
+            this.codes = this.codes.filter((_item) => _item !== item)
         },
         iemoval(value) {
             console.log(value)

src/pages/new/storage.vue

@@ -12,7 +12,7 @@
                 </div>
 
                 <van-field readonly clickable name="expressCompany" label="快递公司" :value="value" placeholder="请选择快递公司"
-                    @click="onShowPicker" />
+                    @click="onShowPicker" :rules="[{ required: true }]" />
                 <van-popup v-model="showPicker" position="bottom">
                     <van-picker show-toolbar :columns="GeLogisticsList" @confirm="onConfirm"
                         @cancel="showPicker = false" />
@@ -54,7 +54,8 @@
                             <van-checkbox v-model="checkbox" @change="onCheckboxChange" shape="square" /><span>到付</span>
                         </template>
                     </van-field>
-                    <van-field :disabled="isdisabled" v-model="object.payMoney" name="payMoney" placeholder="请输入到付备注" />
+                    <van-field :rules="[{ required: checkbox }]" :disabled="isdisabled" v-model="object.payMoney"
+                        name="payMoney" placeholder="请输入到付备注" />
                 </div>
 
                 <van-field v-model="object.remark" label="快递备注" name="remark" placeholder="请输入快递备注"
@@ -139,6 +140,7 @@ export default {
         // 搜索关键
         async searchCrux() {
             const res = await appGetEmployeeInfoByPhone({ inquire: this.searchKey }, { emulateJSON: true })
+
             this.searchKeyList = res.employeeInfo
             console.log(res, '123123123123')
         },
@@ -167,7 +169,9 @@ export default {
         },
         // 提交
         async onSubmit(values) {
-            // console.log(this.onGroupObject, 'onGroupObject')
+            console.log(values, 'values')
+
+            const phone = values.phone.split(",")[0]
             const params = {
                 isCompany: '否',
                 mailRoomId: this.onGroupObject.ROOM_ID,//收发室Id
@@ -182,7 +186,7 @@ export default {
                 // expressType,
                 // expressQuantity,
                 // expressCompany,
-                // phone
+                phone
                 // remark,
             }
             const originalObj = {

src/utils/utils.js

@@ -0,0 +1,8 @@
+function S4() {
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+};
+
+
+export const getCompanyExpressNo = () => {
+    return 'N' + new Date().getTime() + (S4() + S4() + S4())
+}