crm-app-vue3/pages/orderDetailNew/mixin/imgUploadAndDownLoad.js

export default {
    methods: {

        //删除图片
        deleteImage(item) {
            uni.showModal({
                title: '提示',
                content: '确定要删除这张图片吗？',
                success: async (res) => {
                    if (res.confirm) {
                        // 调接口删除
                        console.log('现在要删除的文件文件是:', item.id)
                        try {
                            await uni.$u.api.deleteClueFile([item.id])
                            uni.showToast({
                                title: '删除成功',
                                icon: 'success',
                                duration: 2000
                            })
                        } catch (error) {
                            uni.showToast({
                                title: '删除失败',
                                icon: 'error',
                                duration: 2000
                            })
                        }
                        // 删除成功后刷新列表
                        this.getList('2', '1', this.currentReceipt.id);
                        this.getList('2', '2', this.currentReceipt.id);
                        this.getList('2', '3', this.currentReceipt.id);
                    }
                }
            })
        },
        //获取文件列表
        async getList(type, orderFileType, receiptID) {
            console.log('获取文件列表', type, receiptID)
            // console.log('当前的订单id', this.orderDetail.id)
            // console.log('当前的收单id', this.currentReceipt.id)
            try {
                const params = {
                    clueId: this.orderDetail.clueId,
                    sourceId: this.currentReceipt.id,//默认先用receiptID查,如果没有返回情况下用orderID查
                    type,
                    orderFileType,
                    isDuplicate: '1',//先传1
                    pageNum: 1,
                    pageSize: 1000 // 设置一个较大的值以获取所有数据
                }
                const response = await uni.$u.api.selectClueFileByDto(params)
                if (orderFileType == '1') {
                    this.trueUploadList = response.rows.filter(item => item.sourceId == receiptID) || []
                } else if (orderFileType == '2') {
                    this.chatRecordsUploadList = response.rows.filter(item => item.sourceId == receiptID) || []
                } else if (orderFileType == '3') {
                    this.detailImages = response.rows.filter(item => item.sourceId == receiptID) || []
                }
            } catch (error) {
                uni.$u.toast(`获取列表失败：${error}`)
                this.trueUploadList = []
                this.chatRecordsUploadList = []
            }
        },
        // 选择图片
        uploadImage(type, receiptID) {
            console.log('当前上传的receiptID是', receiptID)
            uni.chooseImage({
                count: 9, // 最多选择9张
                sizeType: ['compressed'], // 压缩图片
                sourceType: ['album', 'camera'], // 从相册选择或拍照
                success: (res) => {
                    const tempFilePaths = res.tempFilePaths
                    console.log('上传的图片路径:11', tempFilePaths)
                    this.uploadToServer(tempFilePaths, type, receiptID)
                },
                fail: (err) => {
                    console.error('选择图片失败:', err)
                }
            })
        },
        // 上传到服务器
        async uploadToServer(filePaths, type, receiptID) {
            // 实际的上传逻辑
            try {
                //实物图的话就是1,聊天记录的话就是2,高清细节图的话就是3
                let p = type == 'truePic' ? '1' : type == 'chatRecords' ? '2' : type == 'detailImages' ? '3' : ''
                console.log('当前上传的图片类型是', p)
                const res = await Promise.all(filePaths.map(filePath => this.uploadFile(filePath, p)));

                this.bindOrder(p, receiptID);

                this.getList('2', '1', this.currentReceipt.id);
                this.getList('2', '2', this.currentReceipt.id);
                this.getList('2', '3', this.currentReceipt.id);


            } catch (error) {
                console.error('上传失败:', error);
                uni.$u.toast('上传失败');
            }
        },
        // 上传文件
        async uploadFile(fileUrl, orderFileType) {
            try {
                uni.showLoading({
                    title: '上传中...',
                    mask: true
                });

                // 调用统一的上传接口
                const { data } = await uni.$u.api.uploadFile(fileUrl);

                const fileObj = {
                    fileSize: data.fileSize,
                    fileSuffix: data.fileSuffix,
                    fileName: data.name,
                    fileUrl: data.url,
                    orderFileType: orderFileType
                };
                this.bindList.push(fileObj);

            } catch (error) {
                uni.hideLoading();
                console.error('文件上传失败:', error);
                uni.$u.toast('上传失败，请重试');
            }
        },
        //绑定订单
        async bindOrder(orderFileType, receiptID) {
            console.log('当前的收单id', receiptID)
            const res = await uni.$u.api.saveClueFile({
                clueId: this.orderDetail.clueId,//线索id
                list: this.bindList,
                // sourceId: this.orderId,//订单id,sendformid,之前是绑定在orderId上面,现在要修改绑定到receiptID上面
                sourceId: receiptID,//receiptId,绑定的收单id
                type: '2',
                orderFileType: orderFileType
            });
            uni.$u.toast("上传成功");
            uni.hideLoading();
            // 清空待绑定的图片列表
            this.bindList = [];
        },
        //选择图图片》上传》返回路径,适用于page2选项里面的上传图片
        getImageUrl() {
            uni.chooseImage({
                count: 9, // 最多选择1张
                sizeType: ['compressed'], // 压缩图片
                sourceType: ['album', 'camera'], // 从相册选择或拍照
                success: async (res) => {
                    const tempFilePath = res.tempFilePaths
                    console.log('上传的图片路径:', tempFilePath)
                    // 把blob数组上传到服务器，然后返回路径
                    try {
                        const res = await Promise.all(tempFilePath.map(filePath => uni.$u.api.uploadFile(filePath)));
                        console.log('上传的图片路径数组是:', res.map(item => item.data.fileUrl))
                        // 把数组返回给调用者
                        return res.map(item => item.data.fileUrl)
                    } catch (error) {
                        console.error('上传失败:', error);
                        uni.$u.toast('上传失败');
                    }
                },
                fail: (err) => {
                    console.error('选择图片失败:', err)
                }
            })
        }
    }
}