|
|
|
@ -2,34 +2,37 @@ |
|
|
|
<div class="search"> |
|
|
|
<div class='waiceng' style="margin-top: 20px;"> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">核对编号:0005</div> |
|
|
|
<div style="flex:1;padding-left:10px;">物流编号:12604030938</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">核对编号:{{orderData.numberCode}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;">物流编号:{{orderData.deliveryInfo.id}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">订单编号:126040314565364</div> |
|
|
|
<div style="flex:1;padding-left:10px;">物流订单生成时间:2026-04-03 14:56:09</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">订单编号:{{orderData.id}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;">物流订单生成时间:{{orderData.deliveryInfo.createTime | formatDateTime}} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="title">商家信息</div> |
|
|
|
<div class='waiceng'> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">名称:麽麽蜜呀(明珠早市馆西3号门)</div> |
|
|
|
<div style="flex:1;padding-left:10px;">联系方式:13231710122</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">名称:{{orderData.shopName}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;">联系方式:{{orderData.shopPhone}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">地址:河北省沧州市运河区明珠商贸城早市馆西3号门底商A2-1031</div> |
|
|
|
<div style="flex:1;padding-left:10px;">发货时间:15:13</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">地址:{{orderData.shopAddress}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;">发货时间:{{orderData.shopMakeTime | formatDateTime}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="title">用户信息</div> |
|
|
|
<div class='waiceng'> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">鲁</div> |
|
|
|
<div style="flex:1;padding-left:10px;">联系方式:15145128710</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">{{orderData.receiverName}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;">联系方式:{{orderData.receiverPhone}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">地址:明珠国际商贸城早市馆5楼北天井3道进来思羽家</div> |
|
|
|
<div style="flex:1;padding-left:10px;">要求送达时间:15:21</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">地址:{{orderData.receiverAddress}} |
|
|
|
</div> |
|
|
|
<div style="flex:1;padding-left:10px;">要求送达时间:{{orderData.deliveryInfo.mustFinishTime | formatDateTime}} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="title">商品信息</div> |
|
|
|
@ -40,41 +43,36 @@ |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">数量</div> |
|
|
|
<div style="flex:1;padding-left:10px;">总价</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">百香多芒</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">少冰+正常糖</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">1</div> |
|
|
|
<div style="flex:1;padding-left:10px;">¥7.00</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">超级百香果</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">少冰+正常糖</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">1</div> |
|
|
|
<div style="flex:1;padding-left:10px;">¥14.00</div> |
|
|
|
<div class="nei1" v-for="(item,index) in orderData.goodsList" :key="index"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">{{item.productName}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">{{item.specs}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">{{item.quantity}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;">¥{{item.price}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">餐盒费</div> |
|
|
|
<div style="width:25%;padding-left:10px;">¥0.00</div> |
|
|
|
<div style="width:25%;padding-left:10px;">¥{{orderData.packageFee}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">配送费</div> |
|
|
|
<div style="width:25%;padding-left:10px;">¥1.50</div> |
|
|
|
<div style="width:25%;padding-left:10px;">¥{{orderData.deliveryFee}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">总计</div> |
|
|
|
<div style="width:25%;padding-left:10px;">¥1.50</div> |
|
|
|
<div style="width:25%;padding-left:10px;">¥{{orderData.totalAmount}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">抵用券金额</div> |
|
|
|
<div style="width:25%;padding-left:10px;">¥1.50</div> |
|
|
|
<div style="width:25%;padding-left:10px;"> |
|
|
|
¥{{orderData.couponDiscountFee== null?0.00:orderData.couponDiscountFee}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">活动优惠金额</div> |
|
|
|
<div style="width:25%;padding-left:10px;">¥1.50</div> |
|
|
|
<div style="width:25%;padding-left:10px;">¥0.00</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">实付金额</div> |
|
|
|
<div style="width:25%;padding-left:10px;">¥1.50</div> |
|
|
|
<div style="width:25%;padding-left:10px;">¥{{orderData.totalAmount}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="title">配送流程</div> |
|
|
|
@ -86,76 +84,120 @@ |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">用户下单</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">2026-04-03 14:56:09</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;"> |
|
|
|
{{orderData.createTime | formatDateTime}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;"></div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">商家接单</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">2026-04-03 14:56:09</div> |
|
|
|
<div style="flex:1;padding-left:10px;">麽麽蜜呀</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">商家出餐</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;"> |
|
|
|
{{orderData.shopMakeTime | formatDateTime}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;">{{orderData.shopName}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">配送员接单</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">2026-04-03 14:56:09</div> |
|
|
|
<div style="flex:1;padding-left:10px;">张宝芹</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;"> |
|
|
|
{{orderData.deliveryInfo.acceptTime | formatDateTime}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">已到店</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">2026-04-03 14:56:09</div> |
|
|
|
<div style="flex:1;padding-left:10px;">张宝芹</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;"> |
|
|
|
{{orderData.deliveryInfo.arriveTime | formatDateTime}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">配送员已取货</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">2026-04-03 14:56:09</div> |
|
|
|
<div style="flex:1;padding-left:10px;">张宝芹</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;"> |
|
|
|
{{orderData.deliveryInfo.getTime | formatDateTime}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">配送员已送达</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">2026-04-03 14:56:09</div> |
|
|
|
<div style="flex:1;padding-left:10px;">张宝芹</div> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;"> |
|
|
|
{{orderData.deliveryInfo.finishTime | formatDateTime}}</div> |
|
|
|
<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">送单时长</div> |
|
|
|
<div style="width: 33%;padding-left:10px;">23分钟</div> |
|
|
|
<div style="width: 33%;padding-left:10px;">{{getMinutesDiff(orderData.deliveryInfo.acceptTime !=null?orderData.deliveryInfo.acceptTime:1,orderData.deliveryInfo.finishTime != null?orderData.deliveryInfo.finishTime:1)}}分钟</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">订单总计时</div> |
|
|
|
<div style="width: 33%;padding-left:10px;">0时23分</div> |
|
|
|
<div style="width: 33%;padding-left:10px;">{{getMinutesDiff(orderData.createTime,orderData.deliveryInfo.finishTime != null?orderData.deliveryInfo.finishTime:1)}}分钟</div> |
|
|
|
</div> |
|
|
|
<div class="nei1"> |
|
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">超时</div> |
|
|
|
<div style="width: 33%;padding-left:10px;">--</div> |
|
|
|
<div style="width: 33%;padding-left:10px;">{{getMinutesDiff(orderData.deliveryInfo.mustFinishTime,orderData.deliveryInfo.finishTime != null?orderData.deliveryInfo.finishTime:1)}}分钟</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { |
|
|
|
getOrderDetail, |
|
|
|
} from "@/api/index"; |
|
|
|
export default { |
|
|
|
name: "logisticsAddress", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
orderData:{} |
|
|
|
orderData: {}, |
|
|
|
|
|
|
|
}; |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
formatDateTime(isoString) { |
|
|
|
if (!isoString) return '' |
|
|
|
const date = new Date(isoString) |
|
|
|
const year = date.getFullYear() |
|
|
|
const month = String(date.getMonth() + 1).padStart(2, '0') |
|
|
|
const day = String(date.getDate()).padStart(2, '0') |
|
|
|
const hours = String(date.getHours()).padStart(2, '0') |
|
|
|
const minutes = String(date.getMinutes()).padStart(2, '0') |
|
|
|
const seconds = String(date.getSeconds()).padStart(2, '0') |
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initRecharge(data) { |
|
|
|
//data是父组件弹窗传递过来的值,我们可以打印看看 |
|
|
|
console.log(data); |
|
|
|
this.orderData = data |
|
|
|
this.orderDetail(data.orderId) |
|
|
|
}, |
|
|
|
getMinutesDiff(time1, time2) { |
|
|
|
console.log('time1',time1) |
|
|
|
console.log('time2',time2) |
|
|
|
// 将参数转换为 Date 对象,参数为 1 时取当前时间 |
|
|
|
const date1 = time1 === 1 ? new Date() : new Date(time1); |
|
|
|
const date2 = time2 === 1 ? new Date() : new Date(time2); |
|
|
|
|
|
|
|
// 计算毫秒差,取绝对值,转换为分钟,向上取整 |
|
|
|
const diffMs = Math.abs(date2 - date1); |
|
|
|
const diffMinutes = Math.ceil(diffMs / (1000 * 60)); |
|
|
|
|
|
|
|
return diffMinutes; |
|
|
|
}, |
|
|
|
orderDetail(id) { |
|
|
|
getOrderDetail(id).then((res) => { |
|
|
|
this.loading = false; |
|
|
|
if (res.success) { |
|
|
|
this.orderData = res.result |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang="less"> |
|
|
|
//@import "@/styles/table-common.less"; |
|
|
|
.nei1{ |
|
|
|
.nei1 { |
|
|
|
display: flex; |
|
|
|
border:1px solid #eee; |
|
|
|
border: 1px solid #eee; |
|
|
|
height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
.title{ |
|
|
|
|
|
|
|
.title { |
|
|
|
height: 40px; |
|
|
|
line-height: 40px; |
|
|
|
font-size: 14px; |
|
|
|
|