refactor: streamline input components and enhance layout in PageFour and PageOne

pages/orderDetailRefactored/components/PageFour.vue

@@ -7,44 +7,26 @@
           <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="4.5">
             <u-form-item label="编码" prop="codeStorage">
-              <u--input 
-                v-model="warehouseInfo.codeStorage" 
-                placeholder="请输入编码" 
-                class="info-input"
-                :disabled="warehouseInfo.needCheckCode === '2'"
-              />
+              <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--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"
-                />
+                <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>
@@ -54,35 +36,18 @@
         <u-row class="info-row" justify="space-between">
           <u-col span="5.8">
             <u-form-item label="收单物品" prop="item">
-              <u--input 
-                v-model="warehouseInfo.item" 
-                placeholder="请输入收单物品" 
-                class="info-input" 
-              />
+              <u--input v-model="warehouseInfo.item" placeholder="请输入收单物品" class="info-input" />
             </u-form-item>
           </u-col>
           <u-col span="5.8">
-            <u-form-item 
-              label="收单类型" 
-              prop="customerServiceNameLabel"
-            >
+            <u-form-item label="收单类型" prop="customerServiceNameLabel">
               <view class="click-wrapper" @tap="selectCustomerServiceName">
-                <u--input 
-                  v-model="warehouseInfo.customerServiceNameLabel" 
-                  placeholder="点击选择收单类型"
-                  class="info-input" 
-                  disabled 
-                />
+                <u--input v-model="warehouseInfo.customerServiceNameLabel" placeholder="点击选择收单类型" class="info-input"
+                  disabled />
               </view>
             </u-form-item>
-            <u-picker 
-              :show="showCustomerServicePicker" 
-              :columns="customerServiceColumns" 
-              confirm
-              keyName="label" 
-              @confirm="handleConfirmCustomerService"
-              @cancel="showCustomerServicePicker = false"
-            />
+            <u-picker :show="showCustomerServicePicker" :columns="customerServiceColumns" confirm keyName="label"
+              @confirm="handleConfirmCustomerService" @cancel="showCustomerServicePicker = false" />
           </u-col>
         </u-row>
 
@@ -91,45 +56,21 @@
           <u-col span="5.8">
             <u-form-item label="类别" prop="category">
               <view class="click-wrapper" @tap="selectCategory">
-                <u--input 
-                  v-model="warehouseInfo.categoryLabel" 
-                  placeholder="点击选择类别" 
-                  class="info-input"
-                  disabled 
-                />
+                <u--input v-model="warehouseInfo.categoryLabel" placeholder="点击选择类别" class="info-input" disabled />
               </view>
             </u-form-item>
-            <u-picker 
-              :show="showCategoryPicker" 
-              :columns="categoryColumns" 
-              confirm 
-              keyName="label"
-              @confirm="handleConfirmCategory" 
-              @cancel="showCategoryPicker = false"
-            />
+            <u-picker :show="showCategoryPicker" :columns="categoryColumns" confirm keyName="label"
+              @confirm="handleConfirmCategory" @cancel="showCategoryPicker = false" />
           </u-col>
           <u-col span="5.8">
-            <u-form-item 
-              label="是否需要查码" 
-              prop="needCheckCode"
-            >
+            <u-form-item label="是否需要查码" prop="needCheckCode">
               <view class="click-wrapper" @tap="selectNeedCheckCode">
-                <u--input 
-                  v-model="warehouseInfo.needCheckCodeLabel" 
-                  placeholder="点击选择是否需要查码"
-                  class="info-input" 
-                  disabled 
-                />
+                <u--input v-model="warehouseInfo.needCheckCodeLabel" placeholder="点击选择是否需要查码" class="info-input"
+                  disabled />
               </view>
             </u-form-item>
-            <u-picker 
-              :show="showNeedCheckCodePicker" 
-              :columns="needCheckCodeColumns" 
-              confirm
-              keyName="label" 
-              @confirm="handleConfirmNeedCheckCode"
-              @cancel="showNeedCheckCodePicker = false"
-            />
+            <u-picker :show="showNeedCheckCodePicker" :columns="needCheckCodeColumns" confirm keyName="label"
+              @confirm="handleConfirmNeedCheckCode" @cancel="showNeedCheckCodePicker = false" />
           </u-col>
         </u-row>
 
@@ -137,23 +78,13 @@
         <u-row class="info-row" justify="space-between">
           <u-col span="5.8">
             <u-form-item label="表款">
-              <u--input 
-                v-model="warehouseInfo.watchPrice" 
-                placeholder="请输入表款" 
-                class="info-input"
-                type="number" 
-              />
+              <u--input v-model="warehouseInfo.watchPrice" placeholder="请输入表款" class="info-input" type="number" />
             </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--input v-model="warehouseInfo.checkCodeFee" placeholder="请输入查码费" class="info-input" type="number"
+                :disabled="warehouseInfo.needCheckCode === '2'" />
             </u-form-item>
           </u-col>
         </u-row>
@@ -162,22 +93,12 @@
         <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--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--input v-model="warehouseInfo.freight" placeholder="请输入运费" class="info-input" type="number" />
             </u-form-item>
           </u-col>
         </u-row>
@@ -186,22 +107,13 @@
         <u-row class="info-row" justify="space-between">
           <u-col span="5.8">
             <u-form-item label="维修金额">
-              <u--input 
-                v-model="warehouseInfo.repairAmount" 
-                placeholder="请输入维修金额" 
-                class="info-input"
-                type="number" 
-              />
+              <u--input v-model="warehouseInfo.repairAmount" placeholder="请输入维修金额" class="info-input" type="number" />
             </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--input v-model="warehouseInfo.splitRatio" placeholder="请输入分单比例(0~100)" class="info-input"
+                type="number" />
             </u-form-item>
           </u-col>
         </u-row>
@@ -210,35 +122,20 @@
         <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--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--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--input :disabled="true" :value="computedGrossPerformance" placeholder="毛业绩自动计算" class="info-input"
+                type="number" />
             </u-form-item>
           </u-col>
         </u-row>
@@ -247,13 +144,8 @@
         <u-row class="info-row">
           <u-col span="12">
             <u-form-item label="收单备注">
-              <u--textarea 
-                v-model="warehouseInfo.remarks" 
-                placeholder="请输入收单备注" 
-                class="info-input"
-                confirmType="done" 
-                rows="4" 
-              />
+              <u--textarea v-model="warehouseInfo.remarks" placeholder="请输入收单备注" class="info-input" confirmType="done"
+                rows="4" />
             </u-form-item>
           </u-col>
         </u-row>
@@ -263,22 +155,15 @@
     <!-- 分成信息卡片 -->
     <view class="card-wrap">
       <view class="address-section">
-        <view class="address-header">
-          <u-icon name="list" size="36rpx" color="#108cff" class="location-icon" />
-          <text class="address-title">分成信息</text>
-          <u-button 
-            type="primary" 
-            plain 
-            shape="circle" 
-            size="mini" 
-            class="add-button" 
-            @click="addSplit"
-          >
+        <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>
-          </u-button>
+          </view>
         </view>
-        
+
         <!-- 分成信息表格 -->
         <view class="split-table">
           <u-row class="split-table-header">
@@ -289,48 +174,27 @@
             <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-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
-                />
+                <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
-                />
+                <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" 
-                />
+                <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)"
-                >
+                <view :class="['account-type', item.accountType == '1' ? 'frontend' : 'backend']"
+                  @click="toggleAccountType(item)">
                   {{ item.accountType == '1' ? '前' : '后' }}
                 </view>
               </view>
@@ -339,26 +203,15 @@
               <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"
-                    />
+                    <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-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>
@@ -370,35 +223,19 @@
 
     <!-- 确认入库按钮 -->
     <view class="confirm-button-container">
-      <u-button 
-        class="next-btn" 
-        type="success" 
-        @click="confirmWarehouseEntry"
-      >
+      <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="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-picker :show="showPersonPicker" title="请选择分成人" :columns="columnsPersonList" keyName="label"
+      @confirm="handleConfirmPerson" @cancel="handleCancelPerson" />
 
     <u-toast ref="uToast" />
   </view>
@@ -509,12 +346,12 @@ export default {
     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 || '',
@@ -531,17 +368,17 @@ export default {
         remarks: remarkParts[0] || '',
         customerServiceName: defaultCustomerServiceName,
         customerServiceNameLabel: this.getLabelByValue(
-          this.customerServiceColumns[0], 
+          this.customerServiceColumns[0],
           defaultCustomerServiceName
         ),
         category: defaultCategory,
         categoryLabel: this.getLabelByValue(
-          this.categoryColumns[0], 
+          this.categoryColumns[0],
           defaultCategory
         ),
         needCheckCode: defaultNeedCheckCode,
         needCheckCodeLabel: this.getLabelByValue(
-          this.needCheckCodeColumns[0], 
+          this.needCheckCodeColumns[0],
           defaultNeedCheckCode
         )
       }
@@ -592,13 +429,13 @@ export default {
      */
     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 => ({
@@ -637,7 +474,7 @@ export default {
       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)
@@ -933,7 +770,7 @@ export default {
 
 .address-section {
   padding: 20rpx;
-  
+
   // 防止 label 换行
   ::v-deep .u-form-item__body__left__content__label {
     white-space: nowrap !important;
@@ -1022,11 +859,11 @@ export default {
   color: #fff;
   text-align: center;
   cursor: pointer;
-  
+
   &.frontend {
     background-color: #409eff;
   }
-  
+
   &.backend {
     background-color: #909399;
   }
@@ -1048,7 +885,7 @@ export default {
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
-  
+
   &.active {
     border-color: #67c23a;
     background-color: #67c23a;
@@ -1070,4 +907,8 @@ export default {
   text-align: center;
   border-radius: 11px;
 }
+
+.add-button-container{
+  justify-content: space-between;
+}
 </style>

pages/orderDetailRefactored/components/PageOne.vue

@@ -2,52 +2,42 @@
   <view class="page-one-container">
     <!-- 图片资料标题 -->
     <view class="page-header">
-      <text class="page-title">图片资料</text>
+      <!-- <text class="page-title">图片资料</text>
       <u-button 
         size="small" 
         @click="handleSaveAllImages"
         class="save-all-btn"
       >
         保存实物图
-      </u-button>
+      </u-button> -->
+      <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">
-        <text 
-          :class="{ 'active': recordType === 'chat' }"
-          @click="recordType = 'chat'"
-        >
+        <text :class="{ 'active': recordType === 'chat' }" @click="recordType = 'chat'">
           聊天记录
         </text>
         <text class="divider">|</text>
-        <text 
-          :class="{ 'active': recordType === 'call' }"
-          @click="recordType = 'call'"
-        >
+        <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 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')"
-          >
+          <view class="upload-btn" @click="handleUploadImage('chatRecords')">
             <u-icon name="plus" size="40" color="#999" />
           </view>
         </view>
@@ -55,12 +45,8 @@
 
       <!-- 通话录音 -->
       <view v-if="recordType === 'call'" class="call-records-container">
-        <sound-recorder 
-          v-for="item in soundRecordList" 
-          :key="item.fileName"
-          :data="item"
-          @handleDelectThisSoundRecord="handleDeleteSoundRecord"
-        />
+        <sound-recorder v-for="item in soundRecordList" :key="item.fileName" :data="item"
+          @handleDelectThisSoundRecord="handleDeleteSoundRecord" />
       </view>
     </view>
 
@@ -69,21 +55,11 @@
       <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 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')"
-          >
+          <view class="upload-btn" @click="handleUploadImage('truePic')">
             <u-icon name="plus" size="40" color="#999" />
           </view>
         </view>
@@ -117,18 +93,12 @@
 
     <!-- 联系方式卡片 -->
     <view class="contact-card">
-      <view 
-        class="contact-item phone-card" 
-        @click="handlePhoneClick"
-      >
+      <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"
-      >
+      <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>
@@ -137,12 +107,7 @@
 
     <!-- 下一步按钮 -->
     <view class="space-block"></view>
-    <u-button 
-      class="next-btn" 
-      @click="handleNext" 
-      type="primary" 
-      size="middle"
-    >
+    <u-button class="next-btn" @click="handleNext" type="primary" size="middle">
       下一步
     </u-button>
   </view>
@@ -199,23 +164,23 @@ export default {
      */
     async loadImageList() {
       if (!this.currentReceipt.id || !this.orderDetail.itemBrand) return
-      
+
       try {
         // 加载聊天记录
         const chatList = await imageUpload.getFileList(
-          '2', 
-          '1', 
-          this.currentReceipt.id, 
+          '2',
+          '1',
+          this.currentReceipt.id,
           this.orderDetail.itemBrand,
           this.currentReceipt.clueId
         )
         this.chatRecordsList = chatList || []
-        
+
         // 加载实物图
         const truePicList = await imageUpload.getFileList(
-          '2', 
-          '2', 
-          this.currentReceipt.id, 
+          '2',
+          '2',
+          this.currentReceipt.id,
           this.orderDetail.itemBrand,
           this.currentReceipt.clueId
         )
@@ -230,7 +195,7 @@ export default {
      */
     async loadCallRecords() {
       if (!this.currentReceipt.clueId) return
-      
+
       try {
         const { data } = await uni.$u.api.getCallClueFileByClueId({
           clueId: this.currentReceipt.clueId
@@ -248,7 +213,7 @@ export default {
       try {
         const filePaths = await imageUpload.chooseImage(9)
         const uploadResults = await imageUpload.uploadFiles(filePaths)
-        
+
         // 绑定订单文件
         const orderFileType = type === 'truePic' ? '2' : '1'
         await imageUpload.bindOrderFile(
@@ -257,7 +222,7 @@ export default {
           orderFileType,
           uploadResults
         )
-        
+
         // 刷新列表
         this.loadImageList()
       } catch (error) {
@@ -346,7 +311,7 @@ export default {
         })
         return
       }
-      
+
       uni.showModal({
         title: '保存图片',
         content: `是否将 ${allUrls.length} 张图片保存到本地相册？`,
@@ -370,7 +335,7 @@ export default {
         })
         return
       }
-      
+
       uni.makePhoneCall({
         phoneNumber: this.orderDetail.phone,
         success: () => {
@@ -394,7 +359,7 @@ export default {
         })
         return
       }
-      
+
       uni.setClipboardData({
         data: this.orderDetail.wechat,
         success: () => {
@@ -454,17 +419,17 @@ export default {
   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;
@@ -598,4 +563,28 @@ export default {
   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/styles/common.scss

@@ -149,4 +149,21 @@ $text-colors: (
     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;
+    }
+  }
 }