courier_mobile_front/src/pages/components/Waitsent.vue

<template>
    <div class="container">
        <van-search v-model="search" placeholder="请输入批次号" />

        <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="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" size="mini">拨打</van-button></div>
                </div>
                <div style="display: flex; padding-top: 5px;">
                    <van-button style="width: 100px; border-radius: 6px;" size="small" type="info"
                        @click="onReceiving">签收
                    </van-button>
                    <van-button style="width: 100px; border-radius: 6px;" size="small" type="danger"
                        @click="onRetention">设为滞留</van-button>
                </div>
            </div>
            <div 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 name="uploader" label="签收照片">
                        <template #input>
                            <van-uploader v-model="uploader" />
                        </template>
                    </van-field>
                    <van-field v-if="wer == '他人签收'" v-model="qwe" label="代取手机号" placeholder="请输入代取手机号" />
                    <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: 60%;">内容</van-popup>
        </div>
    </div>
</template>

<script>
export default {
    name: 'waitsent',
    data() {
        return {
            qwe:'',
            search: '',
            receiving: false,//签收
            retention: false,//滞留
            selectedOption: '', // 设置为空字符串，等待选择
            value: '',
            options: ['本人签收', '他人签收'],
            showPicker: false,
            wer:'',
            uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
        };
    },
    methods: {
        // 签收
        onReceiving() {
            this.receiving = true;
            this.selectedOption = this.options[0];
        },
        // 滞留
        onRetention() {
            this.retention = true;
        },
        onConfirm(value) {
            this.selectedOption = value;
            this.showPicker = false;
            this.wer = value
            console.log(value,'123')
        },
        // 签收完成
        onSubmit() {

        }
    },

    mounted() {
        this.selectedOption = this.options[0]; // 默认选择第一个选项
    }

};
</script>

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

.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: 0 6px;

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

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

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