Ver código fonte

新增,在高清实物图每次拖拽完成之后和上传新图片的之后把新的fileIds传给接口

Yannay 1 mês atrás
pai
commit
f6399590a3
1 arquivos alterados com 53 adições e 128 exclusões
  1. 53 128
      pages/orderDetailRefactored/components/PageThree.vue

+ 53 - 128
pages/orderDetailRefactored/components/PageThree.vue

@@ -6,56 +6,34 @@
6
       <u-row class="info-row" justify="space-between">
6
       <u-row class="info-row" justify="space-between">
7
         <u-col span="5.8">
7
         <u-col span="5.8">
8
           <view class="info-label">开户人</view>
8
           <view class="info-label">开户人</view>
9
-          <u-input 
10
-            v-model="paymentInfo.customName" 
11
-            placeholder="请输入开户人姓名" 
12
-            class="info-input"
13
-            @blur="handleCustomNameInput" 
14
-          />
9
+          <u-input v-model="paymentInfo.customName" placeholder="请输入开户人姓名" class="info-input"
10
+            @blur="handleCustomNameInput" />
15
         </u-col>
11
         </u-col>
16
         <u-col span="5.8">
12
         <u-col span="5.8">
17
           <view class="info-label">银行名称</view>
13
           <view class="info-label">银行名称</view>
18
-          <u-input 
19
-            v-model="paymentInfo.bankName" 
20
-            placeholder="请输入银行名称" 
21
-            class="info-input"
22
-            @blur="handleBankNameInput" 
23
-          />
14
+          <u-input v-model="paymentInfo.bankName" placeholder="请输入银行名称" class="info-input"
15
+            @blur="handleBankNameInput" />
24
         </u-col>
16
         </u-col>
25
       </u-row>
17
       </u-row>
26
       <u-row class="info-row">
18
       <u-row class="info-row">
27
         <u-col span="12">
19
         <u-col span="12">
28
           <view class="info-label">银行账号</view>
20
           <view class="info-label">银行账号</view>
29
-          <u-input 
30
-            v-model="paymentInfo.bankAccount" 
31
-            placeholder="请输入银行账号" 
32
-            class="info-input"
33
-            type="number"
34
-            @input="handleBankAccountInput" 
35
-          />
21
+          <u-input v-model="paymentInfo.bankAccount" placeholder="请输入银行账号" class="info-input" type="number"
22
+            @input="handleBankAccountInput" />
36
         </u-col>
23
         </u-col>
37
       </u-row>
24
       </u-row>
38
       <u-row class="info-row">
25
       <u-row class="info-row">
39
         <u-col span="12">
26
         <u-col span="12">
40
           <view class="info-label">身份证号</view>
27
           <view class="info-label">身份证号</view>
41
-          <u-input 
42
-            v-model="paymentInfo.idNumber" 
43
-            placeholder="请输入身份证号" 
44
-            class="info-input"
45
-            type="number"
46
-            @input="handleIdNumberInput" 
47
-          />
28
+          <u-input v-model="paymentInfo.idNumber" placeholder="请输入身份证号" class="info-input" type="number"
29
+            @input="handleIdNumberInput" />
48
         </u-col>
30
         </u-col>
49
       </u-row>
31
       </u-row>
50
       <u-row class="info-row">
32
       <u-row class="info-row">
51
         <u-col span="12">
33
         <u-col span="12">
52
           <view class="info-label">支付方式选择</view>
34
           <view class="info-label">支付方式选择</view>
53
-          <u-radio-group 
54
-            iconPlacement="left" 
55
-            v-model="paymentMethodRadio" 
56
-            placement="row"
57
-            @change="handlePaymentMethodRadioChange"
58
-          >
35
+          <u-radio-group iconPlacement="left" v-model="paymentMethodRadio" placement="row"
36
+            @change="handlePaymentMethodRadioChange">
59
             <u-radio shape="circle" label="小葫芦线上支付" name="online" />
37
             <u-radio shape="circle" label="小葫芦线上支付" name="online" />
60
             <u-radio shape="circle" label="线下支付" name="offline" />
38
             <u-radio shape="circle" label="线下支付" name="offline" />
61
           </u-radio-group>
39
           </u-radio-group>
@@ -64,12 +42,8 @@
64
       <u-row class="info-row">
42
       <u-row class="info-row">
65
         <u-col span="12">
43
         <u-col span="12">
66
           <view class="info-label">支付方式</view>
44
           <view class="info-label">支付方式</view>
67
-          <u-input 
68
-            :disabled="paymentMethodRadio === 'online'" 
69
-            v-model="paymentMethod" 
70
-            placeholder="请输入支付方式"
71
-            class="info-input" 
72
-          />
45
+          <u-input :disabled="paymentMethodRadio === 'online'" v-model="paymentMethod" placeholder="请输入支付方式"
46
+            class="info-input" />
73
         </u-col>
47
         </u-col>
74
       </u-row>
48
       </u-row>
75
     </view>
49
     </view>
@@ -82,35 +56,19 @@
82
         </view>
56
         </view>
83
         <view class="detail-image-content">
57
         <view class="detail-image-content">
84
           <view class="detail-image-list">
58
           <view class="detail-image-list">
85
-            <view 
86
-              v-for="(item, index) in displayImages" 
87
-              :key="item.id || `detail-${index}`"
88
-              class="detail-image-item"
59
+            <view v-for="(item, index) in displayImages" :key="item.id || `detail-${index}`" class="detail-image-item"
89
               :class="{
60
               :class="{
90
                 'dragging': draggingIndex === index,
61
                 'dragging': draggingIndex === index,
91
                 'can-drop': canDropIndex === index && draggingIndex !== index
62
                 'can-drop': canDropIndex === index && draggingIndex !== index
92
-              }"
93
-              :style="draggingIndex === index ? draggingStyle : ''"
94
-              @touchstart.stop="onTouchStart($event, index)"
95
-              @touchmove.stop="onTouchMove($event, index)"
96
-              @touchend.stop="onTouchEnd"
97
-            >
98
-              <PicComp 
99
-                :src="item.fileUrl" 
100
-                @needPreviewPic="previewImageDetail"
101
-              />
63
+              }" :style="draggingIndex === index ? draggingStyle : ''" @touchstart.stop="onTouchStart($event, index)"
64
+              @touchmove.stop="onTouchMove($event, index)" @touchend.stop="onTouchEnd">
65
+              <PicComp :src="item.fileUrl" @needPreviewPic="previewImageDetail" />
102
               <view class="image-type-tag">{{ getImageType(index) }}</view>
66
               <view class="image-type-tag">{{ getImageType(index) }}</view>
103
-              <view 
104
-                class="detail-delete-btn" 
105
-                @click.stop="handleHideImage(item, index)"
106
-              >
67
+              <view class="detail-delete-btn" @click.stop="handleHideImage(item, index)">
107
                 ×
68
                 ×
108
               </view>
69
               </view>
109
             </view>
70
             </view>
110
-            <view 
111
-              class="detail-upload-btn" 
112
-              @click="handleUploadImage"
113
-            >
71
+            <view class="detail-upload-btn" @click="handleUploadImage">
114
               <u-icon name="plus" size="40rpx" color="#999" />
72
               <u-icon name="plus" size="40rpx" color="#999" />
115
             </view>
73
             </view>
116
           </view>
74
           </view>
@@ -123,13 +81,7 @@
123
       <view class="payment-section">
81
       <view class="payment-section">
124
         <view class="payment-total-container">
82
         <view class="payment-total-container">
125
           <text class="payment-label">支付总额</text>
83
           <text class="payment-label">支付总额</text>
126
-          <u-input 
127
-            v-model="paymentAmount" 
128
-            class="payment-amount" 
129
-            type="number" 
130
-            decimal="2" 
131
-            prefix="¥" 
132
-          />
84
+          <u-input v-model="paymentAmount" class="payment-amount" type="number" decimal="2" prefix="¥" />
133
         </view>
85
         </view>
134
         <view class="payment-buttons-row">
86
         <view class="payment-buttons-row">
135
           <view class="payment-button" @click="handleUnpaidClick">
87
           <view class="payment-button" @click="handleUnpaidClick">
@@ -148,59 +100,29 @@
148
     </view>
100
     </view>
149
 
101
 
150
     <!-- 下一步按钮 -->
102
     <!-- 下一步按钮 -->
151
-    <u-button 
152
-      class="next-btn" 
153
-      @click="handleNext" 
154
-      type="primary" 
155
-      size="middle"
156
-    >
103
+    <u-button class="next-btn" @click="handleNext" type="primary" size="middle">
157
       下一步
104
       下一步
158
     </u-button>
105
     </u-button>
159
 
106
 
160
     <!-- 未收评级模态窗 -->
107
     <!-- 未收评级模态窗 -->
161
-    <u-modal 
162
-      showCancelButton 
163
-      showConfirmButton 
164
-      @confirm="confirmUnpaid" 
165
-      @cancel="unpaidModalVisible = false"
166
-      :show="unpaidModalVisible" 
167
-      title="未收评级"
168
-    >
108
+    <u-modal showCancelButton showConfirmButton @confirm="confirmUnpaid" @cancel="unpaidModalVisible = false"
109
+      :show="unpaidModalVisible" title="未收评级">
169
       <view class="modal-content">
110
       <view class="modal-content">
170
-        <u-rate 
171
-          v-model="unpaidRating" 
172
-          :count="5" 
173
-          :size="50" 
174
-          active-color="#ff9500"
175
-        />
111
+        <u-rate v-model="unpaidRating" :count="5" :size="50" active-color="#ff9500" />
176
       </view>
112
       </view>
177
     </u-modal>
113
     </u-modal>
178
 
114
 
179
     <!-- 待跟进模态窗 -->
115
     <!-- 待跟进模态窗 -->
180
-    <u-modal 
181
-      showCancelButton 
182
-      showConfirmButton 
183
-      @confirm="confirmFollowUp" 
184
-      @cancel="followUpModalVisible = false"
185
-      :show="followUpModalVisible" 
186
-      title="填写跟进细节"
187
-    >
116
+    <u-modal showCancelButton showConfirmButton @confirm="confirmFollowUp" @cancel="followUpModalVisible = false"
117
+      :show="followUpModalVisible" title="填写跟进细节">
188
       <view class="modal-content">
118
       <view class="modal-content">
189
-        <u--textarea 
190
-          v-model="followUpNotes" 
191
-          placeholder="请输入情况" 
192
-          confirm-type="done"
193
-          style="width: 100%; margin-bottom: 30rpx;"
194
-        />
119
+        <u--textarea v-model="followUpNotes" placeholder="请输入情况" confirm-type="done"
120
+          style="width: 100%; margin-bottom: 30rpx;" />
195
       </view>
121
       </view>
196
     </u-modal>
122
     </u-modal>
197
 
123
 
198
     <!-- 确认支付模态窗 -->
124
     <!-- 确认支付模态窗 -->
199
-    <u-modal 
200
-      :show="payNowModalVisible" 
201
-      title="确认支付信息" 
202
-      :showConfirmButton="false"
203
-    >
125
+    <u-modal :show="payNowModalVisible" title="确认支付信息" :showConfirmButton="false">
204
       <view class="modal-content">
126
       <view class="modal-content">
205
         <view class="payment-amount-display">¥{{ paymentAmount }}</view>
127
         <view class="payment-amount-display">¥{{ paymentAmount }}</view>
206
         <view class="payment-info-section">
128
         <view class="payment-info-section">
@@ -221,21 +143,11 @@
221
             <text class="info-value">{{ paymentMethod || '未填写' }}</text>
143
             <text class="info-value">{{ paymentMethod || '未填写' }}</text>
222
           </view>
144
           </view>
223
         </view>
145
         </view>
224
-        <u-button 
225
-          type="primary" 
226
-          size="large" 
227
-          @click="confirmTransfer"
228
-          style="margin-top: 40rpx;"
229
-        >
146
+        <u-button type="primary" size="large" @click="confirmTransfer" style="margin-top: 40rpx;">
230
           确认转账
147
           确认转账
231
         </u-button>
148
         </u-button>
232
-        <u-button 
233
-          type="primary" 
234
-          :plain="true" 
235
-          @click="payNowModalVisible = false" 
236
-          size="large"
237
-          style="margin-top: 20rpx;"
238
-        >
149
+        <u-button type="primary" :plain="true" @click="payNowModalVisible = false" size="large"
150
+          style="margin-top: 20rpx;">
239
           取消
151
           取消
240
         </u-button>
152
         </u-button>
241
       </view>
153
       </view>
@@ -345,7 +257,7 @@ export default {
345
      */
257
      */
346
     async loadDetailImages() {
258
     async loadDetailImages() {
347
       if (!this.currentReceipt.id || !this.orderDetail.itemBrand) return
259
       if (!this.currentReceipt.id || !this.orderDetail.itemBrand) return
348
-      
260
+
349
       try {
261
       try {
350
         const list = await imageUpload.getFileList(
262
         const list = await imageUpload.getFileList(
351
           '2',
263
           '2',
@@ -455,9 +367,9 @@ export default {
455
     /**
367
     /**
456
      * 触摸结束
368
      * 触摸结束
457
      */
369
      */
458
-    onTouchEnd() {
370
+    async onTouchEnd() {
459
       if (this.draggingIndex === -1) return
371
       if (this.draggingIndex === -1) return
460
-      
372
+
461
       if (this.canDropIndex !== -1 && this.canDropIndex !== this.draggingIndex) {
373
       if (this.canDropIndex !== -1 && this.canDropIndex !== this.draggingIndex) {
462
         // 交换位置
374
         // 交换位置
463
         const images = [...this.detailImages]
375
         const images = [...this.detailImages]
@@ -466,8 +378,14 @@ export default {
466
         images[this.canDropIndex] = temp
378
         images[this.canDropIndex] = temp
467
         this.detailImages = images
379
         this.detailImages = images
468
       }
380
       }
469
-      
381
+
470
       this.resetDragState()
382
       this.resetDragState()
383
+
384
+      //每次拖拽结束后把新的顺序传送给接口
385
+      await uni.$u.api.updateReceiptForm({
386
+        id: this.currentReceipt.id,
387
+        fileIds: this.detailImages.map(item => item.id).join(',')
388
+      })
471
     },
389
     },
472
 
390
 
473
     /**
391
     /**
@@ -516,6 +434,13 @@ export default {
516
           uploadResults
434
           uploadResults
517
         )
435
         )
518
         this.loadDetailImages()
436
         this.loadDetailImages()
437
+
438
+        //上传新图片完成之后也要把新数据给接口
439
+        await uni.$u.api.updateReceiptForm({
440
+          id: this.currentReceipt.id,
441
+          fileIds: this.detailImages.map(item => item.id).join(',')
442
+        })
443
+
519
       } catch (error) {
444
       } catch (error) {
520
         console.error('上传失败:', error)
445
         console.error('上传失败:', error)
521
       }
446
       }
@@ -577,8 +502,8 @@ export default {
577
         paymentMethod: this.paymentMethod || ''
502
         paymentMethod: this.paymentMethod || ''
578
       })
503
       })
579
 
504
 
580
-      if (!this.paymentInfo.customName || !this.paymentInfo.bankName || 
581
-          !this.paymentInfo.bankAccount || !this.paymentInfo.idNumber || !this.paymentMethod) {
505
+      if (!this.paymentInfo.customName || !this.paymentInfo.bankName ||
506
+        !this.paymentInfo.bankAccount || !this.paymentInfo.idNumber || !this.paymentMethod) {
582
         uni.$u.toast('请填写完整的支付信息')
507
         uni.$u.toast('请填写完整的支付信息')
583
         return
508
         return
584
       }
509
       }
@@ -753,14 +678,14 @@ export default {
753
   transition: transform 0.2s ease, opacity 0.2s ease;
678
   transition: transform 0.2s ease, opacity 0.2s ease;
754
   z-index: 1;
679
   z-index: 1;
755
   box-sizing: border-box;
680
   box-sizing: border-box;
756
-  
681
+
757
   &.dragging {
682
   &.dragging {
758
     opacity: 0.6;
683
     opacity: 0.6;
759
     transform: scale(1.05);
684
     transform: scale(1.05);
760
     z-index: 999;
685
     z-index: 999;
761
     box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
686
     box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
762
   }
687
   }
763
-  
688
+
764
   &.can-drop {
689
   &.can-drop {
765
     outline: 2rpx dashed #108cff;
690
     outline: 2rpx dashed #108cff;
766
     outline-offset: -2rpx;
691
     outline-offset: -2rpx;
@@ -916,7 +841,7 @@ export default {
916
   margin-bottom: 20rpx;
841
   margin-bottom: 20rpx;
917
   align-items: center;
842
   align-items: center;
918
   justify-content: space-between;
843
   justify-content: space-between;
919
-  
844
+
920
   &:last-child {
845
   &:last-child {
921
     margin-bottom: 0;
846
     margin-bottom: 0;
922
   }
847
   }