feat(PageThree): enhance drag-and-drop functionality for image display and improve touch event handling

pages/orderDetailRefactored/components/PageThree.vue

@@ -83,15 +83,16 @@
         <view class="detail-image-content">
           <view class="detail-image-list">
             <view 
-              v-for="(item, index) in detailImages.slice(0, 6)" 
-              :key="`detail-${index}`"
+              v-for="(item, index) in displayImages" 
+              :key="item.id || `detail-${index}`"
               class="detail-image-item"
               :class="{
                 'dragging': draggingIndex === index,
-                'can-drop': canDropIndex === index
+                'can-drop': canDropIndex === index && draggingIndex !== index
               }"
+              :style="draggingIndex === index ? draggingStyle : ''"
               @touchstart.stop="onTouchStart($event, index)"
-              @touchmove.stop="onTouchMove($event)"
+              @touchmove.stop="onTouchMove($event, index)"
               @touchend.stop="onTouchEnd"
             >
               <PicComp 
@@ -282,6 +283,8 @@ export default {
       canDropIndex: -1,
       startX: 0,
       startY: 0,
+      currentX: 0,
+      currentY: 0,
       // 模态窗
       unpaidModalVisible: false,
       followUpModalVisible: false,
@@ -290,6 +293,20 @@ export default {
       followUpNotes: ''
     }
   },
+  computed: {
+    // 显示前6个图片用于拖拽
+    displayImages() {
+      return this.detailImages.slice(0, 6)
+    },
+    // 拖拽时的样式
+    draggingStyle() {
+      if (this.draggingIndex === -1) return ''
+      return {
+        transform: `translate(${this.currentX - this.startX}px, ${this.currentY - this.startY}px)`,
+        zIndex: 1000
+      }
+    }
+  },
   watch: {
     orderDetail: {
       handler(newVal) {
@@ -417,18 +434,22 @@ export default {
     onTouchStart(event, index) {
       if (this.draggingIndex !== -1) return
       this.draggingIndex = index
-      this.startX = event.touches[0].clientX
-      this.startY = event.touches[0].clientY
+      const touch = event.touches[0]
+      this.startX = touch.clientX
+      this.startY = touch.clientY
+      this.currentX = touch.clientX
+      this.currentY = touch.clientY
     },
 
     /**
      * 触摸移动
      */
-    onTouchMove(event) {
-      if (this.draggingIndex === -1) return
-      const moveX = event.touches[0].clientX
-      const moveY = event.touches[0].clientY
-      this.findTargetIndex(moveX, moveY)
+    onTouchMove(event, index) {
+      if (this.draggingIndex === -1 || this.draggingIndex !== index) return
+      const touch = event.touches[0]
+      this.currentX = touch.clientX
+      this.currentY = touch.clientY
+      this.findTargetIndex(touch.clientX, touch.clientY)
     },
 
     /**
@@ -438,9 +459,12 @@ export default {
       if (this.draggingIndex === -1) return
       
       if (this.canDropIndex !== -1 && this.canDropIndex !== this.draggingIndex) {
-        const temp = this.detailImages[this.draggingIndex]
-        this.detailImages[this.draggingIndex] = this.detailImages[this.canDropIndex]
-        this.detailImages[this.canDropIndex] = temp
+        // 交换位置
+        const images = [...this.detailImages]
+        const temp = images[this.draggingIndex]
+        images[this.draggingIndex] = images[this.canDropIndex]
+        images[this.canDropIndex] = temp
+        this.detailImages = images
       }
       
       this.resetDragState()
@@ -451,7 +475,8 @@ export default {
      */
     findTargetIndex(x, y) {
       const query = uni.createSelectorQuery().in(this)
-      query.selectAll('.detail-image-item').boundingClientRect(rects => {
+      query.selectAll('.detail-image-item').boundingClientRect((rects) => {
+        if (!rects || rects.length === 0) return
         let targetIndex = -1
         for (let i = 0; i < rects.length; i++) {
           if (i === this.draggingIndex) continue
@@ -473,6 +498,8 @@ export default {
       this.canDropIndex = -1
       this.startX = 0
       this.startY = 0
+      this.currentX = 0
+      this.currentY = 0
     },
 
     /**
@@ -498,7 +525,7 @@ export default {
      * 隐藏图片
      */
     handleHideImage(item, index) {
-      const itemIndex = this.detailImages.findIndex(img => img.fileUrl === item.fileUrl)
+      const itemIndex = this.detailImages.findIndex(img => img.id === item.id || img.fileUrl === item.fileUrl)
       if (itemIndex !== -1) {
         this.detailImages.splice(itemIndex, 1)
         uni.$u.toast('图片已隐藏')
@@ -718,19 +745,22 @@ export default {
   width: 200rpx;
   height: 200rpx;
   touch-action: none;
-  transition: all 0.2s ease;
+  transition: transform 0.2s ease, opacity 0.2s ease;
   z-index: 1;
-  cursor: move;
+  box-sizing: border-box;
   
   &.dragging {
-    opacity: 0.5;
+    opacity: 0.6;
     transform: scale(1.05);
-    z-index: 100;
+    z-index: 999;
+    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
   }
   
   &.can-drop {
-    border: 2rpx dashed #108cff;
+    outline: 2rpx dashed #108cff;
+    outline-offset: -2rpx;
     background-color: rgba(16, 140, 255, 0.1);
+    border-radius: 8rpx;
   }
 }
 
@@ -896,5 +926,6 @@ export default {
   line-height: 80rpx;
   text-align: center;
   border-radius: 20rpx;
+  z-index: 1000;
 }
 </style>