1. 配送平台报价交互调整

2. 优化重量输入

ghsApp/src/admin/delivery/allDelivery.vue

@@ -35,8 +35,21 @@
       <view class="form-row">
         <view class="form-label">重量<text class="required">*</text></view>
         <view class="weight-input-wrapper">
-          <input type="text" v-model="weight" placeholder="请输入货物总重量" />
-          <text class="unit">千克</text>
+          <view class="weight-control">
+            <view class="control-btn minus-btn" @click="decreaseWeight">
+              <text>-</text>
+            </view>
+            <input 
+              type="number" 
+              v-model.number="weight" 
+              placeholder="请输入货物总重量"
+              @blur="validateWeight"
+            />
+            <view class="control-btn plus-btn" @click="increaseWeight">
+              <text>+</text>
+            </view>
+          </view>
+          <text class="unit">公斤</text>
         </view>
       </view>
       <view class="form-row">
@@ -49,67 +62,13 @@
       <TimePicker ref="timePicker" @confirm="handleTimeConfirm" />
       <view class="form-row">
         <view class="form-label">备注</view>
-        <view class="remark-input">
-          <input type="text" v-model="remark" placeholder="请填写备注信息" />
+        <view class="remark-action" @click="openRemarkModal">
+          <text :class="{ placeholder: !remark }">{{ remark || '请填写备注信息' }}</text>
+          <zui-svg-icon icon="general-arrow-right" :width="16" :height="16" color="#333" />
         </view>
       </view>
     </view>
 
-    <!-- 智能推荐 -->
-    <!-- <view class="delivery-list-section"> -->
-      <!-- 列表头部 -->
-      <!--<view class="list-header">
-        <text class="header-icon">✨</text>
-        <text class="header-title">智能推荐</text>
-      </view> -->
-      
-      <!-- 智能推荐列表 -->
-      <!-- 闪送 -->
-      <!-- <view class="delivery-item" :class="{ active: selectedDelivery === 0 }" @click="selectDelivery(0)">
-        <view class="item-left">
-          <view class="delivery-name">
-            <text class="name">闪送</text>
-            <text class="tag-new">上次呼叫</text>
-          </view>
-          <view class="delivery-detail">两轮>></view>
-        </view>
-        <view class="item-right">
-          <view class="price">预估 ¥{{ deliveryList[0].price }}</view>
-          <radio :checked="selectedDelivery === 0" color="#3385FF" style="transform: scale(0.7)"></radio>
-        </view>
-      </view> -->
-
-      <!-- 达达秒送 -->
-      <!--<view class="delivery-item" :class="{ active: selectedDelivery === 1 }" @click="selectDelivery(1)">
-        <view class="item-left">
-          <view class="delivery-name">
-            <text class="name">达达秒送</text>
-            <text class="tag-recommend">平台推荐</text>
-          </view>
-          <view class="delivery-detail">团送>></view>
-        </view>
-        <view class="item-right">
-          <view class="price">预估 ¥{{ deliveryList[1].price }}</view>
-          <radio :checked="selectedDelivery === 1" color="#3385FF" style="transform: scale(0.7)"></radio>
-        </view>
-      </view> -->
-
-      <!-- 美团配送 -->
-      <!--<view class="delivery-item" :class="{ active: selectedDelivery === 2 }" @click="selectDelivery(2)">
-        <view class="item-left">
-          <view class="delivery-name">
-            <text class="name">美团配送</text>
-            <text class="tag-recommend">平台推荐</text>
-          </view>
-          <view class="delivery-detail">暂无报价</view>
-        </view>
-        <view class="item-right">
-          <view class="price no-price">暂无报价</view>
-          <radio :checked="selectedDelivery === 2" color="#3385FF" style="transform: scale(0.7)"></radio>
-        </view>
-      </view>
-    </view>-->
-
     <!-- 平台运力 -->
     <view class="platform-delivery-list">
       <!-- 列表头部 -->
@@ -146,6 +105,29 @@
       </view>
     </view>
 
+    <!-- 备注输入弹窗 -->
+    <view class="remark-modal" v-if="showRemarkModal" @click="closeRemarkModal">
+      <view class="modal-content" @click.stop>
+        <view class="modal-header">
+          <text class="modal-title">填写备注信息</text>
+        </view>
+        <view class="modal-body">
+          <textarea 
+            v-model="tempRemark" 
+            placeholder="请输入备注信息" 
+            maxlength="200"
+            :auto-height="true"
+            class="remark-textarea"
+          />
+          <view class="char-count">{{ tempRemark.length }}/200</view>
+        </view>
+        <view class="modal-footer">
+          <button class="modal-btn cancel-btn" @click="closeRemarkModal">取消</button>
+          <button class="modal-btn confirm-btn" @click="confirmRemark">确认</button>
+        </view>
+      </view>
+    </view>
+
     <!-- 底部固定区 -->
     <view class="footer-fixed">
       <view class="footer-left">
@@ -189,15 +171,18 @@ export default {
         //     { name: '闪送', price: '19.00', type: '两轮' },
         //     { name: '达达秒送', price: '11.30', type: '团送' },
         // ],
-        weight: '',
+        weight: 1,
         pickupTime: {
             label: '立即取件',
             value: dayjs().format('YYYY-MM-DD HH:mm'),
         },
         remark: '',
+        // 备注弹窗相关
+        showRemarkModal: false,
+        tempRemark: '',
         // 用于保存表单的旧值，用于判断是否变动
         oldFormData: {
-          weight: '',
+          weight: 1,
           pickupTime: {
             label: '立即取件',
             value: dayjs().format('YYYY-MM-DD HH:mm'),
@@ -206,6 +191,8 @@ export default {
         },
         // 加载运力的loading状态
         isLoadingDelivery: false,
+        // 重量输入防抖定时器
+        weightDebounceTimer: null,
     };
   },
   computed: {
@@ -234,6 +221,7 @@ export default {
     if (options && options.orderId) {
       this.orderId = options.orderId;
       this.loadOrderData();
+      this.handleLoadDelivery();
     }
   },
   created() {
@@ -241,12 +229,34 @@ export default {
           this.selectedDelivery = this.deliveryList[0].name;
       }
   },
+  onUnload() {
+    // 页面卸载时清除定时器
+    if (this.weightDebounceTimer) {
+      clearTimeout(this.weightDebounceTimer);
+      this.weightDebounceTimer = null;
+    }
+  },
   watch: {
     // 监听重量变化
     weight(newVal, oldVal) {
+      // 清除之前的定时器
+      if (this.weightDebounceTimer) {
+        clearTimeout(this.weightDebounceTimer);
+        this.weightDebounceTimer = null;
+      }
+      
+      // 如果有运力列表且值变化了，清空运力列表
       if (this.deliveryList.length > 0 && newVal !== this.oldFormData.weight) {
         this.clearDeliveryList();
       }
+      
+      // 设置新的定时器，1秒后自动加载运力
+      this.weightDebounceTimer = setTimeout(() => {
+        // 只有当重量值有效时才自动加载
+        if (newVal && Number(newVal) > 0) {
+          this.handleLoadDelivery();
+        }
+      }, 1000);
     },
     // 监听取件时间变化
     pickupTime: {
@@ -338,6 +348,31 @@ export default {
     },
     handleTimeConfirm(time) {
       this.pickupTime = time;
+      // 取件时间修改后自动加载运力
+      this.handleLoadDelivery();
+    },
+    openRemarkModal() {
+      // 打开弹窗时，将当前备注内容赋值给临时变量
+      this.tempRemark = this.remark;
+      this.showRemarkModal = true;
+    },
+    closeRemarkModal() {
+      this.showRemarkModal = false;
+      this.tempRemark = '';
+    },
+    confirmRemark() {
+      // 保存旧的备注值
+      const oldRemark = this.remark;
+      // 更新备注
+      this.remark = this.tempRemark;
+      // 关闭弹窗
+      this.showRemarkModal = false;
+      this.tempRemark = '';
+      
+      // 如果有输入内容（不为空且不是纯空格），则自动执行加载运力
+      if (this.remark && this.remark.trim()) {
+        this.handleLoadDelivery();
+      }
     },
     handleLoadDelivery() {
       // 校验重量是否填写
@@ -391,6 +426,25 @@ export default {
         this.$msg(res.msg);
         console.log('下单失败:', err);
       });
+    },
+    // 减少重量
+    decreaseWeight() {
+      if (this.weight > 1) {
+        this.weight = Number(this.weight) - 1;
+      }
+    },
+    // 增加重量
+    increaseWeight() {
+      this.weight = Number(this.weight) + 1;
+    },
+    // 验证重量输入
+    validateWeight() {
+      // 确保重量至少为1
+      if (!this.weight || Number(this.weight) < 1) {
+        this.weight = 1;
+      }
+      // 确保是整数
+      this.weight = Math.floor(Number(this.weight));
     }
   }
 };
@@ -528,190 +582,90 @@ export default {
     }
   }
 
-  .remark-input {
-    flex-shrink: 0;
-    width: 500upx;
-    input {
-      width: 100%;
-      height: 40upx;
-      font-size: 28upx;
-      color: #999999;
-      border: none;
-      background-color: transparent;
-      text-align: right;
-      padding: 0;
-    }
-  }
-  .weight-input-wrapper {
-    flex-shrink: 0;
-    width: 300upx;
+  .remark-action {
+    color: #3385FF;
     display: flex;
     align-items: center;
+    font-size: 28upx;
+    flex: 1;
     justify-content: flex-end;
     
-    input {
-      flex: 1;
-      height: 40upx;
-      font-size: 28upx;
+    text {
       color: #333333;
-      border: none;
-      background-color: transparent;
-      text-align: right;
-      padding: 0;
+      margin-right: 8upx;
       
-      &::placeholder {
+      &.placeholder {
         color: #999999;
       }
     }
-    
-    .unit {
-      font-size: 28upx;
-      color: #666666;
-      margin-left: 20upx;
-      flex-shrink: 0;
-    }
   }
-}
-
-/* 推荐和平台标题 */
-.recommend-section,
-.platform-section {
-  padding: 15upx 20upx;
-  font-size: 26upx;
-  color: #1abc9c;
-  background-color: rgba(26, 188, 156, 0.1);
-  margin: 0 20upx 15upx;
-  border-radius: 8upx;
-}
-
-.platform-section {
-  color: #3385FF;
-  background-color: rgba(51, 133, 255, 0.1);
-}
-
-/* 智能推荐与快递平台列表 */
-.delivery-list-section {
-  margin: 0 20upx 20upx;
-  background-color: white;
-  border-radius: 12upx;
-  overflow: hidden;
-  border: 1upx solid #f0f0f0;
-
-  .list-header {
-    display: flex;
-    align-items: center;
-    padding: 20upx;
-    background-color: #f5f5f5;
-    border-bottom: 1upx solid #e0e0e0;
-
-    .header-icon {
-      font-size: 32upx;
-      margin-right: 10upx;
-    }
-
-    .header-title {
-      font-size: 30upx;
-      font-weight: bold;
-      color: #333333;
-      line-height: 1;
-    }
-  }
-
-  .delivery-item {
+  .weight-input-wrapper {
+    flex-shrink: 0;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 20upx;
-    border-bottom: 1upx solid #f5f5f5;
-    transition: background-color 0.3s;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &.active {
-      background-color: #f0f7ff;
-    }
-
-    &.disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-
-      .name,
-      .delivery-detail,
-      .price {
-        color: #cccccc;
-      }
-    }
-
-    .item-left {
-      flex: 1;
-
-      .delivery-name {
+    justify-content: flex-end;
+    
+    .weight-control {
+      display: flex;
+      align-items: center;
+      border: 1upx solid #e0e0e0;
+      border-radius: 8upx;
+      overflow: hidden;
+      background-color: #f9f9f9;
+      
+      .control-btn {
+        width: 60upx;
+        height: 60upx;
         display: flex;
         align-items: center;
-        margin-bottom: 8upx;
-
-        .name {
-          font-size: 28upx;
-          color: #333333;
-          font-weight: 500;
-          margin-right: 10upx;
+        justify-content: center;
+        background-color: #f5f5f5;
+        color: #666666;
+        font-size: 32upx;
+        font-weight: bold;
+        transition: all 0.2s;
+        user-select: none;
+        
+        &:active {
+          background-color: #e0e0e0;
         }
-
-        .tag-new {
-          background-color: #3385FF;
-          color: white;
-          font-size: 20upx;
-          padding: 3upx 8upx;
-          border-radius: 4upx;
+        
+        &.minus-btn {
+          border-right: 1upx solid #e0e0e0;
         }
-
-        .tag-recommend {
-          background-color: #ffcccc;
-          color: #e74c3c;
-          font-size: 20upx;
-          padding: 3upx 8upx;
-          border-radius: 4upx;
+        
+        &.plus-btn {
+          border-left: 1upx solid #e0e0e0;
         }
       }
-
-      .delivery-detail {
-        font-size: 24upx;
-        color: #1abc9c;
-      }
-    }
-
-    .item-right {
-      display: flex;
-      align-items: center;
-      gap: 15upx;
-
-      .price {
+      
+      input {
+        flex: 1;
+        width: 100upx;
+        height: 60upx;
         font-size: 28upx;
         color: #333333;
-        min-width: 80upx;
-        text-align: right;
-
-        &.no-price {
+        border: none;
+        background-color: #ffffff;
+        text-align: center;
+        padding: 0 10upx;
+        
+        &::placeholder {
           color: #999999;
           font-size: 24upx;
         }
       }
     }
+    
+    .unit {
+      font-size: 28upx;
+      color: #666666;
+      margin-left: 20upx;
+      flex-shrink: 0;
+    }
   }
 }
 
-/* 平台运力 */
-.platform-section {
-  padding: 15upx 20upx;
-  font-size: 26upx;
-  color: #3385FF;
-  background-color: rgba(51, 133, 255, 0.1);
-  margin: 0 20upx 15upx;
-  border-radius: 8upx;
-}
-
 /* 平台运力与快递列表 */
 .platform-delivery-list {
   margin: 0 20upx 60upx;
@@ -1033,4 +987,85 @@ export default {
     justify-content: center;
   }
 }
+
+/* 备注输入弹窗 */
+.remark-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+
+  .modal-content {
+    width: 600upx;
+    background-color: white;
+    border-radius: 16upx;
+    overflow: hidden;
+  }
+
+  .modal-header {
+    padding: 30upx 30upx 20upx;
+    border-bottom: 1upx solid #f0f0f0;
+
+    .modal-title {
+      font-size: 32upx;
+      font-weight: bold;
+      color: #333333;
+    }
+  }
+
+  .modal-body {
+    padding: 30upx;
+
+    .remark-textarea {
+      width: 100%;
+      min-height: 200upx;
+      padding: 20upx;
+      font-size: 28upx;
+      color: #333333;
+      background-color: #f9f9f9;
+      border-radius: 8upx;
+      border: 1upx solid #e0e0e0;
+      box-sizing: border-box;
+    }
+
+    .char-count {
+      margin-top: 10upx;
+      font-size: 24upx;
+      color: #999999;
+      text-align: right;
+    }
+  }
+
+  .modal-footer {
+    display: flex;
+    border-top: 1upx solid #f0f0f0;
+
+    .modal-btn {
+      flex: 1;
+      height: 90upx;
+      line-height: 90upx;
+      font-size: 30upx;
+      border: none;
+      background-color: transparent;
+      margin: 0;
+      padding: 0;
+
+      &.cancel-btn {
+        color: #666666;
+        border-right: 1upx solid #f0f0f0;
+      }
+
+      &.confirm-btn {
+        color: #3385FF;
+        font-weight: 500;
+      }
+    }
+  }
+}
 </style>