修改接单中心详情页为滑动，并增加原代码备份

pages.json

@@ -261,7 +261,7 @@
 			"path": "pages/orderDetailRefactored/index",
 			"style": {
 				"navigationBarTitleText": "",
-				"enablePullDownRefresh": true,
+				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
 		},

pages/orderDetailRefactored/components/OrderDetailView.vue

@@ -1,31 +1,73 @@
 <template>
-  <view class="order-detail-view">
-    <!-- 页面切换 -->
-    <view class="page-item" v-show="activeIndex === 0">
-      <PageOne :order-detail="orderDetail" :order-id="orderId" :current-receipt="currentReceipt" @next="handleNext" />
-    </view>
+  <view
+    class="order-detail-view"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+  >
+    <!-- 单 scroll-view：先滚完当前页再进入下一页，避免误触下拉刷新 -->
+    <scroll-view
+      scroll-y
+      class="page-scroll-view"
+      :scroll-top="snapScrollTop >= 0 ? snapScrollTop : undefined"
+      :scroll-into-view="scrollIntoView"
+      :scroll-with-animation="true"
+      :show-scrollbar="false"
+      @scroll="onScroll"
+    >
+      <view id="page0" class="page-section" :style="{ minHeight: sectionMinHeight }">
+        <view class="page-item">
+          <PageOne :order-detail="orderDetail" :order-id="orderId" :current-receipt="currentReceipt" @next="handleNext" />
+        </view>
+      </view>
+      <view id="page1" class="page-section" :style="{ minHeight: sectionMinHeight }">
+        <view class="page-item">
+          <PageTwo
+            :order-detail="orderDetail"
+            :order-id="orderId"
+            :current-receipt="currentReceipt"
+            :follow-up-list="followUpList"
+            @next="handleNext"
+            @update-file-ids="handleUpdateFileIds"
+            @price-updated="$emit('price-updated')"
+            @follow-saved="loadFollowUpList"
+          />
+        </view>
+      </view>
+      <view id="page2" class="page-section" :style="{ minHeight: sectionMinHeight }">
+        <view class="page-item">
+          <PageThree
+            ref="pageThreeRef"
+            :order-detail="orderDetail"
+            :order-id="orderId"
+            :current-receipt="currentReceipt"
+            @next="handleNext"
+            @save="handleNeedSave"
+            @confirm-pay="handleConfirmPay"
+            @update-file-ids="handleUpdateFileIds"
+            @price-updated="$emit('price-updated')"
+          />
+        </view>
+      </view>
+      <view id="page3" class="page-section" :style="{ minHeight: sectionMinHeight }">
+        <view class="page-item">
+          <PageFour
+            :order-detail="orderDetail"
+            :current-receipt="currentReceipt"
+            @next="handleNext"
+            @confirm-warehouse="handleConfirmWarehouse"
+          />
+        </view>
+      </view>
+    </scroll-view>
 
-    <view class="page-item" v-show="activeIndex === 1">
-      <PageTwo :order-detail="orderDetail" :order-id="orderId" :current-receipt="currentReceipt"
-        :follow-up-list="followUpList" @next="handleNext" @update-file-ids="handleUpdateFileIds"
-        @price-updated="$emit('price-updated')" />
-    </view>
-
-    <view class="page-item" v-show="activeIndex === 2">
-      <PageThree :order-detail="orderDetail" :order-id="orderId" :current-receipt="currentReceipt" @next="handleNext"
-        @save="handleNeedSave" @confirm-pay="handleConfirmPay" @update-file-ids="handleUpdateFileIds"
-        @price-updated="$emit('price-updated')" ref="pageThreeRef" />
-    </view>
-
-    <view class="page-item" v-show="activeIndex === 3">
-      <PageFour :order-detail="orderDetail" :current-receipt="currentReceipt" @next="handleNext"
-        @confirm-warehouse="handleConfirmWarehouse" />
-    </view>
-
-    <!-- 页面导航 -->
+    <!-- 页面导航（点击仍可切换） -->
     <ul class="page-navigation">
-      <li v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeIndex === index }"
-        @click="handleTabClick(index)">
+      <li
+        v-for="(tab, index) in tabs"
+        :key="index"
+        :class="{ active: activeIndex === index }"
+        @click="handleTabClick(index)"
+      >
         {{ tab }}
       </li>
     </ul>
@@ -65,9 +107,22 @@ export default {
     }
   },
   data() {
+    const sys = typeof uni !== 'undefined' ? uni.getSystemInfoSync() : { windowHeight: 600 }
+    const sectionMinHeight = (sys.windowHeight || 600) - 100 + 'px' // 一屏高度，留出导航等
     return {
       activeIndex: 0,
       tabs: ['一', '二', '三', '四'],
+      scrollTop: 0,
+      scrollIntoView: '',
+      sectionMinHeight,
+      sectionTops: [0],
+      scrollTopLock: null,
+      // 吸住效果：仅在有意义的数值时控制 scroll-top，-1 表示不控制
+      snapScrollTop: -1,
+      scrollEndTimer: null,
+      snapInProgress: false,
+      // 阻止在非顶部时触发页面下拉刷新（由 touch 捕获）
+      touchStartY: 0,
       // 表单数据
       formData: {
         formOne: {},
@@ -81,6 +136,12 @@ export default {
       followUpList: []
     }
   },
+  mounted() {
+    this.$nextTick(() => this.measureSectionTops())
+  },
+  updated() {
+    this.$nextTick(() => this.measureSectionTops())
+  },
   watch: {
     orderDetail: {
       handler(newVal) {
@@ -103,9 +164,18 @@ export default {
         })
         const data = res.data || {}
         const followUpList = []
-        for (const key in data) {
-          followUpList.push(...(data[key] || []))
+        // 按日期键升序合并，保证“最后一条”=“最新一条”，回显才能拿到最新
+        const dates = Object.keys(data).filter(Boolean).sort()
+        for (const key of dates) {
+          const list = data[key] || []
+          followUpList.push(...list)
         }
+        // 再按 createTime 排一次，同一天内多条时也保证时间顺序
+        followUpList.sort((a, b) => {
+          const t1 = a.createTime || ''
+          const t2 = b.createTime || ''
+          return t1.localeCompare(t2)
+        })
         this.followUpList = followUpList
       } catch (error) {
         console.error('获取跟进记录失败:', error)
@@ -114,16 +184,119 @@ export default {
     },
 
     /**
-     * 处理下一步
+     * 测量各段顶部位置，用于根据 scrollTop 计算当前页
+     */
+    measureSectionTops() {
+      const query = uni.createSelectorQuery().in(this)
+      query
+        .selectAll('.page-section')
+        .fields({ size: true }, (res) => {
+          if (!res || !res.length) return
+          const tops = [0]
+          for (let i = 0; i < res.length - 1; i++) {
+            tops.push(tops[i] + (res[i].height || 0))
+          }
+          this.sectionTops = tops
+        })
+        .exec()
+    },
+
+    /**
+     * 滚动时更新当前页索引
+     */
+    onScroll(e) {
+      const scrollTop = e.detail?.scrollTop ?? 0
+      if (this.scrollTopLock !== null) return
+      this.scrollTop = scrollTop
+      // 吸附过程中不更新页索引、不启动“滚动结束”定时器，避免释放控制后误触二次吸附到第一页
+      if (this.snapInProgress) return
+      const tops = this.sectionTops
+      if (tops.length) {
+        let idx = 0
+        for (let i = tops.length - 1; i >= 0; i--) {
+          if (scrollTop >= tops[i] - 10) {
+            idx = i
+            break
+          }
+        }
+        if (idx !== this.activeIndex) {
+          this.activeIndex = idx
+          this.tryRefreshPageThree(idx)
+        }
+      }
+      if (this.scrollEndTimer) clearTimeout(this.scrollEndTimer)
+      this.scrollEndTimer = setTimeout(() => this.doSnap(), 150)
+    },
+
+    /**
+     * 滚动停止后吸附到当前所在页的起始位置（轮播吸住感）
+     */
+    doSnap() {
+      this.scrollEndTimer = null
+      const tops = this.sectionTops
+      if (!tops.length) return
+      const scrollTop = this.scrollTop
+      let nearest = tops.length - 1
+      for (let i = tops.length - 1; i >= 0; i--) {
+        if (scrollTop >= tops[i] - 2) {
+          nearest = i
+          break
+        }
+      }
+      const targetTop = tops[nearest]
+      if (Math.abs(scrollTop - targetTop) < 2) {
+        this.snapInProgress = false
+        return
+      }
+      this.snapInProgress = true
+      this.snapScrollTop = targetTop
+      this.activeIndex = nearest
+      this.tryRefreshPageThree(nearest)
+      setTimeout(() => {
+        this.snapScrollTop = -1
+        // 释放后仍保持 snapInProgress 一段时间，避免“释放”触发的 scroll 事件再次触发 doSnap 吸到第一页
+        setTimeout(() => {
+          this.snapInProgress = false
+        }, 200)
+      }, 350)
+    },
+
+    tryRefreshPageThree(index) {
+      if (index === 2 && this.$refs.pageThreeRef) {
+        const ref = Array.isArray(this.$refs.pageThreeRef) ? this.$refs.pageThreeRef[0] : this.$refs.pageThreeRef
+        if (ref && ref.refreshImageList) ref.refreshImageList()
+      }
+    },
+
+    /**
+     * 触摸开始：记录 Y，用于避免误触页面下拉刷新
+     */
+    onTouchStart(e) {
+      this.touchStartY = e.touches && e.touches[0] ? e.touches[0].clientY : 0
+    },
+
+    /**
+     * 触摸移动：在非全局顶部时用 catch 阻止事件冒泡到页面，减少触发下拉刷新
+     */
+    onTouchMove(e) {
+      if (this.scrollTop > 20 && e.cancelable) {
+        e.stopPropagation()
+      }
+    },
+
+    /**
+     * 处理下一步：滚动到下一页
      */
     handleNext({ nowPage, form }) {
-      this.activeIndex++
       if (nowPage) {
         this.formData[nowPage] = form
       }
-      // 当切换到第三页时，更新第三页的图片列表
-      if (nowPage === 'formTwo' && this.$refs.pageThreeRef) {
-        this.$refs.pageThreeRef.refreshImageList()
+      const nextIndex = Math.min(this.activeIndex + 1, this.tabs.length - 1)
+      this.scrollToSection(nextIndex)
+      this.activeIndex = nextIndex
+      if (nextIndex === 2 && this.$refs.pageThreeRef) {
+        const ref = Array.isArray(this.$refs.pageThreeRef) ? this.$refs.pageThreeRef[0] : this.$refs.pageThreeRef
+        if (ref && ref.refreshImageList) ref.refreshImageList()
       }
     },
 
@@ -208,14 +381,30 @@ export default {
     },
 
     /**
+     * 滚动到指定页（用于点击导航、下一步）
+     */
+    scrollToSection(index) {
+      if (this.scrollEndTimer) clearTimeout(this.scrollEndTimer)
+      this.scrollEndTimer = null
+      this.snapInProgress = true
+      this.scrollIntoView = 'page' + index
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.scrollIntoView = ''
+          setTimeout(() => {
+            this.snapInProgress = false
+          }, 100)
+        }, 300)
+      })
+      this.activeIndex = index
+      this.tryRefreshPageThree(index)
+    },
+
+    /**
      * 处理标签点击
      */
     handleTabClick(index) {
-      this.activeIndex = index
-      // 切换到第三页时刷新图片列表
-      if (index === 2 && this.$refs.pageThreeRef) {
-        this.$refs.pageThreeRef.refreshImageList()
-      }
+      this.scrollToSection(index)
     },
 
     /**
@@ -233,12 +422,30 @@ export default {
 
 <style scoped lang="scss">
 .order-detail-view {
+  position: relative;
   padding: 20rpx;
+  height: calc(100vh - 200rpx);
   min-height: calc(100vh - 200rpx);
 }
 
+.page-scroll-view {
+  width: 100%;
+  height: 100%;
+  scroll-snap-type: y mandatory;
+  -webkit-overflow-scrolling: touch;
+}
+
+.page-section {
+  width: 100%;
+  box-sizing: border-box;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
 .page-item {
   width: 100%;
+  min-height: 100%;
+  box-sizing: border-box;
 }
 
 .page-navigation {

pages/orderDetailRefactored/components/PageFour.vue

@@ -15,7 +15,8 @@
         <u-row class="info-row" justify="space-between">
           <u-col span="5.8">
             <u-form-item label="收单物品" prop="item">
-              <u--input v-model="warehouseInfo.item" placeholder="请输入收单物品" class="info-input" />
+              <u--input v-model="warehouseInfo.item" placeholder="请输入收单物品" class="info-input"
+                @blur="saveWarehouseInfoOnBlur" />
             </u-form-item>
           </u-col>
           <u-col span="5.8">
@@ -62,12 +63,13 @@
           <u-col span="4.5">
             <u-form-item label="编码" prop="codeStorage">
               <u--input v-model="warehouseInfo.codeStorage" placeholder="请输入编码" class="info-input"
-                :disabled="warehouseInfo.needCheckCode === '2'" />
+                :disabled="warehouseInfo.needCheckCode === '2'" @blur="saveWarehouseInfoOnBlur" />
             </u-form-item>
           </u-col>
           <u-col span="4.5">
             <u-form-item label="快递单号" prop="expressOrderNo">
-              <u--input v-model="warehouseInfo.expressOrderNo" placeholder="请输入快递单号" class="info-input" />
+              <u--input v-model="warehouseInfo.expressOrderNo" placeholder="请输入快递单号" class="info-input"
+                @blur="saveWarehouseInfoOnBlur" />
             </u-form-item>
           </u-col>
           <u-col span="2">
@@ -85,13 +87,14 @@
         <u-row class="info-row" justify="space-between">
           <u-col span="5.8">
             <u-form-item label="表款">
-              <u--input v-model="warehouseInfo.watchPrice" placeholder="请输入表款" class="info-input" type="number" />
+              <u--input v-model="warehouseInfo.watchPrice" placeholder="请输入表款" class="info-input" type="number"
+                @blur="saveWarehouseInfoOnBlur" />
             </u-form-item>
           </u-col>
           <u-col span="5.8">
             <u-form-item label="查码费">
               <u--input v-model="warehouseInfo.checkCodeFee" placeholder="请输入查码费" class="info-input" type="number"
-                :disabled="warehouseInfo.needCheckCode === '2'" />
+                :disabled="warehouseInfo.needCheckCode === '2'" @blur="saveWarehouseInfoOnBlur" />
             </u-form-item>
           </u-col>
         </u-row>
@@ -114,20 +117,22 @@
         <u-row class="info-row" justify="space-between">
           <u-col span="5.8">
             <u-form-item label="维修金额">
-              <u--input v-model="warehouseInfo.repairAmount" placeholder="请输入维修金额" class="info-input" type="number" />
+              <u--input v-model="warehouseInfo.repairAmount" placeholder="请输入维修金额" class="info-input" type="number"
+                @blur="saveWarehouseInfoOnBlur" />
             </u-form-item>
           </u-col>
           <u-col span="5.8">
             <u-form-item label="分单比例（0~100）">
               <u--input v-model="warehouseInfo.splitRatio" placeholder="请输入分单比例(0~100)" class="info-input"
-                type="number" />
+                type="number" @blur="saveWarehouseInfoOnBlur" />
             </u-form-item>
           </u-col>
         </u-row>
         <u-row class="info-row" justify="space-between">
           <u-col span="5.8">
             <u-form-item label="型号" required prop="model"> 
-              <u--input v-model="warehouseInfo.model" placeholder="请输入型号" class="info-input"/>
+              <u--input v-model="warehouseInfo.model" placeholder="请输入型号" class="info-input"
+                @blur="saveWarehouseInfoOnBlur" />
             </u-form-item>
           </u-col>
         </u-row>
@@ -173,7 +178,7 @@
           <u-col span="12">
             <u-form-item label="收单备注">
               <u--textarea v-model="warehouseInfo.remarks" placeholder="请输入收单备注" class="info-textarea"
-                confirmType="done" rows="4" />
+                confirmType="done" rows="4" @blur="saveWarehouseInfoOnBlur" />
             </u-form-item>
           </u-col>
         </u-row>
@@ -461,7 +466,38 @@ export default {
     },
 
     /**
-     * 选择物流图片
+     * 入库信息失焦 / 物流图片变更后保存
+     */
+    async saveWarehouseInfoOnBlur() {
+      if (!this.currentReceipt || !this.currentReceipt.id) return
+      try {
+        await uni.$u.api.updateReceiptForm({
+          id: this.currentReceipt.id,
+          code: this.warehouseInfo.codeStorage || '',
+          expressOrderNo: this.warehouseInfo.expressOrderNo || '',
+          item: this.warehouseInfo.item || '',
+          checkCodeFee: this.warehouseInfo.checkCodeFee || '',
+          tableFee: this.warehouseInfo.watchPrice || '',
+          benefitFee: this.warehouseInfo.benefitFee || '',
+          freight: this.warehouseInfo.freight || '',
+          repairAmount: this.warehouseInfo.repairAmount || '',
+          grossPerformance: this.computedGrossPerformance || '',
+          performance: this.computedPerformance || '',
+          splitRatio: this.warehouseInfo.splitRatio || '',
+          receiptRemark: `${this.warehouseInfo.remarks || ''};${this.warehouseInfo.uploadedImage || ''}`,
+          customerServiceName: this.warehouseInfo.customerServiceName || '',
+          category: this.warehouseInfo.category || '',
+          needCheckCode: this.warehouseInfo.needCheckCode || '',
+          totalCost: this.computedTotalCost || '',
+          model: this.warehouseInfo.model || ''
+        })
+      } catch (e) {
+        console.error('保存入库信息失败:', e)
+      }
+    },
+
+    /**
+     * 选择物流图片（选完后即保存）
      */
     async selectImage() {
       try {
@@ -474,6 +510,7 @@ export default {
         const rep = await uni.$u.api.uploadFile(tempFilePath)
         if (rep.code == 200) {
           this.warehouseInfo.uploadedImage = rep.data.url
+          await this.saveWarehouseInfoOnBlur()
         }
       } catch (error) {
         console.error('上传图片失败:', error)
@@ -704,6 +741,7 @@ export default {
       this.warehouseInfo.customerServiceNameLabel = value[0].label
       this.warehouseInfo.customerServiceName = value[0].value
       this.showCustomerServicePicker = false
+      this.saveWarehouseInfoOnBlur()
     },
 
     /**
@@ -720,6 +758,7 @@ export default {
       this.warehouseInfo.categoryLabel = value[0].label
       this.warehouseInfo.category = value[0].value
       this.showCategoryPicker = false
+      this.saveWarehouseInfoOnBlur()
     },
 
     /**
@@ -741,6 +780,7 @@ export default {
         this.warehouseInfo.checkCodeFee = ''
       }
       this.showNeedCheckCodePicker = false
+      this.saveWarehouseInfoOnBlur()
     },
 
     /**

pages/orderDetailRefactored/components/PageOne.vue

@@ -115,9 +115,9 @@
 
     <!-- 下一步按钮 -->
     <view class="space-block"></view>
-    <u-button class="next-btn" @click="handleNext" type="primary" size="middle">
+    <!-- <u-button class="next-btn" @click="handleNext" type="primary" size="middle">
       下一步
-    </u-button>
+    </u-button> -->
   </view>
 </template>
 

pages/orderDetailRefactored/components/PageThree.vue

@@ -19,7 +19,7 @@
         <u-col span="12">
           <view class="info-label">{{ bankAccountLabel }}</view>
           <u-input v-model="paymentInfo.bankAccount" :placeholder="bankAccountPlaceholder" class="info-input"
-            :type="isAlipayPayment ? 'text' : 'number'" @input="handleBankAccountInput" />
+            :type="isAlipayPayment ? 'text' : 'number'" @input="handleBankAccountInput" @blur="handleBankAccountBlur" />
         </u-col>
       </u-row>
       <u-row class="info-row">
@@ -119,9 +119,9 @@
     </view>
 
     <!-- 下一步按钮 -->
-    <u-button class="next-btn" @click="handleNext" type="primary" size="middle">
+    <!-- <u-button class="next-btn" @click="handleNext" type="primary" size="middle">
       下一步
-    </u-button>
+    </u-button> -->
 
     <!-- 未收评级模态窗 -->
     <u-modal showCancelButton showConfirmButton @confirm="confirmUnpaid" @cancel="onUnpaidModalCancel"
@@ -385,39 +385,64 @@ export default {
     },
 
     /**
-     * 开户人输入处理 - 只允许中文
+     * 失焦后保存支付信息（开户人/银行名称/账号/身份证）
+     */
+    async savePaymentInfoOnBlur() {
+      if (!this.currentReceipt || !this.currentReceipt.id) return
+      try {
+        await uni.$u.api.updateReceiptForm({
+          id: this.currentReceipt.id,
+          sendFormId: this.currentReceipt.sendFormId || this.orderDetail.id,
+          customName: this.paymentInfo.customName || '',
+          bankName: this.paymentInfo.bankName || '',
+          bankCardNumber: this.paymentInfo.bankAccount || '',
+          idCard: this.paymentInfo.idNumber || ''
+        })
+      } catch (e) {
+        console.error('保存支付信息失败:', e)
+      }
+    },
+
+    /**
+     * 开户人输入处理 - 只允许中文，失焦保存
      */
     handleCustomNameInput(value) {
-      // 只保留中文字符（包括中文标点）
       const chineseReg = /[^\u4e00-\u9fa5]/g
-      this.paymentInfo.customName = String(value || '').replace(chineseReg, '')
+      this.paymentInfo.customName = String(value ?? this.paymentInfo.customName ?? '').replace(chineseReg, '')
+      this.savePaymentInfoOnBlur()
     },
 
     /**
-     * 银行名称输入处理 - 只允许中文
+     * 银行名称输入处理 - 只允许中文，失焦保存
      */
     handleBankNameInput(value) {
-      // 只保留中文字符（包括中文标点）
       const chineseReg = /[^\u4e00-\u9fa5]/g
-      this.paymentInfo.bankName = String(value || '').replace(chineseReg, '')
+      this.paymentInfo.bankName = String(value ?? this.paymentInfo.bankName ?? '').replace(chineseReg, '')
+      this.savePaymentInfoOnBlur()
     },
 
     /**
      * 银行账号输入处理 - 只允许数字
      */
     handleBankAccountInput(value) {
-      // 只保留数字
       const numberReg = /[^\d]/g
       this.paymentInfo.bankAccount = String(value || '').replace(numberReg, '')
     },
 
     /**
-     * 身份证号输入处理 - 允许数字和X
+     * 银行账号失焦保存
+     */
+    handleBankAccountBlur() {
+      this.savePaymentInfoOnBlur()
+    },
+
+    /**
+     * 身份证号输入处理 - 允许数字和X，失焦保存
      */
     handleIdNumberInput(value) {
-      // 只保留数字和X
       const reg = /[^\dxX]/g
-      this.paymentInfo.idNumber = String(value || '').replace(reg, '')
+      this.paymentInfo.idNumber = String(value ?? this.paymentInfo.idNumber ?? '').replace(reg, '')
+      this.savePaymentInfoOnBlur()
     },
 
     /**

pages/orderDetailRefactored/components/PageTwo.vue

@@ -27,7 +27,8 @@
               v-if="selectedCheckbox.includes('contactMaster')" 
               v-model="formData.contactPhone"
               placeholder="请输入师傅手机号" 
-              class="checklist-input" 
+              class="checklist-input"
+              @blur="saveContactMaster"
             />
           </view>
 
@@ -43,7 +44,8 @@
               type="textarea" 
               placeholder="请输入拍图技巧" 
               rows="3" 
-              class="checklist-textarea" 
+              class="checklist-textarea"
+              @blur="savePhotoTips"
             />
             <view v-if="selectedCheckbox.includes('photoTips')" class="upload-btn-container">
               <view class="upload-btn" @click="handleUpload('photoTips')">
@@ -78,7 +80,8 @@
               type="textarea" 
               placeholder="请输入备注信息" 
               rows="3" 
-              class="checklist-textarea" 
+              class="checklist-textarea"
+              @blur="saveFaceToFace"
             />
             <view v-if="selectedCheckbox.includes('faceToFace')" class="upload-btn-container">
               <view class="upload-btn" @click="handleUpload('faceToFace')">
@@ -170,7 +173,7 @@
       </view>
     </view>
 
-    <!-- 下一步按钮 -->
+    <!-- 下一步按钮
     <u-button 
       class="next-btn" 
       @click="handleNext" 
@@ -178,7 +181,7 @@
       size="middle"
     >
       下一步
-    </u-button>
+    </u-button> -->
   </view>
 </template>
 
@@ -284,32 +287,36 @@ export default {
     },
 
     /**
-     * 检查跟进内容
+     * 检查跟进内容：用最新一条记录回显（支持再次进入时回显）
      */
     checkFollowUpContent(followUpList) {
+      if (!followUpList || followUpList.length === 0) return
       const contentList = followUpList.map(item => item.content || '')
-      
+      // 按顺序遍历，后面的覆盖前面的，得到每类最新一条
+      let lastContactMaster = null
+      let lastPhotoTips = null
+      let lastFaceToFace = null
       contentList.forEach(item => {
-        if (item.includes('联系师傅') && !this.selectedCheckbox.includes('contactMaster')) {
-          this.selectedCheckbox.push('contactMaster')
-          const phone = item.split(';')[1] || ''
-          this.formData.contactPhone = phone
-        }
-        if (item.includes('师傅拍图技巧') && !this.selectedCheckbox.includes('photoTips')) {
-          this.selectedCheckbox.push('photoTips')
-          const tips = item.split(';')[1] || ''
-          this.formData.photoTips = tips
-          const urls = item.split(';')[2] || ''
-          this.photoTipsImages = urls.split(',').filter(url => url.trim())
-        }
-        if (item.includes('到达客户面对面') && !this.selectedCheckbox.includes('faceToFace')) {
-          this.selectedCheckbox.push('faceToFace')
-          const notes = item.split(';')[1] || ''
-          this.formData.faceToFaceNotes = notes
-          const urls = item.split(';')[2] || ''
-          this.faceToFaceImages = urls.split(',').filter(url => url.trim())
-        }
+        if (item.includes('联系师傅')) lastContactMaster = item
+        if (item.includes('师傅拍图技巧')) lastPhotoTips = item
+        if (item.includes('到达客户面对面')) lastFaceToFace = item
       })
+      if (lastContactMaster) {
+        if (!this.selectedCheckbox.includes('contactMaster')) this.selectedCheckbox.push('contactMaster')
+        this.formData.contactPhone = (lastContactMaster.split(';')[1] || '').trim()
+      }
+      if (lastPhotoTips) {
+        if (!this.selectedCheckbox.includes('photoTips')) this.selectedCheckbox.push('photoTips')
+        this.formData.photoTips = (lastPhotoTips.split(';')[1] || '').trim()
+        const urls = (lastPhotoTips.split(';')[2] || '').split(',').filter(url => url.trim())
+        this.photoTipsImages = urls
+      }
+      if (lastFaceToFace) {
+        if (!this.selectedCheckbox.includes('faceToFace')) this.selectedCheckbox.push('faceToFace')
+        this.formData.faceToFaceNotes = (lastFaceToFace.split(';')[1] || '').trim()
+        const urls = (lastFaceToFace.split(';')[2] || '').split(',').filter(url => url.trim())
+        this.faceToFaceImages = urls
+      }
     },
 
     /**
@@ -345,7 +352,7 @@ export default {
     },
 
     /**
-     * 上传图片（跟进清单）
+     * 上传图片（跟进清单）：有新图片即保存
      */
     async handleUpload(field) {
       try {
@@ -355,8 +362,10 @@ export default {
         
         if (field === 'photoTips') {
           this.photoTipsImages = [...this.photoTipsImages, ...urls]
+          await this.savePhotoTips()
         } else if (field === 'faceToFace') {
           this.faceToFaceImages = [...this.faceToFaceImages, ...urls]
+          await this.saveFaceToFace()
         }
       } catch (error) {
         console.error('上传失败:', error)
@@ -365,6 +374,56 @@ export default {
     },
 
     /**
+     * 失焦/有图时保存：联系师傅
+     */
+    async saveContactMaster() {
+      if (!this.selectedCheckbox.includes('contactMaster')) return
+      try {
+        await uni.$u.api.addOrderFollow({
+          orderId: this.orderId,
+          content: `联系师傅;${this.formData.contactPhone || ''}`
+        })
+        this.$emit('follow-saved')
+      } catch (e) {
+        console.error('保存联系师傅失败:', e)
+      }
+    },
+
+    /**
+     * 失焦/有图时保存：师傅拍图技巧
+     */
+    async savePhotoTips() {
+      if (!this.selectedCheckbox.includes('photoTips')) return
+      try {
+        const urls = (this.photoTipsImages || []).join(',')
+        await uni.$u.api.addOrderFollow({
+          orderId: this.orderId,
+          content: `师傅拍图技巧;${this.formData.photoTips || ''};${urls}`
+        })
+        this.$emit('follow-saved')
+      } catch (e) {
+        console.error('保存师傅拍图技巧失败:', e)
+      }
+    },
+
+    /**
+     * 失焦/有图时保存：到达客户面对面
+     */
+    async saveFaceToFace() {
+      if (!this.selectedCheckbox.includes('faceToFace')) return
+      try {
+        const urls = (this.faceToFaceImages || []).join(',')
+        await uni.$u.api.addOrderFollow({
+          orderId: this.orderId,
+          content: `到达客户面对面;${this.formData.faceToFaceNotes || ''};${urls}`
+        })
+        this.$emit('follow-saved')
+      } catch (e) {
+        console.error('保存到达客户面对面失败:', e)
+      }
+    },
+
+    /**
      * 上传细节图
      */
     async handleUploadImage() {

pages/orderDetailRefactoredOld/components/CustomModal.vue

@@ -0,0 +1,130 @@
+<template>
+  <u-modal 
+    :show="visible" 
+    :show-cancel-button="false" 
+    :show-confirm-button="false"
+  >
+    <view class="modal-content">
+      <view class="modal-header">
+        <text class="modal-title">{{ title }}</text>
+      </view>
+      <view class="modal-body">
+        <u-input 
+          v-model="localValue" 
+          :placeholder="placeholder" 
+          class="modal-input"
+        />
+      </view>
+      <view class="modal-footer">
+        <text @click="handleCancel" class="btn cancel-btn">取消</text>
+        <text @click="handleConfirm" class="btn confirm-btn">确定</text>
+      </view>
+    </view>
+  </u-modal>
+</template>
+
+<script>
+export default {
+  name: 'CustomModal',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      localValue: this.value
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.localValue = newVal
+    },
+    visible(newVal) {
+      if (newVal) {
+        this.localValue = this.value
+      }
+    }
+  },
+  methods: {
+    handleCancel() {
+      this.$emit('cancel')
+    },
+    handleConfirm() {
+      this.$emit('confirm', this.localValue)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  gap: 30rpx;
+  padding: 20rpx;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: center;
+  padding: 10rpx 0;
+}
+
+.modal-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.modal-body {
+  padding: 10rpx 0;
+}
+
+.modal-input {
+  border: 2rpx solid #e0e0e0;
+  border-radius: 10rpx;
+  padding: 20rpx;
+  font-size: 28rpx;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 20rpx;
+  padding: 10rpx 0;
+}
+
+.btn {
+  flex: 1;
+  text-align: center;
+  padding: 20rpx;
+  border-radius: 10rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.cancel-btn {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.confirm-btn {
+  background-color: blueviolet;
+  color: white;
+}
+</style>

pages/orderDetailRefactoredOld/components/FollowCard.vue

@@ -0,0 +1,54 @@
+<template>
+  <view class="follow-card-container">
+    <clue-follow :clueId="clueId" :type="type" />
+  </view>
+</template>
+
+<script>
+import clueFollow from '@/pages/orderDetail/tabs/followRecord/index.vue'
+
+export default {
+  name: 'FollowCard',
+  components: {
+    clueFollow
+  },
+  props: {
+    clueId: {
+      type: [String, Number],
+      default: ''
+    },
+    type: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.follow-card-container {
+  padding: 20rpx;
+  background-color: #ffffff;
+  min-height: auto;
+
+  // 覆盖 clue-follow 组件的样式
+  ::v-deep .followRecord_wrap {
+    min-height: auto;
+    background: transparent;
+    padding: 0;
+  }
+
+  ::v-deep .followRecord_timeLine_wrap {
+    background: transparent;
+  }
+
+  ::v-deep .empty_wrap {
+    position: static;
+    transform: none;
+    padding: 40rpx 0;
+    text-align: center;
+    color: #999999;
+    font-size: 28rpx;
+  }
+}
+</style>

pages/orderDetailRefactoredOld/components/OrderDetailView.vue

@@ -0,0 +1,287 @@
+<template>
+  <view class="order-detail-view">
+    <!-- 页面切换 -->
+    <view class="page-item" v-show="activeIndex === 0">
+      <PageOne :order-detail="orderDetail" :order-id="orderId" :current-receipt="currentReceipt" @next="handleNext" />
+    </view>
+
+    <view class="page-item" v-show="activeIndex === 1">
+      <PageTwo :order-detail="orderDetail" :order-id="orderId" :current-receipt="currentReceipt"
+        :follow-up-list="followUpList" @next="handleNext" @update-file-ids="handleUpdateFileIds"
+        @price-updated="$emit('price-updated')" />
+    </view>
+
+    <view class="page-item" v-show="activeIndex === 2">
+      <PageThree :order-detail="orderDetail" :order-id="orderId" :current-receipt="currentReceipt" @next="handleNext"
+        @save="handleNeedSave" @confirm-pay="handleConfirmPay" @update-file-ids="handleUpdateFileIds"
+        @price-updated="$emit('price-updated')" ref="pageThreeRef" />
+    </view>
+
+    <view class="page-item" v-show="activeIndex === 3">
+      <PageFour :order-detail="orderDetail" :current-receipt="currentReceipt" @next="handleNext"
+        @confirm-warehouse="handleConfirmWarehouse" />
+    </view>
+
+    <!-- 页面导航 -->
+    <ul class="page-navigation">
+      <li v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeIndex === index }"
+        @click="handleTabClick(index)">
+        {{ tab }}
+      </li>
+    </ul>
+  </view>
+</template>
+
+<script>
+import PageOne from './PageOne.vue'
+import PageTwo from './PageTwo.vue'
+import PageThree from './PageThree.vue'
+import PageFour from './PageFour.vue'
+
+export default {
+  name: 'OrderDetailView',
+  components: {
+    PageOne,
+    PageTwo,
+    PageThree,
+    PageFour
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => ({})
+    },
+    topInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    orderId: {
+      type: String,
+      default: ''
+    },
+    currentReceipt: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      activeIndex: 0,
+      tabs: ['一', '二', '三', '四'],
+      // 表单数据
+      formData: {
+        formOne: {},
+        formTwo: {},
+        formThree: {},
+        formFour: {}
+      },
+      pageThreeForm: {},
+      fileIds: '',
+      // 跟进记录
+      followUpList: []
+    }
+  },
+  watch: {
+    orderDetail: {
+      handler(newVal) {
+        if (newVal && newVal.clueId) {
+          this.loadFollowUpList()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    /**
+     * 加载跟进记录
+     */
+    async loadFollowUpList() {
+      try {
+        const res = await uni.$u.api.getDuplicateOrderFollowListByClueId({
+          clueId: this.orderDetail.clueId
+        })
+        const data = res.data || {}
+        const followUpList = []
+        for (const key in data) {
+          followUpList.push(...(data[key] || []))
+        }
+        this.followUpList = followUpList
+      } catch (error) {
+        console.error('获取跟进记录失败:', error)
+        uni.$u.toast('获取跟进记录失败')
+      }
+    },
+
+    /**
+     * 处理下一步
+     */
+    handleNext({ nowPage, form }) {
+      this.activeIndex++
+      if (nowPage) {
+        this.formData[nowPage] = form
+      }
+      // 当切换到第三页时，更新第三页的图片列表
+      if (nowPage === 'formTwo' && this.$refs.pageThreeRef) {
+        this.$refs.pageThreeRef.refreshImageList()
+      }
+    },
+
+    /**
+     * 处理保存
+     */
+    handleNeedSave({ nowPage, form, fileIds }) {
+      this.pageThreeForm = form
+      this.fileIds = fileIds
+    },
+
+    /**
+     * 处理确认支付
+     */
+    async handleConfirmPay() {
+      try {
+        const response = await uni.$u.api.saveOrderFileAndTransfer({
+          id: this.orderId,
+          clueId: this.orderDetail.clueId
+        })
+        uni.$u.toast(response.msg || '支付成功')
+      } catch (error) {
+        console.error('支付失败:', error)
+        uni.$u.toast(`支付失败：${error}`)
+
+        //支付失败回滚支付信息
+        await uni.$u.api.updateClueOrderForm({
+          id: this.orderDetail.id,
+          paymentMethod: ''
+        })
+      }
+    },
+
+    /**
+     * 处理确认入库
+     */
+    async handleConfirmWarehouse({ warehouseInfo }) {
+      try {
+        const params = {
+          searchValue: this.orderDetail.searchValue,
+          createBy: this.orderDetail.createBy,
+          createTime: this.orderDetail.createTime,
+          updateBy: this.orderDetail.updateBy,
+          updateTime: this.orderDetail.updateTime,
+          params: this.orderDetail.params,
+          id: this.currentReceipt.id,
+          sendFormId: this.orderId,
+          clueId: this.orderDetail.clueId,
+          item: warehouseInfo.item || '',
+          code: warehouseInfo.codeStorage || '',
+          phone: this.orderDetail.phone,
+          tableFee: warehouseInfo.watchPrice || '',
+          benefitFee: warehouseInfo.benefitFee || '',
+          freight: warehouseInfo.freight || '',
+          checkCodeFee: warehouseInfo.checkCodeFee || '',
+          receiptRemark: `${warehouseInfo.remarks || ''};${warehouseInfo.uploadedImage || ''}`,
+          repairAmount: warehouseInfo.repairAmount || '',
+          grossPerformance: warehouseInfo.grossPerformance || '',
+          expressOrderNo: warehouseInfo.expressOrderNo || '',
+          fileIds: this.fileIds,
+          customerServiceName: warehouseInfo.customerServiceName || '1',
+          deptId: this.orderDetail.deptId,
+          category: warehouseInfo.category || this.orderDetail.category,
+          delFlag: this.orderDetail.delFlag,
+          idCard: this.pageThreeForm.idNumber || '',
+          paymentMethod: '小葫芦线上支付',
+          bankCardNumber: this.pageThreeForm.bankAccount || '',
+          bankName: this.pageThreeForm.bankName || '',
+          customName: this.pageThreeForm.customName || ''
+        }
+
+        if (this.currentReceipt.id) {
+          await uni.$u.api.updateReceiptForm(params)
+        } else {
+          await uni.$u.api.addReceiptForm(params)
+        }
+        uni.$u.toast('入库成功')
+      } catch (error) {
+        console.error('入库失败:', error)
+        uni.$u.toast('入库失败')
+      }
+    },
+
+    /**
+     * 处理标签点击
+     */
+    handleTabClick(index) {
+      this.activeIndex = index
+      // 切换到第三页时刷新图片列表
+      if (index === 2 && this.$refs.pageThreeRef) {
+        this.$refs.pageThreeRef.refreshImageList()
+      }
+    },
+
+    /**
+     * 更新 fileIds
+     */
+    handleUpdateFileIds(fileIds) {
+      if (this.currentReceipt) {
+        this.$set(this.currentReceipt, 'fileIds', fileIds)
+        this.fileIds = fileIds
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.order-detail-view {
+  padding: 20rpx;
+  min-height: calc(100vh - 200rpx);
+}
+
+.page-item {
+  width: 100%;
+}
+
+.page-navigation {
+  position: fixed;
+  right: 20rpx;
+  top: 40%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  list-style: none;
+  color: #000;
+  font-size: 20rpx;
+  font-weight: 800;
+  z-index: 100;
+
+  li {
+    opacity: 0.7;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    border-radius: 50%;
+    width: 70rpx;
+    height: 70rpx;
+    line-height: 70rpx;
+    text-align: center;
+    margin-bottom: 20rpx;
+    transition: all 0.3s ease-in-out;
+    font-weight: 800;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    cursor: pointer;
+
+    &.active {
+      color: #fff;
+      opacity: 1;
+      background-color: rgb(37 99 235 / 1);
+    }
+
+    &:hover {
+      opacity: 0.9;
+      transform: scale(1.05);
+    }
+  }
+}
+</style>

pages/orderDetailRefactoredOld/components/PageOne.vue

@@ -0,0 +1,748 @@
+<template>
+  <view class="page-one-container">
+    <!-- 图片资料标题 -->
+    <view class="page-header">
+
+      <view class="detail-image-header">
+        <text class="detail-image-title">图片资料</text>
+        <view class="copy-btn" @click="handleSaveAllImages">
+          <text>一键下载实物图到相册</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 实物图卡片 -->
+    <view class="card-wrap">
+      <view class="card-title">实物图</view>
+      <view class="image-upload-container">
+        <view class="image-list">
+          <view v-for="(item, index) in truePicList" :key="`truePic-${index}`" class="image-item">
+            <PicComp :src="item.fileUrl" @needPreviewPic="previewTrueImage" />
+            <view class="delete-btn" @click="handleDeleteImage(item)">×</view>
+          </view>
+          <view class="upload-btn" @click="handleUploadImage('truePic')">
+            <u-icon name="plus" size="40" color="#999" />
+          </view>
+        </view>
+      </view>
+    </view>
+
+
+    <!-- 聊天记录/通话记录/前端跟进/跟进记录 -->
+    <view class="card-wrap">
+      <view class="card-title">
+        <text :class="{ 'active': recordType === 'chat' }" @click="recordType = 'chat'">
+          聊天记录
+        </text>
+        <text class="divider">|</text>
+        <text :class="{ 'active': recordType === 'call' }" @click="recordType = 'call'">
+          通话记录
+        </text>
+        <text class="divider">|</text>
+        <text :class="{ 'active': recordType === 'frontendFollow' }" @click="recordType = 'frontendFollow'">
+          前端跟进
+        </text>
+        <text class="divider">|</text>
+        <text :class="{ 'active': recordType === 'followRecord' }" @click="recordType = 'followRecord'">
+          跟进记录
+        </text>
+      </view>
+
+      <!-- 聊天记录 -->
+      <view v-if="recordType === 'chat'" class="image-upload-container">
+        <view class="image-list">
+          <view v-for="(item, index) in chatRecordsList" :key="`chat-${index}`" class="image-item">
+            <PicComp :src="item.fileUrl" @needPreviewPic="previewImage" />
+            <view class="delete-btn" @click="handleDeleteImage(item)">×</view>
+          </view>
+          <view class="upload-btn" @click="handleUploadImage('chatRecords')">
+            <u-icon name="plus" size="40" color="#999" />
+          </view>
+        </view>
+      </view>
+
+      <!-- 通话录音 -->
+      <view v-if="recordType === 'call'" class="call-records-container">
+        <sound-recorder v-for="item in soundRecordList" :key="item.fileName" :data="item"
+          @handleDelectThisSoundRecord="handleDeleteSoundRecord" />
+      </view>
+
+      <!-- 前端跟进 -->
+      <follow-card v-if="recordType === 'frontendFollow'" :key="'frontendFollow'" :clue-id="currentClueId" type="4" />
+
+      <!-- 跟进记录 -->
+      <follow-card v-if="recordType === 'followRecord'" :key="'followRecord'" :clue-id="currentClueId" type="5" />
+    </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="contact-card">
+      <view class="contact-item phone-card" @click="handlePhoneClick">
+        <u-icon name="phone" size="40" color="#07C160" />
+        <view class="contact-title">电话</view>
+        <view v-if="orderDetail.phone" class="red-dot"></view>
+      </view>
+      <view class="contact-item wechat-card" @click="handleWechatClick">
+        <u-icon name="chat" size="40" color="#07C160" />
+        <view class="contact-title">微信</view>
+        <view v-if="orderDetail.wechat" class="red-dot"></view>
+      </view>
+    </view>
+
+    <!-- 下一步按钮 -->
+    <view class="space-block"></view>
+    <u-button class="next-btn" @click="handleNext" type="primary" size="middle">
+      下一步
+    </u-button>
+  </view>
+</template>
+
+<script>
+import PicComp from './PicComp.vue'
+import soundRecorder from '@/components/soundRecorder/soundRecorder.vue'
+import FollowCard from './FollowCard.vue'
+import imageUpload from '../utils/imageUpload.js'
+
+export default {
+  name: 'PageOne',
+  components: {
+    PicComp,
+    soundRecorder,
+    FollowCard
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => ({})
+    },
+    orderId: {
+      type: String,
+      default: ''
+    },
+    currentReceipt: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      recordType: 'chat', // 'chat' | 'call' | 'frontendFollow' | 'followRecord'
+      chatRecordsList: [],
+      truePicList: [],
+      soundRecordList: []
+    }
+  },
+  computed: {
+    currentClueId() {
+      return (this.currentReceipt && this.currentReceipt.clueId) || (this.orderDetail && this.orderDetail.clueId) || ''
+    }
+  },
+  watch: {
+    recordType(newVal) {
+      if (newVal === 'call') {
+        this.loadCallRecords()
+      }
+    },
+    currentReceipt: {
+      handler(newVal) {
+        if (newVal && newVal.id) {
+          this.loadImageList()
+          this.loadCallRecords()
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    /**
+     * 加载图片列表
+     */
+    async loadImageList() {
+      if (!this.currentReceipt.id || !this.orderDetail.itemBrand) return
+
+      try {
+        // 加载聊天记录
+        const chatList = await imageUpload.getFileList(
+          '2',
+          '1',
+          this.currentReceipt.id,
+          this.orderDetail.itemBrand,
+          this.currentReceipt.clueId
+        )
+        this.chatRecordsList = chatList || []
+
+        // 加载实物图
+        const truePicList = await imageUpload.getFileList(
+          '2',
+          '2',
+          this.currentReceipt.id,
+          this.orderDetail.itemBrand,
+          this.currentReceipt.clueId
+        )
+        this.truePicList = truePicList || []
+      } catch (error) {
+        console.error('加载图片列表失败:', error)
+      }
+    },
+
+    /**
+     * 加载通话记录
+     */
+    async loadCallRecords() {
+      if (!this.currentReceipt.clueId) return
+
+      try {
+        const { data } = await uni.$u.api.getCallClueFileByClueId({
+          clueId: this.currentReceipt.clueId
+        })
+        this.soundRecordList = data || []
+      } catch (error) {
+        console.error('加载通话记录失败:', error)
+      }
+    },
+
+    /**
+     * 上传图片
+     */
+    async handleUploadImage(type) {
+      try {
+        const filePaths = await imageUpload.chooseImage(9)
+        const uploadResults = await imageUpload.uploadFiles(filePaths)
+
+        // 绑定订单文件
+        const orderFileType = type === 'truePic' ? '2' : '1'
+        await imageUpload.bindOrderFile(
+          this.currentReceipt.clueId,
+          this.currentReceipt.id,
+          orderFileType,
+          uploadResults
+        )
+
+        // 刷新列表
+        this.loadImageList()
+      } catch (error) {
+        console.error('上传图片失败:', error)
+      }
+    },
+
+    /**
+     * 删除图片
+     */
+    async handleDeleteImage(item) {
+      uni.showModal({
+        title: '提示',
+        content: '确定要删除这张图片吗？',
+        success: async (res) => {
+          if (res.confirm) {
+            try {
+              await imageUpload.deleteFile(item.id)
+              this.loadImageList()
+            } catch (error) {
+              console.error('删除图片失败:', error)
+            }
+          }
+        }
+      })
+    },
+
+    /**
+     * 删除录音
+     */
+    async handleDeleteSoundRecord({ id }) {
+      uni.showModal({
+        title: '提示',
+        content: '是否确定删除?',
+        success: async (res) => {
+          if (res.confirm) {
+            try {
+              await uni.$u.api.deleteClueFile([id])
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              this.loadCallRecords()
+            } catch (error) {
+              uni.showToast({
+                title: '删除失败',
+                icon: 'error'
+              })
+            }
+          }
+        }
+      })
+    },
+
+    /**
+     * 预览图片
+     */
+    previewImage(src) {
+      const urlList = this.chatRecordsList.map(item => item.fileUrl)
+      uni.previewImage({
+        urls: urlList,
+        current: src
+      })
+    },
+
+    /**
+     * 预览实物图
+     */
+    previewTrueImage(src) {
+      const urlList = this.truePicList.map(item => item.fileUrl)
+      uni.previewImage({
+        urls: urlList,
+        current: src
+      })
+    },
+
+    //一键复制
+    handleSaveAllImages() {
+      // 合并所有图片
+      const allImages = [...this.truePicList]
+      //取出所有图的url
+      const allUrls = allImages.map(item => item.fileUrl)
+      if (allUrls.length > 0) {
+        // 显示保存图片确认弹窗
+        uni.showModal({
+          title: '保存图片',
+          content: `是否将 ${allUrls.length} 张图片保存到本地相册？`,
+          confirmText: '保存',
+          // cancelText: '仅复制链接',
+          success: (res) => {
+            if (res.confirm) {
+              // 用户选择保存图片
+              this.saveImagesToLocal(allUrls)
+            } else if (res.cancel) {
+              // 用户选择仅复制链接
+              this.copyImageUrls(allUrls)
+            }
+          }
+        })
+      } else {
+        uni.showToast({
+          title: '没有图片可保存',
+          icon: 'none'
+        })
+      }
+    },
+
+    // 保存图片到本地相册
+    async saveImagesToLocal(imageUrls) {
+      try {
+        uni.showLoading({
+          title: '正在保存图片...',
+          mask: true
+        })
+
+        const savedImages = []
+        const failedImages = []
+
+        // 逐个保存图片
+        for (let i = 0; i < imageUrls.length; i++) {
+          const url = imageUrls[i]
+          try {
+            await this.saveSingleImage(url)
+            savedImages.push(url)
+          } catch (error) {
+            console.error(`保存图片失败: ${url}`, error)
+            failedImages.push(url)
+          }
+
+          // 更新进度
+          uni.showLoading({
+            title: `正在保存图片... (${i + 1}/${imageUrls.length})`,
+            mask: true
+          })
+        }
+
+        uni.hideLoading()
+
+        // 显示结果
+        let message = `成功保存 ${savedImages.length} 张图片`
+        if (failedImages.length > 0) {
+          message += `，${failedImages.length} 张保存失败`
+        }
+
+        uni.showToast({
+          title: message,
+          icon: 'none',
+          duration: 3000
+        })
+
+        // 如果有失败的图片，也复制链接作为备选
+        if (failedImages.length > 0) {
+          const allUrls = [...savedImages, ...failedImages]
+          this.copyImageUrls(allUrls)
+        }
+      } catch (error) {
+        uni.hideLoading()
+        console.error('保存图片过程中发生错误:', error)
+        uni.showToast({
+          title: '保存图片失败',
+          icon: 'error'
+        })
+      }
+    },
+
+    // 保存单张图片
+    saveSingleImage(url) {
+      return new Promise((resolve, reject) => {
+        // 先下载图片
+        uni.downloadFile({
+          url: url,
+          success: (res) => {
+            if (res.statusCode === 200) {
+              // 保存到相册
+              uni.saveImageToPhotosAlbum({
+                filePath: res.tempFilePath,
+                success: () => {
+                  console.log('图片保存成功:', url)
+                  resolve()
+                },
+                fail: (err) => {
+                  console.error('保存到相册失败:', err)
+                  // 如果是权限问题，尝试请求权限
+                  if (err.errMsg.includes('auth denied')) {
+                    uni.showModal({
+                      title: '权限不足',
+                      content: '需要访问相册权限来保存图片，是否去设置？',
+                      success: (modalRes) => {
+                        if (modalRes.confirm) {
+                          // 打开设置页面
+                          uni.openSetting({
+                            success: (settingRes) => {
+                              console.log('设置页面结果:', settingRes)
+                            }
+                          })
+                        }
+                      }
+                    })
+                  }
+                  reject(err)
+                }
+              })
+            } else {
+              reject(new Error('下载失败'))
+            }
+          },
+          fail: (err) => {
+            console.error('下载图片失败:', err)
+            reject(err)
+          }
+        })
+      })
+    },
+
+    // 复制图片链接
+    copyImageUrls(urls) {
+      uni.setClipboardData({
+        data: JSON.stringify(urls),
+        success: () => {
+          uni.showToast({
+            title: '图片链接已复制',
+            icon: 'none'
+          })
+        }
+      })
+    },
+
+    /**
+     * 电话点击
+     */
+    handlePhoneClick() {
+      if (!this.orderDetail.phone) {
+        uni.showToast({
+          title: '该订单暂时没有电话号码',
+          icon: 'none'
+        })
+        return
+      }
+
+      uni.makePhoneCall({
+        phoneNumber: this.orderDetail.phone,
+        // phoneNumber:'13813737524',//开发者测试手机号
+        success: () => {
+          this.$store.commit('call/SET_FORM', {
+            clueId: this.orderDetail.clueId,
+            type: '3',
+            callee: this.orderDetail.phone
+          })
+        }
+      })
+    },
+
+    /**
+     * 微信点击
+     */
+    handleWechatClick() {
+      if (!this.orderDetail.wechat) {
+        uni.showToast({
+          title: '该订单暂时没有微信号',
+          icon: 'none'
+        })
+        return
+      }
+
+      uni.setClipboardData({
+        data: this.orderDetail.wechat,
+        success: () => {
+          uni.showToast({
+            title: '微信号已复制',
+            icon: 'none'
+          })
+        }
+      })
+    },
+
+    /**
+     * 下一步
+     */
+    handleNext() {
+      this.$emit('next', {
+        nowPage: 'formOne',
+        form: {}
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../styles/common.scss';
+
+.page-one-container {
+  @extend .page-container;
+  padding-bottom: 100rpx;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.page-title {
+  @include font-styles($size: title, $weight: bold, $color: primary);
+}
+
+.save-all-btn {
+  border-radius: 20rpx;
+  border-color: #007AFF;
+  color: #007AFF;
+}
+
+.card-wrap {
+  @extend .card-wrap;
+  margin-top: 20rpx;
+}
+
+.card-title {
+  padding: 20rpx 15rpx;
+  border-bottom: 1rpx solid map-get($colors, border);
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  text {
+    padding: 0 6rpx;
+    cursor: pointer;
+    font-size: 26rpx;
+    white-space: nowrap;
+    flex-shrink: 0;
+
+    &.active {
+      color: map-get($colors, primary);
+      font-weight: bold;
+    }
+  }
+
+  .divider {
+    margin: 0 4rpx;
+    color: #ddd;
+    font-size: 24rpx;
+    flex-shrink: 0;
+  }
+}
+
+.image-upload-container {
+  padding: 20rpx;
+}
+
+.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;
+  font-size: 30rpx;
+  font-weight: bold;
+  z-index: 10;
+  cursor: pointer;
+}
+
+.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;
+  cursor: pointer;
+}
+
+.call-records-container {
+  padding: 20rpx;
+}
+
+.info-card {
+  @extend .card-wrap;
+  padding: 20rpx;
+  margin-top: 20rpx;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+}
+
+.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);
+  word-break: break-all;
+}
+
+.contact-card {
+  display: flex;
+  justify-content: space-between;
+  margin: 20rpx 0;
+  gap: 20rpx;
+}
+
+.contact-item {
+  flex: 1;
+  @extend .card-wrap;
+  padding: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+}
+
+.contact-title {
+  @include font-styles($size: tiny, $weight: regular, $color: tertiary);
+  margin-top: 10rpx;
+}
+
+.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);
+}
+
+.space-block {
+  height: 100rpx;
+}
+
+.next-btn {
+  position: fixed;
+  bottom: 10rpx;
+  left: 2.5%;
+  width: 95%;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  border-radius: 20rpx;
+}
+
+
+.detail-image-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1rpx solid map-get($colors, border);
+}
+
+.detail-image-title {
+  @include font-styles($size: content, $weight: bold, $color: primary);
+}
+
+.copy-btn {
+  border-radius: 20rpx;
+  border: 1rpx solid #007AFF;
+  background-color: transparent;
+  color: #007AFF;
+  padding: 0 24rpx;
+  height: 64rpx;
+  line-height: 64rpx;
+  cursor: pointer;
+}
+</style>

pages/orderDetailRefactoredOld/components/PageTwo.vue

@@ -0,0 +1,800 @@
+<template>
+  <view class="page-two-container">
+    <!-- 上门地址卡片 -->
+    <view class="card-wrap">
+      <view class="address-section">
+        <view class="address-header">
+          <u-icon name="map" size="36rpx" color="#108cff" class="location-icon" />
+          <text class="address-title">上门地址</text>
+        </view>
+        <view class="address-content">
+          <text class="address-text">{{ orderDetail.address || '未填写' }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 跟进清单卡片 -->
+    <view class="card-wrap checklist-card">
+      <view class="checklist-section">
+        <u-checkbox-group v-model="selectedCheckbox" placement="column">
+          <!-- 联系师傅 -->
+          <view class="checklist-item">
+            <view class="checkbox-text-container">
+              <u-checkbox name="contactMaster" size="40rpx" color="#108cff" />
+              <text class="checklist-text">联系师傅</text>
+            </view>
+            <u-input 
+              v-if="selectedCheckbox.includes('contactMaster')" 
+              v-model="formData.contactPhone"
+              placeholder="请输入师傅手机号" 
+              class="checklist-input" 
+            />
+          </view>
+
+          <!-- 师傅拍图技巧 -->
+          <view class="checklist-item">
+            <view class="checkbox-text-container">
+              <u-checkbox name="photoTips" size="40rpx" color="#108cff" />
+              <text class="checklist-text">师傅拍图技巧</text>
+            </view>
+            <u-input 
+              v-if="selectedCheckbox.includes('photoTips')" 
+              v-model="formData.photoTips"
+              type="textarea" 
+              placeholder="请输入拍图技巧" 
+              rows="3" 
+              class="checklist-textarea" 
+            />
+            <view v-if="selectedCheckbox.includes('photoTips')" class="upload-btn-container">
+              <view class="upload-btn" @click="handleUpload('photoTips')">
+                <u-icon name="camera" size="32rpx" color="#108cff" />
+                <text class="upload-btn-text">上传图片</text>
+              </view>
+            </view>
+            <view 
+              v-if="selectedCheckbox.includes('photoTips') && photoTipsImages.length > 0"
+              class="image-list"
+            >
+              <view 
+                v-for="(image, index) in photoTipsImages" 
+                :key="index" 
+                class="image-item"
+                @click="previewPhotoTips(image)"
+              >
+                <image :src="image" mode="aspectFill" class="image-thumb" />
+              </view>
+            </view>
+          </view>
+
+          <!-- 到达客户面对面 -->
+          <view class="checklist-item">
+            <view class="checkbox-text-container">
+              <u-checkbox name="faceToFace" size="40rpx" color="#108cff" />
+              <text class="checklist-text">到达客户面对面</text>
+            </view>
+            <u-input 
+              v-if="selectedCheckbox.includes('faceToFace')" 
+              v-model="formData.faceToFaceNotes"
+              type="textarea" 
+              placeholder="请输入备注信息" 
+              rows="3" 
+              class="checklist-textarea" 
+            />
+            <view v-if="selectedCheckbox.includes('faceToFace')" class="upload-btn-container">
+              <view class="upload-btn" @click="handleUpload('faceToFace')">
+                <u-icon name="camera" size="32rpx" color="#108cff" />
+                <text class="upload-btn-text">上传图片</text>
+              </view>
+            </view>
+            <view 
+              v-if="selectedCheckbox.includes('faceToFace') && faceToFaceImages.length > 0"
+              class="image-list"
+            >
+              <view 
+                v-for="(image, index) in faceToFaceImages" 
+                :key="index" 
+                class="image-item"
+                @click="previewFaceToFace(image)"
+              >
+                <image :src="image" mode="aspectFill" class="image-thumb" />
+              </view>
+            </view>
+          </view>
+        </u-checkbox-group>
+      </view>
+    </view>
+
+    <!-- 核准价卡片 -->
+    <view class="card-wrap price-card">
+      <view class="price-section">
+        <view class="price-picker-container">
+          <view class="quick-actions top-actions">
+            <view class="quick-btn increase" @click="quickChangePrice(100)">+100</view>
+            <view class="quick-btn increase" @click="quickChangePrice(1000)">+1000</view>
+          </view>
+          <view class="number-box-container">
+            <view class="price-input-box">
+              <text class="price-label">核准价</text>
+              <view class="price-value-wrap">
+                <text class="yuan-prefix">￥</text>
+                <input 
+                  type="number" 
+                  v-model="approvedPrice" 
+                  class="price-input" 
+                  placeholder="0" 
+                  min="0"
+                  @input="onPriceInput" 
+                  @blur="saveApprovedPrice"
+                />
+              </view>
+            </view>
+          </view>
+          <view class="quick-actions bottom-actions">
+            <view class="quick-btn decrease" @click="quickChangePrice(-100)">-100</view>
+            <view class="quick-btn decrease" @click="quickChangePrice(-1000)">-1000</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 高清细节图卡片 -->
+    <view class="card-wrap detail-image-card">
+      <view class="detail-image-section">
+        <view class="detail-image-header">
+          <text class="detail-image-title">上传高清细节图（支持多选）</text>
+          <view class="copy-btn" @click="copyAllDetailImages">
+            <text>一键保存</text>
+          </view>
+        </view>
+        <view class="detail-image-upload-container">
+          <view class="detail-image-list">
+            <view 
+              v-for="(item, index) in detailImages" 
+              :key="`detail-${index}`"
+              class="detail-image-item"
+            >
+              <PicComp 
+                :src="item.fileUrl" 
+                @needPreviewPic="previewImageDetail"
+              />
+              <view class="detail-delete-btn" @click="handleDeleteImage(item)">×</view>
+            </view>
+            <view 
+              class="detail-upload-btn" 
+              @click="handleUploadImage('detailImages')"
+            >
+              <u-icon name="plus" size="40rpx" color="#999" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 下一步按钮 -->
+    <u-button 
+      class="next-btn" 
+      @click="handleNext" 
+      type="primary" 
+      size="middle"
+    >
+      下一步
+    </u-button>
+  </view>
+</template>
+
+<script>
+import PicComp from './PicComp.vue'
+import imageUpload from '../utils/imageUpload.js'
+
+export default {
+  name: 'PageTwo',
+  components: {
+    PicComp
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => ({})
+    },
+    orderId: {
+      type: String,
+      default: ''
+    },
+    currentReceipt: {
+      type: Object,
+      default: () => ({})
+    },
+    followUpList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      selectedCheckbox: [],
+      formData: {
+        contactPhone: '',
+        photoTips: '',
+        faceToFaceNotes: ''
+      },
+      photoTipsImages: [],
+      faceToFaceImages: [],
+      approvedPrice: 0,
+      detailImages: []
+    }
+  },
+  watch: {
+    currentReceipt: {
+      handler(newVal) {
+        if (newVal && newVal.id) {
+          this.approvedPrice = Number(newVal.sellingPrice) || 0
+          this.loadDetailImages()
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    followUpList: {
+      handler(newVal) {
+        if (newVal && newVal.length > 0) {
+          this.checkFollowUpContent(newVal)
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    /**
+     * 加载细节图
+     */
+    async loadDetailImages() {
+      if (!this.currentReceipt.id || !this.orderDetail.itemBrand) return
+      
+      try {
+        const list = await imageUpload.getFileList(
+          '2',
+          '3',
+          this.currentReceipt.id,
+          this.orderDetail.itemBrand,
+          this.currentReceipt.clueId
+        )
+        
+        // 按照 fileIds 排序
+        if (this.currentReceipt.fileIds && list && list.length > 0) {
+          const sortedIds = this.currentReceipt.fileIds.split(',')
+          list.sort((a, b) => {
+            const indexA = sortedIds.indexOf(a.id)
+            const indexB = sortedIds.indexOf(b.id)
+            
+            // 如果都不在列表中，保持原顺序
+            if (indexA === -1 && indexB === -1) return 0
+            // 如果 a 不在列表中，放到后面
+            if (indexA === -1) return 1
+            // 如果 b 不在列表中，放到后面
+            if (indexB === -1) return -1
+            // 都在列表中，按 index 排序
+            return indexA - indexB
+          })
+        }
+        
+        this.detailImages = list || []
+      } catch (error) {
+        console.error('加载细节图失败:', error)
+      }
+    },
+
+    /**
+     * 检查跟进内容
+     */
+    checkFollowUpContent(followUpList) {
+      const contentList = followUpList.map(item => item.content || '')
+      
+      contentList.forEach(item => {
+        if (item.includes('联系师傅') && !this.selectedCheckbox.includes('contactMaster')) {
+          this.selectedCheckbox.push('contactMaster')
+          const phone = item.split(';')[1] || ''
+          this.formData.contactPhone = phone
+        }
+        if (item.includes('师傅拍图技巧') && !this.selectedCheckbox.includes('photoTips')) {
+          this.selectedCheckbox.push('photoTips')
+          const tips = item.split(';')[1] || ''
+          this.formData.photoTips = tips
+          const urls = item.split(';')[2] || ''
+          this.photoTipsImages = urls.split(',').filter(url => url.trim())
+        }
+        if (item.includes('到达客户面对面') && !this.selectedCheckbox.includes('faceToFace')) {
+          this.selectedCheckbox.push('faceToFace')
+          const notes = item.split(';')[1] || ''
+          this.formData.faceToFaceNotes = notes
+          const urls = item.split(';')[2] || ''
+          this.faceToFaceImages = urls.split(',').filter(url => url.trim())
+        }
+      })
+    },
+
+    /**
+     * 价格输入处理
+     */
+    onPriceInput(e) {
+      let value = Number(e.detail.value)
+      if (isNaN(value)) value = 0
+      value = Math.max(0, value)
+      this.approvedPrice = value
+    },
+
+    /**
+     * 快速调整价格
+     */
+    async quickChangePrice(amount) {
+      let newPrice = this.approvedPrice + amount
+      newPrice = Math.max(0, newPrice)
+      this.approvedPrice = newPrice
+
+      await uni.$u.api.updateReceiptForm({
+        id: this.currentReceipt.id,
+        sellingPrice: newPrice
+      })
+      this.$emit('price-updated')
+    },
+    async saveApprovedPrice() {
+      await uni.$u.api.updateReceiptForm({
+        id: this.currentReceipt.id,
+        sellingPrice: this.approvedPrice
+      })
+      this.$emit('price-updated')
+    },
+
+    /**
+     * 上传图片（跟进清单）
+     */
+    async handleUpload(field) {
+      try {
+        const filePaths = await imageUpload.chooseImage(9)
+        const uploadResults = await imageUpload.uploadFiles(filePaths)
+        const urls = uploadResults.map(item => item.fileUrl)
+        
+        if (field === 'photoTips') {
+          this.photoTipsImages = [...this.photoTipsImages, ...urls]
+        } else if (field === 'faceToFace') {
+          this.faceToFaceImages = [...this.faceToFaceImages, ...urls]
+        }
+      } catch (error) {
+        console.error('上传失败:', error)
+        uni.$u.toast('上传失败')
+      }
+    },
+
+    /**
+     * 上传细节图
+     */
+    async handleUploadImage() {
+      try {
+        const filePaths = await imageUpload.chooseImage(9)
+        const uploadResults = await imageUpload.uploadFiles(filePaths)
+        await imageUpload.bindOrderFile(
+          this.currentReceipt.clueId,
+          this.currentReceipt.id,
+          '3',
+          uploadResults
+        )
+        await this.loadDetailImages()
+
+        // 更新 fileIds
+        const fileIds = this.detailImages.map(item => item.id).join(',')
+        await uni.$u.api.updateReceiptForm({
+          id: this.currentReceipt.id,
+          fileIds: fileIds
+        })
+        this.$emit('update-file-ids', fileIds)
+
+      } catch (error) {
+        console.error('上传失败:', error)
+      }
+    },
+
+    /**
+     * 删除图片
+     */
+    async handleDeleteImage(item) {
+      uni.showModal({
+        title: '提示',
+        content: '确定要删除这张图片吗？',
+        success: async (res) => {
+          if (res.confirm) {
+            try {
+              await imageUpload.deleteFile(item.id)
+              await this.loadDetailImages()
+
+              // 更新 fileIds
+              const fileIds = this.detailImages.map(item => item.id).join(',')
+              await uni.$u.api.updateReceiptForm({
+                id: this.currentReceipt.id,
+                fileIds: fileIds
+              })
+              this.$emit('update-file-ids', fileIds)
+
+            } catch (error) {
+              console.error('删除失败:', error)
+            }
+          }
+        }
+      })
+    },
+
+    /**
+     * 复制所有细节图
+     */
+    async copyAllDetailImages() {
+      const allUrls = this.detailImages.map(item => item.fileUrl)
+      if (allUrls.length === 0) {
+        uni.showToast({
+          title: '没有图片可复制',
+          icon: 'none'
+        })
+        return
+      }
+      
+      uni.showModal({
+        title: '保存图片',
+        content: `是否将 ${allUrls.length} 张图片保存到本地相册？`,
+        confirmText: '保存',
+        success: (res) => {
+          if (res.confirm) {
+            imageUpload.saveImagesToLocal(allUrls)
+          }
+        }
+      })
+    },
+
+    /**
+     * 预览细节图
+     */
+    previewImageDetail(src) {
+      const urlList = this.detailImages.map(item => item.fileUrl)
+      uni.previewImage({
+        urls: urlList,
+        current: src
+      })
+    },
+
+    /**
+     * 预览师傅拍图技巧图片
+     */
+    previewPhotoTips(src) {
+      uni.previewImage({
+        urls: this.photoTipsImages,
+        current: src
+      })
+    },
+
+    /**
+     * 预览到达客户面对面图片
+     */
+    previewFaceToFace(src) {
+      uni.previewImage({
+        urls: this.faceToFaceImages,
+        current: src
+      })
+    },
+
+    /**
+     * 下一步
+     */
+    async handleNext() {
+      // 保存核准价
+      await uni.$u.api.updateReceiptForm({
+        id: this.currentReceipt.id,
+        sellingPrice: this.approvedPrice
+      })
+
+      // 保存跟进记录
+      if (this.selectedCheckbox.includes('contactMaster')) {
+        await uni.$u.api.addOrderFollow({
+          orderId: this.orderId,
+          content: `联系师傅;${this.formData.contactPhone}`
+        })
+      }
+      if (this.selectedCheckbox.includes('photoTips')) {
+        const urls = this.photoTipsImages.join(',')
+        await uni.$u.api.addOrderFollow({
+          orderId: this.orderId,
+          content: `师傅拍图技巧;${this.formData.photoTips};${urls}`
+        })
+      }
+      if (this.selectedCheckbox.includes('faceToFace')) {
+        const urls = this.faceToFaceImages.join(',')
+        await uni.$u.api.addOrderFollow({
+          orderId: this.orderId,
+          content: `到达客户面对面;${this.formData.faceToFaceNotes};${urls}`
+        })
+      }
+
+      this.$emit('next', {
+        nowPage: 'formTwo',
+        form: {
+          approvedPrice: this.approvedPrice,
+          detailImages: this.detailImages
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../styles/common.scss';
+
+.page-two-container {
+  @extend .page-container;
+  padding-bottom: 100rpx;
+}
+
+.address-section {
+  padding: 20rpx;
+}
+
+.checklist-card {
+  margin-top: 20rpx;
+}
+
+.checklist-section {
+  padding: 20rpx;
+}
+
+.checklist-item {
+  padding: 16rpx 0;
+  border-bottom: 1rpx solid map-get($colors, border);
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.checkbox-text-container {
+  @include flex-center;
+  margin-bottom: 12rpx;
+}
+
+.checklist-text {
+  @include font-styles;
+  margin-left: 16rpx;
+}
+
+.checklist-input,
+.checklist-textarea {
+  margin-top: 12rpx;
+  margin-left: 56rpx;
+  width: calc(100% - 72rpx);
+  border-radius: 8rpx;
+  border: 1rpx solid #e5e7eb;
+  padding: 12rpx 16rpx;
+}
+
+.upload-btn-container {
+  margin-top: 16rpx;
+  margin-left: 56rpx;
+}
+
+.upload-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 20rpx 40rpx;
+  border-radius: 8rpx;
+  background-color: map-get($colors, bg);
+  border: 2rpx dashed map-get($colors, primary);
+  color: map-get($colors, primary);
+  cursor: pointer;
+}
+
+.upload-btn-text {
+  @include font-styles($size: small, $weight: medium);
+}
+
+.image-list {
+  margin-top: 16rpx;
+  margin-left: 56rpx;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.image-item {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+.image-thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.price-card {
+  margin-top: 20rpx;
+}
+
+.price-section {
+  padding: 20rpx;
+  padding-right: 20rpx; /* 整体往左挪，避免被右侧固定导航遮挡 */
+}
+
+.price-picker-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20rpx 0;
+}
+
+.quick-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16rpx;
+  margin: 5rpx 0;
+  width: 100%;
+}
+
+.quick-btn {
+  flex: 1;
+  border-radius: 12rpx;
+  font-size: 36rpx;
+  padding: 10rpx 0;
+  text-align: center;
+  font-weight: 600;
+  cursor: pointer;
+  
+  &.increase {
+    background-color: #e6f7ed;
+    color: #00b42a;
+  }
+  
+  &.decrease {
+    background-color: #fff1f0;
+    color: #f53f3f;
+  }
+}
+
+.number-box-container {
+  display: flex;
+  align-items: center;
+  margin: 20rpx 0;
+  width: 100%;
+  justify-content: center;
+}
+
+.price-input-box {
+  flex: 1;
+  max-width: 800rpx;
+  background-color: #f5f7fa;
+  border: 2rpx solid #e5e7eb;
+  border-radius: 12rpx;
+  padding: 0rpx 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.price-label {
+  font-size: 30rpx;
+  font-weight: 700;
+  min-width: 120rpx;
+}
+
+.price-value-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.yuan-prefix {
+  font-size: 48rpx;
+  font-weight: 600;
+  margin-right: 8rpx;
+  flex-shrink: 0;
+}
+
+.price-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  text-align: left;
+  font-size: 48rpx;
+  font-weight: 600;
+  padding: 0 10rpx 0 0;
+}
+
+.detail-image-card {
+  margin-top: 20rpx;
+}
+
+.detail-image-section {
+  padding: 20rpx;
+}
+
+.detail-image-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+  padding-bottom: 20rpx;
+  border-bottom: 1rpx solid map-get($colors, border);
+}
+
+.detail-image-title {
+  @include font-styles($size: content, $weight: bold, $color: primary);
+}
+
+.copy-btn {
+  border-radius: 20rpx;
+  border: 1rpx solid #007AFF;
+  background-color: transparent;
+  color: #007AFF;
+  padding: 0 24rpx;
+  height: 64rpx;
+  line-height: 64rpx;
+  cursor: pointer;
+}
+
+.detail-image-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+}
+
+.detail-image-item {
+  position: relative;
+  width: 200rpx;
+  height: 200rpx;
+}
+
+.detail-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;
+  font-weight: bold;
+  z-index: 10;
+  cursor: pointer;
+}
+
+.detail-upload-btn {
+  width: 200rpx;
+  height: 200rpx;
+  border: 8rpx dashed #ddd;
+  border-radius: 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f9f9f9;
+  cursor: pointer;
+}
+
+.next-btn {
+  position: fixed;
+  bottom: 10rpx;
+  left: 2.5%;
+  width: 95%;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  border-radius: 20rpx;
+}
+</style>

pages/orderDetailRefactoredOld/components/PicComp.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="pic-comp-container">
+    <image 
+      class="pic-comp-image" 
+      :src="src" 
+      mode="aspectFill" 
+      @click="handleClick"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'PicComp',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('needPreviewPic', this.src)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.pic-comp-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 30rpx;
+}
+
+.pic-comp-image {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover;
+}
+</style>

pages/orderDetailRefactoredOld/index.vue

@@ -0,0 +1,457 @@
+<template>
+  <view class="order-detail-container">
+    <!-- 顶部导航栏 -->
+    <u-navbar :autoBack="true" :placeholder="true" v-hideNav>
+      <template slot="center">
+        <view class="navbar-center">
+          <text class="navbar-item" @click="handleBrandClick">{{ topInfo.brand }}</text>
+          <text class="navbar-divider">|</text>
+          <text class="navbar-item" @click="handleModelClick">{{ topInfo.model }}</text>
+          <text class="navbar-divider">|</text>
+          <text class="navbar-item price" @click="handlePriceClick">¥{{ topInfo.price }}</text>
+        </view>
+      </template>
+      <template slot="right">
+        <view class="navbar-right" @click="handleAddClick">
+          <image src="/static/icons/plus.png" mode="scaleToFill" class="add-icon" />
+          <text class="add-text">加一单</text>
+        </view>
+      </template>
+    </u-navbar>
+
+    <!-- 收单列表切换 -->
+    <u-tabs keyName="brand" :list="receiptList" @click="handleReceiptClick" class="receipt-tabs" />
+
+    <!-- 订单详情视图 -->
+    <OrderDetailView :order-detail="orderDetail" :top-info="topInfo" :order-id="orderId"
+      :current-receipt="currentReceipt" @price-updated="refreshCurrentReceipt" />
+
+    <!-- 加一单模态窗 -->
+    <u-modal :show="addOneModalVisible" title="加一单" showCancelButton @cancel="handleAddOneCancel"
+      @confirm="handleAddOneConfirm">
+      <view class="add-one-modal-content">
+        <view class="add-one-form-item">
+          <text class="form-label">品牌<text class="required">*</text></text>
+          <u-button type="primary" plain @click="showBrandSelector = true" class="brand-select-btn">
+            {{ currentAddBrand.dictLabel || '点击请选择品牌' }}
+          </u-button>
+        </view>
+        <view class="add-one-form-item">
+          <text class="form-label">型号</text>
+          <u-input v-model="currentAddModel" placeholder="请输入型号" class="form-input" />
+        </view>
+        <view class="add-one-form-item">
+          <text class="form-label">价格</text>
+          <u-input v-model="currentAddPrice" placeholder="请输入价格" type="number" class="form-input" />
+        </view>
+      </view>
+    </u-modal>
+
+    <!-- 品牌选择器 -->
+    <u-picker :show="showBrandSelector" :columns="brandColumns" keyName="dictLabel" @confirm="handleBrandConfirm"
+      @cancel="showBrandSelector = false" />
+
+    <!-- 编辑品牌选择器 -->
+    <u-picker :show="editBrandSelectorVisible" :columns="brandColumns" keyName="dictLabel"
+      @confirm="handleEditBrandConfirm" @cancel="editBrandSelectorVisible = false" />
+
+    <!-- 修改型号/价格弹窗 -->
+    <CustomModal :visible="modalVisible" :title="modalConfig.title" :value="modalConfig.value"
+      :placeholder="modalConfig.placeholder" @cancel="handleModalCancel" @confirm="handleModalConfirm" />
+  </view>
+</template>
+
+<script>
+import OrderDetailView from './components/OrderDetailView.vue'
+import CustomModal from './components/CustomModal.vue'
+
+export default {
+  name: 'OrderDetailIndex',
+  components: {
+    OrderDetailView,
+    CustomModal
+  },
+  data() {
+    return {
+      // 顶部信息
+      topInfo: {
+        brand: '',
+        model: '',
+        price: ''
+      },
+      // 路由参数
+      orderId: '',
+      clueId: '',
+      item: '',
+      type: '',
+      // 订单详情
+      orderDetail: {},
+      // 收单列表
+      receiptList: [],
+      // 当前选中的收单
+      currentReceipt: {},
+      // 模态窗状态
+      addOneModalVisible: false,
+      showBrandSelector: false,
+      editBrandSelectorVisible: false,
+      modalVisible: false,
+      // 品牌选择相关
+      brandColumns: [[]],
+      currentAddBrand: {},
+      currentAddModel: '',
+      currentAddPrice: '',
+      // 模态窗配置
+      modalConfig: {
+        title: '',
+        value: '',
+        placeholder: ''
+      },
+      currentEditField: ''
+    }
+  },
+  onLoad(options) {
+    this.initParams(options)
+    this.loadOrderDetail()
+    this.loadReceiptList()
+  },
+  onPullDownRefresh() {
+    // 下拉刷新时重新加载所有数据
+    Promise.all([
+      this.loadOrderDetail(),
+      this.loadReceiptList()
+    ]).finally(() => {
+      uni.stopPullDownRefresh()
+      uni.$u.toast('刷新成功')
+    })
+  },
+  methods: {
+    /**
+     * 初始化参数
+     */
+    initParams(options) {
+      const { item, orderId, type, clueId } = options
+      this.item = item || ''
+      this.orderId = orderId || ''
+      this.type = type || ''
+      this.clueId = clueId || ''
+    },
+
+    /**
+     * 加载订单详情
+     */
+    async loadOrderDetail() {
+      try {
+        const res = await uni.$u.api.getClueSendFormVoByOrderId({
+          id: this.orderId
+        })
+        if (res.code === 200) {
+          this.orderDetail = res.data || {}
+        }
+      } catch (error) {
+        console.error('加载订单详情失败:', error)
+        uni.$u.toast('加载订单详情失败')
+      }
+    },
+
+    /**
+     * 加载收单列表
+     */
+    async loadReceiptList() {
+      try {
+        const res = await uni.$u.api.clueReceiptFormListByOrderId(this.orderId)
+        if (res.code === 200) {
+          this.receiptList = res.data || []
+          // 默认选择第一个收单
+          if (this.receiptList.length > 0) {
+            this.handleReceiptClick(this.receiptList[0])
+          }
+        }
+      } catch (error) {
+        console.error('加载收单列表失败:', error)
+        uni.$u.toast('加载收单列表失败')
+      }
+    },
+
+    /**
+     * 刷新当前收单（用于价格等修改后同步顶部信息）
+     */
+    async refreshCurrentReceipt() {
+      if (!this.currentReceipt || !this.currentReceipt.id) return
+      try {
+        const res = await uni.$u.api.getReceiptForm(this.currentReceipt.id)
+        if (res.code === 200 && res.data) {
+          this.currentReceipt = res.data
+          this.topInfo.brand = res.data.brand || '暂无'
+          this.topInfo.model = res.data.model || '暂无'
+          this.topInfo.price = res.data.sellingPrice ?? '暂无'
+        }
+      } catch (error) {
+        console.error('刷新当前收单失败:', error)
+      }
+    },
+
+    /**
+     * 点击收单项
+     */
+    async handleReceiptClick(item) {
+      console.log('点击了收单', item)
+      //获取当前的收单form详情
+      const res = await uni.$u.api.getReceiptForm(item.id)
+      console.log('收单详情', res)
+
+      if (res.code === 200) {
+        this.currentReceipt = res.data || {}
+        this.topInfo.brand = res.data.brand || '暂无'
+        this.topInfo.model = res.data.model || '暂无'
+        this.topInfo.price = res.data.sellingPrice || '暂无'
+      }
+    },
+
+    /**
+     * 点击品牌
+     */
+    handleBrandClick() {
+      this.editBrandSelectorVisible = true
+      this.loadBrandList()
+    },
+
+    /**
+     * 点击型号
+     */
+    handleModelClick() {
+      this.modalConfig = {
+        title: '修改型号',
+        value: this.currentReceipt.model || '',
+        placeholder: '请输入型号'
+      }
+      this.currentEditField = 'model'
+      this.modalVisible = true
+    },
+
+    /**
+     * 点击价格
+     */
+    handlePriceClick() {
+      this.modalConfig = {
+        title: '修改价格',
+        value: this.currentReceipt.sellingPrice?.toString() || '',
+        placeholder: '请输入价格'
+      }
+      this.currentEditField = 'price'
+      this.modalVisible = true
+    },
+
+    /**
+     * 点击加一单
+     */
+    handleAddClick() {
+      this.addOneModalVisible = true
+      this.loadBrandList()
+    },
+
+    /**
+     * 加载品牌列表
+     */
+    async loadBrandList() {
+      try {
+        const res = await this.$getDicts('crm_form_brand')
+        this.brandColumns = [res]
+      } catch (error) {
+        console.error('加载品牌列表失败:', error)
+      }
+    },
+
+    /**
+     * 确认修改模态窗
+     */
+    async handleModalConfirm(value) {
+      try {
+        if (this.currentEditField === 'model') {
+          await uni.$u.api.updateReceiptForm({
+            model: value,
+            id: this.currentReceipt.id
+          })
+        } else if (this.currentEditField === 'price') {
+          await uni.$u.api.updateReceiptForm({
+            sellingPrice: value,
+            id: this.currentReceipt.id
+          })
+        }
+        uni.$u.toast('修改成功')
+        this.loadReceiptList()
+      } catch (error) {
+        console.error('修改失败:', error)
+        uni.$u.toast('修改失败')
+      } finally {
+        this.modalVisible = false
+      }
+    },
+
+    /**
+     * 取消修改模态窗
+     */
+    handleModalCancel() {
+      this.modalVisible = false
+    },
+
+    /**
+     * 确认编辑品牌
+     */
+    async handleEditBrandConfirm(data) {
+      try {
+        await uni.$u.api.updateReceiptForm({
+          brand: data.value[0].dictValue,
+          id: this.currentReceipt.id
+        })
+        uni.$u.toast('修改成功')
+        this.loadReceiptList()
+      } catch (error) {
+        console.error('修改品牌失败:', error)
+        uni.$u.toast('修改失败')
+      } finally {
+        this.editBrandSelectorVisible = false
+      }
+    },
+
+    /**
+     * 确认选择品牌（加一单）
+     */
+    handleBrandConfirm(data) {
+      this.currentAddBrand = data.value[0]
+      this.showBrandSelector = false
+    },
+
+    /**
+     * 确认加一单
+     */
+    async handleAddOneConfirm() {
+      // 验证品牌是否已选择（必选）
+      if (!this.currentAddBrand.dictValue) {
+        uni.$u.toast('请选择品牌')
+        return
+      }
+
+      try {
+        await uni.$u.api.addReceiptForm({
+          brand: this.currentAddBrand.dictValue,
+          model: this.currentAddModel || '',
+          sellingPrice: this.currentAddPrice || '',
+          sendFormId: this.orderId,
+          clueId: this.clueId
+        })
+        uni.$u.toast('添加成功')
+        this.loadReceiptList()
+      } catch (error) {
+        console.error('添加失败:', error)
+        uni.$u.toast('添加失败')
+      } finally {
+        this.addOneModalVisible = false
+        this.currentAddBrand = {}
+        this.currentAddModel = ''
+        this.currentAddPrice = ''
+      }
+    },
+
+    /**
+     * 取消加一单
+     */
+    handleAddOneCancel() {
+      this.addOneModalVisible = false
+      this.currentAddBrand = {}
+      this.currentAddModel = ''
+      this.currentAddPrice = ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.order-detail-container {
+  min-height: 100vh;
+  background-color: #f9fafb;
+}
+
+.navbar-center {
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 40rpx;
+  padding: 10rpx 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+}
+
+.navbar-item {
+  font-weight: bold;
+  color: #333;
+  font-size: 28rpx;
+
+  &.price {
+    color: blueviolet;
+  }
+}
+
+.navbar-divider {
+  margin: 0 15rpx;
+  color: #ddd;
+  font-size: 28rpx;
+}
+
+.navbar-right {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 20rpx;
+  color: blueviolet;
+}
+
+.add-icon {
+  width: 30rpx;
+  height: 30rpx;
+}
+
+.add-text {
+  margin-top: 4rpx;
+}
+
+.receipt-tabs {
+  background-color: #fff;
+}
+
+.add-one-modal-content {
+  padding: 20rpx 0;
+}
+
+.add-one-form-item {
+  margin-bottom: 30rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.form-label {
+  display: block;
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 15rpx;
+  font-weight: 500;
+}
+
+.required {
+  color: #f56c6c;
+  margin-left: 4rpx;
+}
+
+.brand-select-btn {
+  width: 100%;
+}
+
+.form-input {
+  width: 100%;
+  border: 2rpx solid #e0e0e0;
+  border-radius: 10rpx;
+  padding: 20rpx;
+  font-size: 28rpx;
+}
+</style>

pages/orderDetailRefactoredOld/styles/common.scss

@@ -0,0 +1,174 @@
+// 公共SCSS变量定义
+$colors: (
+  primary: #108cff,
+  primary-light: rgba(16, 140, 255, 0.08),
+  bg: #f9fafb,
+  card: #ffffff,
+  border: #f5f5f5,
+  text-primary: #1f2937,
+  text-secondary: #374151,
+  shadow: rgba(0, 0, 0, 0.05)
+);
+
+$sizes: (
+  radius: 16rpx,
+  padding: 32rpx,
+  padding-sm: 28rpx,
+  margin-sm: 18rpx,
+  margin-xs: 16rpx,
+  icon-padding: 14rpx,
+  font-title: 34rpx,
+  font-content: 32rpx,
+  line-height: 56rpx,
+  checkbox-size: 32rpx
+);
+
+// 字体优化
+$font: (
+  family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
+  smoothing: antialiased
+);
+
+// 字体大小变量
+$font-sizes: (
+  title: 38rpx,
+  content: 34rpx,
+  sub-content: 30rpx,
+  small: 26rpx,
+  tiny: 24rpx
+);
+
+// 字体权重变量
+$font-weights: (
+  bold: 700,
+  semi-bold: 600,
+  medium: 500,
+  regular: 450,
+  light: 400
+);
+
+// 行高变量
+$line-heights: (
+  large: 56rpx,
+  medium: 48rpx,
+  small: 40rpx
+);
+
+// 字间距变量
+$letter-spacings: (
+  large: 1rpx,
+  medium: 0.8rpx,
+  small: 0.5rpx
+);
+
+// 文本颜色变量
+$text-colors: (
+  primary: map-get($colors, text-primary),
+  secondary: map-get($colors, text-secondary),
+  tertiary: #666666,
+  placeholder: #999999
+);
+
+// 公共混合宏
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+}
+
+@mixin shadow($level: 1) {
+  $shadow-levels: (
+    1: 0 2rpx 12rpx map-get($colors, shadow),
+    2: 0 4rpx 20rpx map-get($colors, shadow),
+    3: 0 8rpx 30rpx map-get($colors, shadow)
+  );
+  box-shadow: map-get($shadow-levels, $level);
+  transition: box-shadow 0.3s ease;
+}
+
+@mixin card {
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  background-color: map-get($colors, card);
+  border-radius: map-get($sizes, radius);
+  box-sizing: border-box;
+  @include shadow;
+}
+
+// 字体样式混合宏
+@mixin font-styles(
+  $size: content,
+  $weight: regular,
+  $color: primary,
+  $line-height: medium,
+  $letter-spacing: medium
+) {
+  font-size: map-get($font-sizes, $size);
+  font-weight: map-get($font-weights, $weight);
+  color: map-get($text-colors, $color);
+  line-height: map-get($line-heights, $line-height);
+  letter-spacing: map-get($letter-spacings, $letter-spacing);
+  font-family: map-get($font, family);
+}
+
+// 公共页面容器样式
+.page-container {
+  box-sizing: border-box;
+  padding: 0;
+  background-color: map-get($colors, bg);
+  font-family: map-get($font, family);
+  -webkit-font-smoothing: map-get($font, smoothing);
+  font-smoothing: map-get($font, smoothing);
+}
+
+// 公共卡片样式
+.card-wrap {
+  @include card;
+  margin-bottom: 20rpx;
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+
+  &:hover {
+    @include shadow(2);
+  }
+}
+
+// 公共地址标题样式
+.address-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: map-get($sizes, margin-sm);
+  padding-bottom: map-get($sizes, margin-sm);
+  border-bottom: 1rpx solid map-get($colors, border);
+
+  .location-icon {
+    margin-right: map-get($sizes, margin-xs);
+    background-color: map-get($colors, primary-light);
+    padding: map-get($sizes, icon-padding);
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .address-title {
+    margin-left: 16rpx;
+    @include font-styles($size: title, $weight: bold, $color: primary);
+  }
+
+  .add-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8rpx 24rpx;
+    border: 1rpx solid #108cff;
+    border-radius: 40rpx;
+    background-color: transparent;
+    color: #108cff;
+    font-size: 24rpx;
+    cursor: pointer;
+    
+    text {
+      margin-left: 8rpx;
+    }
+  }
+}

pages/orderDetailRefactoredOld/utils/imageUpload.js

@@ -0,0 +1,327 @@
+/**
+ * 图片上传和下载工具类
+ */
+export default {
+  /**
+   * 获取文件列表
+   * @param {String} type - 类型
+   * @param {String} orderFileType - 订单文件类型 (1:聊天记录, 2:实物图, 3:细节图)
+   * @param {String} receiptId - 收单ID
+   * @param {String} itemBrand - 物品品牌
+   * @param {String} clueId - 线索ID
+   */
+  async getFileList(type, orderFileType, receiptId, itemBrand, clueId) {
+    try {
+      const params = {
+        clueId,
+        sourceId: receiptId,
+        type,
+        orderFileType,
+        isDuplicate: '1',
+        pageNum: 1,
+        pageSize: 1000
+      }
+      const response = await uni.$u.api.selectClueFileByDto(params)
+      const rows = response.rows || []
+      
+      // 如果品牌包含逗号，说明是多个品牌，需要过滤
+      // if (itemBrand && itemBrand.indexOf(',') !== -1) {
+        return rows.filter(item => item.sourceId === receiptId)
+      // }
+      // return rows
+    } catch (error) {
+      console.error('获取文件列表失败:', error)
+      uni.$u.toast('获取文件列表失败')
+      return []
+    }
+  },
+
+  /**
+   * 选择图片
+   * @param {Number} count - 最多选择数量
+   * @returns {Promise<Array>} 图片路径数组
+   */
+  chooseImage(count = 9) {
+    return new Promise((resolve, reject) => {
+      uni.chooseImage({
+        count,
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          resolve(res.tempFilePaths)
+        },
+        fail: (err) => {
+          console.error('选择图片失败:', err)
+          reject(err)
+        }
+      })
+    })
+  },
+
+  /**
+   * 上传文件
+   * @param {String} filePath - 文件路径
+   * @returns {Promise<Object>} 上传结果
+   */
+  async uploadFile(filePath) {
+    try {
+      uni.showLoading({
+        title: '上传中...',
+        mask: true
+      })
+      const { data } = await uni.$u.api.uploadFile(filePath)
+      return {
+        fileSize: data.fileSize,
+        fileSuffix: data.fileSuffix,
+        fileName: data.name,
+        fileUrl: data.url
+      }
+    } catch (error) {
+      console.error('文件上传失败:', error)
+      uni.$u.toast('上传失败，请重试')
+      throw error
+    } finally {
+      uni.hideLoading()
+    }
+  },
+
+  /**
+   * 批量上传文件
+   * @param {Array<String>} filePaths - 文件路径数组
+   * @returns {Promise<Array>} 上传结果数组
+   */
+  async uploadFiles(filePaths) {
+    try {
+      const uploadPromises = filePaths.map(filePath => this.uploadFile(filePath))
+      return await Promise.all(uploadPromises)
+    } catch (error) {
+      console.error('批量上传失败:', error)
+      throw error
+    }
+  },
+
+  /**
+   * 绑定订单文件
+   * @param {String} clueId - 线索ID
+   * @param {String} receiptId - 收单ID
+   * @param {String} orderFileType - 订单文件类型
+   * @param {Array} fileList - 文件列表
+   */
+  async bindOrderFile(clueId, receiptId, orderFileType, fileList) {
+    try {
+      const list = fileList.map(file => ({
+        fileSize: file.fileSize,
+        fileSuffix: file.fileSuffix,
+        fileName: file.fileName,
+        fileUrl: file.fileUrl,
+        orderFileType
+      }))
+      
+      await uni.$u.api.saveClueFile({
+        clueId,
+        list,
+        sourceId: receiptId,
+        type: '2',
+        orderFileType
+      })
+      uni.$u.toast('上传成功')
+    } catch (error) {
+      console.error('绑定订单文件失败:', error)
+      uni.$u.toast('上传失败')
+      throw error
+    }
+  },
+
+  /**
+   * 删除文件
+   * @param {String|Array} fileIds - 文件ID或ID数组
+   */
+  async deleteFile(fileIds) {
+    try {
+      const ids = Array.isArray(fileIds) ? fileIds : [fileIds]
+      await uni.$u.api.deleteClueFile(ids)
+      uni.showToast({
+        title: '删除成功',
+        icon: 'success',
+        duration: 2000
+      })
+    } catch (error) {
+      console.error('删除文件失败:', error)
+      uni.showToast({
+        title: '删除失败',
+        icon: 'error',
+        duration: 2000
+      })
+      throw error
+    }
+  },
+
+  /**
+   * 保存图片到本地相册
+   * @param {String} url - 图片URL
+   * @returns {Promise}
+   */
+  saveImageToLocal(url) {
+    return new Promise((resolve, reject) => {
+      this._doSaveImage(url, resolve, reject)
+    })
+  },
+
+  /**
+   * 执行保存图片操作
+   * @private
+   */
+  _doSaveImage(url, resolve, reject) {
+    uni.downloadFile({
+      url,
+      success: (res) => {
+        if (res.statusCode === 200 && res.tempFilePath) {
+          uni.saveImageToPhotosAlbum({
+            filePath: res.tempFilePath,
+            success: () => {
+              resolve()
+            },
+            fail: (err) => {
+              console.error('保存到相册失败:', err)
+              // 错误代码 12 通常表示权限问题
+              const isPermissionError = err.code === 12 || 
+                                       err.errCode === 12 || 
+                                       err.errMsg.includes('auth denied') || 
+                                       err.errMsg.includes('permission') ||
+                                       err.errMsg.includes('UNKOWN ERROR')
+              
+              if (isPermissionError) {
+                uni.showModal({
+                  title: '权限不足',
+                  content: '需要访问相册权限来保存图片，是否前往设置开启权限？',
+                  confirmText: '去设置',
+                  cancelText: '取消',
+                  success: (modalRes) => {
+                    if (modalRes.confirm) {
+                      uni.openSetting({
+                        success: (settingRes) => {
+                          // 检查是否开启了相册权限
+                          const hasPermission = settingRes.authSetting && 
+                                              settingRes.authSetting['scope.writePhotosAlbum']
+                          if (hasPermission) {
+                            uni.showToast({
+                              title: '权限已开启，请重试保存',
+                              icon: 'none',
+                              duration: 2000
+                            })
+                          } else {
+                            uni.showToast({
+                              title: '请在设置中开启相册权限',
+                              icon: 'none',
+                              duration: 2000
+                            })
+                          }
+                        },
+                        fail: () => {
+                          uni.showToast({
+                            title: '无法打开设置',
+                            icon: 'none'
+                          })
+                        }
+                      })
+                    }
+                  }
+                })
+              } else {
+                uni.showToast({
+                  title: '保存失败，请稍后重试',
+                  icon: 'none'
+                })
+              }
+              reject(err)
+            }
+          })
+        } else {
+          const errorMsg = `下载失败，状态码: ${res.statusCode}`
+          console.error(errorMsg)
+          uni.showToast({
+            title: '下载图片失败',
+            icon: 'none'
+          })
+          reject(new Error(errorMsg))
+        }
+      },
+      fail: (err) => {
+        console.error('下载图片失败:', err)
+        uni.showToast({
+          title: '下载图片失败，请检查网络',
+          icon: 'none'
+        })
+        reject(err)
+      }
+    })
+  },
+
+  /**
+   * 批量保存图片到本地
+   * @param {Array<String>} urls - 图片URL数组
+   */
+  async saveImagesToLocal(urls) {
+    try {
+      uni.showLoading({
+        title: '正在保存图片...',
+        mask: true
+      })
+
+      const savedImages = []
+      const failedImages = []
+
+      for (let i = 0; i < urls.length; i++) {
+        const url = urls[i]
+        try {
+          await this.saveImageToLocal(url)
+          savedImages.push(url)
+        } catch (error) {
+          console.error(`保存图片失败: ${url}`, error)
+          failedImages.push(url)
+        }
+
+        uni.showLoading({
+          title: `正在保存图片... (${i + 1}/${urls.length})`,
+          mask: true
+        })
+      }
+
+      uni.hideLoading()
+
+      let message = `成功保存 ${savedImages.length} 张图片`
+      if (failedImages.length > 0) {
+        message += `，${failedImages.length} 张保存失败`
+      }
+
+      uni.showToast({
+        title: message,
+        icon: 'none',
+        duration: 3000
+      })
+    } catch (error) {
+      uni.hideLoading()
+      console.error('保存图片过程中发生错误:', error)
+      uni.showToast({
+        title: '保存图片失败',
+        icon: 'error'
+      })
+    }
+  },
+
+  /**
+   * 复制图片链接
+   * @param {Array<String>} urls - 图片URL数组
+   */
+  copyImageUrls(urls) {
+    uni.setClipboardData({
+      data: JSON.stringify(urls),
+      success: () => {
+        uni.showToast({
+          title: '图片链接已复制',
+          icon: 'none'
+        })
+      }
+    })
+  }
+}