派件查询完成

build/utils.js

@@ -30,7 +30,7 @@ exports.cssLoaders = function (options) {
   }
 
   // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
+  function generateLoaders(loader, loaderOptions) {
     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 
     if (loader) {

config/index.js

@@ -12,6 +12,7 @@ module.exports = {
     proxyTable: {
       '/tianzong': {
         target: `https://tianzong.info666.com`,
+        // target: `http://192.168.31.47/`,
         changeOrigin: true, //开启代理  
         pathRewrite: { '/api': '/' } //这里重写路径/run就代理到对应地址
       },

src/api/index.js

@@ -84,12 +84,22 @@ export function appUploadTheSignature(data) {
 
 
 //快件签收-提件
-export function appDelivery(data, config) {
+export function appDelivery(data) {
     return request({
         url: '/tianzong/express/appDelivery',
         method: 'post',
         data: data,
-        ...config
+        emulateJSON: true
+    })
+}
+
+//派件查询-设为滞留
+export function appSetStrands(data) {
+    return request({
+        url: '/tianzong/express/appSetStrands',
+        method: 'post',
+        data: data,
+        emulateJSON: true
     })
 }
 
@@ -104,3 +114,18 @@ export function appOutboundInquiry(data, config) {
         ...config
     })
 }
+
+//派件查询-详情
+export function appGetTheDetails(data, config) {
+    return request({
+        url: '/tianzong/express/appGetTheDetails',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+
+
+
+
+

src/pages/components/Sented.vue

@@ -1,137 +1,248 @@
 <template>
     <div class="container">
         <div style="display: flex; justify-content: space-between; background-color: #fff;">
-            <van-search style="width: 100%;" v-model="search" placeholder="请输入批次号" />
+            <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="onther">
-            <div class="onther-top">
-                <div style="font-size: 16px;">批次号：<span style="font-size: 16px;">ff123</span></div>
-                <div class="jindu">派送进度 10/15</div>
-            </div>
-            <div class="onther-middel">
-                <div class="onther-middel-text">
-                    <div class="onther-middel-text-style">批次完成时间：xxxxxxxxxxxxxxx</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="onther" v-for="item in waiteList" :key="item.id">
+                    <div class="onther-top">
+                        <div style="font-size: 16px;">批次号：<span style="font-size: 16px;">{{ item.dispatchBatchNo
+                                }}</span>
+                        </div>
+                        <div class="jindu">派送进度 {{ item.signed }}/{{ item.sumAnd }}</div>
+                    </div>
+                    <div class="onther-middel">
+                        <div class="onther-middel-text">
+                            <div class="onther-middel-text-style">批次完成时间：{{ item.year }}-{{ item.month }}-{{
+                item.day }} {{ item.hour }}:{{ item.minute }}:{{ item.second }}</div>
+                        </div>
+                    </div>
+                    <div class="onther-bottom">
+                        <van-cell style="color: aqua;" is-link @click="showPopup(item)">展示弹出层</van-cell>
+                    </div>
                 </div>
-            </div>
-            <div class="onther-bottom">
-                <van-cell style="color: aqua;" is-link @click="showPopup">展示弹出层</van-cell>
-            </div>
+
+
+            </van-pull-refresh>
         </div>
+
+
         <van-popup v-model="show" style="width: 100%; height: 60%;">
-            <div class="batch-middel">
+            <div class="batch-middel" v-for="item in popupList" :key="id">
                 <div class="batch-middel-text">
-                    <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
-                    <div class="batch-middel-text-style">收件人：xxx</div>
-                    <div class="batch-middel-text-style">部门：</div>
-                    <div class="batch-middel-text-style">楼层：</div>
-                    <div class="batch-middel-text-style">座位号：</div>
-                    <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 </div>
+                    <div class="batch-middel-text-style">[{{ item.expressCompany }}]运单号:{{
+                item.expressNo }}</div>
+                    <div class="batch-middel-text-style">收件人：{{ item.recipient }}</div>
+                    <div class="batch-middel-text-style">部门：{{ item.departmentId }}</div>
+                    <div class="batch-middel-text-style">楼层：{{ item.floor }}</div>
+                    <div class="batch-middel-text-style">座位号：{{ item.sendSeat }}</div>
+                    <div style="display: flex;" class="batch-middel-text-style">联系方式:{{ item.phone }} </div>
                     <div class="batch-middel-text-style">当前状态:
-                        <span style="color: #1989fa;">已签收</span>
+                        <span style="color: #1989fa;">{{ item.signinStatus == 0 ? '待签收' : `${item.signinStatus == 1 ?
+                '已签收' : '代收'}` }}</span>
                         <span style="color: #1989fa;">查看</span>
                     </div>
-                    <div class="batch-middel-text-style">签收时间：</div>
-
-                </div>
-                <div style="display: flex; padding-top: 5px;">
-                </div>
-            </div>
-            <div class="batch-middel">
-                <div class="batch-middel-text">
-                    <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
-                    <div class="batch-middel-text-style">收件人：xxx</div>
-                    <div class="batch-middel-text-style">部门：</div>
-                    <div class="batch-middel-text-style">楼层：</div>
-                    <div class="batch-middel-text-style">座位号：</div>
-                    <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 </div>
-                    <div class="batch-middel-text-style">当前状态:
-                        <span style="color: #1989fa;">已签收</span>
-                        <span style="color: #1989fa;">查看</span>
+                    <div class="batch-middel-text-style">签收时间：{{ item.signatureTime == undefined ? '' :
+                item.signatureTime.date.year }}-{{ item.signatureTime == undefined ? '' :
+                item.signatureTime.date.month }}-{{ item.signatureTime == undefined ? '' :
+                item.signatureTime.date.day }} {{ item.signatureTime == undefined ? '' :
+                item.signatureTime.time.hour }}:{{ item.signatureTime == undefined ? '' :
+                item.signatureTime.time.minute }}:{{ item.signatureTime == undefined ? '' :
+                        item.signatureTime.time.second }}
                     </div>
-                    <div class="batch-middel-text-style">签收时间：</div>
 
                 </div>
                 <div style="display: flex; padding-top: 5px;">
                 </div>
             </div>
-            <div class="batch-middel">
-                <div class="batch-middel-text">
-                    <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
-                    <div class="batch-middel-text-style">收件人：xxx</div>
-                    <div class="batch-middel-text-style">部门：</div>
-                    <div class="batch-middel-text-style">楼层：</div>
-                    <div class="batch-middel-text-style">座位号：</div>
-                    <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 </div>
-                    <div class="batch-middel-text-style">当前状态:
-                        <span style="color: #1989fa;">已签收</span>
-                        <span style="color: #1989fa;">查看</span>
-                    </div>
-                    <div class="batch-middel-text-style">签收时间：</div>
 
-                </div>
-                <div style="display: flex; padding-top: 5px;">
-                </div>
-            </div>
         </van-popup>
 
 
-
-
     </div>
 </template>
 
 <script>
-import { appOutboundInquiry } from '@/api/index'
+import { appOutboundInquiry, appGetTheDetails } from '@/api/index'
 export default {
-    name: 'sented',
+    name: 'waitsent',
     data() {
         return {
-            search: '',
+            refreshLoading: false, // 刷新loading
+            loading: false, // 加载更多loading
+            noData: false, // 没有更多数据
+            waiteList: [],
+            uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
             show: false,
+            params: {
+                search: '', //'SF202303221917',
+                page: 1,
+                limit: 6
+            },
+            // timeList: []
+            popupList: [],//点击弹框后的
         };
     },
     mounted() {
-        // this.getAppOutboundInquiry()
+        // 获取数据
+        this.getData();
+
+
     },
     methods: {
-        // 触发查询
-        async getAppOutboundInquiry() {
-
+        // 刷新
+        async onRefresh() {
+            this.params.page = 1;
+            this.params.limit = 6;
+            this.refreshLoading = true;
+            await this.getData(true)
+            this.refreshLoading = false
+        },
+        // 搜索批次号
+        async onSearch() {
+            // 每次查询都查询第一页
+            this.params.page = 1;
+            this.getData(true)
+        },
+        async getData(isClear) {
+            this.loading = true
             let parmas = {
-                dispatchBatchNo: this.search, // 批次号
+                dispatchBatchNo: this.params.search, // 批次号
                 deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
                 isFinish: '1',//完成 1已完成 2未完成
-                page: '1',
-                limit: '1',
+                page: this.params.page, //  页数，
+                limit: this.params.limit, // 条数
 
             }
             const res = await appOutboundInquiry({ ...parmas }, { emulateJSON: true })
-            console.log(res, 'res================================')
-        },
+            let waiteList = res.data.map((item) => {
+                return {
+                    ...item,
+                    openCard: false,
+                }
+            })
+            let timeListA = res.data.map((item) => {
+                return item.signatureTime.date
+            })
+            let timeListB = res.data.map((item) => {
+                return item.signatureTime.time
+            })
+            this.timeList = timeListA.map((obj1, index) => ({
+                ...obj1,
+                ...timeListB[index] // 注意：这里假设两个数组长度相同且索引匹配  
+            }));
 
-        // 查询
-        onSearch() {
-            this.search = 'SF202303221917'
-            this.getAppOutboundInquiry()
-            console.log(res, 'res==============')
+            let waiteListA = waiteList.map((obj1, index) => ({
+                ...obj1,
+                ...this.timeList[index] // 注意：这里假设两个数组长度相同且索引匹配  
+            }));
+
+            console.log(waiteListA, 'this.timeList===============')
+
+            if (isClear) {
+                this.waiteList = waiteListA
+            } else {
+                this.waiteList.push(...waiteListA)
+            }
+
+            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();
+            }
         },
         // 展示弹出层
-        showPopup() {
+        async showPopup(value) {
             this.show = true;
+            const res = await appGetTheDetails({ dispatchBatchNo: value.dispatchBatchNo })
+            this.popupList = res.data
         },
-
     },
 
+
+
 };
 </script>
 
 <style lang="less" scoped>
 * {
+    font-size: 12px;
+}
+
+.bottom_text {
+    text-align: center;
+    color: #969799;
     font-size: 14px;
 }
 
+.container {
+    height: 100%
+}
+
+
+.batchss {
+    height: 130px;
+    // overflow: hidden;
+}
+
+.batch {
+    background-color: #fff;
+    margin: 10px;
+
+    &-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 0 6px 0;
+
+        .jindu {
+            color: #169bd5
+        }
+    }
+
+    &-middel {
+        height: 120px;
+        background-color: #f2f2f2;
+        border-radius: 12px;
+        margin: 10px 6px;
+
+
+        &-text {
+            display: flex;
+            flex-wrap: wrap;
+
+            &-style {
+                width: 165px;
+                margin-top: 10px;
+            }
+        }
+    }
+
+    &-bottom {
+        padding: 10px 4px;
+        color: #169bd5;
+    }
+}
+
 .onther {
     background-color: #fff;
     margin: 10px;

src/pages/components/Waitsent.vue

@@ -1,141 +1,172 @@
 <template>
     <div class="container">
         <div style="display: flex; justify-content: space-between; background-color: #fff;">
-            <van-search style="width: 100%;" v-model="search" placeholder="请输入批次号" />
+            <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">
-            <div class="batch-top">
-                <div style="font-size: 16px;">批次号：<span style="font-size: 16px;">ff123</span></div>
-                <div class="jindu">派送进度 10/15</div>
-            </div>
-            <!-- 各个运单 -->
-            <div class="batchss" :style="batchssStyle">
-                <div class="batch-middel">
-                    <div class="batch-middel-text">
-                        <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
-                        <div class="batch-middel-text-style">收件人：xxx</div>
-                        <div class="batch-middel-text-style">部门：</div>
-                        <div class="batch-middel-text-style">楼层：</div>
-                        <div class="batch-middel-text-style">座位号：</div>
-                        <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 <van-button
-                                style="margin-top: -5px; border-radius: 6px;" type="info" plain
-                                size="mini">拨打</van-button>
+
+        <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">
+                    <div class="batch-top">
+                        <div style="font-size: 16px;">批次号：<span style="font-size: 16px;">{{ item.dispatchBatchNo
+                                }}</span>
                         </div>
+                        <div class="jindu">派送进度 {{ item.signed }}/{{ item.sumAnd }}</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">签收
-                        </van-button>
-                        <van-button style="width: 100px; border-radius: 6px;" size="small" plain type="danger"
-                            @click="onSureRetention">设为滞留</van-button>
-                    </div>
-                </div>
-                <div class="batch-middel">
-                    <div class="batch-middel-text">
-                        <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
-                        <div class="batch-middel-text-style">收件人：xxx</div>
-                        <div class="batch-middel-text-style">部门：</div>
-                        <div class="batch-middel-text-style">楼层：</div>
-                        <div class="batch-middel-text-style">座位号：</div>
-                        <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 <van-button
-                                style="margin-top: -5px; border-radius: 6px;" type="info" plain
-                                size="mini">拨打</van-button>
+                    <!-- 各个运单 -->
+                    <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-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 }}
+                                    <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)">签收
+                                </van-button>
+                                <van-button style="width: 100px; border-radius: 6px;" size="small" plain type="danger"
+                                    @click="onSureRetention(item, type = 1)">设为滞留</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 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">签收
-                        </van-button>
-                        <van-button style="width: 100px; border-radius: 6px;" size="small" plain type="danger"
-                            @click="onSureRetention">设为滞留</van-button>
-                    </div>
-                </div>
 
+                    <div @click="onUnfold(item)" class="batch-bottom">
+                        {{ item.openCard ? "收起....." : "展开....." }}
+                    </div>
 
-            </div>
-
-            <div @click="onUnfold" class="batch-bottom">
-                展开.....
-            </div>
-
-            <!-- 签收 -->
-            <van-popup v-model="receiving" style="width: 100%; height: 85%;">
-                <div style="font-size: 20px; text-align: center; ">派件签收</div>
-                <van-form @submit="onSubmit">
-                    <van-field label="运单号" value="xxx" readonly />
-                    <van-field label="快件类型" value="xxx" readonly />
-                    <van-field label="快递公司" value="xxx" readonly />
-                    <van-field label="部门" value="xxx" readonly />
-                    <van-field label="座位号" value="xxx" readonly />
-                    <van-field label="收件人" value="xxx" readonly />
-                    <van-field label="楼层" value="xxx" readonly />
-                    <van-field label="联系方式" value="xxx" readonly />
-
-                    <van-field readonly clickable name="picker" :value="selectedOption" label="签收类型"
-                        placeholder="点击签收类型" @click="showPicker = true" />
-                    <van-popup v-model="showPicker" position="bottom">
-                        <van-picker show-toolbar :columns="options" @confirm="onConfirm" @cancel="showPicker = false" />
-                    </van-popup>
-                    <van-field v-if="wer == '他人签收'" v-model="qwe" :rules="[{ required: true }]" label="代取手机号"
-                        placeholder="请输入代取手机号" />
-                    <van-field name="uploader" label="签收照片">
-                        <template #input>
-                            <van-uploader v-model="uploader" />
-                        </template>
-                    </van-field>
-
-                    <div style="margin: 16px;">
-                        <van-button round block type="info" native-type="submit">签收完成</van-button>
+                </div>
+                <template v-if="!refreshLoading && waiteList.length > 0">
+                    <div class="bottom_text" v-if="loading">
+                        加载中...
                     </div>
-                </van-form>
-
-            </van-popup>
-
-            <!-- 设为滞留 -->
-            <van-popup v-model="retention" style="width: 100%; height: 75%;">
-                <div style="font-size: 20px; text-align: center; ">派件滞留</div>
-                <van-form @submit="onSubmit">
-                    <van-field label="运单号" value="xxx" readonly />
-                    <van-field label="快件类型" value="xxx" readonly />
-                    <van-field label="快递公司" value="xxx" readonly />
-                    <van-field label="部门" value="xxx" readonly />
-                    <van-field label="座位号" value="xxx" readonly />
-                    <van-field label="收件人" value="xxx" readonly />
-                    <van-field label="楼层" value="xxx" readonly />
-                    <van-field label="联系方式" value="xxx" readonly />
-
-                    <van-field readonly clickable name="picker" :value="selectedRetention" label="滞留原因"
-                        placeholder="点击签收类型" @click="showRetention = true" />
-                    <van-popup v-model="showRetention" position="bottom">
-                        <van-picker show-toolbar :columns="Retention" @confirm="onRetention"
-                            @cancel="showRetention = false" />
-                    </van-popup>
-                    <van-field v-if="ert == '其他原因'" v-model="qwe" label="其他原因" :rules="[{ required: true }]"
-                        placeholder="请输入其他原因" />
-
-
-                    <div style="margin: 16px;">
-                        <van-button round block native-type="submit" type="danger">设为滞留</van-button>
+                    <div class="bottom_text" v-else-if="noData">
+                        已经到底啦...
                     </div>
-                </van-form>
-            </van-popup>
+                </template>
+                <template v-if="waiteList.length === 0">
+                    <div>数据为空！</div>
+                </template>
+
+            </van-pull-refresh>
         </div>
+
+        <!-- 签收 -->
+        <van-popup v-model="receiving" style="width: 100%; height: 84%;">
+            <div style="font-size: 20px; text-align: center; margin-top: 12px;">派件签收</div>
+            <van-form @submit="onReceipt">
+                <van-field name="expressNo" label="运单号" :value="onReceivingVlaue.expressNo" readonly />
+                <van-field label="快件类型" :value="onReceivingVlaue.expressType" readonly />
+                <van-field label="快递公司" :value="onReceivingVlaue.expressCompany" readonly />
+                <van-field label="部门" :value="onReceivingVlaue.departmentId" readonly />
+                <van-field label="座位号" :value="onReceivingVlaue.sendSeat" readonly />
+                <van-field label="收件人" :value="onReceivingVlaue.recipient" readonly />
+                <van-field label="楼层" :value="onReceivingVlaue.floor" readonly />
+                <van-field label="联系方式" :value="onReceivingVlaue.phone" readonly />
+
+                <van-field readonly clickable name="picker" :value="selectedOption" label="签收类型" placeholder="点击签收类型"
+                    @click="showPicker = true" />
+                <van-popup v-model="showPicker" position="bottom">
+                    <van-picker show-toolbar :columns="options" @confirm="onConfirm" @cancel="showPicker = false" />
+                </van-popup>
+                <van-field v-if="wer == '他人签收'" v-model="getOtherPhone" :rules="[{ required: true }]" label="代取手机号"
+                    placeholder="请输入代取手机号" />
+                <van-field name="uploader" label="签收照片">
+                    <template #input>
+                        <van-uploader v-model="uploader" :after-read="afterRead" :before-read="beforeRead"
+                            :max-count="1" />
+                    </template>
+                </van-field>
+
+                <div style="margin: 16px;">
+                    <van-button round block type="info" native-type="submit">签收完成</van-button>
+                </div>
+            </van-form>
+        </van-popup>
+
+        <!-- 设为滞留 -->
+        <van-popup v-model="retention" style="width: 100%; height: 75%;">
+            <div style="font-size: 20px; text-align: center; ">派件滞留</div>
+            <van-form @submit="onSetRetention">
+                <van-field name="expressNo" label="运单号" :value="onSureRetentionVlaue.expressNo" readonly />
+                <van-field label="快件类型" :value="onSureRetentionVlaue.expressType" readonly />
+                <van-field label="快递公司" :value="onSureRetentionVlaue.expressCompany" readonly />
+                <van-field label="部门" :value="onSureRetentionVlaue.departmentId" readonly />
+                <van-field label="座位号" :value="onSureRetentionVlaue.sendSeat" readonly />
+                <van-field label="收件人" :value="onSureRetentionVlaue.recipient" readonly />
+                <van-field label="楼层" :value="onSureRetentionVlaue.floor" readonly />
+                <van-field label="联系方式" :value="onSureRetentionVlaue.phone" readonly />
+
+                <van-field readonly clickable name="picker" :value="selectedRetention" label="滞留原因" placeholder="点击签收类型"
+                    @click="showRetention = true" />
+                <van-popup v-model="showRetention" position="bottom">
+                    <van-picker show-toolbar :columns="Retention" @confirm="onRetention"
+                        @cancel="showRetention = false" />
+                </van-popup>
+                <van-field v-if="ert == '其他原因'" v-model="otherCause" label="其他原因" :rules="[{ required: true }]"
+                    placeholder="请输入其他原因" />
+
+
+                <div style="margin: 16px;">
+                    <van-button round block native-type="submit" type="danger">设为滞留</van-button>
+                </div>
+            </van-form>
+        </van-popup>
     </div>
 </template>
 
 <script>
-import { appOutboundInquiry } from '@/api/index'
+import { appOutboundInquiry, appGetTheDetails, appSetStrands, appDelivery, appUploadTheSignature } from '@/api/index'
 export default {
     name: 'waitsent',
     data() {
         return {
-            shouldHideOverflow: true,
-            qwe: '',
-            search: 'SF202303221917',
+            refreshLoading: false, // 刷新loading
+            loading: false, // 加载更多loading
+            noData: false, // 没有更多数据
+            waiteList: [],
+            unfoldList: [],//展开后获取的数据
+            getOtherPhone: '',//他人签收
+            otherCause: '',//滞留原因
             receiving: false,//签收
             retention: false,//滞留
-            selectedOption: '', // 设置为空字符串，等待选择
+            selectedOption: '本人签收', // 设置为空字符串，等待选择
             selectedRetention: '',
             value: '',
             options: ['本人签收', '他人签收'],
@@ -144,67 +175,177 @@ export default {
             showRetention: false,
             wer: '',
             ert: '',
-            uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
+            uploader: [],
+
+            params: {
+                search: '', //'SF202303221917',
+                page: 1,
+                limit: 3
+            },
+            onReceivingVlaue: {},//点击签收存放的数据
+            onSureRetentionVlaue: {},//点击签收滞留的数据
+            Agent: '',//是否待签(后续判断)
+            getFileUrl: '',//返回的图片地址
         };
     },
+    mounted() {
+        // 获取数据
+        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() {
-            console.log('111')
+            // 每次查询都查询第一页
+            this.params.page = 1;
+            this.getData(true)
+        },
+        async getData(isClear) {
+            this.loading = true
             let parmas = {
-                dispatchBatchNo: this.search, // 批次号
+                dispatchBatchNo: this.params.search, // 批次号
                 deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
                 isFinish: '2',//完成 1已完成 2未完成
-                page: '1',
-                limit: '1',
+                page: this.params.page, //   页数，
+                limit: this.params.limit, // 条数
 
             }
             const res = await appOutboundInquiry({ ...parmas }, { emulateJSON: true })
-            console.log(res, 'res==============')
+            let waiteList = res.data.map((item) => {
+                return {
+                    ...item,
+                    openCard: false
+                }
+            })
+            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;
+            }
+
         },
-        // 签收
-        onReceiving() {
+        // 滚动事件
+        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();
+            }
+        },
+        // 签收控制显示
+        onReceiving(value, type) {
+            if (type == 1) {
+                this.onReceivingVlaue = value.list
+            } else {
+                this.onSureRetentionVlaue = value
+            }
             this.receiving = true;
             this.selectedOption = this.options[0];
+            console.log(this.onReceivingVlaue, 'this.onReceivingVlaue')
         },
-        // 滞留
-        onSureRetention() {
-            this.retention = true;
-        },
+        // 签收选择确认弹框
         onConfirm(value) {
             this.selectedOption = value;
             this.showPicker = false;
             this.wer = value
         },
+        // 滞留控制显示
+        onSureRetention(value, type) {
+            if (type == 1) {
+                this.onSureRetentionVlaue = value.list
+            } else {
+                this.onSureRetentionVlaue = value
+            }
+            this.retention = true;
+            console.log(this.onSureRetentionVlaue, type, 'this.onSureRetentionVlaue')
+        },
+        // 确定滞留
+        async onSetRetention(value) {
+            console.log(value)
+            let params = {
+                expressNo: value.expressNo,
+                sendRemark: value.picker
+            }
+            if (value.picker == '其他原因') {
+                params.sendRemark = this.otherCause
+            }
+            const res = await appSetStrands({ ...params })
+            console.log(res, '........')
+        },
+        // 原因
         onRetention(value) {
             this.selectedRetention = value;
             this.showRetention = false;
             this.ert = value
         },
+        // 文件读取完成后的钩子
+        async afterRead(file) {
+            console.log(file)
+            const formData = new FormData();
+            formData.append('file', file.file); // 这里的 'file' 是后端接收文件的字段名
+            const res = await appUploadTheSignature(formData)
+            this.getFileUrl = res.data
+        },
+        beforeRead(file) {
+            // 在这里可以添加对文件的校验逻辑
+            // 如果返回 true, 则继续读取文件
+            return true;
+        },
         // 签收完成
-        onSubmit() {
+        async onReceipt(value) {
+            console.log('123')
+            console.log(value)
+            if (value.picker == '他人签收') {
+                this.Agent = 2
+            } else {
+                this.Agent = 1
+            }
+            let params = {
+                signEnclosureImg: this.getFileUrl,//签署图片  
+                deliveryId: value.expressNo,  //快递单号
+                deliveryPeopleId: localStorage.getItem('courierId'), //派件员id
+                isCollectAgent: this.Agent,//是否代签
+                collectAgentNumber: value.picker // 原因
+                // expressNo: value.expressNo,
+            }
+            if (value.picker == '他人签收') {
+                params.collectAgentNumber = this.getOtherPhone
+            }
 
+            const res = await appDelivery({ ...params })
+            console.log(res, '........')
         },
-        // 展开
-        onUnfold() {
-            this.shouldHideOverflow = !this.shouldHideOverflow;
-            console.log(this.shouldHideOverflow, '44')
-        }
-    },
-
-    mounted() {
-        this.selectedOption = this.options[0]; // 默认选择第一个选项
     },
-    computed: {
-        batchssStyle() {
-            return {
-                overflow: this.shouldHideOverflow ? 'hidden' : 'auto',
-                height: this.shouldHideOverflow ? '130px' : 'auto',
-            }
-        }
+    // 展开
+    async onUnfold(waite) {
+        const data = await appGetTheDetails({ dispatchBatchNo: waite.dispatchBatchNo })
+        console.log("===", data)
+        this.unfoldList = data.data
+        waite.openCard = !waite.openCard;
     }
+}
+
+
+
 
-};
 </script>
 
 <style lang="less" scoped>
@@ -212,6 +353,17 @@ export default {
     font-size: 12px;
 }
 
+.bottom_text {
+    text-align: center;
+    color: #969799;
+    font-size: 14px;
+}
+
+.container {
+    height: 100%
+}
+
+
 .batchss {
     height: 130px;
     // overflow: hidden;

src/pages/new/deliveryInquiry.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="width: 100vw;">
         <back :title="titlename"></back>
         <van-tabs v-model="active" @click="onClick">
             <van-tab title="待派件">
@@ -36,7 +36,7 @@ export default {
                 deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
                 isFinish: name == 0 ? '2' : '1',//完成 1已完成 2未完成
                 page: '1',
-                limit: '1',
+                limit: name == 0 ? '3' : '6',
 
             }
             const res = await appOutboundInquiry({ ...parmas }, { emulateJSON: true })