courier_mobile_front/src/pages/components/Waitsent.vue

<template>
    <div class="container">
        <div class="container-searchNumber">
            <van-search style="width: 100%;" v-model="params.search" placeholder="请输入批次号" />
            <van-icon class="container-searchNumber-icon" @click="onSearch" size="20" name="search" />
        </div>
        <ScrollRefresh style="background-color: #f0eff4;" height="calc(100vh - 99px)" 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 class="batch-top-dispatchBatchNo">批次号:{{ item.dispatchBatchNo
                            }}
                        </div>
                        <div class="jindu">派送进度 {{ item.signed }}/{{ item.sumAnd }}</div>
                    </div>
                    <!-- 各个运单 -->
                    <div class="batchss"
                        :style="{ overflow: item.openCard ? 'auto' : 'hidden', height: item.openCard ? 'auto' : '140px', }">
                        <div class="batch-middel" v-for="(unfold, index) in item.list" :key="index">
                            <div class="batch-middel-text">
                                <div class="batch-middel-text-style"
                                    style="text-align: left; width: 100%; margin-left: -6px;">【{{
                                        unfold.expressCompany }}】运单号:{{
                                    unfold.expressNo }}</div>
                                <div style="display: flex; justify-content:  space-between; flex-wrap: wrap;">
                                    <div class="batch-middel-text-style">收件人：{{ unfold.recipient }}</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 }}
                                        <a :href="'tel:' + unfold.phone" style="padding-left: 6px;" type="info" plain
                                            size="mini">拨打</a>
                                    </div>
                                </div>
                            </div>
                            <div class="batch-middel-bottom">
                                <van-button class="batch-middel-bottom-buttom" size="small" plain type="info"
                                    @click="onReceiving(unfold)">签收
                                </van-button>
                                <van-button class="batch-middel-bottom-buttom" size="small" plain type="danger"
                                    @click="onSureRetention(unfold)">设为滞留</van-button>
                            </div>
                        </div>
                    </div>

                    <div @click="onUnfold(item)" class="batch-bottom">
                        {{ item.openCard ? "收起....." : "展开....." }}
                    </div>

                </div>
            </template>
        </ScrollRefresh>


        <!-- 签收 -->
        <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" :rules="[{ required: true }]" 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 ScrollRefresh from './ScrollRefresh.vue';
import { appOutboundInquiry, appGetTheDetails, appSetStrands, appDelivery, appUploadTheSignature } from '@/api/index'
export default {
    name: 'waitsent',
    components: {
        ScrollRefresh
    },
    data() {
        return {
            getOtherPhone: '',//他人签收
            otherCause: '',//滞留原因
            receiving: false,//签收
            retention: false,//滞留
            selectedOption: '本人签收', // 设置为空字符串，等待选择
            selectedRetention: '',
            value: '',
            options: ['本人签收', '他人签收'],
            Retention: ['无法联系收件人', '其他原因'],
            showPicker: false,
            showRetention: false,
            wer: '',
            ert: '',
            uploader: [],

            params: {
                search: '', //'SF202303221917',
            },
            onReceivingVlaue: {},//点击签收存放的数据
            onSureRetentionVlaue: {},//点击签收滞留的数据
            Agent: '',//是否待签(后续判断)
            getFileUrl: '',//返回的图片地址
        };
    },
    mounted() {
        // 获取数据
        // this.getData();
    },
    methods: {

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

            }
            const res = await appOutboundInquiry({ ...parmas }, { emulateJSON: true })
            res.data = res.data.map((item) => {
                item.list = [item.list]
                return item
            })
            return res
        }
        ,
        // 签收控制显示
        onReceiving(value) {

            this.onReceivingVlaue = value
            this.receiving = true;
            this.selectedOption = this.options[0];
        },
        // 签收选择确认弹框
        onConfirm(value) {
            this.selectedOption = value;
            this.showPicker = false;
            this.wer = value
        },
        // 滞留控制显示
        onSureRetention(value) {

            this.onSureRetentionVlaue = value
            this.retention = true;
        },
        // 确定滞留
        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 })
            if (res.code == 0) {
                this.$toast('滞留完成')
                this.retention = false
                // this.request()
                this.$router.push('/DeliveryInquiry')
            }
        },
        // 原因
        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;
        },
        // 签收完成
        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 })
            if (res.code == 0) {
                this.$toast('签收完成')
                this.receiving = false
                this.$refs.scrollRefresh.onRefresh()
            }
        },
        // 展开
        async onUnfold(waite) {
            const data = await appGetTheDetails({ dispatchBatchNo: waite.dispatchBatchNo })
            waite.list = data.data
            this.$set(waite, "openCard", !waite.openCard)
        }
    },
}


</script>

<style lang="less" scoped>
* {
    font-size: 12px;
}



.container {
    height: 100%;

    &-searchNumber {
        display: flex;
        justify-content: space-between;
        background-color: #fff;


        &-icon {
            margin: 19px 8px 0 0px;
        }
    }

    .batch {
        background-color: #fff;
        margin: 10px;

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

            &-dispatchBatchNo {
                font-size: 12px;

            }

            .jindu {
                color: #169bd5
            }
        }

        &-middel {
            // height: 120px;
            background-color: #f7f8fa;
            border-radius: 12px;
            margin: 10px 6px;


            &-text {
                padding: 0px 10px;

                &-style {
                    width: 50%;
                    font-size: 12px;
                    padding-top: 8px;
                }

            }

            &-bottom {
                display: flex;
                justify-content: flex-end;
                padding-top: 5px;

                &-buttom {
                    width: 70px;
                    height: 25px;
                    border-radius: 6px;
                    margin-right: 12px
                }
            }
        }

        &-bottom {
            padding: 10px 4px;
            color: #169bd5;
        }
    }
}
</style>