feat: 新增订单详情重构页面及相关组件

pages.json

@@ -258,6 +258,14 @@
 			}
 		},
 		{
+			"path": "pages/orderDetailRefactored/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
 			"path": "pages/receiptForm/index",
 			"style": {
 				"navigationBarTitleText": "",

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

@@ -0,0 +1,306 @@
+<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"
+      />
+    </view>
+    
+    <view 
+      class="page-item" 
+      v-show="activeIndex === 2"
+    >
+      <PageThree 
+        :order-detail="orderDetail" 
+        :order-id="orderId"
+        :current-receipt="currentReceipt"
+        @next="handleNext"
+        @save="handleSave"
+        @confirm-pay="handleConfirmPay"
+        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()
+      }
+    }
+  }
+}
+</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/PageOne.vue

@@ -0,0 +1,601 @@
+<template>
+  <view class="page-one-container">
+    <!-- 图片资料标题 -->
+    <view class="page-header">
+      <text class="page-title">图片资料</text>
+      <u-button 
+        size="small" 
+        @click="handleSaveAllImages"
+        class="save-all-btn"
+      >
+        保存实物图
+      </u-button>
+    </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>
+      </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>
+    </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="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 imageUpload from '../utils/imageUpload.js'
+
+export default {
+  name: 'PageOne',
+  components: {
+    PicComp,
+    soundRecorder
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => ({})
+    },
+    orderId: {
+      type: String,
+      default: ''
+    },
+    currentReceipt: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      recordType: 'chat', // 'chat' | 'call'
+      chatRecordsList: [],
+      truePicList: [],
+      soundRecordList: []
+    }
+  },
+  watch: {
+    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
+      })
+    },
+
+    /**
+     * 保存全部图片
+     */
+    async handleSaveAllImages() {
+      const allUrls = this.truePicList.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)
+          }
+        }
+      })
+    },
+
+    /**
+     * 电话点击
+     */
+    handlePhoneClick() {
+      if (!this.orderDetail.phone) {
+        uni.showToast({
+          title: '该订单暂时没有电话号码',
+          icon: 'none'
+        })
+        return
+      }
+      
+      uni.makePhoneCall({
+        phoneNumber: this.orderDetail.phone,
+        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;
+  border-bottom: 1rpx solid map-get($colors, border);
+  display: flex;
+  align-items: center;
+  
+  text {
+    padding: 0 10rpx;
+    cursor: pointer;
+    
+    &.active {
+      color: map-get($colors, primary);
+      font-weight: bold;
+    }
+  }
+  
+  .divider {
+    margin: 0 10rpx;
+    color: #ddd;
+  }
+}
+
+.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;
+}
+
+.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;
+}
+</style>

pages/orderDetailRefactored/components/PageThree.vue

@@ -0,0 +1,865 @@
+<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" 
+          />
+        </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" 
+          />
+        </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" 
+          />
+        </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 detailImages.slice(0, 6)" 
+              :key="`detail-${index}`"
+              class="detail-image-item"
+              :class="{
+                'dragging': draggingIndex === index,
+                'can-drop': canDropIndex === index
+              }"
+              @touchstart.stop="onTouchStart($event, index)"
+              @touchmove.stop="onTouchMove($event)"
+              @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 
+      :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,
+      // 模态窗
+      unpaidModalVisible: false,
+      followUpModalVisible: false,
+      payNowModalVisible: false,
+      unpaidRating: 0,
+      followUpNotes: ''
+    }
+  },
+  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
+        )
+        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 = ''
+      }
+    },
+
+    /**
+     * 银行名称输入处理
+     */
+    handleBankNameInput() {
+      const strValue = String(this.paymentInfo.bankName || '')
+      const reg = /[0-9]/g
+      this.paymentInfo.bankName = strValue.replace(reg, '')
+    },
+
+    /**
+     * 获取图片类型
+     */
+    getImageType(index) {
+      const types = ['正面', '反面', '侧面', '扣子', '编号']
+      return types[index] || `细节${index - 4}`
+    },
+
+    /**
+     * 触摸开始
+     */
+    onTouchStart(event, index) {
+      if (this.draggingIndex !== -1) return
+      this.draggingIndex = index
+      this.startX = event.touches[0].clientX
+      this.startY = event.touches[0].clientY
+    },
+
+    /**
+     * 触摸移动
+     */
+    onTouchMove(event) {
+      if (this.draggingIndex === -1) return
+      const moveX = event.touches[0].clientX
+      const moveY = event.touches[0].clientY
+      this.findTargetIndex(moveX, moveY)
+    },
+
+    /**
+     * 触摸结束
+     */
+    onTouchEnd() {
+      if (this.draggingIndex === -1) return
+      
+      if (this.canDropIndex !== -1 && this.canDropIndex !== this.draggingIndex) {
+        const temp = this.detailImages[this.draggingIndex]
+        this.detailImages[this.draggingIndex] = this.detailImages[this.canDropIndex]
+        this.detailImages[this.canDropIndex] = temp
+      }
+      
+      this.resetDragState()
+    },
+
+    /**
+     * 查找目标索引
+     */
+    findTargetIndex(x, y) {
+      const query = uni.createSelectorQuery().in(this)
+      query.selectAll('.detail-image-item').boundingClientRect(rects => {
+        let targetIndex = -1
+        for (let i = 0; i < rects.length; i++) {
+          if (i === this.draggingIndex) continue
+          const rect = rects[i]
+          if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+            targetIndex = i
+            break
+          }
+        }
+        this.canDropIndex = targetIndex
+      }).exec()
+    },
+
+    /**
+     * 重置拖拽状态
+     */
+    resetDragState() {
+      this.draggingIndex = -1
+      this.canDropIndex = -1
+      this.startX = 0
+      this.startY = 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
+        )
+        this.loadDetailImages()
+      } catch (error) {
+        console.error('上传失败:', error)
+      }
+    },
+
+    /**
+     * 隐藏图片
+     */
+    handleHideImage(item, index) {
+      const itemIndex = this.detailImages.findIndex(img => img.fileUrl === item.fileUrl)
+      if (itemIndex !== -1) {
+        this.detailImages.splice(itemIndex, 1)
+        uni.$u.toast('图片已隐藏')
+      }
+    },
+
+    /**
+     * 预览图片
+     */
+    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
+      }
+
+      this.payNowModalVisible = true
+    },
+
+    /**
+     * 确认转账
+     */
+    confirmTransfer() {
+      this.payNowModalVisible = false
+      this.$emit('confirm-pay')
+    },
+
+    /**
+     * 确认未收
+     */
+    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;
+}
+
+.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: all 0.2s ease;
+  z-index: 1;
+  cursor: move;
+  
+  &.dragging {
+    opacity: 0.5;
+    transform: scale(1.05);
+    z-index: 100;
+  }
+  
+  &.can-drop {
+    border: 2rpx dashed #108cff;
+    background-color: rgba(16, 140, 255, 0.1);
+  }
+}
+
+.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;
+}
+</style>

pages/orderDetailRefactored/components/PageTwo.vue

@@ -0,0 +1,702 @@
+<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"
+              >
+                <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"
+              >
+                <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
+        )
+        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
+        )
+        this.loadDetailImages()
+      } 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.loadDetailImages()
+            } 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
+      })
+    },
+
+    /**
+     * 下一步
+     */
+    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;
+}
+
+.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,403 @@
+<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">
+        <u-button 
+          type="primary" 
+          plain 
+          @click="showBrandSelector = true"
+          class="brand-select-btn"
+        >
+          {{ currentAddBrand.dictLabel || '点击请选择品牌' }}
+        </u-button>
+      </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: {},
+      // 模态窗配置
+      modalConfig: {
+        title: '',
+        value: '',
+        placeholder: ''
+      },
+      currentEditField: ''
+    }
+  },
+  onLoad(options) {
+    this.initParams(options)
+    this.loadOrderDetail()
+    this.loadReceiptList()
+  },
+  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('加载收单列表失败')
+      }
+    },
+
+    /**
+     * 点击收单项
+     */
+    handleReceiptClick(item) {
+      this.currentReceipt = item
+      this.topInfo.brand = item.brand || '暂无'
+      this.topInfo.model = item.model || '暂无'
+      this.topInfo.price = item.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() {
+      try {
+        await uni.$u.api.addReceiptForm({
+          brand: this.currentAddBrand.dictValue,
+          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 = {}
+      }
+    },
+
+    /**
+     * 取消加一单
+     */
+    handleAddOneCancel() {
+      this.addOneModalVisible = false
+      this.currentAddBrand = {}
+    }
+  }
+}
+</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;
+}
+
+.brand-select-btn {
+  width: 100%;
+}
+</style>

pages/orderDetailRefactored/styles/common.scss

@@ -0,0 +1,152 @@
+// 公共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%;
+  margin: 0;
+  background-color: map-get($colors, card);
+  border-radius: map-get($sizes, radius);
+  @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;
+
+  &: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);
+  }
+}

pages/orderDetailRefactored/utils/imageUpload.js

@@ -0,0 +1,270 @@
+/**
+ * 图片上传和下载工具类
+ */
+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) => {
+      uni.downloadFile({
+        url,
+        success: (res) => {
+          if (res.statusCode === 200) {
+            uni.saveImageToPhotosAlbum({
+              filePath: res.tempFilePath,
+              success: () => {
+                resolve()
+              },
+              fail: (err) => {
+                console.error('保存到相册失败:', err)
+                if (err.errMsg.includes('auth denied')) {
+                  uni.showModal({
+                    title: '权限不足',
+                    content: '需要访问相册权限来保存图片，是否去设置？',
+                    success: (modalRes) => {
+                      if (modalRes.confirm) {
+                        uni.openSetting()
+                      }
+                    }
+                  })
+                }
+                reject(err)
+              }
+            })
+          } else {
+            reject(new Error('下载失败'))
+          }
+        },
+        fail: (err) => {
+          console.error('下载图片失败:', err)
+          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/pagereceivecenter/pagereceivecenter.vue

@@ -44,9 +44,6 @@ export default {
         this.getStatisticsSendStatus();
 
         this.countdownInterval()
-        // uni.navigateTo({
-        //     url: `/pages/orderDetailNew/index?orderId=5464&item=测试发单&type=undefined&clueId=1973381744953516033`,
-        // })
     },
     onUnload() {
         clearInterval(this.countdownInterval);
@@ -143,7 +140,7 @@ export default {
                                 id: order.id,
                             });
                             uni.navigateTo({
-                                url: `/pages/orderDetailNew/index?orderId=${order.id}&item=${order.item}&type=${this.type}&clueId=${order.clueId}`,
+                                url: `/pages/orderDetailRefactored/index?orderId=${order.id}&item=${order.item}&type=${this.type}&clueId=${order.clueId}`,
                             })
                         } else if (res.cancel) {
                             // 用户点击了取消，不执行任何操作
@@ -194,7 +191,7 @@ export default {
             //点卡片看详情
             // if (order.status == '1' || order.status == '2') {
             uni.navigateTo({
-                url: `/pages/orderDetailNew/index?orderId=${order.id}&item=${order.item}&type=${this.type}&clueId=${order.clueId}`,
+                url: `/pages/orderDetailRefactored/index?orderId=${order.id}&item=${order.item}&type=${this.type}&clueId=${order.clueId}`,
             })
             // } else {
             //     uni.$u.toast('当前订单无法查看详情');