表格图片的增删接口链接

pages/orderDetailNew/components/orderDetailNewView.vue

@@ -5,11 +5,11 @@
             <pageOne @handleNextClick="handleNextClick" :orderDetail="detail" :orderId="orderId" />
         </view>
         <view class="page-item" v-show="activeIndex === 1">
-            <pageTwo @handleNextClick="handleNextClick" :orderDetail="detail" />
+            <pageTwo @handleNextClick="handleNextClick" :orderDetail="detail" :orderId="orderId" />
         </view>
         <view class="page-item" v-show="activeIndex === 2">
-            <pageThree @handleNextClick="handleNextClick" :detailImages="allFroms.formTwo.detailImages || []"
-                :orderDetail="detail" @handleNeedSave="handleNeedSave" />
+            <pageThree @handleNextClick="handleNextClick" :orderDetail="detail" @handleNeedSave="handleNeedSave"
+                ref="pageThreeComp" :orderId="orderId" />
         </view>
         <view class="page-item" v-show="activeIndex === 3">
             <pageFour @handleNextClick="handleNextClick" :orderDetail="detail" />
@@ -67,6 +67,10 @@ export default {
             this.activeIndex++
             this.allFroms[nowPage] = form
             console.log("all page data:", this.allFroms[nowPage])
+            // 当点击到第三页时，更新第三页的图片列表
+            if (nowPage === 'formTwo') {
+                this.$refs.pageThreeComp.getList('2', '3');
+            }
         },
         // 支付前保存数据
         async saveData() {
@@ -157,8 +161,7 @@ export default {
             } catch (error) {
                 uni.$u.toast(`支付失败：${response.msg}`)
             }
-        }
-
+        },
     }
 }
 

pages/orderDetailNew/components/pageOne.vue

@@ -17,7 +17,7 @@
                 <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 class="delete-btn" @click="deleteImage(item)">×</view>
                     </view>
                     <view class="upload-btn" @click="uploadImage('truePic')">
                         <u-icon name="plus" size="40" color="#999"></u-icon>
@@ -34,7 +34,7 @@
                     <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 class="delete-btn" @click="deleteImage(item)">×</view>
                     </view>
                     <view class="upload-btn" @click="uploadImage('chatRecords')">
                         <u-icon name="plus" size="40" color="#999"></u-icon>
@@ -90,8 +90,9 @@
 </template>
 <script>
 import picComp from './picComp.vue'
-
+import imgUploadAndDownLoad from '../mixin/imgUploadAndDownLoad.js'
 export default {
+    mixins: [imgUploadAndDownLoad],
     props: {
         orderDetail: {
             type: Object,
@@ -126,134 +127,12 @@ export default {
         }
     },
     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() {
@@ -320,32 +199,6 @@ export default {
                 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() {

pages/orderDetailNew/components/pageThree.vue

@@ -44,19 +44,19 @@
                         </view>
 
                         <!-- 图片列表 -->
-                        <view class="detail-image-item" v-for="(item, index) in localDetailImages"
-                            :key="'detail-' + index" :class="{
+                        <view class="detail-image-item" v-for="(item, index) in detailImages" :key="'detail-' + index"
+                            :class="{
                                 'dragging': draggingIndex === index,
                                 'can-drop': canDropIndex === index
                             }" @touchstart.stop="onTouchStart($event, index)" @touchmove.stop="onTouchMove($event)"
                             @touchend.stop="onTouchEnd" @touchcancel.stop="onTouchEnd">
-                            <pic-comp :src="item.value"></pic-comp>
+                            <pic-comp :src="item.fileUrl"></pic-comp>
                             <view class="image-type-tag">{{ getImageType(index) }}</view>
-                            <view class="detail-delete-btn" @click.stop="deleteImage(index)">×</view>
+                            <view class="detail-delete-btn" @click.stop="deleteImage(item)">×</view>
                         </view>
 
                         <!-- 上传按钮 -->
-                        <view class="detail-upload-btn" @click="uploadDetailImage">
+                        <view class="detail-upload-btn" @click="uploadImage('detailImages')">
                             <u-icon name="plus" size="40rpx" color="#999"></u-icon>
                         </view>
                     </view>
@@ -137,16 +137,18 @@
 
 <script>
 import picComp from './picComp.vue'
-
+import imgUploadAndDownLoad from '../mixin/imgUploadAndDownLoad'
 export default {
+    mixins: [imgUploadAndDownLoad],
     props: {
         orderDetail: {
             type: Object,
             default: () => { },
         },
-        detailImages: {
-            type: Array,
-            default: () => []
+
+        orderId: {
+            type: String,
+            default: '',
         }
     },
     watch: {
@@ -157,19 +159,13 @@ export default {
                     this.paymentInfo.bankName = newVal.bankName || ''
                     this.paymentInfo.bankAccount = newVal.bankCardNumber || ''
                     this.paymentInfo.idNumber = newVal.idCard || ''
+
+                    this.getList('2', '3');
                 }
             },
             deep: true,
         },
-        detailImages: {
-            handler(newVal) {
-                this.localDetailImages = newVal.map((item, index) => ({
-                    value: item,
-                    position: index
-                }));
-            },
-            deep: true
-        }
+
     },
     components: {
         picComp
@@ -190,11 +186,7 @@ export default {
                 bankAccount: '', // 银行账号
                 idNumber: '' // 身份证号
             },
-            // Local copy of detailImages prop to avoid direct mutation
-            localDetailImages: this.detailImages.map((item, index) => ({
-                value: item,
-                position: index
-            })),
+
             // 拖拽相关状态
             draggingIndex: -1, // 当前正在拖拽的元素索引
             placeholderIndex: -1, // 占位符的位置
@@ -204,53 +196,20 @@ export default {
             startY: 0, // 触摸起始Y坐标
             dragOffsetX: 0, // 拖拽元素的X偏移
             dragOffsetY: 0, // 拖拽元素的Y偏移
-            placeholderStyle: '' // 占位符的样式
+            placeholderStyle: '', // 占位符的样式
+
+
+
+            detailImages: [],// 高清细节图数组
+            // 绑定订单相关
+            bindList: [] // 待绑定的图片列表
         };
     },
 
     methods: {
-        // 上传高清细节图
-        uploadDetailImage() {
-            uni.chooseImage({
-                count: 9 - this.localDetailImages.length, // 最多选择9张
-                sizeType: ['compressed'], // 压缩图片
-                sourceType: ['album', 'camera'], // 从相册选择或拍照
-                success: (res) => {
-                    const tempFilePaths = res.tempFilePaths;
-                    // 将图片路径转换为对象数组并添加到本地数组
-                    const newImages = tempFilePaths.map((path, index) => ({
-                        value: path,
-                        position: this.localDetailImages.length + index
-                    }));
-                    this.localDetailImages = [...this.localDetailImages, ...newImages];
-                },
-                fail: (err) => {
-                    console.error('选择图片失败:', err);
-                    uni.showToast({
-                        title: '选择图片失败',
-                        icon: 'none'
-                    });
-                }
-            });
-        },
 
-        // 删除图片
-        deleteImage(index) {
-            uni.showModal({
-                title: '提示',
-                content: '确定要删除这张图片吗？',
-                success: (res) => {
-                    if (res.confirm) {
-                        this.localDetailImages.splice(index, 1);
-
-                        // Update position properties after deletion
-                        this.localDetailImages.forEach((item, idx) => {
-                            item.position = idx + 1;
-                        });
-                    }
-                }
-            });
-        },
+
+
 
         // 获取图片类型
         getImageType(index) {
@@ -385,7 +344,6 @@ export default {
             this.$emit('handleNeedSave', {
                 nowPage: 'formThree',
                 form: {
-                    detailImages: this.localDetailImages,
                     ...this.paymentInfo,
                     paymentAmount: this.paymentAmount
                 }
@@ -418,7 +376,6 @@ export default {
             this.$emit('handleNextClick', {
                 nowPage: 'formThree',
                 form: {
-                    detailImages: this.localDetailImages,
                     ...this.paymentInfo
                 }
             });

pages/orderDetailNew/components/pageTwo.vue

@@ -113,10 +113,10 @@
                 <div class="detail-image-upload-container">
                     <view class="detail-image-list">
                         <view class="detail-image-item" v-for="(item, index) in detailImages" :key="'detail-' + index">
-                            <pic-comp :src="item"></pic-comp>
-                            <view class="detail-delete-btn" @click="deleteDetailImage(index)">×</view>
+                            <pic-comp :src="item.fileUrl"></pic-comp>
+                            <view class="detail-delete-btn" @click="deleteImage(item)">×</view>
                         </view>
-                        <view class="detail-upload-btn" @click="uploadDetailImage">
+                        <view class="detail-upload-btn" @click="uploadImage('detailImages')">
                             <u-icon name="plus" size="40rpx" color="#999"></u-icon>
                         </view>
                     </view>
@@ -130,19 +130,25 @@
 
 <script>
 import picComp from './picComp.vue'
-
+import imgUploadAndDownLoad from '../mixin/imgUploadAndDownLoad'
 export default {
+    mixins: [imgUploadAndDownLoad],
     props: {
         orderDetail: {
             type: Object,
             default: () => { },
+        },
+        orderId: {
+            type: String,
+            default: '',
         }
     },
     watch: {
         orderDetail: {
-            handler(newVal, oldVal) {
+            handler(newVal) {
                 if (newVal) {
                     this.approvedPrice = newVal.itemPrice || 0;
+                    this.getList('2', '3');
                 }
             },
             deep: true,
@@ -169,34 +175,15 @@ export default {
             // 核准价格相关
             approvedPrice: 0, // 核准价格初始值
             // 高清细节图相关
-            detailImages: [] // 高清细节图数组
+
+
+            detailImages: [],// 高清细节图数组
+            // 绑定订单相关
+            bindList: [] // 待绑定的图片列表
         };
     },
     methods: {
-        // 选择图片方法
-        chooseImage(type) {
-            uni.chooseImage({
-                count: 9, // 最多选择9张图片
-                sizeType: ['original', 'compressed'], // 原图或压缩图
-                sourceType: ['album', 'camera'], // 从相册或相机选择
-                success: (res) => {
-                    const tempFilePaths = res.tempFilePaths;
-                    // 根据类型将图片添加到对应的数组
-                    if (type === 'photoTips') {
-                        this.photoTipsImages = [...this.photoTipsImages, ...tempFilePaths];
-                    } else if (type === 'face2face') {
-                        this.face2faceImages = [...this.face2faceImages, ...tempFilePaths];
-                    }
-                },
-                fail: (err) => {
-                    console.error('选择图片失败:', err);
-                    uni.showToast({
-                        title: '选择图片失败',
-                        icon: 'none'
-                    });
-                }
-            });
-        },
+
 
 
         // 价格输入回调
@@ -257,39 +244,12 @@ export default {
                 form: result,
             })
         },
-        //获取文件列表
-        async getList() {
-            console.log('获取文件列表', type, orderFileType)
-
-            try {
-                const params = {
-                    clueId: this.orderDetail.clueId,
-                    sourceId: this.orderId,
-                    type: '2',
-                    orderFileType: '3',
-                    isDuplicate: '1',//先传1
-                    pageNum: 1,
-                    pageSize: 1000 // 设置一个较大的值以获取所有数据
-                }
-                const response = await uni.$u.api.selectClueFileByDto(params)
-                this.detailImages = response.rows || []
-            } catch (error) {
-                uni.$u.toast(`获取列表失败：${error.message}`)
-            }
-        },
-        // 上传高清细节图
-        uploadDetailImage() {
 
-        },
-        // 删除高清细节图
-        deleteDetailImage(index) {
-            uni.showModal({
-                title: '提示',
-                content: '确定要删除这张图片吗？',
-                success: (res) => {
-                }
-            });
-        },
+
+
+
+
+
     }
 };
 </script>

pages/orderDetailNew/mixin/imgUploadAndDownLoad.js

@@ -0,0 +1,142 @@
+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.getList('2', '2');
+                        this.getList('2', '3');
+                    }
+                }
+            })
+        },
+        //获取文件列表
+        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 || []
+                } else if (orderFileType == '3') {
+                    this.detailImages = response.rows || []
+                }
+            } catch (error) {
+                uni.$u.toast(`获取列表失败：${error.message}`)
+                this.trueUploadList = []
+                this.chatRecordsUploadList = []
+            }
+        },
+        // 选择图片
+        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)
+                }
+            })
+        },
+        // 上传到服务器
+        async uploadToServer(filePaths, type) {
+            // 实际的上传逻辑
+            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);
+
+                this.getList('2', '1');
+                this.getList('2', '2');
+                this.getList('2', '3');
+
+
+            } 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) {
+            const res = await uni.$u.api.saveClueFile({
+                clueId: this.orderDetail.clueId,//线索id
+                list: this.bindList,
+                sourceId: this.orderId,//订单id,sendformid
+                type: '2',
+                orderFileType: orderFileType
+            });
+            uni.$u.toast("上传成功");
+            uni.hideLoading();
+            // 清空待绑定的图片列表
+            this.bindList = [];
+        },
+    }
+}