|
@@ -32,6 +32,13 @@
|
|
|
|
|
|
|
|
<!-- 下单时间 -->
|
|
<!-- 下单时间 -->
|
|
|
<view class="order-time-section">
|
|
<view class="order-time-section">
|
|
|
|
|
+ <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>
|
|
|
|
|
+ </view>
|
|
|
<view class="form-row">
|
|
<view class="form-row">
|
|
|
<view class="form-label">取件时间<text class="required">*</text></view>
|
|
<view class="form-label">取件时间<text class="required">*</text></view>
|
|
|
<view class="time-action" @click="openTimePicker">
|
|
<view class="time-action" @click="openTimePicker">
|
|
@@ -107,8 +114,13 @@
|
|
|
<view class="platform-delivery-list">
|
|
<view class="platform-delivery-list">
|
|
|
<!-- 列表头部 -->
|
|
<!-- 列表头部 -->
|
|
|
<view class="list-header">
|
|
<view class="list-header">
|
|
|
- <text class="header-icon">🚚</text>
|
|
|
|
|
- <text class="header-title">平台运力</text>
|
|
|
|
|
|
|
+ <view class="header-left">
|
|
|
|
|
+ <text class="header-icon">🚚</text>
|
|
|
|
|
+ <text class="header-title">平台运力</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <button class="load-btn" :class="{ loading: isLoadingDelivery }" :disabled="isLoadingDelivery" @click="handleLoadDelivery">
|
|
|
|
|
+ {{ isLoadingDelivery ? '加载中...' : '加载运力' }}
|
|
|
|
|
+ </button>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 跑腿列表 -->
|
|
<!-- 跑腿列表 -->
|
|
@@ -125,7 +137,13 @@
|
|
|
<radio :checked="selectedDelivery === item.name" :disabled="!item.isAble" color="#3385FF" style="transform: scale(0.7)"></radio>
|
|
<radio :checked="selectedDelivery === item.name" :disabled="!item.isAble" color="#3385FF" style="transform: scale(0.7)"></radio>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 没有运力时显示提示 -->
|
|
|
|
|
+ <view class="no-delivery-list" v-if="deliveryList.length === 0">
|
|
|
|
|
+ <text class="no-delivery-icon">🛵</text>
|
|
|
|
|
+ <text class="no-delivery-text">请点击"加载运力"按钮获取运力</text>
|
|
|
|
|
+ <text class="no-delivery-subtext">如无运力请稍后再试</text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 底部固定区 -->
|
|
<!-- 底部固定区 -->
|
|
@@ -157,8 +175,6 @@ export default {
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- orderSn: '20250120(#1)',
|
|
|
|
|
- predictTime: '预计骑手13分钟内接单,最快01-20 14:24送达',
|
|
|
|
|
selectedDelivery: null,
|
|
selectedDelivery: null,
|
|
|
orderId: null,
|
|
orderId: null,
|
|
|
senderInfo: {
|
|
senderInfo: {
|
|
@@ -173,11 +189,23 @@ export default {
|
|
|
// { name: '闪送', price: '19.00', type: '两轮' },
|
|
// { name: '闪送', price: '19.00', type: '两轮' },
|
|
|
// { name: '达达秒送', price: '11.30', type: '团送' },
|
|
// { name: '达达秒送', price: '11.30', type: '团送' },
|
|
|
// ],
|
|
// ],
|
|
|
|
|
+ weight: '',
|
|
|
pickupTime: {
|
|
pickupTime: {
|
|
|
label: '立即取件',
|
|
label: '立即取件',
|
|
|
value: dayjs().format('YYYY-MM-DD HH:mm'),
|
|
value: dayjs().format('YYYY-MM-DD HH:mm'),
|
|
|
},
|
|
},
|
|
|
remark: '',
|
|
remark: '',
|
|
|
|
|
+ // 用于保存表单的旧值,用于判断是否变动
|
|
|
|
|
+ oldFormData: {
|
|
|
|
|
+ weight: '',
|
|
|
|
|
+ pickupTime: {
|
|
|
|
|
+ label: '立即取件',
|
|
|
|
|
+ value: dayjs().format('YYYY-MM-DD HH:mm'),
|
|
|
|
|
+ },
|
|
|
|
|
+ remark: '',
|
|
|
|
|
+ },
|
|
|
|
|
+ // 加载运力的loading状态
|
|
|
|
|
+ isLoadingDelivery: false,
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -213,9 +241,50 @@ export default {
|
|
|
this.selectedDelivery = this.deliveryList[0].name;
|
|
this.selectedDelivery = this.deliveryList[0].name;
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ // 监听重量变化
|
|
|
|
|
+ weight(newVal, oldVal) {
|
|
|
|
|
+ if (this.deliveryList.length > 0 && newVal !== this.oldFormData.weight) {
|
|
|
|
|
+ this.clearDeliveryList();
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 监听取件时间变化
|
|
|
|
|
+ pickupTime: {
|
|
|
|
|
+ handler(newVal, oldVal) {
|
|
|
|
|
+ if (this.deliveryList.length > 0 && newVal.value !== this.oldFormData.pickupTime.value) {
|
|
|
|
|
+ this.clearDeliveryList();
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ deep: true
|
|
|
|
|
+ },
|
|
|
|
|
+ // 监听备注变化
|
|
|
|
|
+ remark(newVal, oldVal) {
|
|
|
|
|
+ if (this.deliveryList.length > 0 && newVal !== this.oldFormData.remark) {
|
|
|
|
|
+ this.clearDeliveryList();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
methods: {
|
|
|
init() {},
|
|
init() {},
|
|
|
|
|
|
|
|
|
|
+ // 清空运力列表
|
|
|
|
|
+ clearDeliveryList() {
|
|
|
|
|
+ this.deliveryList = [];
|
|
|
|
|
+ this.selectedDelivery = null;
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 保存表单数据的当前值
|
|
|
|
|
+ saveFormData() {
|
|
|
|
|
+ this.oldFormData = {
|
|
|
|
|
+ weight: this.weight,
|
|
|
|
|
+ pickupTime: {
|
|
|
|
|
+ label: this.pickupTime.label,
|
|
|
|
|
+ value: this.pickupTime.value,
|
|
|
|
|
+ },
|
|
|
|
|
+ remark: this.remark,
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
loadOrderData() {
|
|
loadOrderData() {
|
|
|
address({ orderId: this.orderId }).then(res => {
|
|
address({ orderId: this.orderId }).then(res => {
|
|
|
if (res && res.code === 1) {
|
|
if (res && res.code === 1) {
|
|
@@ -225,25 +294,36 @@ export default {
|
|
|
}).catch(err => {
|
|
}).catch(err => {
|
|
|
console.log('获取发货与收货地址失败:', err);
|
|
console.log('获取发货与收货地址失败:', err);
|
|
|
});
|
|
});
|
|
|
|
|
+ },
|
|
|
|
|
+ loadDeliveryList() {
|
|
|
|
|
+ // 设置加载状态
|
|
|
|
|
+ this.isLoadingDelivery = true;
|
|
|
|
|
+
|
|
|
// 调用API获取订单详情和跑腿平台报价
|
|
// 调用API获取订单详情和跑腿平台报价
|
|
|
- getDeliveryQuotes({ orderId: this.orderId, pickupTime: this.pickupTime.value }).then(res => {
|
|
|
|
|
|
|
+ getDeliveryQuotes({
|
|
|
|
|
+ orderId: this.orderId,
|
|
|
|
|
+ pickupTime: this.pickupTime.value,
|
|
|
|
|
+ weight: this.weight,
|
|
|
|
|
+ remark: this.remark,
|
|
|
|
|
+ }).then(res => {
|
|
|
if (res && res.code === 1) {
|
|
if (res && res.code === 1) {
|
|
|
if (res.data) {
|
|
if (res.data) {
|
|
|
- this.orderSn = res.data.orderSn || this.orderSn;
|
|
|
|
|
- this.senderInfo = res.data.sender || this.senderInfo;
|
|
|
|
|
- this.receiverInfo = res.data.receiver || this.receiverInfo;
|
|
|
|
|
-
|
|
|
|
|
if (res.data.deliveryList && res.data.deliveryList.length > 0) {
|
|
if (res.data.deliveryList && res.data.deliveryList.length > 0) {
|
|
|
- this.deliveryList = res.data.deliveryList;
|
|
|
|
|
|
|
+ this.deliveryList = res.data.deliveryList.filter(item => item.isAble);
|
|
|
const selectionExists = this.deliveryList.some(item => item.name === this.selectedDelivery);
|
|
const selectionExists = this.deliveryList.some(item => item.name === this.selectedDelivery);
|
|
|
if (!selectionExists) {
|
|
if (!selectionExists) {
|
|
|
this.selectedDelivery = this.deliveryList[0].name;
|
|
this.selectedDelivery = this.deliveryList[0].name;
|
|
|
}
|
|
}
|
|
|
|
|
+ // 加载成功后保存当前表单数据
|
|
|
|
|
+ this.saveFormData();
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}).catch(err => {
|
|
}).catch(err => {
|
|
|
console.log('获取配送报价失败:', err);
|
|
console.log('获取配送报价失败:', err);
|
|
|
|
|
+ }).finally(() => {
|
|
|
|
|
+ // 无论成功失败都要关闭加载状态
|
|
|
|
|
+ this.isLoadingDelivery = false;
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
selectDelivery(item) {
|
|
selectDelivery(item) {
|
|
@@ -259,6 +339,15 @@ export default {
|
|
|
handleTimeConfirm(time) {
|
|
handleTimeConfirm(time) {
|
|
|
this.pickupTime = time;
|
|
this.pickupTime = time;
|
|
|
},
|
|
},
|
|
|
|
|
+ handleLoadDelivery() {
|
|
|
|
|
+ // 校验重量是否填写
|
|
|
|
|
+ if (!this.weight || Number(this.weight) <= 0) {
|
|
|
|
|
+ this.$msg('请先填写货物重量');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ // 执行加载运力
|
|
|
|
|
+ this.loadDeliveryList();
|
|
|
|
|
+ },
|
|
|
submitOrder() {
|
|
submitOrder() {
|
|
|
const selectedItem = this.selectedDeliveryItem;
|
|
const selectedItem = this.selectedDeliveryItem;
|
|
|
if (!selectedItem || selectedItem.price === '暂无报价') {
|
|
if (!selectedItem || selectedItem.price === '暂无报价') {
|
|
@@ -273,17 +362,22 @@ export default {
|
|
|
);
|
|
);
|
|
|
},
|
|
},
|
|
|
submitDeliveryOrder() {
|
|
submitDeliveryOrder() {
|
|
|
- const selectedItem = this.selectedDeliveryItem;
|
|
|
|
|
- if (!selectedItem) {
|
|
|
|
|
- this.$msg('请选择一个配送方式');
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ const selectedItem = this.selectedDeliveryItem;
|
|
|
|
|
+ if (!selectedItem) {
|
|
|
|
|
+ this.$msg('请选择一个配送方式');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!this.weight || Number(this.weight) <= 0) {
|
|
|
|
|
+ this.$msg('请输入货物总重量');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
// 调用API提交配送订单
|
|
// 调用API提交配送订单
|
|
|
createDeliveryOrder({
|
|
createDeliveryOrder({
|
|
|
orderId: this.orderId,
|
|
orderId: this.orderId,
|
|
|
platform: selectedItem.name,
|
|
platform: selectedItem.name,
|
|
|
price: this.totalPrice,
|
|
price: this.totalPrice,
|
|
|
allParams: selectedItem,
|
|
allParams: selectedItem,
|
|
|
|
|
+ weight: this.weight,
|
|
|
pickupTime: this.pickupTime,
|
|
pickupTime: this.pickupTime,
|
|
|
remark: this.remark,
|
|
remark: this.remark,
|
|
|
}).then(res => {
|
|
}).then(res => {
|
|
@@ -448,6 +542,35 @@ export default {
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ .weight-input-wrapper {
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ width: 300upx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+
|
|
|
|
|
+ input {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 40upx;
|
|
|
|
|
+ font-size: 28upx;
|
|
|
|
|
+ color: #333333;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ background-color: transparent;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+
|
|
|
|
|
+ &::placeholder {
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .unit {
|
|
|
|
|
+ font-size: 28upx;
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+ margin-left: 20upx;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 推荐和平台标题 */
|
|
/* 推荐和平台标题 */
|
|
@@ -487,9 +610,10 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.header-title {
|
|
.header-title {
|
|
|
- font-size: 28upx;
|
|
|
|
|
|
|
+ font-size: 30upx;
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
color: #333333;
|
|
color: #333333;
|
|
|
|
|
+ line-height: 1;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -599,13 +723,19 @@ export default {
|
|
|
.list-header {
|
|
.list-header {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
padding: 20upx;
|
|
padding: 20upx;
|
|
|
background-color: #f0f7ff;
|
|
background-color: #f0f7ff;
|
|
|
border-bottom: 1upx solid #e0e0e0;
|
|
border-bottom: 1upx solid #e0e0e0;
|
|
|
|
|
|
|
|
|
|
+ .header-left {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.header-icon {
|
|
.header-icon {
|
|
|
font-size: 32upx;
|
|
font-size: 32upx;
|
|
|
- margin-right: 10upx;
|
|
|
|
|
|
|
+ margin-right: 16upx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.header-title {
|
|
.header-title {
|
|
@@ -613,6 +743,64 @@ export default {
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
color: #3385FF;
|
|
color: #3385FF;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .load-btn {
|
|
|
|
|
+ padding: 8upx 20upx;
|
|
|
|
|
+ font-size: 28upx;
|
|
|
|
|
+ color: #3385FF;
|
|
|
|
|
+ background-color: white;
|
|
|
|
|
+ border: 1upx solid #3385FF;
|
|
|
|
|
+ border-radius: 20upx;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
+
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ background-color: #3385FF;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.loading {
|
|
|
|
|
+ opacity: 0.7;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:disabled {
|
|
|
|
|
+ opacity: 0.7;
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .no-delivery-list {
|
|
|
|
|
+ padding: 50upx 40upx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ .no-delivery-icon {
|
|
|
|
|
+ font-size: 80upx;
|
|
|
|
|
+ margin-bottom: 20upx;
|
|
|
|
|
+ opacity: 0.6;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .no-delivery-text {
|
|
|
|
|
+ font-size: 32upx;
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 1.6;
|
|
|
|
|
+ margin-bottom: 10upx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .no-delivery-subtext {
|
|
|
|
|
+ font-size: 26upx;
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.delivery-item {
|
|
.delivery-item {
|