crm-app-vue3/pages/orderDetailNew/components/pageOne.vue

<template>
    <view class="page-itemOne">
        <u-row justify="space-between" customStyle="margin-bottom: 10px">
            <u-col span="3">
                <div class="page-itemOne-title">图片资料</div>
            </u-col>
            <u-col span="3.5">
                <u-button size="small" @click="copyAllImages"
                    style="border-radius: 20rpx;border-color: #007AFF;color: #007AFF;">复制全部图片</u-button>
            </u-col>
        </u-row>

        <!-- 实物图卡片 -->
        <view class="card_wrap">
            <view class="card-title">实物图</view>
            <view class="image-upload-container">
                <view class="image-list">
                    <view class="image-item" v-for="(item, index) in trueUploadList" :key="'truePic-' + index">
                        <pic-comp :src="item.fileUrl"></pic-comp>
                        <view class="delete-btn" @click="deleteImage('truePic', item)">×</view>
                    </view>
                    <view class="upload-btn" @click="uploadImage('truePic')">
                        <u-icon name="plus" size="40" color="#999"></u-icon>
                    </view>
                </view>
            </view>
        </view>

        <!-- 聊天记录卡片 -->
        <view class="card_wrap">
            <view class="card-title">聊天记录</view>
            <view class="image-upload-container">
                <view class="image-list">
                    <view class="image-item" v-for="(item, index) in chatRecordsUploadList"
                        :key="'chatRecords-' + index">
                        <pic-comp :src="item.fileUrl"></pic-comp>
                        <view class="delete-btn" @click="deleteImage('chatRecords', item)">×</view>
                    </view>
                    <view class="upload-btn" @click="uploadImage('chatRecords')">
                        <u-icon name="plus" size="40" color="#999"></u-icon>
                    </view>
                </view>
            </view>
        </view>

        <!-- 基本信息卡片 -->
        <view class="info-card">
            <view class="info-card-title">基本信息</view>
            <u-row class="info-row">
                <u-col span="6">
                    <view class="info-label">发单人</view>
                    <view class="info-value">{{ orderDetail.createNickName || '未填写' }}</view>
                </u-col>
                <u-col span="6">
                    <view class="info-label">型号</view>
                    <view class="info-value">{{ orderDetail.model || '未填写' }}</view>
                </u-col>
            </u-row>
            <u-row class="info-row">
                <u-col span="6">
                    <view class="info-label">上门时间</view>
                    <view class="info-value">{{ orderDetail.visitTime || '未填写' }}</view>
                </u-col>
                <u-col span="6">
                    <view class="info-label">地址</view>
                    <view class="info-value">{{ orderDetail.address || '未填写' }}</view>
                </u-col>
            </u-row>
        </view>

        <!-- 联系方式卡片 -->
        <view class="connect">
            <view class="connect-card phone-card" @click="handlePhoneClick">
                <u-icon name="phone" size="40" color="#07C160" style="margin-bottom: 10rpx;"></u-icon>
                <view class="connect-title">电话</view>
                <!-- 小红点 -->
                <view v-if="orderDetail.phone" class="red-dot"></view>
            </view>
            <view class="connect-card wechat-card" @click="handleWechatClick">
                <u-icon name="chat" size="40" color="#07C160" style="margin-bottom: 10rpx;"></u-icon>
                <view class="connect-title">微信</view>
                <!-- 小红点 -->
                <view v-if="orderDetail.wechat" class="red-dot"></view>
            </view>
        </view>

        <u-button @click="handleNextClick" type="primary" size="middle" style="border-radius: 20rpx;">下一步</u-button>

    </view>
</template>
<script>
import picComp from './picComp.vue'

export default {
    props: {
        orderDetail: {
            type: Object,
            default: () => { },
        },
        orderId: {
            type: String,
            default: '',
        }
    },
    components: {
        picComp
    },
    data() {
        return {
            //展示的图片列表
            trueUploadList: [],
            chatRecordsUploadList: [],
            // 待绑定的图片列表
            bindList: [],
        }
    },
    watch: {
        // 监听 props 变化，触发请求
        orderDetail: {
            handler(newVal) {
                if (newVal) { // 确保 props 有值再执行
                    this.getList('2', '1');
                    this.getList('2', '2');
                }
            }
        }
    },
    methods: {
        // 选择图片
        uploadImage(type) {
            uni.chooseImage({
                count: 9, // 最多选择9张
                sizeType: ['compressed'], // 压缩图片
                sourceType: ['album', 'camera'], // 从相册选择或拍照
                success: (res) => {
                    const tempFilePaths = res.tempFilePaths
                    console.log('上传的图片路径:11', tempFilePaths)
                    this.uploadToServer(tempFilePaths, type)
                },
                fail: (err) => {
                    console.error('选择图片失败:', err)
                }
            })
        },
        // 删除图片
        deleteImage(type, item) {
            uni.showModal({
                title: '提示',
                content: '确定要删除这张图片吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 调接口删除
                        console.log('现在要删除的文件文件是:', type, item.fileUrl, item.id)
                        this.deleteImg(item.id)
                        this.getList('2', '1');
                        this.getList('2', '2');
                    }
                }
            })
        },
        // 删除图片
        async deleteImg(id) {
            try {
                await uni.$u.api.deleteClueFile([id])
                uni.showToast({
                    title: '删除成功',
                    icon: 'success',
                    duration: 2000
                })
            } catch (error) {
                uni.showToast({
                    title: '删除失败',
                    icon: 'error',
                    duration: 2000
                })
            }
        },
        // 上传到服务
        async uploadToServer(filePaths, type) {
            // 实际的上传逻辑
            try {
                //实物图的话就是2,聊天记录的话就是1
                let p = type == 'truePic' ? '2' : type == 'chatRecords' ? '1' : ''
                console.log('当前上传的图片类型是', p)
                const res = await Promise.all(filePaths.map(filePath => this.uploadFile(filePath, p)));

                // 绑定
                this.bindOrder(type, p);

                // 实物图的话传2
                if (type == 'truePic') {
                    // this.bindOrder('2', '2');
                    this.getList('2', '2');
                }
                // 实物图的话聊天记录的话传1
                if (type == 'chatRecords') {
                    // 实物图的话聊天记录的话传1
                    // this.bindOrder('2', '1');
                    this.getList('2', '1');
                }


            } catch (error) {
                console.error('上传失败:', error);
                uni.$u.toast('上传失败');
            }
        },
        //绑定订单
        async bindOrder(type, orderFileType) {
            const res = await uni.$u.api.saveClueFile({
                clueId: this.orderDetail.clueId,//线索id
                list: this.bindList,
                sourceId: this.orderId,//订单id,sendformid
                type: type,
                orderFileType: orderFileType
            });
            uni.$u.toast("上传成功");
            uni.hideLoading();
            // 清空待绑定的图片列表
            this.bindList = [];
        },
        // 上传文件
        async uploadFile(fileUrl, orderFileType) {
            try {
                uni.showLoading({
                    title: '上传中...',
                    mask: true
                });

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

                const fileObj = {
                    fileSize: data.fileSize,
                    fileSuffix: data.fileSuffix,
                    fileName: data.name,
                    fileUrl: data.url,
                    orderFileType: orderFileType
                };



                if (orderFileType == '2') {
                    // this.trueUploadList.push(fileObj);
                } else if (orderFileType == '1') {
                    // this.chatRecordsUploadList.push(fileObj);
                }
                this.bindList.push(fileObj);

            } catch (error) {
                uni.hideLoading();
                console.error('文件上传失败:', error);
                uni.$u.toast('上传失败，请重试');
            }
        },

        // 电话卡片点击事件
        handlePhoneClick() {
            console.log('电话卡片被点击', '电话号码:', this.orderDetail.phone)
            if (this.orderDetail.phone) {
                //拨打电话
                uni.makePhoneCall({
                    phoneNumber: this.orderDetail.phone,
                    success: () => {
                        this.$store.commit("call/SET_FORM", {
                            clueId: this.orderDetail.clueId,
                            type: "3",
                            callee: this.orderDetail.phone,
                        });
                    },
                });
            } else {
                uni.showToast({
                    title: '该订单暂时没有电话号码',
                    icon: 'none'
                })
            }
        },
        // 微信卡片点击事件
        handleWechatClick() {
            console.log('微信卡片被点击', '微信号:', this.orderDetail.wechat)
            if (this.orderDetail.wechat) {
                //复制微信号
                uni.setClipboardData({
                    data: this.orderDetail.wechat,
                    success: () => {
                        uni.showToast({
                            title: '微信号已复制',
                            icon: 'none'
                        })
                    }
                })
            } else {
                uni.showToast({
                    title: '该订单暂时没有微信号',
                    icon: 'none'
                })
            }
        },
        // 下一步
        handleNextClick() {
            // 校验表单
            if (!this.form.truePic.length) {
                uni.showToast({
                    title: '请上传实物图',
                    icon: 'none'
                })
                return
            }
            if (!this.form.chatRecords.length) {
                uni.showToast({
                    title: '请上传聊天记录',
                    icon: 'none'
                })
                return
            }
            this.$emit('handleNextClick', {
                nowPage: 'formOne',
                form: this.form,
            })
        },
        // 获取文件列表
        async getList(type, orderFileType) {
            console.log('获取文件列表', type, orderFileType)

            try {
                const params = {
                    clueId: this.orderDetail.clueId,
                    sourceId: this.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 || []
                } else if (orderFileType == '2') {
                    this.chatRecordsUploadList = response.rows || []
                }
            } catch (error) {
                uni.$u.toast(`获取列表失败：${error.message}`)
                this.trueUploadList = []
                this.chatRecordsUploadList = []
            }
        },

        //一键复制
        copyAllImages() {
            // 合并所有图片
            const allImages = [...this.trueUploadList, ...this.chatRecordsUploadList];
            //取出所有图的url
            const allUrls = allImages.map(item => item.fileUrl);
            console.log('所有图片:', allUrls)
            console.log('合并后的图片列表:', allUrls)
            if (allUrls.length > 0) {
                // 复制到剪贴板
                uni.setClipboardData({
                    data: JSON.stringify(allUrls),
                    success: () => {
                        uni.showToast({
                            title: '所有图片已复制',
                            icon: 'none'
                        })
                    }
                })
            } else {
                uni.showToast({
                    title: '没有图片可复制',
                    icon: 'none'
                })
            }
        },

    },

}
</script>
<style scoped lang="scss">
// 导入公共样式
@import './common.scss';

// 主样式
.page-itemOne {
    @extend .page-container;
}

.page-itemOne-title {
    @include font-styles($size: title, $weight: bold, $color: primary);
}

.page-itemOne-form {
    @include font-styles($size: tiny, $weight: semi-bold, $color: secondary);
    text-wrap: nowrap;
}

.image-upload-container {
    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
}

.image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.image-item {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    box-sizing: border-box;
}

.delete-btn {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: #ff4d4f;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    @include font-styles($size: tiny, $weight: bold);
    z-index: 10;
}

.upload-btn {
    width: 200rpx;
    height: 200rpx;
    border: 8rpx dashed #ddd;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

/* 基本信息卡片样式 */
.info-card {
    @include card;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    padding: map-get($sizes, padding-sm) map-get($sizes, padding);

    &:hover {
        @include shadow(2);
    }
}

.info-card-title {
    @include font-styles($size: title, $weight: bold, $color: primary);
    margin-bottom: 25rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx solid map-get($colors, border);
}

.info-row {
    margin-bottom: 20rpx;
}

.info-label {
    @include font-styles($size: tiny, $weight: regular, $color: tertiary);
    margin-bottom: 8rpx;
}

.info-value {
    @include font-styles($size: small, $weight: regular, $color: secondary, $line-height: small);
    word-break: break-all;
}

/* 联系方式卡片样式 */
.connect {
    display: flex;
    justify-content: space-between;
    margin: 20rpx 0;
    gap: 20rpx;
}

.connect-card {
    flex: 1;
    @include card;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    position: relative;

    &:hover {
        @include shadow(2);
    }
}

.connect-title {
    @include font-styles($size: tiny, $weight: regular, $color: tertiary);
    margin-bottom: 8rpx;
}

.connect-value {
    @include font-styles($size: small, $weight: medium, $color: secondary);
}

/* 小红点样式 */
.red-dot {
    position: absolute;
    top: 15rpx;
    right: 15rpx;
    width: 25rpx;
    height: 25rpx;
    background-color: #ff4d4f;
    border-radius: 50%;
    box-shadow: 0 0 4rpx rgba(255, 77, 79, 0.3);
}
</style>