courier_mobile_front/src/pages/components/Sented.vue

<template>
    <div class="container">
        <div style="display: flex; justify-content: space-between; background-color: #fff;">
            <van-search @search="onSearch" style="width: 100%;" v-model="params.search" placeholder="请输入批次号" />
            <!-- <van-icon @click="onSearch" size="20" style="margin: 19px 8px 0 0px;" name="search" /> -->
        </div>
        <ScrollRefresh height="calc(100vh - 99px)" ref="scrollRefresh" :request="request" :defaultLimit="6">
            <template v-slot="slotProps">
                <div class="onther" v-for="(item, index) in slotProps.list" :key="index">
                    <div class="onther-top">
                        <div style="font-size: 12px;">批次号：{{ item.dispatchBatchNo
                            }}
                        </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.time }}</div>
                        </div>
                    </div>
                    <div class="onther-bottom">
                        <van-cell is-link @click="showPopup(item)"><span
                                style="color: #169bd5;">展开查看详情</span></van-cell>
                    </div>
                </div>
            </template>

        </ScrollRefresh>

        <van-popup v-model="show" style="width: 100%; height: 60%;">
            <div class="batch-middel" v-for="(item, index) in popupList" :key="index">
                <div class="batch-middel-text">
                    <div class="batch-middel-text-style" style="width: 100%; margin-left: -4px;margin-top: 0px;">【{{
                        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.floorNum }}</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;">
                            {{ item.signinStatus == 0 ? '待签收' : `${item.signinStatus == 1 ?
                                '已签收' : `${item.signinStatus == 2 ? '代收' : `${item.signinStatus == 3 ? '拒收' : '延迟'}`}`}` }}
                        </span>
                        <!-- <span style="color: #1989fa;">查看</span> -->
                    </div>
                    <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>
                <div style="display: flex; padding-top: 5px;">
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { appOutboundInquiry, appGetTheDetails } from '@/api/index'
import ScrollRefresh from './ScrollRefresh.vue';
export default {
    name: 'waitsent',
    components: {
        ScrollRefresh
    },
    data() {
        return {
            show: false,
            params: {
                search: ''
            },
            popupList: [],//点击弹框后的
        };
    },
    methods: {

        async request(_params) {
            let parmas = {
                dispatchBatchNo: this.params.search, // 批次号
                deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
                isFinish: '1',//完成 1已完成 2未完成
                ..._params

            }
            const res = await appOutboundInquiry({ ...parmas }, { emulateJSON: true })
            res.data = res.data.map((item) => {
                const date = item.signatureTime.date
                const time = item.signatureTime.time
                return {
                    ...item,
                    openCard: false,
                    time: `${date.year}-${date.month}-${date.day} ${time.hour}:${time.minute}:${time.second}`
                }
            })
            return res
        },

        // 搜索批次号
        async onSearch() {
            this.$refs.scrollRefresh.onRefresh()
        },
        // 展开查看详情
        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 {
                font-size: 12px;
                margin-top: 10px;
            }
        }
    }

    &-bottom {
        padding: 10px 4px;
        color: #169bd5;
    }
}

.onther {
    background-color: #fff;
    margin: 10px;
    border-radius: 10px;
    padding: 5px;

    &-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0 10px 0;

        .jindu {
            color: #169bd5
        }
    }

    &-bottom {
        padding: 10px 0;


        /deep/ .van-cell {
            padding: 0;
        }
    }


}

.batch-middel {
    background-color: #f7f8fa;
    border-radius: 12px;
    padding: 10px 8px;
    height: auto;

    &-text {
        display: flex;
        flex-wrap: wrap;

        &-style {
            width: 165px;
            margin-top: 10px;
        }
    }
}
</style>