Merge branch 'master' of http://106.52.242.177:3000/askqvn/crm-app into priceCenter

components/soundRecorder/soundRecorder.vue

@@ -42,8 +42,7 @@ export default {
     },
     methods: {
         handleDelete() {
-            console.log('点击了删除录音的按钮')
-            // this.$emit('delete', this.dataInner)
+            this.$emit('handleDelectThisSoundRecord', this.dataInner)
         }
     }
 

pages.json

@@ -258,6 +258,14 @@
 			}
 		},
 		{
+			"path": "pages/orderDetailRefactored/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
+			}
+		},
+		{
 			"path": "pages/receiptForm/index",
 			"style": {
 				"navigationBarTitleText": "",
@@ -288,7 +296,7 @@
 			"path": "pages/pagereceivecenter/pagereceivecenter",
 			"style": {
 				"navigationBarTitleText": "接单中心",
-				"enablePullDownRefresh": false,
+				"enablePullDownRefresh": true,
 				"navigationBarBackgroundColor": "#108cff",
 				"navigationStyle": "custom"
 			}
@@ -369,7 +377,7 @@
 			},
 			{
 				"text": "接单中心",
-				"pagePath": "pages/order/index",
+				"pagePath": "pages/pagereceivecenter/pagereceivecenter",
 				"iconPath": "static/tabs/order.png",
 				"selectedIconPath": "static/tabs/order1.png",
 				"visible": false

pages/clueDetail/page/clueDetail.vue

@@ -125,7 +125,7 @@
 				@click="handleAddFollow"></u-tabbar-item>
 				<u-tabbar-item text="上传录音" icon="../../static/caseDetail/icon-record.png"
 				@click="handleUploadRecord"></u-tabbar-item>
-				<u-tabbar-item text="分配" icon="../../static/clueDetail/icon-clue.png"
+				<u-tabbar-item text="分配" icon="../../static/clueDetail/icon-clue.png" v-if="isShowDistribution()"
 				@click="handleDistribution"></u-tabbar-item>
 		</u-tabbar>
 
@@ -209,6 +209,9 @@
 			}
 		},
 		methods: {
+			isShowDistribution() {
+				return this.$store.state.user.userInfo.roles.filter(i=>i.roleKey == 'ZHUGUANG-CRM').length > 0
+			},
 			distributionSuccess() {
 				this.handleInit();
 			},

pages/orderDetailNew/components/common.scss

@@ -184,7 +184,6 @@ transition: box-shadow 0.3s ease;
 // 公共地址标题样式
 .address-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
     margin-bottom: map-get($sizes, margin-sm);
     padding-bottom: map-get($sizes, margin-sm);

pages/orderDetailNew/components/pageFour.vue

@@ -991,7 +991,6 @@ export default {
 .address-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     margin-bottom: 20rpx;
 
     .address-title {

pages/orderDetailNew/components/pageOne.vue

@@ -10,21 +10,7 @@
             </u-col>
         </u-row>
 
-        <!-- 实物图卡片 -->
-        <view class="card_wrap">
-            <view class="card-title">实物图</view>
-            <view class="image-upload-container">
-                <view class="image-list">
-                    <view class="image-item" v-for="(item, index) in trueUploadList" :key="'truePic-' + index">
-                        <pic-comp @needPreviewPic='previewImageTrue' :src="item.fileUrl"></pic-comp>
-                        <view class="delete-btn" @click="deleteImage(item)">×</view>
-                    </view>
-                    <view class="upload-btn" @click="uploadImage('truePic', currentReceipt.id)">
-                        <u-icon name="plus" size="40" color="#999"></u-icon>
-                    </view>
-                </view>
-            </view>
-        </view>
+        
 
         <!-- 聊天记录卡片 -->
         <view class="card_wrap">
@@ -50,13 +36,32 @@
             <view class="image-upload-container" v-if="chatRecordOrCallRecord === 'callRecords'">
                 <view>
 
-                    <sound-recorder v-for="item in soundRecordList" :key="item.fileName" :data="item"></sound-recorder>
+                    <sound-recorder v-for="item in soundRecordList" :key="item.fileName" :data="item"
+                        @handleDelectThisSoundRecord='handleDelectThisSoundRecord'></sound-recorder>
+                    <!-- <view class="add-btn" @click="addCallRecord">添加通话记录</view> -->
 
                 </view>
 
             </view>
         </view>
 
+        <!-- 实物图卡片 -->
+        <view class="card_wrap">
+            <view class="card-title">实物图</view>
+            <view class="image-upload-container">
+                <view class="image-list">
+                    <view class="image-item" v-for="(item, index) in trueUploadList" :key="'truePic-' + index">
+                        <pic-comp @needPreviewPic='previewImageTrue' :src="item.fileUrl"></pic-comp>
+                        <view class="delete-btn" @click="deleteImage(item)">×</view>
+                    </view>
+                    <view class="upload-btn" @click="uploadImage('truePic', currentReceipt.id)">
+                        <u-icon name="plus" size="40" color="#999"></u-icon>
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+
         <!-- 基本信息卡片 -->
         <view class="info-card">
             <view class="info-card-title">基本信息</view>
@@ -421,7 +426,34 @@ export default {
             console.log('通话记录:', data);
             this.soundRecordList = data;
         },
-
+        //删除录音
+        handleDelectThisSoundRecord({ id }) {
+            console.log('当前需要删除的录音的id是', id)
+            uni.showModal({
+                title: '提示',
+                content: '是否确定删除?',
+                confirmColor: '#6cc040',
+                success: async (res) => {
+                    if (res.confirm) {
+                        try {
+                            await uni.$u.api.deleteClueFile([id])
+                            uni.showToast({
+                                title: '删除成功',
+                                icon: 'success',
+                                duration: 2000
+                            })
+                            this.getData()
+                        } catch (error) {
+                            uni.showToast({
+                                title: '删除失败',
+                                icon: 'error',
+                                duration: 2000
+                            })
+                        }
+                    }
+                }
+            })
+        },
     },
 
 }

pages/orderDetailNew/mixin/imgUploadAndDownLoad.js

@@ -48,15 +48,15 @@ export default {
                     pageSize: 1000 // 设置一个较大的值以获取所有数据
                 }
                 const response = await uni.$u.api.selectClueFileByDto(params)
-                if (orderFileType == '1') {
+                //聊天记录1，实物图2，细节图3
+                if (orderFileType == '2') {
                     //如果itemBrand里面有逗号的话说明是多个品牌
-
                     if (itemBrand.indexOf(',') != -1) {
                         this.trueUploadList = response.rows.filter(item => item.sourceId == receiptID) || []
                     } else {
                         this.trueUploadList = response.rows
                     }
-                } else if (orderFileType == '2') {
+                } else if (orderFileType == '1') {
                     if (itemBrand.indexOf(',') != -1) {
                         this.chatRecordsUploadList = response.rows.filter(item => item.sourceId == receiptID) || []
                     } else {
@@ -96,8 +96,8 @@ export default {
         async uploadToServer(filePaths, type, receiptID) {
             // 实际的上传逻辑
             try {
-                //实物图的话就是1,聊天记录的话就是2,高清细节图的话就是3
-                let p = type == 'truePic' ? '1' : type == 'chatRecords' ? '2' : type == 'detailImages' ? '3' : ''
+                //聊天记录的话就是1,实物图的话就是2,高清细节图的话就是3
+                let p = type == 'truePic' ? '2' : type == 'chatRecords' ? '1' : type == 'detailImages' ? '3' : ''
                 console.log('当前上传的图片类型是', p)
                 const res = await Promise.all(filePaths.map(filePath => this.uploadFile(filePath, p)));
 
@@ -141,7 +141,7 @@ export default {
         },
         //绑定订单
         async bindOrder(orderFileType, receiptID) {
-            console.log('当前的收单id', receiptID)
+            console.log('当前的收单id', receiptID,'当前的订单文件类型', orderFileType)
             const res = await uni.$u.api.saveClueFile({
                 clueId: this.orderDetail.clueId,//线索id
                 list: this.bindList,

pages/orderDetailRefactored/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/orderDetailRefactored/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/orderDetailRefactored/components/OrderDetailView.vue

@@ -0,0 +1,318 @@
+<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"
+      />
+    </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"
+        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}`)
+      }
+    },
+
+    /**
+     * 处理确认入库
+     */
+    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/orderDetailRefactored/components/PageFour.vue

@@ -0,0 +1,945 @@
+<template>
+  <view class="page-four-container">
+    <!-- 入库信息卡片 -->
+    <view class="card-wrap">
+      <u--form labelPosition="top" :model="warehouseInfo" ref="form" class="address-section">
+        <view class="address-header">
+          <u-icon name="car-fill" size="36rpx" color="#108cff" class="location-icon" />
+          <text class="address-title">入库信息</text>
+        </view>
+
+        <!-- 编码、快递单号、物流图片 -->
+
+
+        <!-- 收单物品、收单类型 -->
+        <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-form-item>
+          </u-col>
+          <u-col span="5.8">
+            <view @tap="selectCustomerServiceName">
+              <u-form-item label="收单类型" prop="customerServiceNameLabel">
+                <view class="click-wrapper info-input">
+                  {{ warehouseInfo.customerServiceNameLabel || '点击选择收单类型' }}
+                </view>
+              </u-form-item>
+              <u-picker :show="showCustomerServicePicker" :columns="customerServiceColumns" confirm keyName="label"
+                @confirm="handleConfirmCustomerService" @cancel="showCustomerServicePicker = false" />
+            </view>
+          </u-col>
+        </u-row>
+
+        <!-- 类别、是否需要查码 -->
+        <u-row class="info-row" justify="space-between">
+          <u-col span="5.8">
+            <view @tap="selectCategory">
+              <u-form-item label="类别" prop="category">
+                <view class="click-wrapper info-input">
+                  {{ warehouseInfo.categoryLabel || '点击选择类别' }}
+                </view>
+              </u-form-item>
+              <u-picker :show="showCategoryPicker" :columns="categoryColumns" confirm keyName="label"
+                @confirm="handleConfirmCategory" @cancel="showCategoryPicker = false" />
+            </view>
+          </u-col>
+          <u-col span="5.8">
+            <view @tap="selectNeedCheckCode">
+              <u-form-item label="是否需要查码" prop="needCheckCode">
+                <view class="click-wrapper info-input">
+                  {{ warehouseInfo.needCheckCodeLabel || '点击选择是否需要查码' }}
+                </view>
+              </u-form-item>
+              <u-picker :show="showNeedCheckCodePicker" :columns="needCheckCodeColumns" confirm keyName="label"
+                @confirm="handleConfirmNeedCheckCode" @cancel="showNeedCheckCodePicker = false" />
+            </view>
+          </u-col>
+        </u-row>
+
+
+        <u-row class="info-row" justify="space-between">
+          <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'" />
+            </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-form-item>
+          </u-col>
+          <u-col span="2">
+            <u-form-item label="物流图片" prop="uploadedImage">
+              <view class="image-uploader" @click="selectImage">
+                <u-icon v-if="!warehouseInfo.uploadedImage" name="camera-fill" size="48rpx" color="#909399"
+                  class="camera-icon" />
+                <image v-else :src="warehouseInfo.uploadedImage" mode="aspectFill" class="image-preview" />
+              </view>
+            </u-form-item>
+          </u-col>
+        </u-row>
+
+        <!-- 表款、查码费 -->
+        <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-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'" />
+            </u-form-item>
+          </u-col>
+        </u-row>
+
+        <!-- 好处费、运费 -->
+        <u-row class="info-row" justify="space-between">
+          <u-col span="5.8">
+            <u-form-item label="好处费">
+              <u--input v-model="warehouseInfo.benefitFee" placeholder="请输入好处费" class="info-input" type="number" />
+            </u-form-item>
+          </u-col>
+          <u-col span="5.8">
+            <u-form-item label="运费">
+              <u--input v-model="warehouseInfo.freight" placeholder="请输入运费" class="info-input" type="number" />
+            </u-form-item>
+          </u-col>
+        </u-row>
+
+        <!-- 维修金额、分单比例 -->
+        <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-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" />
+            </u-form-item>
+          </u-col>
+        </u-row>
+
+        <!-- 成本合计、业绩、毛业绩 -->
+        <u-row class="info-row" justify="space-between">
+          <u-col span="3.8">
+            <u-form-item label="成本合计">
+              <u--input :disabled="true" :value="computedTotalCost" placeholder="成本合计自动计算" class="info-input"
+                type="number" />
+            </u-form-item>
+          </u-col>
+          <u-col span="3.8">
+            <u-form-item label="业绩">
+              <u--input :disabled="true" :value="computedPerformance" placeholder="业绩自动计算" class="info-input"
+                type="number" />
+            </u-form-item>
+          </u-col>
+          <u-col span="3.8">
+            <u-form-item label="毛业绩">
+              <u--input :disabled="true" :value="computedGrossPerformance" placeholder="毛业绩自动计算" class="info-input"
+                type="number" />
+            </u-form-item>
+          </u-col>
+        </u-row>
+
+        <!-- 收单备注 -->
+        <u-row class="info-row">
+          <u-col span="12">
+            <u-form-item label="收单备注">
+              <u--textarea v-model="warehouseInfo.remarks" placeholder="请输入收单备注" class="info-textarea"
+                confirmType="done" rows="4" />
+            </u-form-item>
+          </u-col>
+        </u-row>
+      </u--form>
+    </view>
+
+    <!-- 分成信息卡片 -->
+    <view class="card-wrap">
+      <view class="address-section">
+        <view class="address-header add-button-container">
+          <text class="address-title">分成信息</text>
+
+          <view class="add-button" @click="addSplit">
+            <u-icon name="plus" size="24rpx" color="#108cff" />
+            <text>添加</text>
+          </view>
+        </view>
+
+        <!-- 分成信息表格 -->
+        <view class="split-table">
+          <u-row class="split-table-header">
+            <u-col span="4"><text class="header-text">关联</text></u-col>
+            <u-col span="2"><text class="header-text">分成人</text></u-col>
+            <u-col span="2"><text class="header-text">比例</text></u-col>
+            <u-col span="1"><text class="header-text">类型</text></u-col>
+            <u-col span="1"><text class="header-text">公司</text></u-col>
+            <u-col span="2" class="action-column"><text class="header-text">操作</text></u-col>
+          </u-row>
+          <u-row v-for="(item, index) in profitSharingList" :key="item.uuid" class="split-table-row">
+            <u-col span="4">
+              <view class="table-cell">
+                <u-button @click="handleSelectOrg(item)" :text="item.orgName || '选择组织'" plain />
+              </view>
+            </u-col>
+            <u-col span="2">
+              <view class="table-cell">
+                <u-button @click="handleSelectPerson(item)" :text="item.userName || '选择人员'" plain />
+              </view>
+            </u-col>
+            <u-col span="2">
+              <view class="table-cell">
+                <u--input v-model="item.commissionRate" type="number" class="percentage-input"
+                  @input="handlePercentageInput(item)" min="0" max="100" precision="0" />
+              </view>
+            </u-col>
+            <u-col span="1">
+              <view class="table-cell">
+                <view :class="['account-type', item.accountType == '1' ? 'frontend' : 'backend']"
+                  @click="toggleAccountType(item)">
+                  {{ item.accountType == '1' ? '前' : '后' }}
+                </view>
+              </view>
+            </u-col>
+            <u-col span="1">
+              <view class="table-cell">
+                <view class="radio-wrapper" @click="toggleBelongToCompany(item)">
+                  <view :class="['radio-circle', item.isCompanyPerformance == '1' ? 'active' : '']">
+                    <u-icon v-if="item.isCompanyPerformance == '1'" name="checkmark" size="20rpx" color="#fff" />
+                  </view>
+                </view>
+              </view>
+            </u-col>
+            <u-col span="2" class="action-column">
+              <view class="table-cell">
+                <u-button type="error" plain shape="circle" size="mini" @click="deleteRow(item.id, item.uuid)"
+                  class="delete-btn">
+                  <u-icon name="trash" size="20rpx" color="#ff6b6b" />
+                </u-button>
+              </view>
+            </u-col>
+          </u-row>
+        </view>
+      </view>
+    </view>
+
+    <!-- 确认入库按钮 -->
+    <view class="confirm-button-container">
+      <u-button class="next-btn" type="success" @click="confirmWarehouseEntry">
+        <u-icon name="checkmark-circle-fill" size="28rpx" color="#fff" />
+        <text style="margin-left: 8rpx;">确认入库</text>
+      </u-button>
+    </view>
+
+    <!-- 组织选择器 -->
+    <u-picker :show="showOrgPicker" title="请选择组织" :columns="columnsOrgList" keyName="label" @confirm="handleOrgConfirm"
+      @cancel="showOrgPicker = false" />
+
+    <!-- 人员选择器 -->
+    <u-picker :show="showPersonPicker" title="请选择分成人" :columns="columnsPersonList" keyName="label"
+      @confirm="handleConfirmPerson" @cancel="handleCancelPerson" />
+
+    <u-toast ref="uToast" />
+  </view>
+</template>
+
+<script>
+import imageUpload from '../utils/imageUpload.js'
+
+export default {
+  name: 'PageFour',
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => ({})
+    },
+    currentReceipt: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      warehouseInfo: {
+        codeStorage: '',
+        expressOrderNo: '',
+        uploadedImage: '',
+        item: '',
+        checkCodeFee: '',
+        watchPrice: '',
+        benefitFee: '',
+        freight: '',
+        repairAmount: '',
+        grossPerformance: '',
+        performance: '',
+        splitRatio: '',
+        remarks: '',
+        customerServiceNameLabel: '',
+        customerServiceName: '',
+        categoryLabel: '',
+        category: '',
+        needCheckCodeLabel: '',
+        needCheckCode: ''
+      },
+      profitSharingList: [],
+      showOrgPicker: false,
+      showPersonPicker: false,
+      columnsOrgList: [],
+      columnsPersonList: [],
+      showCustomerServicePicker: false,
+      customerServiceColumns: [[
+        { label: '收单类', value: '1' },
+        { label: '维修类', value: '2' },
+        { label: '销售类', value: '3' }
+      ]],
+      showCategoryPicker: false,
+      categoryColumns: [[
+        { label: '腕表', value: '1' },
+        { label: '包包', value: '2' },
+        { label: '首饰', value: '4' },
+        { label: '其他', value: '3' }
+      ]],
+      showNeedCheckCodePicker: false,
+      needCheckCodeColumns: [[
+        { label: '是', value: '1' },
+        { label: '否', value: '2' }
+      ]],
+      currentEditItem: ''
+    }
+  },
+  computed: {
+    computedTotalCost() {
+      const freight = Number(this.warehouseInfo.freight) || 0
+      const benefitFee = Number(this.warehouseInfo.benefitFee) || 0
+      const checkCodeFee = Number(this.warehouseInfo.checkCodeFee) || 0
+      const watchPrice = Number(this.warehouseInfo.watchPrice) || 0
+      const repairAmount = Number(this.warehouseInfo.repairAmount) || 0
+      return freight + benefitFee + checkCodeFee + watchPrice + repairAmount
+    },
+    computedPerformance() {
+      const sellingPrice = Number(this.currentReceipt.sellingPrice) || 0
+      return sellingPrice - this.computedTotalCost
+    },
+    computedGrossPerformance() {
+      const performance = this.computedPerformance || 0
+      const splitRatio = Number(this.warehouseInfo.splitRatio) / 100 || 0
+      return (performance * splitRatio).toFixed(2)
+    }
+  },
+  watch: {
+    currentReceipt: {
+      handler(newVal) {
+        if (newVal) {
+          this.initWarehouseInfo(newVal)
+          this.loadShareList()
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted() {
+    this.loadCommissionUserList()
+  },
+  methods: {
+    /**
+     * 初始化入库信息
+     */
+    initWarehouseInfo(data) {
+      const receiptRemark = data.receiptRemark || ''
+      const remarkParts = receiptRemark.split(';')
+
+      // 设置默认值：收单类型默认为"收单类"，类别默认为"腕表"，是否需要查码默认为"是"
+      const defaultCustomerServiceName = data.customerServiceName || '1'
+      const defaultCategory = data.category || '1'
+      const defaultNeedCheckCode = data.needCheckCode || '1'
+
+      this.warehouseInfo = {
+        codeStorage: data.code || '',
+        expressOrderNo: data.expressOrderNo || '',
+        uploadedImage: remarkParts[1] || '',
+        item: data.item || '',
+        checkCodeFee: data.checkCodeFee || '',
+        watchPrice: data.tableFee || '',
+        benefitFee: data.benefitFee || '',
+        freight: data.freight || '',
+        repairAmount: data.repairAmount || '',
+        grossPerformance: data.grossPerformance || '',
+        performance: data.performance || '',
+        splitRatio: data.splitRatio || '',
+        remarks: remarkParts[0] || '',
+        customerServiceName: defaultCustomerServiceName,
+        customerServiceNameLabel: this.getLabelByValue(
+          this.customerServiceColumns[0],
+          defaultCustomerServiceName
+        ),
+        category: defaultCategory,
+        categoryLabel: this.getLabelByValue(
+          this.categoryColumns[0],
+          defaultCategory
+        ),
+        needCheckCode: defaultNeedCheckCode,
+        needCheckCodeLabel: this.getLabelByValue(
+          this.needCheckCodeColumns[0],
+          defaultNeedCheckCode
+        )
+      }
+    },
+
+    /**
+     * 根据值获取标签
+     */
+    getLabelByValue(columns, value) {
+      const item = columns.find(col => col.value == value)
+      return item ? item.label : ''
+    },
+
+    /**
+     * 选择物流图片
+     */
+    async selectImage() {
+      try {
+        const tempFilePaths = await imageUpload.chooseImage(1)
+        if (!tempFilePaths || tempFilePaths.length === 0) {
+          uni.$u.toast('未获取到图片路径，请重试')
+          return
+        }
+        const tempFilePath = tempFilePaths[0]
+        const rep = await uni.$u.api.uploadFile(tempFilePath)
+        if (rep.code == 200) {
+          this.warehouseInfo.uploadedImage = rep.data.url
+        }
+      } catch (error) {
+        console.error('上传图片失败:', error)
+      }
+    },
+
+    /**
+     * 加载分成人名单
+     */
+    async loadCommissionUserList() {
+      try {
+        const res = await uni.$u.api.getCustomerManagerAllList()
+        this.columnsOrgList = [res.data[0].children]
+      } catch (error) {
+        console.error('加载分成人名单失败:', error)
+      }
+    },
+
+    /**
+     * 加载分成列表
+     */
+    async loadShareList() {
+      if (!this.currentReceipt.sendFormId) return
+
+      try {
+        const { rows } = await uni.$u.api.selectCommissionList({
+          pageSize: 9999,
+          pageNum: 1
+        }, { sendFormId: this.currentReceipt.sendFormId })
+
+        const newRows = rows
+          .filter(item => item.receiptFormId == this.currentReceipt.id)
+          .map(item => ({
+            ...item,
+            uuid: Math.random()
+          }))
+        this.profitSharingList = newRows
+      } catch (error) {
+        console.error('加载分成列表失败:', error)
+      }
+    },
+
+    /**
+     * 添加分成行
+     */
+    addSplit() {
+      this.profitSharingList.push({
+        deptId: '',
+        accountType: '1',
+        userId: '',
+        commissionRate: 0,
+        isCompanyPerformance: '2',
+        orgName: '',
+        userName: '',
+        id: '',
+        uuid: Math.random()
+      })
+      this.calculateTotalPercentage()
+    },
+
+    /**
+     * 重新计算分成比例
+     */
+    calculateTotalPercentage() {
+      const frontItems = this.profitSharingList.filter(item => item.accountType == '1')
+      const backItems = this.profitSharingList.filter(item => item.accountType == '2')
+      const totalFrontItems = frontItems.length || 1
+      const totalBackItems = backItems.length || 1
+
+      this.profitSharingList.forEach(item => {
+        if (item.accountType == '1') {
+          item.commissionRate = Math.floor(100 / totalFrontItems)
+        }
+        if (item.accountType == '2') {
+          item.commissionRate = Math.floor(100 / totalBackItems)
+        }
+      })
+    },
+
+    /**
+     * 切换账户类型
+     */
+    toggleAccountType(item) {
+      item.accountType = item.accountType == '1' ? '2' : '1'
+      this.calculateTotalPercentage()
+    },
+
+    /**
+     * 处理百分比输入
+     */
+    handlePercentageInput(item) {
+      let value = Number(item.commissionRate)
+      if (isNaN(value)) value = 0
+      if (value < 0) value = 0
+      if (value > 100) value = 100
+      item.commissionRate = Math.floor(value)
+    },
+
+    /**
+     * 切换归属公司
+     */
+    toggleBelongToCompany(item) {
+      item.isCompanyPerformance = item.isCompanyPerformance == '1' ? '2' : '1'
+    },
+
+    /**
+     * 选择组织
+     */
+    handleSelectOrg(item) {
+      this.currentEditItem = item.uuid
+      this.showPersonPicker = true
+      this.columnsPersonList = this.columnsOrgList
+    },
+
+    /**
+     * 选择人员
+     */
+    handleSelectPerson(item) {
+      this.currentEditItem = item.uuid
+      const deptId = item.deptId
+      const org = this.findOrg(this.columnsOrgList[0], deptId)
+      if (org) {
+        this.columnsPersonList = [org.children]
+      }
+      this.showPersonPicker = true
+    },
+
+    /**
+     * 递归查找组织
+     */
+    findOrg(orgList, deptId) {
+      for (const org of orgList) {
+        if (org.id == deptId) {
+          return org
+        }
+        if (org.children && org.children.length > 0) {
+          const found = this.findOrg(org.children, deptId)
+          if (found) return found
+        }
+      }
+      return null
+    },
+
+    /**
+     * 确认选择组织
+     */
+    handleOrgConfirm({ value }) {
+      this.profitSharingList.forEach(item => {
+        if (item.uuid == this.currentEditItem) {
+          item.orgName = value[0].label
+          item.deptId = value[0].id
+          item.userId = ''
+          item.userName = ''
+        }
+      })
+      this.showOrgPicker = false
+    },
+
+    /**
+     * 确认选择人员
+     */
+    handleConfirmPerson({ value }) {
+      if (value[0].isUser) {
+        this.profitSharingList.forEach(item => {
+          if (item.uuid == this.currentEditItem) {
+            item.userName = value[0].label
+            item.userId = value[0].id
+          }
+        })
+        this.columnsPersonList = []
+        this.showPersonPicker = false
+      } else {
+        this.profitSharingList.forEach(item => {
+          if (item.uuid == this.currentEditItem) {
+            item.orgName = value[0].label
+            item.deptId = value[0].id
+          }
+        })
+        this.columnsPersonList = [value[0].children]
+      }
+    },
+
+    /**
+     * 取消选择人员
+     */
+    handleCancelPerson() {
+      this.columnsPersonList = []
+      this.showPersonPicker = false
+    },
+
+    /**
+     * 删除分成行
+     */
+    async deleteRow(id, uuid) {
+      uni.showModal({
+        title: '确认删除',
+        content: '是否确认删除当前行分成比例？',
+        success: async (res) => {
+          if (res.confirm) {
+            if (!id) {
+              this.profitSharingList = this.profitSharingList.filter(item => item.uuid != uuid)
+              this.calculateTotalPercentage()
+              return
+            }
+            try {
+              await uni.$u.api.deleteClueCommissionForm(id)
+              uni.$u.toast('删除成功')
+              this.loadShareList()
+            } catch (error) {
+              uni.$u.toast('删除失败')
+            }
+          }
+        }
+      })
+    },
+
+    /**
+     * 选择收单类型
+     */
+    selectCustomerServiceName() {
+      this.showCustomerServicePicker = true
+    },
+
+    /**
+     * 确认收单类型
+     */
+    handleConfirmCustomerService({ value }) {
+      this.warehouseInfo.customerServiceNameLabel = value[0].label
+      this.warehouseInfo.customerServiceName = value[0].value
+      this.showCustomerServicePicker = false
+    },
+
+    /**
+     * 选择类别
+     */
+    selectCategory() {
+      this.showCategoryPicker = true
+    },
+
+    /**
+     * 确认类别
+     */
+    handleConfirmCategory({ value }) {
+      this.warehouseInfo.categoryLabel = value[0].label
+      this.warehouseInfo.category = value[0].value
+      this.showCategoryPicker = false
+    },
+
+    /**
+     * 选择是否需要查码
+     */
+    selectNeedCheckCode() {
+      this.showNeedCheckCodePicker = true
+    },
+
+    /**
+     * 确认是否需要查码
+     */
+    handleConfirmNeedCheckCode({ value }) {
+      this.warehouseInfo.needCheckCodeLabel = value[0].label
+      this.warehouseInfo.needCheckCode = value[0].value
+      // 如果选择"否"，清空编码和查码费
+      if (value[0].value === '2') {
+        this.warehouseInfo.codeStorage = ''
+        this.warehouseInfo.checkCodeFee = ''
+      }
+      this.showNeedCheckCodePicker = false
+    },
+
+    /**
+     * 确认入库
+     */
+    async confirmWarehouseEntry() {
+      uni.showModal({
+        title: '确认入库',
+        content: `是否确认入库该订单：${this.orderDetail.item}？`,
+        success: async (res) => {
+          if (res.confirm) {
+            try {
+              // 修改订单状态
+              await uni.$u.api.oderForm({
+                status: '3',
+                id: this.orderDetail.id
+              })
+
+              // 更新收单表单
+              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 || ''
+              })
+
+              // 上传分成数据
+              await this.addShare()
+
+              this.$refs.uToast.show({
+                type: 'success',
+                message: '入库成功',
+                complete: () => {
+                  uni.navigateBack({
+                    delta: 1
+                  })
+                }
+              })
+            } catch (error) {
+              console.error('入库失败:', error)
+              uni.$u.toast('入库失败')
+            }
+          }
+        }
+      })
+    },
+
+    /**
+     * 上传分成
+     */
+    async addShare() {
+      for (const item of this.profitSharingList) {
+        const data = {
+          id: item.id || '',
+          accountType: item.accountType == '1' ? 1 : 2,
+          clueId: this.currentReceipt.clueId,
+          commissionRate: item.commissionRate,
+          isCompanyPerformance: item.isCompanyPerformance == '1' ? 1 : 2,
+          sendFormId: this.currentReceipt.sendFormId,
+          userId: item.userId,
+          userName: item.userName,
+          receiptFormId: this.currentReceipt.id
+        }
+        if (item.id) {
+          await uni.$u.api.clueCommissionUpdate(data)
+        } else {
+          await uni.$u.api.clueCommissionAdd(data)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../styles/common.scss';
+
+.page-four-container {
+  @extend .page-container;
+  padding-bottom: 100rpx;
+}
+
+.address-section {
+  padding: 20rpx;
+
+  // 防止 label 换行
+  ::v-deep .u-form-item__body__left__content__label {
+    white-space: nowrap !important;
+    overflow: visible;
+  }
+}
+
+.info-row {
+  margin-bottom: 20rpx;
+}
+
+.info-input {
+  height: 65rpx;
+  border-radius: 8rpx;
+  border: 1rpx solid #e5e7eb;
+  padding: 20rpx 16rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.info-textarea {
+  width: 100%;
+  box-sizing: border-box;
+
+  ::v-deep .u-textarea {
+    min-height: 200rpx;
+    border-radius: 8rpx;
+    border: 1rpx solid #e5e7eb;
+    padding: 20rpx 16rpx;
+    line-height: 1.5;
+  }
+
+  ::v-deep textarea {
+    min-height: 200rpx;
+    border-radius: 8rpx;
+    width: 100%;
+    box-sizing: border-box;
+    line-height: 1.5;
+    font-size: 28rpx;
+  }
+}
+
+.click-wrapper {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.image-uploader {
+  width: 100%;
+  height: 65rpx;
+  border: 2rpx dashed #409eff;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: #ecf5ff;
+}
+
+.image-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 10rpx;
+}
+
+.split-table {
+  width: 100%;
+  margin-top: 20rpx;
+}
+
+.split-table-header {
+  background-color: #f5f7fa;
+  padding: 15rpx 0;
+  border-bottom: 1rpx solid #e4e7ed;
+}
+
+.split-table-row {
+  padding: 15rpx 0;
+  border-bottom: 1rpx solid #e4e7ed;
+  align-items: center;
+}
+
+.header-text {
+  @include font-styles($size: tiny, $weight: regular, $color: tertiary);
+  text-align: center;
+  display: block;
+}
+
+.table-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10rpx;
+}
+
+.percentage-input {
+  text-align: center;
+  background-color: #f9f9f9;
+  padding: 0rpx !important;
+}
+
+.account-type {
+  padding: 4rpx 16rpx;
+  border-radius: 12rpx;
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #fff;
+  text-align: center;
+  cursor: pointer;
+
+  &.frontend {
+    background-color: #409eff;
+  }
+
+  &.backend {
+    background-color: #909399;
+  }
+}
+
+.radio-wrapper {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.radio-circle {
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 50%;
+  border: 2rpx solid #dcdfe6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+
+  &.active {
+    border-color: #67c23a;
+    background-color: #67c23a;
+  }
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40rpx 0;
+  margin-top: 20rpx;
+}
+
+.next-btn {
+  width: 95%;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  border-radius: 11px;
+}
+
+.add-button-container {
+  justify-content: space-between;
+}
+</style>

pages/orderDetailRefactored/components/PageOne.vue

@@ -0,0 +1,750 @@
+<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/orderDetailRefactored/components/PageThree.vue

@@ -0,0 +1,920 @@
+<template>
+  <view class="page-three-container">
+    <!-- 支付信息卡片 -->
+    <view class="info-card">
+      <view class="info-card-title">支付信息</view>
+      <u-row class="info-row" justify="space-between">
+        <u-col span="5.8">
+          <view class="info-label">开户人</view>
+          <u-input v-model="paymentInfo.customName" placeholder="请输入开户人姓名" class="info-input"
+            @blur="handleCustomNameInput" />
+        </u-col>
+        <u-col span="5.8">
+          <view class="info-label">银行名称</view>
+          <u-input v-model="paymentInfo.bankName" placeholder="请输入银行名称" class="info-input"
+            @blur="handleBankNameInput" />
+        </u-col>
+      </u-row>
+      <u-row class="info-row">
+        <u-col span="12">
+          <view class="info-label">银行账号</view>
+          <u-input v-model="paymentInfo.bankAccount" placeholder="请输入银行账号" class="info-input" type="number"
+            @input="handleBankAccountInput" />
+        </u-col>
+      </u-row>
+      <u-row class="info-row">
+        <u-col span="12">
+          <view class="info-label">身份证号</view>
+          <u-input v-model="paymentInfo.idNumber" placeholder="请输入身份证号" class="info-input"
+            @blur="handleIdNumberInput" />
+        </u-col>
+      </u-row>
+      <u-row class="info-row">
+        <u-col span="12">
+          <view class="info-label">支付方式选择</view>
+          <u-radio-group iconPlacement="left" v-model="paymentMethodRadio" placement="row"
+            @change="handlePaymentMethodRadioChange">
+            <u-radio shape="circle" label="小葫芦线上支付" name="online" />
+            <u-radio shape="circle" label="线下支付" name="offline" />
+          </u-radio-group>
+        </u-col>
+      </u-row>
+      <u-row class="info-row">
+        <u-col span="12">
+          <view class="info-label">支付方式</view>
+          <u-input :disabled="paymentMethodRadio === 'online'" v-model="paymentMethod" placeholder="请输入支付方式"
+            class="info-input" />
+        </u-col>
+      </u-row>
+    </view>
+
+    <!-- 高清实物图卡片 -->
+    <view class="card-wrap">
+      <view class="detail-image-section">
+        <view class="detail-image-header">
+          <text class="detail-image-title">高清实物图（拖拽排序）</text>
+        </view>
+        <view class="detail-image-content">
+          <view class="detail-image-list">
+            <view v-for="(item, index) in displayImages" :key="item.id || `detail-${index}`" class="detail-image-item"
+              :class="{
+                'dragging': draggingIndex === index,
+                'can-drop': canDropIndex === index && draggingIndex !== index
+              }" :style="draggingIndex === index ? draggingStyle : ''" @touchstart.stop="onTouchStart($event, index)"
+              @touchmove.stop="onTouchMove($event, index)" @touchend.stop="onTouchEnd">
+              <PicComp :src="item.fileUrl" @needPreviewPic="previewImageDetail" />
+              <view class="image-type-tag">{{ getImageType(index) }}</view>
+              <view class="detail-delete-btn" @click.stop="handleHideImage(item, index)">
+                ×
+              </view>
+            </view>
+            <view class="detail-upload-btn" @click="handleUploadImage">
+              <u-icon name="plus" size="40rpx" color="#999" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 支付总额卡片 -->
+    <view class="card-wrap payment-card">
+      <view class="payment-section">
+        <view class="payment-total-container">
+          <text class="payment-label">支付总额</text>
+          <u-input v-model="paymentAmount" class="payment-amount" type="number" decimal="2" prefix="￥" />
+        </view>
+        <view class="payment-buttons-row">
+          <view class="payment-button" @click="handleUnpaidClick">
+            <u-icon name="star" size="40rpx" color="#ff9500" />
+            <text class="button-text">未收</text>
+          </view>
+          <view class="payment-button" @click="handleFollowUpClick">
+            <u-icon name="chat" size="40rpx" color="#108cff" />
+            <text class="button-text">待跟进</text>
+          </view>
+        </view>
+        <view class="pay-now-button" @click="handlePayNowClick">
+          <text class="button-text">立即支付</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 下一步按钮 -->
+    <u-button class="next-btn" @click="handleNext" type="primary" size="middle">
+      下一步
+    </u-button>
+
+    <!-- 未收评级模态窗 -->
+    <u-modal showCancelButton showConfirmButton @confirm="confirmUnpaid" @cancel="unpaidModalVisible = false"
+      :show="unpaidModalVisible" title="未收评级">
+      <view class="modal-content">
+        <u-rate v-model="unpaidRating" :count="5" :size="50" active-color="#ff9500" />
+      </view>
+    </u-modal>
+
+    <!-- 待跟进模态窗 -->
+    <u-modal showCancelButton showConfirmButton @confirm="confirmFollowUp" @cancel="followUpModalVisible = false"
+      :show="followUpModalVisible" title="填写跟进细节">
+      <view class="modal-content">
+        <u--textarea v-model="followUpNotes" placeholder="请输入情况" confirm-type="done"
+          style="width: 100%; margin-bottom: 30rpx;" />
+      </view>
+    </u-modal>
+
+    <!-- 确认支付模态窗 -->
+    <u-modal showCancelButton showConfirmButton @confirm="confirmRiskWarning" @cancel="riskWarningModalVisible = false"
+      confirmText="确认并继续付款" :show="riskWarningModalVisible" title="付款警示" :content="'湖南耒阳地区身份证号请确认！'">
+    </u-modal>
+
+    <u-modal :show="payNowModalVisible" title="确认支付信息" :showConfirmButton="false">
+      <view class="modal-content">
+        <view class="payment-amount-display">￥{{ paymentAmount }}</view>
+        <view class="payment-info-section">
+          <view class="info-item">
+            <text class="info-label">收款姓名：</text>
+            <text class="info-value">{{ paymentInfo.customName || '未填写' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">开户银行：</text>
+            <text class="info-value">{{ paymentInfo.bankName || '未填写' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">银行卡号：</text>
+            <text class="info-value">{{ paymentInfo.bankAccount || '未填写' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">支付方式：</text>
+            <text class="info-value">{{ paymentMethod || '未填写' }}</text>
+          </view>
+        </view>
+        <u-button type="primary" size="large" @click="confirmTransfer" style="margin-top: 40rpx;">
+          确认转账
+        </u-button>
+        <u-button type="primary" :plain="true" @click="payNowModalVisible = false" size="large"
+          style="margin-top: 20rpx;">
+          取消
+        </u-button>
+      </view>
+    </u-modal>
+  </view>
+</template>
+
+<script>
+import PicComp from './PicComp.vue'
+import imageUpload from '../utils/imageUpload.js'
+
+export default {
+  name: 'PageThree',
+  components: {
+    PicComp
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => ({})
+    },
+    orderId: {
+      type: String,
+      default: ''
+    },
+    currentReceipt: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      paymentInfo: {
+        customName: '',
+        bankName: '',
+        bankAccount: '',
+        idNumber: ''
+      },
+      paymentMethodRadio: 'offline',
+      paymentMethod: '',
+      paymentAmount: '0.00',
+      detailImages: [],
+      // 拖拽相关
+      draggingIndex: -1,
+      canDropIndex: -1,
+      startX: 0,
+      startY: 0,
+      currentX: 0,
+      currentY: 0,
+      // 模态窗
+      unpaidModalVisible: false,
+      followUpModalVisible: false,
+      payNowModalVisible: false,
+      riskWarningModalVisible: false,
+      unpaidRating: 0,
+      followUpNotes: ''
+    }
+  },
+  computed: {
+    // 显示前6个图片用于拖拽
+    displayImages() {
+      return this.detailImages.slice(0, 6)
+    },
+    // 拖拽时的样式
+    draggingStyle() {
+      if (this.draggingIndex === -1) return ''
+      return {
+        transform: `translate(${this.currentX - this.startX}px, ${this.currentY - this.startY}px)`,
+        zIndex: 1000
+      }
+    }
+  },
+  watch: {
+    orderDetail: {
+      handler(newVal) {
+        if (newVal) {
+          this.paymentInfo.customName = newVal.customName || ''
+          this.paymentInfo.bankName = newVal.bankName || ''
+          this.paymentInfo.bankAccount = newVal.bankCardNumber || ''
+          this.paymentInfo.idNumber = newVal.idCard || ''
+          this.initPaymentMethod(newVal.paymentMethod)
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    currentReceipt: {
+      handler(newVal) {
+        if (newVal) {
+          this.paymentAmount = newVal.tableFee || '0.00'
+          this.loadDetailImages()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    /**
+     * 刷新图片列表（供父组件调用）
+     */
+    async refreshImageList() {
+      await this.loadDetailImages()
+    },
+
+    /**
+     * 加载细节图
+     */
+    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)
+      }
+    },
+
+    /**
+     * 初始化支付方式
+     */
+    initPaymentMethod(value) {
+      if (value === '小葫芦线上支付') {
+        this.paymentMethod = '小葫芦线上支付'
+        this.paymentMethodRadio = 'online'
+      } else {
+        this.paymentMethod = value || ''
+        this.paymentMethodRadio = 'offline'
+      }
+    },
+
+    /**
+     * 支付方式选择改变
+     */
+    handlePaymentMethodRadioChange(value) {
+      if (value === 'online') {
+        this.paymentMethod = '小葫芦线上支付'
+      } else {
+        this.paymentMethod = ''
+      }
+    },
+
+    /**
+     * 开户人输入处理 - 只允许中文
+     */
+    handleCustomNameInput(value) {
+      // 只保留中文字符（包括中文标点）
+      const chineseReg = /[^\u4e00-\u9fa5]/g
+      this.paymentInfo.customName = String(value || '').replace(chineseReg, '')
+    },
+
+    /**
+     * 银行名称输入处理 - 只允许中文
+     */
+    handleBankNameInput(value) {
+      // 只保留中文字符（包括中文标点）
+      const chineseReg = /[^\u4e00-\u9fa5]/g
+      this.paymentInfo.bankName = String(value || '').replace(chineseReg, '')
+    },
+
+    /**
+     * 银行账号输入处理 - 只允许数字
+     */
+    handleBankAccountInput(value) {
+      // 只保留数字
+      const numberReg = /[^\d]/g
+      this.paymentInfo.bankAccount = String(value || '').replace(numberReg, '')
+    },
+
+    /**
+     * 身份证号输入处理 - 允许数字和X
+     */
+    handleIdNumberInput(value) {
+      // 只保留数字和X
+      const reg = /[^\dxX]/g
+      this.paymentInfo.idNumber = String(value || '').replace(reg, '')
+    },
+
+    /**
+     * 获取图片类型
+     */
+    getImageType(index) {
+      const types = ['正面', '反面', '侧面', '扣子', '编号']
+      return types[index] || `细节${index - 4}`
+    },
+
+    /**
+     * 触摸开始
+     */
+    onTouchStart(event, index) {
+      if (this.draggingIndex !== -1) return
+      this.draggingIndex = index
+      const touch = event.touches[0]
+      this.startX = touch.clientX
+      this.startY = touch.clientY
+      this.currentX = touch.clientX
+      this.currentY = touch.clientY
+    },
+
+    /**
+     * 触摸移动
+     */
+    onTouchMove(event, index) {
+      if (this.draggingIndex === -1 || this.draggingIndex !== index) return
+      const touch = event.touches[0]
+      this.currentX = touch.clientX
+      this.currentY = touch.clientY
+      this.findTargetIndex(touch.clientX, touch.clientY)
+    },
+
+    /**
+     * 触摸结束
+     */
+    async onTouchEnd() {
+      if (this.draggingIndex === -1) return
+
+      if (this.canDropIndex !== -1 && this.canDropIndex !== this.draggingIndex) {
+        // 交换位置
+        const images = [...this.detailImages]
+        const temp = images[this.draggingIndex]
+        images[this.draggingIndex] = images[this.canDropIndex]
+        images[this.canDropIndex] = temp
+        this.detailImages = images
+      }
+
+      this.resetDragState()
+
+      //每次拖拽结束后把新的顺序传送给接口
+      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)
+    },
+
+    /**
+     * 查找目标索引
+     */
+    findTargetIndex(x, y) {
+      const query = uni.createSelectorQuery().in(this)
+      query.selectAll('.detail-image-item').boundingClientRect((rects) => {
+        if (!rects || rects.length === 0) return
+        let targetIndex = -1
+        for (let i = 0; i < rects.length; i++) {
+          if (i === this.draggingIndex) continue
+          const rect = rects[i]
+          if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+            targetIndex = i
+            break
+          }
+        }
+        this.canDropIndex = targetIndex
+      }).exec()
+    },
+
+    /**
+     * 重置拖拽状态
+     */
+    resetDragState() {
+      this.draggingIndex = -1
+      this.canDropIndex = -1
+      this.startX = 0
+      this.startY = 0
+      this.currentX = 0
+      this.currentY = 0
+    },
+
+    /**
+     * 上传图片
+     */
+    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()
+
+        //上传新图片完成之后也要把新数据给接口
+        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 handleHideImage(item, index) {
+      const itemIndex = this.detailImages.findIndex(img => img.id === item.id || img.fileUrl === item.fileUrl)
+      if (itemIndex !== -1) {
+        this.detailImages.splice(itemIndex, 1)
+
+        // 更新 fileIds
+        const fileIds = this.detailImages.map(item => item.id).join(',')
+        try {
+          await uni.$u.api.updateReceiptForm({
+            id: this.currentReceipt.id,
+            fileIds: fileIds
+          })
+          this.$emit('update-file-ids', fileIds)
+          uni.$u.toast('图片已隐藏')
+        } catch (error) {
+          console.error('更新失败:', error)
+        }
+      }
+    },
+
+    /**
+     * 预览图片
+     */
+    previewImageDetail(src) {
+      const urlList = this.detailImages.map(item => item.fileUrl)
+      uni.previewImage({
+        urls: urlList,
+        current: src
+      })
+    },
+
+    /**
+     * 未收点击
+     */
+    handleUnpaidClick() {
+      this.unpaidModalVisible = true
+    },
+
+    /**
+     * 待跟进点击
+     */
+    handleFollowUpClick() {
+      this.followUpModalVisible = true
+    },
+
+    /**
+     * 立即支付点击
+     */
+    async handlePayNowClick() {
+      // 保存支付信息
+      await uni.$u.api.updateReceiptForm({
+        id: this.currentReceipt.id,
+        tableFee: this.paymentAmount,
+        fileIds: this.detailImages.map(item => item.id).join(',')
+      })
+
+      await uni.$u.api.updateClueOrderForm({
+        id: this.orderDetail.id,
+        customName: this.paymentInfo.customName || '',
+        bankName: this.paymentInfo.bankName || '',
+        bankCardNumber: this.paymentInfo.bankAccount || '',
+        idCard: this.paymentInfo.idNumber || '',
+        // paymentMethod: this.paymentMethod || ''
+      })
+
+      if (!this.paymentInfo.customName || !this.paymentInfo.bankName ||
+        !this.paymentInfo.bankAccount || !this.paymentInfo.idNumber || !this.paymentMethod) {
+        uni.$u.toast('请填写完整的支付信息')
+        return
+      }
+      if (this.paymentAmount <= 0) {
+        uni.$u.toast('请填写正确的支付总额')
+        return
+      }
+
+      //判断当前账号是否敏感地区
+      if (String(this.paymentInfo.idNumber).startsWith('430481')) {
+        this.riskWarningModalVisible = true
+        return
+      }
+
+      this.payNowModalVisible = true
+    },
+
+    /**
+     * 确认风险警示
+     */
+    confirmRiskWarning() {
+      this.riskWarningModalVisible = false
+      this.payNowModalVisible = true
+    },
+
+    /**
+     * 确认转账
+     */
+    async confirmTransfer() {
+      this.payNowModalVisible = false
+
+      await uni.$u.api.updateClueOrderForm({
+        id: this.orderDetail.id,
+        paymentMethod: this.paymentMethod || ''
+      })
+      //如果是小葫芦线上刚支付就调用接口，如果不是小葫芦线上支付就不要调用接口，直接点击下一步
+      if (this.paymentMethod === '小葫芦线上支付') {
+        this.$emit('confirm-pay')
+      } else {
+        this.handleNext()
+      }
+    },
+
+    /**
+     * 确认未收
+     */
+    async confirmUnpaid() {
+      try {
+        await uni.$u.api.addOrderFollow({
+          orderId: this.orderId,
+          content: `未收评分_${this.unpaidRating}`
+        })
+        await uni.$u.api.oderForm({
+          status: '4',
+          id: this.orderId
+        })
+        uni.$u.toast('提交未收评级成功')
+        this.unpaidModalVisible = false
+      } catch (error) {
+        console.error('提交失败:', error)
+        uni.$u.toast('提交失败')
+      }
+    },
+
+    /**
+     * 确认跟进
+     */
+    async confirmFollowUp() {
+      try {
+        await uni.$u.api.addOrderFollow({
+          orderId: this.orderId,
+          content: `待跟进_${this.followUpNotes}`
+        })
+        uni.$u.toast('提交待跟进记录成功')
+        this.followUpModalVisible = false
+        this.followUpNotes = ''
+      } catch (error) {
+        console.error('提交失败:', error)
+        uni.$u.toast('提交失败')
+      }
+    },
+
+    /**
+     * 下一步
+     */
+    async handleNext() {
+      await uni.$u.api.updateReceiptForm({
+        id: this.currentReceipt.id,
+        tableFee: this.paymentAmount,
+        fileIds: this.detailImages.map(item => item.id).join(',')
+      })
+
+      await uni.$u.api.updateClueOrderForm({
+        id: this.orderDetail.id,
+        customName: this.paymentInfo.customName || '',
+        bankName: this.paymentInfo.bankName || '',
+        bankCardNumber: this.paymentInfo.bankAccount || '',
+        idCard: this.paymentInfo.idNumber || ''
+      })
+
+      this.$emit('save', {
+        nowPage: 'formThree',
+        form: {
+          ...this.paymentInfo
+        },
+        fileIds: this.detailImages.map(item => item.id).join(',')
+      })
+
+      this.$emit('next', {
+        nowPage: 'formThree',
+        form: {
+          ...this.paymentInfo
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../styles/common.scss';
+
+.page-three-container {
+  @extend .page-container;
+  padding-bottom: 100rpx;
+}
+
+.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;
+  display: block;
+}
+
+.info-input {
+  border-radius: 8rpx;
+  border: 1rpx solid #e5e7eb;
+  padding: 12rpx 16rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.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);
+}
+
+.detail-image-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+  position: relative;
+}
+
+.detail-image-item {
+  position: relative;
+  width: 200rpx;
+  height: 200rpx;
+  touch-action: none;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  z-index: 1;
+  box-sizing: border-box;
+
+  &.dragging {
+    opacity: 0.6;
+    transform: scale(1.05);
+    z-index: 999;
+    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
+  }
+
+  &.can-drop {
+    outline: 2rpx dashed #108cff;
+    outline-offset: -2rpx;
+    background-color: rgba(16, 140, 255, 0.1);
+    border-radius: 8rpx;
+  }
+}
+
+.image-type-tag {
+  position: absolute;
+  top: 10rpx;
+  left: 10rpx;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  padding: 5rpx 10rpx;
+  border-radius: 12rpx;
+  font-size: 22rpx;
+  z-index: 1;
+}
+
+.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;
+}
+
+.payment-card {
+  margin-top: 20rpx;
+}
+
+.payment-section {
+  padding: 20rpx;
+}
+
+.payment-total-container {
+  background-color: #f5f7fa;
+  border: 2rpx solid #e5e7eb;
+  border-radius: 12rpx;
+  padding: 0rpx 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24rpx;
+}
+
+.payment-label {
+  font-size: 36rpx;
+  font-weight: 700;
+  min-width: 140rpx;
+}
+
+.payment-amount {
+  font-size: 48rpx;
+  font-weight: 600;
+  color: #f53f3f;
+  width: auto;
+  min-width: 150rpx;
+  border: none;
+  text-align: right !important;
+}
+
+.payment-buttons-row {
+  display: flex;
+  gap: 20rpx;
+  margin-bottom: 24rpx;
+}
+
+.payment-button {
+  flex: 1;
+  border-radius: 12rpx;
+  padding: 5rpx 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f7fa;
+  border: 2rpx solid #e5e7eb;
+  cursor: pointer;
+  gap: 12rpx;
+}
+
+.pay-now-button {
+  width: 100%;
+  border-radius: 12rpx;
+  padding: 32rpx 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #108cff;
+  color: #fff;
+  cursor: pointer;
+  box-shadow: 0 4rpx 12rpx rgba(16, 140, 255, 0.2);
+}
+
+.button-text {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: inherit;
+}
+
+.modal-content {
+  width: 100%;
+  padding: 40rpx 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.payment-amount-display {
+  font-size: 64rpx;
+  font-weight: bold;
+  color: #108cff;
+  text-align: center;
+  margin-bottom: 40rpx;
+  width: 100%;
+}
+
+.payment-info-section {
+  width: 100%;
+  background-color: #f5f7fa;
+  border: 2rpx solid #e5e7eb;
+  border-radius: 12rpx;
+  padding: 30rpx 20rpx;
+  margin-bottom: 40rpx;
+}
+
+.info-item {
+  display: flex;
+  margin-bottom: 20rpx;
+  align-items: center;
+  justify-content: space-between;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.next-btn {
+  position: fixed;
+  bottom: 10rpx;
+  left: 2.5%;
+  width: 95%;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  border-radius: 20rpx;
+  z-index: 1000;
+}
+</style>

pages/orderDetailRefactored/components/PageTwo.vue

@@ -0,0 +1,767 @@
+<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>
+              <input 
+                type="number" 
+                v-model="approvedPrice" 
+                class="price-input" 
+                placeholder="0" 
+                min="0"
+                @input="onPriceInput" 
+              />
+            </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
+    },
+
+    /**
+     * 快速调整价格
+     */
+    quickChangePrice(amount) {
+      let newPrice = this.approvedPrice + amount
+      newPrice = Math.max(0, newPrice)
+      this.approvedPrice = newPrice
+    },
+
+    /**
+     * 上传图片（跟进清单）
+     */
+    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;
+}
+
+.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-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  text-align: right;
+  font-size: 48rpx;
+  font-weight: 600;
+  padding: 0 10rpx;
+}
+
+.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/orderDetailRefactored/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/orderDetailRefactored/index.vue

@@ -0,0 +1,439 @@
+<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" />
+
+    <!-- 加一单模态窗 -->
+    <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 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/orderDetailRefactored/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/orderDetailRefactored/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'
+        })
+      }
+    })
+  }
+}

pages/orderForm/index.vue

@@ -126,6 +126,7 @@ import orderFileUpload from '@/components/order-file-upload/order-file-upload.vu
 import dateTimePicker from "@/components/dateTimePicker/dateTimePicker.vue"
 import ldSelect from "@/components/ld-select/ld-select.vue"
 import BrandSelect from "@/components/brand-select/brand-select.vue"
+const CHINA_REGIONS = require('@/components/pick-regions/regions.json')
 export default {
 	components: {
 		orderFileUpload,
@@ -289,7 +290,173 @@ export default {
 		},
 
 		// 地址失焦时自动解析地址信息
-		handleAddressBlur() {
+		async handleAddressBlur() {
+			if (!this.form.address || !this.form.address.trim()) {
+				return;
+			}
+			
+			const address = this.form.address.trim();
+			const parsedRegion = this.parseAddress(address);
+			
+			if (parsedRegion && parsedRegion.province) {
+				this.form.province = parsedRegion.province;
+				this.form.city = parsedRegion.city || '';
+				this.form.area = parsedRegion.area || '';
+				// 更新 defaultRegion，用于更新 pick-regions 组件的显示
+				this.defaultRegion = [
+					parsedRegion.province,
+					parsedRegion.city || '',
+					parsedRegion.area || ''
+				];
+			}
+		},
+		
+		// 基于地址字典解析地址，提取省市区信息
+		parseAddress(address) {
+			if (!address || !CHINA_REGIONS || CHINA_REGIONS.length === 0) {
+				return null;
+			}
+			
+			let bestMatch = null;
+			let bestMatchScore = 0; // 匹配分数：完整匹配得分更高
+			
+			// 遍历所有省份
+			for (const province of CHINA_REGIONS) {
+				const provinceName = province.name;
+				// 移除可能的"省"、"市"、"自治区"、"特别行政区"等后缀进行匹配
+				const provinceNameShort = provinceName.replace(/省|市|自治区|特别行政区|壮族自治区|维吾尔自治区|回族自治区/g, '');
+				
+				// 检查地址中是否包含省份名称
+				const hasProvinceFull = address.includes(provinceName);
+				const hasProvinceShort = address.includes(provinceNameShort);
+				
+				if (hasProvinceFull || hasProvinceShort) {
+					// 找到省份在地址中的位置
+					const provinceIndex = hasProvinceFull 
+						? address.indexOf(provinceName) 
+						: address.indexOf(provinceNameShort);
+					
+					if (provinceIndex === -1) continue;
+					
+					// 获取省份后的剩余地址
+					const provinceMatchLength = hasProvinceFull ? provinceName.length : provinceNameShort.length;
+					const remainingAfterProvince = address.substring(provinceIndex + provinceMatchLength);
+					
+					// 直辖市特殊处理
+					const municipalities = ['北京市', '上海市', '天津市', '重庆市'];
+					if (municipalities.includes(provinceName)) {
+						// 直辖市：市名就是省名，直接查找区/县
+						const cityName = provinceName;
+						let matchedArea = null;
+						let maxAreaLength = 0;
+						
+						// 遍历该省份下的所有市（通常是"市辖区"）
+						if (province.childs && province.childs.length > 0) {
+							for (const city of province.childs) {
+								// 遍历该市下的所有区/县
+								if (city.childs && city.childs.length > 0) {
+									for (const area of city.childs) {
+										const areaName = area.name;
+										// 检查剩余地址中是否包含区/县名称
+										if (remainingAfterProvince.includes(areaName)) {
+											// 找到最长的匹配（更准确）
+											if (areaName.length > maxAreaLength) {
+												maxAreaLength = areaName.length;
+												matchedArea = areaName;
+											}
+										}
+									}
+								}
+							}
+						}
+						
+						// 计算匹配分数：有区/县得3分，只有省市区得2分
+						const matchScore = matchedArea ? 3 : 2;
+						if (matchScore > bestMatchScore) {
+							bestMatchScore = matchScore;
+							bestMatch = {
+								province: provinceName,
+								city: cityName,
+								area: matchedArea || ''
+							};
+							// 如果找到了完整的省市区，可以提前返回
+							if (matchedArea) {
+								return bestMatch;
+							}
+						}
+						continue;
+					}
+					
+					// 非直辖市：查找市
+					if (province.childs && province.childs.length > 0) {
+						for (const city of province.childs) {
+							const cityName = city.name;
+							// 移除可能的"市"、"州"、"盟"、"地区"、"自治州"等后缀
+							const cityNameShort = cityName.replace(/市|州|盟|地区|自治州/g, '');
+							
+							// 检查剩余地址中是否包含市名称
+							const hasCityFull = remainingAfterProvince.includes(cityName);
+							const hasCityShort = remainingAfterProvince.includes(cityNameShort);
+							
+							if (hasCityFull || hasCityShort) {
+								const cityIndex = hasCityFull
+									? remainingAfterProvince.indexOf(cityName)
+									: remainingAfterProvince.indexOf(cityNameShort);
+								
+								if (cityIndex === -1) continue;
+								
+								// 获取市后的剩余地址
+								const cityMatchLength = hasCityFull ? cityName.length : cityNameShort.length;
+								const remainingAfterCity = remainingAfterProvince.substring(cityIndex + cityMatchLength);
+								
+								// 查找区/县
+								let matchedArea = null;
+								let maxAreaLength = 0;
+								if (city.childs && city.childs.length > 0) {
+									for (const area of city.childs) {
+										const areaName = area.name;
+										// 检查剩余地址中是否包含区/县名称
+										if (remainingAfterCity.includes(areaName)) {
+											// 找到最长的匹配（更准确）
+											if (areaName.length > maxAreaLength) {
+												maxAreaLength = areaName.length;
+												matchedArea = areaName;
+											}
+										}
+									}
+								}
+								
+								// 计算匹配分数：完整省市区得3分，只有省市得2分
+								const matchScore = matchedArea ? 3 : 2;
+								if (matchScore > bestMatchScore) {
+									bestMatchScore = matchScore;
+									bestMatch = {
+										province: provinceName,
+										city: cityName,
+										area: matchedArea || ''
+									};
+									// 如果找到了完整的省市区，可以提前返回
+									if (matchedArea) {
+										return bestMatch;
+									}
+								}
+							}
+						}
+					}
+					
+					// 如果只找到了省份，也记录（得分1分）
+					if (!bestMatch || bestMatchScore < 1) {
+						bestMatch = {
+							province: provinceName,
+							city: '',
+							area: ''
+						};
+						bestMatchScore = 1;
+					}
+				}
+			}
+			
+			return bestMatch;
 		},
 
 		// 更新各类附件

pages/person/index.vue

@@ -42,11 +42,11 @@
 							<image src="@/static/parson/icon-myMessage.png" mode=""></image>
 							<text>我的消息</text>
 						</navigator>
-						<navigator url='/pages/pagereceivecenter/pagereceivecenter' open-type="navigate"
+						<!-- <navigator url='/pages/order/index' open-type="navigate"
 							class="menu_item" hover-class="none">
 							<image src="@/static/parson/icon-mycase.png" mode=""></image>
 							<text>接单中心</text>
-						</navigator>
+						</navigator> -->
 						<navigator url='/pages/privateClue/index' open-type="switchTab" class="menu_item"
 							hover-class="none">
 							<image src="@/static/parson/clue.png" mode=""></image>

pages/uploadRecord/index.vue

@@ -7,17 +7,17 @@
 		</u-navbar>
 		<view class="form_wrap">
 			<u--form labelPosition="left" labelWidth="80" :model="form" :rules="rules" ref="form" class="form_wrap">
-				
+
 				<u-form-item label="线索id">
-					{{clueDetail && clueDetail.id ? clueDetail.id : "-"}}
+					{{ clueDetail && clueDetail.id ? clueDetail.id : "-" }}
 				</u-form-item>
-				
+
 				<u-form-item label="线索名称">
-					{{clueDetail && clueDetail.name ? clueDetail.name : "-"}}
+					{{ clueDetail && clueDetail.name ? clueDetail.name : "-" }}
 				</u-form-item>
-				
+
 				<u-form-item label="操作人">
-					{{userInfo.nickName}}
+					{{ userInfo.nickName }}
 				</u-form-item>
 
 				<u-form-item label="主叫号码" prop="caller">
@@ -40,14 +40,14 @@
 				</u-form-item>
 			</u--form>
 		</view>
-		
+
 		<!-- 录音确认对话框 -->
 		<u-popup :show="showConfirmDialog" mode="center" :closeable="false" :closeOnClickOverlay="false">
 			<view class="confirm-dialog">
 				<view class="dialog-title">确认录音</view>
 				<view class="dialog-content">
 					<view class="file-info">
-						<view class="file-name">{{selectedFile.fileName}}</view>
+						<view class="file-name">{{ selectedFile.fileName }}</view>
 					</view>
 					<view class="play-section">
 						<audio :src="selectedFile.filePath" controls class="audio-player"></audio>
@@ -59,226 +59,226 @@
 				</view>
 			</view>
 		</u-popup>
-		
+
 		<!-- <drag-button :isDock="true" /> -->
 	</view>
 </template>
 
 <script>
-	export default {
-		computed: {
-			userInfo() {
-				return this.$store.state.user.userInfo;
-			},
-			filelist(){
-				return this.$store.state.call.filelist;
-			},
-			storeForm() {
-				return this.$store.state.call.form;
-			},
+export default {
+	computed: {
+		userInfo() {
+			return this.$store.state.user.userInfo;
 		},
-		data() {
-			return {
-				rules: {
-					'caller': {
-						type: 'string',
-						required: true,
-						message: '请输入内容',
-						trigger: ['blur', 'change']
-					},
-					'callee': {
-						type: 'string',
-						required: true,
-						message: '请输入内容',
-						trigger: ['blur', 'change']
-					},
-					'fileUrl': {
-						type: 'string',
-						required: true,
-						message: '请输入内容',
-						trigger: ['blur', 'change']
-					},
+		filelist() {
+			return this.$store.state.call.filelist;
+		},
+		storeForm() {
+			return this.$store.state.call.form;
+		},
+	},
+	data() {
+		return {
+			rules: {
+				'caller': {
+					type: 'string',
+					required: true,
+					message: '请输入内容',
+					trigger: ['blur', 'change']
 				},
-				form: {
-					clueId: undefined,
-					remark: '',
-					fileUrl : undefined,
-					fileName : undefined,
-					type : '3',
-					list : [],
-					caller : '',
-					callee : ''
+				'callee': {
+					type: 'string',
+					required: true,
+					message: '请输入内容',
+					trigger: ['blur', 'change']
 				},
-				clueDetail : {},
-				// 对话框相关状态
-				showConfirmDialog: false,
-				selectedFile: {
-					filePath: '',
-					fileName: ''
+				'fileUrl': {
+					type: 'string',
+					required: true,
+					message: '请输入内容',
+					trigger: ['blur', 'change']
 				},
-			}
-		},
-		methods: {
-			initFormFromStore() {
-				const storeFormData = this.storeForm;
-				this.form = {
-					...this.form,
-					caller: storeFormData.caller || '',
-					callee: storeFormData.callee || '',
-					fileUrl: storeFormData.fileUrl,
-					fileName: storeFormData.fileName,
-					remark: storeFormData.remark,
-					type: storeFormData.type,
-					list: storeFormData.list
-				};
-				
-				uni.$u.api.getClueMainInfoById({id : this.form.clueId}).then(({data})=>{
-					this.clueDetail = data;
-				})
-				
-				if(!this.form.callee){
-					// 没有准备被叫号码 直接去查线索的telephone
-					this.form.callee = this.clueDetail.telephone;
-				};
-				if(!this.form.caller){
-					// 没有准备主叫号码 直接去尝试获取
-					this.$store.dispatch("call/getUserPhoneNumber").then(phone=>{
-						this.form.caller = phone;
-					})
-				}
-				if(storeFormData.fileUrl){
-					// 初始化带了fileUrl 说明是从监听那边跳转的
-					this.handleFileChange({ filePath : storeFormData.fileUrl , fileName : storeFormData.fileName });
-				}
-				this.$store.dispatch("call/resetForm");
 			},
-			
-			handleFileChange(file){
-				// {
-				    // "filePath": "/storage/emulated/0/Recordings/Record/Call/15099989786 2025-11-11 09-41-57.m4a",
-				    // "fileName": "15099989786 2025-11-11 09-41-57.m4a"
-				// }
-				
-				const {filePath ,  fileName} = file;
-				
-				// 显示确认对话框
-				this.selectedFile = { filePath, fileName };
-				this.showConfirmDialog = true;
+			form: {
+				clueId: undefined,
+				remark: '',
+				fileUrl: undefined,
+				fileName: undefined,
+				type: '3',
+				list: [],
+				caller: '',
+				callee: ''
 			},
-			
-			// 取消确认
-			cancelConfirm() {
-				this.showConfirmDialog = false;
-				this.selectedFile = { filePath: '', fileName: '' };
-				this.form.fileUrl = undefined;
-				this.form.fileName = undefined;
-			},
-			
-			// 确认上传
-			async confirmUpload() {
-				try {
-					// 调用上传接口
-					const result = await uni.$u.api.uploadFile(this.selectedFile.filePath);
-					if (result && result.data) {
-						result.data.remark = this.form.remark;
-						result.data.fileName = result.data.name;
-						result.data.fileUrl = result.data.url;
-						this.form.list = [result.data];
-					}
-					// 设置表单值
-					this.form.fileUrl = this.selectedFile.filePath;
-					this.form.fileName = this.selectedFile.fileName;
-					
-					// 关闭对话框
-					this.showConfirmDialog = false;
-				} catch (error) {
-					uni.hideLoading();
-					console.error('上传失败:', error);
-					uni.$u.toast('上传失败，请重试');
-				}
+			clueDetail: {},
+			// 对话框相关状态
+			showConfirmDialog: false,
+			selectedFile: {
+				filePath: '',
+				fileName: ''
 			},
-			
-			handleNavSaveClick() {
-				if(!this.form.clueId){
-					uni.$u.toast("相关线索id为空");
-				}
-				this.$refs.form.validate().then(async () => {
-					await uni.$u.api.saveClueFile(this.form);
-					uni.$u.toast("保存成功");
-					this.timer = setTimeout(() => {
-						uni.$emit('uploadRecordSuccess');
-						uni.navigateBack();
-						clearTimeout(this.timer);
-					}, 1000)
+		}
+	},
+	methods: {
+		initFormFromStore() {
+			const storeFormData = this.storeForm;
+			this.form = {
+				...this.form,
+				caller: storeFormData.caller || '',
+				callee: storeFormData.callee || '',
+				fileUrl: storeFormData.fileUrl,
+				fileName: storeFormData.fileName,
+				remark: storeFormData.remark,
+				type: storeFormData.type,
+				list: storeFormData.list
+			};
+
+			uni.$u.api.getClueMainInfoById({ id: this.form.clueId }).then(({ data }) => {
+				this.clueDetail = data;
+			})
+
+			if (!this.form.callee) {
+				// 没有准备被叫号码 直接去查线索的telephone
+				this.form.callee = this.clueDetail.telephone;
+			};
+			if (!this.form.caller) {
+				// 没有准备主叫号码 直接去尝试获取
+				this.$store.dispatch("call/getUserPhoneNumber").then(phone => {
+					this.form.caller = phone;
 				})
-			},
+			}
+			if (storeFormData.fileUrl) {
+				// 初始化带了fileUrl 说明是从监听那边跳转的
+				this.handleFileChange({ filePath: storeFormData.fileUrl, fileName: storeFormData.fileName });
+			}
+			this.$store.dispatch("call/resetForm");
 		},
-		onLoad(option) {
-			this.$store.dispatch("call/getFileList");
-			this.form.clueId = option.clueId;
-			this.initFormFromStore();
+
+		handleFileChange(file) {
+			// {
+			// "filePath": "/storage/emulated/0/Recordings/Record/Call/15099989786 2025-11-11 09-41-57.m4a",
+			// "fileName": "15099989786 2025-11-11 09-41-57.m4a"
+			// }
+
+			const { filePath, fileName } = file;
+
+			// 显示确认对话框
+			this.selectedFile = { filePath, fileName };
+			this.showConfirmDialog = true;
 		},
-	}
+
+		// 取消确认
+		cancelConfirm() {
+			this.showConfirmDialog = false;
+			this.selectedFile = { filePath: '', fileName: '' };
+			this.form.fileUrl = undefined;
+			this.form.fileName = undefined;
+		},
+
+		// 确认上传
+		async confirmUpload() {
+			try {
+				// 调用上传接口
+				const result = await uni.$u.api.uploadFile(this.selectedFile.filePath);
+				if (result && result.data) {
+					result.data.remark = this.form.remark;
+					result.data.fileName = result.data.name;
+					result.data.fileUrl = result.data.url;
+					this.form.list = [result.data];
+				}
+				// 设置表单值
+				this.form.fileUrl = this.selectedFile.filePath;
+				this.form.fileName = this.selectedFile.fileName;
+
+				// 关闭对话框
+				this.showConfirmDialog = false;
+			} catch (error) {
+				uni.hideLoading();
+				console.error('上传失败:', error);
+				uni.$u.toast('上传失败，请重试');
+			}
+		},
+
+		handleNavSaveClick() {
+			if (!this.form.clueId) {
+				uni.$u.toast("相关线索id为空");
+			}
+			this.$refs.form.validate().then(async () => {
+				await uni.$u.api.saveClueFile(this.form);
+				uni.$u.toast("保存成功");
+				this.timer = setTimeout(() => {
+					uni.$emit('uploadRecordSuccess');
+					uni.navigateBack();
+					clearTimeout(this.timer);
+				}, 1000)
+			})
+		},
+	},
+	onLoad(option) {
+		this.$store.dispatch("call/getFileList");
+		this.form.clueId = option.clueId;
+		this.initFormFromStore();
+	},
+}
 </script>
 
 <style lang="scss" scoped>
-	.form_wrap {
-		background-color: #fff;
-		margin: 20rpx 0;
+.form_wrap {
+	background-color: #fff;
+	margin: 20rpx 0;
 
-		.form_wrap {
-			::v-deep .u-form-item__body {
-				padding: 20rpx 40rpx;
-			}
+	.form_wrap {
+		::v-deep .u-form-item__body {
+			padding: 20rpx 40rpx;
 		}
 	}
-	
-	/* 录音确认对话框样式 */
-	.confirm-dialog {
-		padding: 40rpx;
-		min-width: 500rpx;
-		background: #fff;
-		border-radius: 20rpx;
-		
-		.dialog-title {
-			text-align: center;
-			font-size: 32rpx;
-			font-weight: bold;
-			color: #333;
-			margin-bottom: 40rpx;
-		}
-		
-		.dialog-content {
-			margin-bottom: 40rpx;
-			
-			.file-info {
-				margin-bottom: 30rpx;
-				
-				.file-name {
-					background: #f5f5f5;
-					padding: 20rpx;
-					border-radius: 10rpx;
-					font-size: 28rpx;
-					color: #333;
-					word-break: break-all;
-					text-align: center;
-				}
-			}
-			
-			.play-section {
-				.audio-player {
-					width: 100%;
-				}
+}
+
+/* 录音确认对话框样式 */
+.confirm-dialog {
+	padding: 40rpx;
+	min-width: 500rpx;
+	background: #fff;
+	border-radius: 20rpx;
+
+	.dialog-title {
+		text-align: center;
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333;
+		margin-bottom: 40rpx;
+	}
+
+	.dialog-content {
+		margin-bottom: 40rpx;
+
+		.file-info {
+			margin-bottom: 30rpx;
+
+			.file-name {
+				background: #f5f5f5;
+				padding: 20rpx;
+				border-radius: 10rpx;
+				font-size: 28rpx;
+				color: #333;
+				word-break: break-all;
+				text-align: center;
 			}
 		}
-		
-		.dialog-buttons {
-			display: flex;
-			gap: 30rpx;
-			
-			::v-deep .u-button {
-				flex: 1;
+
+		.play-section {
+			.audio-player {
+				width: 100%;
 			}
 		}
 	}
+
+	.dialog-buttons {
+		display: flex;
+		gap: 30rpx;
+
+		::v-deep .u-button {
+			flex: 1;
+		}
+	}
+}
 </style>