courier_mobile_front/src/pages/new/sureCombine.vue

<template>
    <div class="container">
        <div style="padding: 20px 0;">合并签收以下快件:</div>
        <van-form @submit="onSubmit">
            <van-field name="checkboxGroup">
                <template #input>
                    <van-checkbox-group v-model="checkboxGroup">
                        <van-checkbox disabled style="margin-bottom: 10px;" :name="item.id" shape="square"
                            v-for="item in goodsList" :key="item.id"> {{ item.expressNo }} & {{ item.expressType
                            }} & {{ item.expressQuantity }}件 &{{ item.isPayOnDelivery == '否' ? '非到付' : '到付' }}
                        </van-checkbox>
                    </van-checkbox-group>
                </template>
            </van-field>

            <van-field name="uploader" label="上传照片" :rules="[{ required: true, message: '请上传图片' }]">
                <template #input>
                    <van-uploader v-model="uploader" :after-read="afterRead" :before-read="beforeRead" :max-count="1" />
                </template>
            </van-field>

            <van-button style="height: 40px; width: 150px; border-radius: 8px; margin-right: 20px;" type="info"
                native-type="submit">确定签收</van-button>

            <van-button style="height: 40px; width: 150px; border-radius: 8px;" type="default"
                @click="back">返回上一级</van-button>
        </van-form>
    </div>
</template>

<script>
import { appDelivery, appUploadTheSignature } from '@/api/index'
import axios from 'axios';
export default {
    name: 'sureCombine',
    props: ['isCombine', 'goodsList'],
    data() {
        return {
            checkbox: false,
            checkboxGroup: [],
            uploader: [],//图片
        };
    },
    mounted() {
        // 在组件挂载后，设置默认选中的值  
        this.checkboxGroup = this.goodsList.map(item => item.id);
    },
    methods: {
        beforeRead(file) {
            // 在这里可以添加对文件的校验逻辑
            // 如果返回 true, 则继续读取文件
            return true;
        },
        // 文件读取完成后的钩子
        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
        },
        async onSubmit(values) {
            let data = []
            this.goodsList.forEach((item) => {
                if (values.checkboxGroup.find((itemA) => itemA === item.id)) {
                    data.push(item.expressNo)
                }
            })
            const params = {
                signEnclosureImg: this.getFileUrl,//签署图片
                deliveryId: data.join(','),//快递单号逗号隔开
                deliveryPeopleId: localStorage.getItem('courierId'),// 派件员id
            }
            const res = await appDelivery({ ...params }, { emulateJSON: true, loading: true, message: '签收中' })
            if (res.code == 0) {
                this.$toast('签收成功')
                this.$router.push('/')
            } else {
                this.$toast('签收失败')
            }

        },
        back() {
            this.$emit('isCombine', true)
        },
    }

};
</script>



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

.van-field__label {
    width: 4rem;
}

.container {
    padding: 2px 10px 0 10px;
    background-color: #fff;
}
</style>