点击支付时增加上传数据

pages/orderDetailNew/components/orderDetailNewView.vue

@@ -9,7 +9,7 @@
         </view>
         <view class="page-item" v-show="activeIndex === 2">
             <pageThree @handleNextClick="handleNextClick" :detailImages="allFroms.formTwo.detailImages || []"
-                :orderDetail="detail" />
+                :orderDetail="detail" @handleNeedSave="handleNeedSave" />
         </view>
         <view class="page-item" v-show="activeIndex === 3">
             <pageFour @handleNextClick="handleNextClick" :orderDetail="detail" />
@@ -49,7 +49,8 @@ export default {
                 formTwo: {},
                 formThree: {},
                 formFour: {},
-            }
+            },
+            pageThreeForm: {}
         }
     },
     name: 'OrderDetailNewView',
@@ -57,7 +58,77 @@ export default {
         handleNextClick({ nowPage, form }) {
             this.activeIndex++
             this.allFroms[nowPage] = form
-            console.log("1111", this.allFroms[nowPage])
+            console.log("all page data:", this.allFroms[nowPage])
+        },
+        // 支付前保存数据
+        async saveData() {
+            await uni.$u.api.addReceiptForm({
+                "searchValue": this.detail.searchValue,
+                "createBy": this.detail.createBy,
+                "createTime": this.detail.createTime,
+                "updateBy": this.detail.updateBy,
+                "updateTime": this.detail.updateTime,
+                // "remark": ,    //发单备注，先不传
+                "params": this.detail.params,     //看接口文档
+                "id": this.detail.receiptId,
+                // "sendFormId": "25", //接单中心的id
+                "clueId": this.detail.clueId,
+                "item": this.detail.item,
+                "brand": this.detail.brand,
+                // "needCheckCode": 1,   //先不传
+                // "code": null,         //先不传
+                // "paymentAmount": null, //支付总额page3 先不传
+                "phone": this.detail.phone,
+                "tableFee": this.pageThreeForm.paymentAmount,//page3支付总额
+                // "benefitFee": 200,     //好处费page4加上
+                // "freight": 30,         //运费page4加上
+                // "checkCodeFee": null,  //查码费
+                // "totalCost": "60230.00",   // 成本合计 =   运费 + 好处费 + 查码费 + 表款(支付总额) + 维修费。
+                // "sellingPrice": 90002,   //实际价格（售价）顶上tab里面的第三栏
+                // "performance": "29772.00",  //sellingPrice - totalCost
+                // "receiptRemark":     //"收单之后还需再跟进", 先不传
+                // "repairAmount": null, //维修总金额 ，先不传
+                // "grossPerformance": "7443.00",   //毛利 performance*splitRatio
+                // "expressOrderNo": null,   //快递单号+后续加上一个键加上图url
+                // "fileIds": "",  //传第三部里面排序完成之后的id的数组，参考编辑收单里面的附件传的方法
+                "model": this.detail.model,
+                // "splitRatio": "25",   //分成比例，先不传
+                "customerServiceName": "1", //默认传1，判断入库的类型，回收类入库，销售类入库，维保类入库，第四步传，增加选项下拉
+                "deptId": this.detail.deptId,
+                "category": this.detail.category,
+                "delFlag": this.detail.delFlag,
+                "idCard": this.pageThreeForm.idNumber,
+                "paymentMethod": '小葫芦线上支付',     //支付方式，如果是app里面默认传‘小葫芦线上支付’
+                "bankCardNumber": this.pageThreeForm.bankAccount,
+                "bankName": this.pageThreeForm.bankName,
+                "customName": this.pageThreeForm.customName,
+            });
+        },
+        // 保存实物图数据
+        saveDetailImagesData() {
+            // 上传二进制文件
+            this.allFroms.formOne.truePic.forEach(async (item) => {
+                await uni.$u.api.uploadFile(item);
+            })
+        },// 保存聊天图数据
+        saveChatPicData() {
+            this.allFroms.formOne.truePic.forEach(async (item) => {
+                await uni.$u.api.uploadFile(item);
+            })
+        },// 保存高清图数据
+        saveHighDefinitionPicData() {
+            this.allFroms.formOne.truePic.forEach(async (item) => {
+                await uni.$u.api.uploadFile(item);
+            })
+        },
+        handleNeedSave({ nowPage, form }) {
+            console.log("nowPage:", nowPage)
+            console.log("pageThreeForm:", form)
+            this.pageThreeForm = form;
+
+            //调用接口保存收单表单
+            this.saveData();
+            this.saveDetailImagesData();
         }
 
     }

pages/orderDetailNew/components/pageFour.vue

@@ -348,6 +348,14 @@ export default {
                 // 表单验证通过后，进行分成信息的自定义验证
                 if (this.validateProfitSharing()) {
                     console.log(this.warehouseInfo, this.profitSharingList);
+
+                    this.$emit('handleNextClick', {
+                        nowPage: 'formFour',
+                        form: {
+                            ...this.warehouseInfo,
+                            ...this.profitSharingList
+                        },
+                    })
                 }
             }).catch(() => {
                 // 表单验证失败，不执行后续操作

pages/orderDetailNew/components/pageThree.vue

@@ -7,7 +7,7 @@
             <u-row class="info-row" justify="space-between">
                 <u-col span="5.8">
                     <view class="info-label">开户人</view>
-                    <u-input v-model="paymentInfo.accountHolder" placeholder="请输入开户人姓名" class="info-input" />
+                    <u-input v-model="paymentInfo.customName" placeholder="请输入开户人姓名" class="info-input" />
                 </u-col>
                 <u-col span="5.8">
                     <view class="info-label">银行名称</view>
@@ -37,15 +37,25 @@
                 </view>
                 <view class="detail-image-content">
                     <view class="detail-image-list">
-                        <!-- 替换drag事件为touch事件 -->
+                        <!-- 占位符元素 -->
+                        <view v-show="placeholderIndex !== -1" class="detail-image-placeholder"
+                            :style="{ transform: placeholderStyle }">
+                            <u-icon name="arrow-right" size="40rpx" color="#108cff"></u-icon>
+                        </view>
+
+                        <!-- 图片列表 -->
                         <view class="detail-image-item" v-for="(item, index) in localDetailImages"
-                            :key="'detail-' + index" :style="{ opacity: draggingIndex === index ? 0.5 : 1 }"
-                            @touchstart="onTouchStart($event, index)" @touchmove="onTouchMove($event, index)"
-                            @touchend="onTouchEnd">
-                            <pic-comp :src="item"></pic-comp>
+                            :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>
                             <view class="image-type-tag">{{ getImageType(index) }}</view>
-                            <view class="detail-delete-btn" @click="deleteImage(index)">×</view>
+                            <view class="detail-delete-btn" @click.stop="deleteImage(index)">×</view>
                         </view>
+
+                        <!-- 上传按钮 -->
                         <view class="detail-upload-btn" @click="uploadDetailImage">
                             <u-icon name="plus" size="40rpx" color="#999"></u-icon>
                         </view>
@@ -59,7 +69,8 @@
             <view class="payment-section">
                 <view class="payment-total-container">
                     <text class="payment-label">支付总额</text>
-                    <text class="payment-amount">￥0.00</text>
+                    <u-input v-model="paymentAmount" placeholder="0.00" class="payment-amount" type="number" decimal="2"
+                        prefix="￥" />
                 </view>
 
                 <view class="payment-buttons-row">
@@ -98,7 +109,7 @@
         <u-modal :show="payNowModelShow" :title="'确认支付信息'" :showConfirmButton="false">
             <view class="modal-content">
                 <!-- 支付金额显示 -->
-                <view class="payment-amount-display">￥0.00</view>
+                <view class="payment-amount-display">￥{{ paymentAmount }}</view>
 
                 <!-- 支付信息区域 -->
                 <view class="payment-info-section">
@@ -142,7 +153,7 @@ export default {
         orderDetail: {
             handler(newVal) {
                 if (newVal) {
-                    this.paymentInfo.accountHolder = newVal.accountHolder || ''
+                    this.paymentInfo.customName = newVal.customName || ''
                     this.paymentInfo.bankName = newVal.bankName || ''
                     this.paymentInfo.bankAccount = newVal.bankCardNumber || ''
                     this.paymentInfo.idNumber = newVal.idCard || ''
@@ -152,7 +163,10 @@ export default {
         },
         detailImages: {
             handler(newVal) {
-                this.localDetailImages = [...newVal];
+                this.localDetailImages = newVal.map((item, index) => ({
+                    value: item,
+                    position: index
+                }));
             },
             deep: true
         }
@@ -167,6 +181,7 @@ export default {
             payNowModelShow: false,
             unpaidRating: 0, // 未收评级
             followUpNotes: '', // 跟进细节
+            paymentAmount: '0.00', // 支付总额
 
             // 支付信息
             paymentInfo: {
@@ -176,11 +191,20 @@ export default {
                 idNumber: '' // 身份证号
             },
             // Local copy of detailImages prop to avoid direct mutation
-            localDetailImages: [...this.detailImages],
+            localDetailImages: this.detailImages.map((item, index) => ({
+                value: item,
+                position: index
+            })),
             // 拖拽相关状态
             draggingIndex: -1, // 当前正在拖拽的元素索引
+            placeholderIndex: -1, // 占位符的位置
+            canDropIndex: -1, // 可以放置的位置
+            originalIndex: -1, // 拖拽开始时的原始位置
             startX: 0, // 触摸起始X坐标
-            startY: 0 // 触摸起始Y坐标
+            startY: 0, // 触摸起始Y坐标
+            dragOffsetX: 0, // 拖拽元素的X偏移
+            dragOffsetY: 0, // 拖拽元素的Y偏移
+            placeholderStyle: '' // 占位符的样式
         };
     },
 
@@ -193,8 +217,12 @@ export default {
                 sourceType: ['album', 'camera'], // 从相册选择或拍照
                 success: (res) => {
                     const tempFilePaths = res.tempFilePaths;
-                    // 将图片路径添加到数组中
-                    this.localDetailImages = [...this.localDetailImages, ...tempFilePaths];
+                    // 将图片路径转换为对象数组并添加到本地数组
+                    const newImages = tempFilePaths.map((path, index) => ({
+                        value: path,
+                        position: this.localDetailImages.length + index
+                    }));
+                    this.localDetailImages = [...this.localDetailImages, ...newImages];
                 },
                 fail: (err) => {
                     console.error('选择图片失败:', err);
@@ -214,6 +242,11 @@ export default {
                 success: (res) => {
                     if (res.confirm) {
                         this.localDetailImages.splice(index, 1);
+
+                        // Update position properties after deletion
+                        this.localDetailImages.forEach((item, idx) => {
+                            item.position = idx + 1;
+                        });
                     }
                 }
             });
@@ -225,81 +258,110 @@ export default {
             return types[index] || `细节${index - 4}`;
         },
 
-        // 触摸开始（替代dragstart）
+        // 触摸开始
         onTouchStart(event, index) {
+            if (this.draggingIndex !== -1) return;
+
             this.draggingIndex = index;
+            this.originalIndex = index;
+            this.placeholderIndex = index;
+            this.canDropIndex = -1;
+
             // 记录触摸起始坐标
             this.startX = event.touches[0].clientX;
             this.startY = event.touches[0].clientY;
-            console.log('开始拖拽:', index);
+
+            // 获取元素位置信息用于计算偏移
+            const query = uni.createSelectorQuery().in(this);
+            query.selectAll('.detail-image-item').boundingClientRect(rects => {
+                if (rects[index]) {
+                    this.dragOffsetX = this.startX - rects[index].left;
+                    this.dragOffsetY = this.startY - rects[index].top;
+                    this.placeholderStyle = `translate(${rects[index].left}px, ${rects[index].top}px)`;
+                }
+            }).exec();
         },
 
-        // 触摸移动（替代dragover/drop）
-        onTouchMove(event, currentIndex) {
-            if (this.draggingIndex === -1) return; // 没有正在拖拽的元素则返回
+        // 触摸移动
+        onTouchMove(event) {
+            if (this.draggingIndex === -1) return;
 
             const moveX = event.touches[0].clientX;
             const moveY = event.touches[0].clientY;
-            const diffX = moveX - this.startX;
-            const diffY = moveY - this.startY;
-
-            // 简单的拖拽距离判断（避免轻微滑动就触发交换）
-            if (Math.abs(diffX) > 20 || Math.abs(diffY) > 20) {
-                // 获取当前触摸位置对应的元素索引
-                const targetIndex = this.getTargetIndexByPosition(moveX, moveY);
-                if (targetIndex !== -1 && targetIndex !== this.draggingIndex) {
-                    // 交换数组元素（核心排序逻辑）
-                    [this.localDetailImages[this.draggingIndex], this.localDetailImages[targetIndex]] =
-                        [this.localDetailImages[targetIndex], this.localDetailImages[this.draggingIndex]];
-                    // 更新拖拽索引为目标索引（实现连续拖拽）
-                    this.draggingIndex = targetIndex;
-                    // 重置起始坐标
-                    this.startX = moveX;
-                    this.startY = moveY;
+
+            // 更新拖拽元素的位置
+            this.$nextTick(() => {
+                const draggingElement = uni.createSelectorQuery().in(this)
+                    .selectAll('.detail-image-item')[this.draggingIndex];
+                if (draggingElement) {
+                    // 这里通过CSS类实现拖拽视觉效果，实际位置由数组顺序控制
                 }
-            }
+            });
+
+            // 计算当前触摸位置对应的目标索引
+            this.findTargetIndex(moveX, moveY);
         },
 
-        // 触摸结束（替代dragend）
+        // 触摸结束
         onTouchEnd() {
-            console.log('拖拽结束');
-            this.draggingIndex = -1; // 重置拖拽状态
+            if (this.draggingIndex === -1) return;
+
+            // 执行元素交换
+            if (this.canDropIndex !== -1 && this.canDropIndex !== this.draggingIndex) {
+                // 交换元素位置
+                const temp = this.localDetailImages[this.draggingIndex];
+                this.localDetailImages[this.draggingIndex] = this.localDetailImages[this.canDropIndex];
+                this.localDetailImages[this.canDropIndex] = temp;
+
+                // Update position properties after swap
+                this.localDetailImages.forEach((item, index) => {
+                    item.position = index + 1;
+                });
+            }
+
+            // 重置拖拽状态
+            this.resetDragState();
         },
 
-        // 根据触摸坐标获取目标元素索引（核心辅助方法）
-        getTargetIndexByPosition(x, y) {
-            // 获取所有图片元素的位置信息
+        // 查找触摸位置对应的目标索引
+        findTargetIndex(x, y) {
             const query = uni.createSelectorQuery().in(this);
-            return new Promise((resolve) => {
-                query.selectAll('.detail-image-item').boundingClientRect(rects => {
-                    for (let i = 0; i < rects.length; i++) {
-                        const rect = rects[i];
-                        // 判断坐标是否在元素范围内
-                        if (
-                            x >= rect.left &&
-                            x <= rect.right &&
-                            y >= rect.top &&
-                            y <= rect.bottom
-                        ) {
-                            resolve(i);
-                            return;
-                        }
+            query.selectAll('.detail-image-item').boundingClientRect(rects => {
+                let targetIndex = -1;
+
+                // 查找触摸点所在的元素
+                for (let i = 0; i < rects.length; i++) {
+                    if (i === this.draggingIndex) continue;
+
+                    const rect = rects[i];
+                    if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+                        targetIndex = i;
+                        break;
                     }
-                    resolve(-1);
-                }).exec();
-            });
-        },
+                }
 
-        // 下一步按钮点击事件
-        handleNextClick() {
-            console.log('page3点击了下一步按钮');
-            this.$emit('handleNextClick', {
-                nowPage: 'formThree',
-                form: {
-                    // detailImages: this.localDetailImages,
-                    // paymentInfo: this.paymentInfo
+                // 更新可放置位置
+                this.canDropIndex = targetIndex;
+
+                // 如果找到了可放置位置，更新占位符位置
+                if (targetIndex !== -1) {
+                    this.placeholderIndex = targetIndex;
+                    this.placeholderStyle = `translate(${rects[targetIndex].left}px, ${rects[targetIndex].top}px)`;
                 }
-            });
+            }).exec();
+        },
+
+        // 重置拖拽状态
+        resetDragState() {
+            this.draggingIndex = -1;
+            this.placeholderIndex = -1;
+            this.canDropIndex = -1;
+            this.originalIndex = -1;
+            this.startX = 0;
+            this.startY = 0;
+            this.dragOffsetX = 0;
+            this.dragOffsetY = 0;
+            this.placeholderStyle = '';
         },
 
         // 未收按钮点击事件
@@ -318,6 +380,16 @@ export default {
         handlePayNowClick() {
             console.log('点击了立即支付按钮');
             this.payNowModelShow = true;
+
+            //让父组件保存数据
+            this.$emit('handleNeedSave', {
+                nowPage: 'formThree',
+                form: {
+                    detailImages: this.localDetailImages,
+                    ...this.paymentInfo,
+                    paymentAmount: this.paymentAmount
+                }
+            });
         },
 
         // 确认未收按钮点击事件
@@ -339,7 +411,18 @@ export default {
             console.log('确认转账');
             this.payNowModelShow = false;
             // 可以在这里添加转账确认的逻辑
-        }
+        },
+        // 下一步按钮点击事件
+        handleNextClick() {
+            console.log('page3点击了下一步按钮', this.localDetailImages);
+            this.$emit('handleNextClick', {
+                nowPage: 'formThree',
+                form: {
+                    detailImages: this.localDetailImages,
+                    ...this.paymentInfo
+                }
+            });
+        },
     }
 }
 </script>
@@ -386,13 +469,41 @@ export default {
         height: 200rpx;
         box-sizing: border-box;
         touch-action: none; // 禁止浏览器默认触摸行为
-        transition: opacity 0.2s; // 拖拽时的透明度过渡
+        transition: all 0.2s ease; // 所有属性过渡效果
+        z-index: 1;
+        cursor: move;
+
+        &.dragging {
+            opacity: 0.5;
+            transform: scale(1.05);
+            z-index: 100;
+        }
+
+        &.can-drop {
+            border: 2rpx dashed #108cff;
+            background-color: rgba(16, 140, 255, 0.1);
+        }
 
         &:active {
             opacity: 0.7;
         }
     }
 
+    // 占位符样式
+    .detail-image-placeholder {
+        position: absolute;
+        width: 200rpx;
+        height: 200rpx;
+        border: 2rpx dashed #108cff;
+        background-color: rgba(16, 140, 255, 0.1);
+        border-radius: 8rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 50;
+        pointer-events: none;
+    }
+
     .image-type-tag {
         position: absolute;
         top: 10rpx;
@@ -551,6 +662,19 @@ export default {
     font-weight: 600;
     color: #f53f3f;
     font-family: Consolas, 'Courier New', monospace, -apple-system, BlinkMacSystemFont;
+    width: auto;
+    min-width: 150rpx;
+}
+
+.payment-amount .u-input__input {
+    border: none;
+    padding: 0;
+    background: transparent;
+    font-size: 48rpx;
+    font-weight: 600;
+    color: #f53f3f;
+    font-family: Consolas, 'Courier New', monospace, -apple-system, BlinkMacSystemFont;
+    text-align: right;
 }
 
 /* 支付按钮行样式 */