|
|
@@ -63,13 +63,10 @@
|
|
|
<TimePicker ref="timePicker" @confirm="handleTimeConfirm" />
|
|
|
<view class="form-row">
|
|
|
<view class="form-label">备注</view>
|
|
|
- <input
|
|
|
- v-model="remark"
|
|
|
- type="text"
|
|
|
- placeholder="填写备注信息"
|
|
|
- maxlength="200"
|
|
|
- class="remark-input"
|
|
|
- />
|
|
|
+ <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>
|
|
|
|
|
|
@@ -113,6 +110,28 @@
|
|
|
</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">
|
|
|
@@ -159,6 +178,9 @@ export default {
|
|
|
value: dayjs().format('YYYY-MM-DD HH:mm'),
|
|
|
},
|
|
|
remark: '',
|
|
|
+ // 备注弹窗相关
|
|
|
+ showRemarkModal: false,
|
|
|
+ tempRemark: '',
|
|
|
// 用于保存表单的旧值，用于判断是否变动
|
|
|
oldFormData: {
|
|
|
weight: 1,
|
|
|
@@ -350,6 +372,29 @@ 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) {
|
|
|
@@ -578,24 +623,21 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .remark-input {
|
|
|
- flex: 1;
|
|
|
- height: 56upx;
|
|
|
- padding: 0 16upx;
|
|
|
+ .remark-action {
|
|
|
+ color: #3385FF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
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;
|
|
|
+ flex: 1;
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
|
- &::placeholder {
|
|
|
- color: #999999;
|
|
|
- font-size: 28upx;
|
|
|
- line-height: 56upx;
|
|
|
+ text {
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 8upx;
|
|
|
+
|
|
|
+ &.placeholder {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.weight-input-wrapper {
|
|
|
@@ -1012,4 +1054,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>
|
