滚动

ghsApp/src/admin/delivery/allDelivery.vue

@@ -63,10 +63,13 @@
       <TimePicker ref="timePicker" @confirm="handleTimeConfirm" />
       <view class="form-row">
         <view class="form-label">备注</view>
-        <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>
+        <input 
+          v-model="remark" 
+          type="text"
+          placeholder="填写备注信息" 
+          maxlength="200"
+          class="remark-input"
+        />
       </view>
     </view>
 
@@ -76,10 +79,10 @@
       <view class="list-header">
         <view class="header-left">
           <text class="header-icon">🚚</text>
-          <text class="header-title">平台运力</text>
+          <text class="header-title">运力</text>
         </view>
         <button class="load-btn" :class="{ loading: isLoadingDelivery }" :disabled="isLoadingDelivery" @click="handleLoadDelivery">
-          {{ isLoadingDelivery ? '加载中...' : '加载运力' }}
+          {{ isLoadingDelivery ? '刷新中...' : '刷新运力' }}
         </button>
       </view>
       
@@ -111,28 +114,6 @@
       </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">
@@ -143,7 +124,6 @@
         </view>
         <view class="sub-text">
           <text>实际价格以支付金额为准</text>
-          <text class="detail-btn"> 明细<text class="arrow-down">⌄</text></text>
         </view>
       </view>
       <button class="submit-btn" @click="submitOrder">立即下单</button>
@@ -180,9 +160,6 @@ export default {
             value: dayjs().format('YYYY-MM-DD HH:mm'),
         },
         remark: '',
-        // 备注弹窗相关
-        showRemarkModal: false,
-        tempRemark: '',
         // 用于保存表单的旧值，用于判断是否变动
         oldFormData: {
           weight: 1,
@@ -374,29 +351,6 @@ export default {
       // 取件时间修改后自动加载运力
       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() {
       // 校验重量是否填写
       if (!this.weight || Number(this.weight) <= 0) {
@@ -491,8 +445,11 @@ export default {
 <style lang="scss" scoped>
 .delivery-container {
   background-color: #f9fbfc;
-  min-height: 100vh;
+  height: 100vh;
   padding-bottom: 150upx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 /* 地址选择 */
@@ -502,6 +459,7 @@ export default {
   border-radius: 12upx;
   border: 2upx solid #f0f0f0;
   overflow: hidden;
+  flex-shrink: 0;
 
   .address-item {
     display: flex;
@@ -568,7 +526,7 @@ export default {
 /* 下单时间 */
 .order-time-section {
   display: flex;
-  flex-direction: column; /* Changed to column */
+  flex-direction: column;
   background-color: white;
   margin: 0 20upx;
   padding: 20upx;
@@ -577,6 +535,7 @@ export default {
   color: #333333;
   margin-bottom: 20upx;
   border: 2upx solid #f5f5f5;
+  flex-shrink: 0;
 
   .form-row {
     display: flex;
@@ -620,21 +579,24 @@ export default {
     }
   }
 
-  .remark-action {
-    color: #3385FF;
-    display: flex;
-    align-items: center;
-    font-size: 28upx;
+  .remark-input {
     flex: 1;
-    justify-content: flex-end;
+    height: 56upx;
+    padding: 0 16upx;
+    font-size: 28upx;
+    color: #333333;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1upx solid #f0f0f0;
+    border-radius: 0;
+    box-sizing: border-box;
+    text-align: right;
+    line-height: 56upx;
     
-    text {
-      color: #333333;
-      margin-right: 8upx;
-      
-      &.placeholder {
-        color: #999999;
-      }
+    &::placeholder {
+      color: #999999;
+      font-size: 28upx;
+      line-height: 56upx;
     }
   }
   .weight-input-wrapper {
@@ -706,11 +668,13 @@ export default {
 
 /* 平台运力与快递列表 */
 .platform-delivery-list {
-  margin: 0 20upx 60upx;
+  margin: 0 20upx 20upx;
   background-color: white;
   border-radius: 12upx;
-  overflow: hidden;
   border: 1upx solid #f0f0f0;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
 
   .list-header {
     display: flex;
@@ -1025,85 +989,4 @@ 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>

hdApp/src/admin/delivery/allDelivery.vue

@@ -63,10 +63,13 @@
       <TimePicker ref="timePicker" @confirm="handleTimeConfirm" />
       <view class="form-row">
         <view class="form-label">备注</view>
-        <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>
+        <input 
+          v-model="remark" 
+          type="text"
+          placeholder="填写备注信息" 
+          maxlength="200"
+          class="remark-input"
+        />
       </view>
     </view>
 
@@ -106,28 +109,6 @@
       </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">
@@ -175,9 +156,6 @@ export default {
             value: dayjs().format('YYYY-MM-DD HH:mm'),
         },
         remark: '',
-        // 备注弹窗相关
-        showRemarkModal: false,
-        tempRemark: '',
         // 用于保存表单的旧值，用于判断是否变动
         oldFormData: {
           weight: 1,
@@ -367,29 +345,6 @@ export default {
       // 取件时间修改后自动加载运力
       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() {
       // 校验重量是否填写
       if (!this.weight || Number(this.weight) <= 0) {
@@ -480,8 +435,11 @@ export default {
 <style lang="scss" scoped>
 .delivery-container {
   background-color: #f9fbfc;
-  min-height: 100vh;
+  height: 100vh;
   padding-bottom: 150upx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 /* 地址选择 */
@@ -491,6 +449,7 @@ export default {
   border-radius: 12upx;
   border: 2upx solid #f0f0f0;
   overflow: hidden;
+  flex-shrink: 0;
 
   .address-item {
     display: flex;
@@ -557,7 +516,7 @@ export default {
 /* 下单时间 */
 .order-time-section {
   display: flex;
-  flex-direction: column; /* Changed to column */
+  flex-direction: column;
   background-color: white;
   margin: 0 20upx;
   padding: 20upx;
@@ -566,6 +525,7 @@ export default {
   color: #333333;
   margin-bottom: 20upx;
   border: 2upx solid #f5f5f5;
+  flex-shrink: 0;
 
   .form-row {
     display: flex;
@@ -609,21 +569,24 @@ export default {
     }
   }
 
-  .remark-action {
-    color: #3385FF;
-    display: flex;
-    align-items: center;
-    font-size: 28upx;
+  .remark-input {
     flex: 1;
-    justify-content: flex-end;
+    height: 56upx;
+    padding: 0 16upx;
+    font-size: 28upx;
+    color: #333333;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1upx solid #f0f0f0;
+    border-radius: 0;
+    box-sizing: border-box;
+    text-align: right;
+    line-height: 56upx;
     
-    text {
-      color: #333333;
-      margin-right: 8upx;
-      
-      &.placeholder {
-        color: #999999;
-      }
+    &::placeholder {
+      color: #999999;
+      font-size: 28upx;
+      line-height: 56upx;
     }
   }
   .weight-input-wrapper {
@@ -695,11 +658,13 @@ export default {
 
 /* 平台运力与快递列表 */
 .platform-delivery-list {
-  margin: 0 20upx 60upx;
+  margin: 0 20upx 20upx;
   background-color: white;
   border-radius: 12upx;
-  overflow: hidden;
   border: 1upx solid #f0f0f0;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
 
   .list-header {
     display: flex;
@@ -1014,85 +979,4 @@ 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>