courier_mobile_front/src/pages/components/Waitsent.vue

<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-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>
                    </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>
                    </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>

            <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>
                </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>
                </van-form>
            </van-popup>
        </div>
    </div>
</template>

<script>
import { appOutboundInquiry } from '@/api/index'
export default {
    name: 'waitsent',
    data() {
        return {
            shouldHideOverflow: true,
            qwe: '',
            search: 'SF202303221917',
            receiving: false,//签收
            retention: false,//滞留
            selectedOption: '', // 设置为空字符串，等待选择
            selectedRetention: '',
            value: '',
            options: ['本人签收', '他人签收'],
            Retention: ['无法联系收件人', '其他原因'],
            showPicker: false,
            showRetention: false,
            wer: '',
            ert: '',
            uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
        };
    },
    methods: {
        // 搜索批次号
        async onSearch() {
            console.log('111')
            let parmas = {
                dispatchBatchNo: this.search, // 批次号
                deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
                isFinish: '2',//完成 1已完成 2未完成
                page: '1',
                limit: '1',

            }
            const res = await appOutboundInquiry({ ...parmas }, { emulateJSON: true })
            console.log(res, 'res==============')
        },
        // 签收
        onReceiving() {
            this.receiving = true;
            this.selectedOption = this.options[0];
        },
        // 滞留
        onSureRetention() {
            this.retention = true;
        },
        onConfirm(value) {
            this.selectedOption = value;
            this.showPicker = false;
            this.wer = value
        },
        onRetention(value) {
            this.selectedRetention = value;
            this.showRetention = false;
            this.ert = value
        },
        // 签收完成
        onSubmit() {

        },
        // 展开
        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',
            }
        }
    }

};
</script>

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

.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;
    }
}
</style>