chenkainan
4 weeks ago
21 changed files with 299 additions and 23 deletions
@ -1 +0,0 @@ |
|||
.bg[data-v-0117dbdd]{display:flex;flex-direction:column;font-size:14px}.common-card[data-v-0117dbdd]{width:100%;background-color:#fff;padding:20px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.order-status[data-v-0117dbdd]{border-right:1px solid #eee;width:350px;height:220px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:space-around}.order-status .order-no[data-v-0117dbdd]{color:#999}.order-status .order-no .el-button[data-v-0117dbdd]{width:-moz-fit-content;width:fit-content;margin:0;display:inline-block;padding:0}.order-status .status-title[data-v-0117dbdd]{display:flex;align-items:center;font-size:16px;font-weight:700}.order-status .status-title i[data-v-0117dbdd]{font-size:24px}.order-status .el-button[data-v-0117dbdd]{width:120px;display:block;margin:0 auto}.order-step[data-v-0117dbdd]{flex:1;width:1px;padding:0 20px;display:flex;align-items:center}.order-step[data-v-0117dbdd] .el-step__icon.is-text{border:none;width:30px;height:30px;border-radius:50%;background:#c0c4cc;color:#fff}.order-step[data-v-0117dbdd] .el-step__line{top:13px}.order-step[data-v-0117dbdd] .el-step__line-inner{border-color:#c0c4cc}.order-step .process-title[data-v-0117dbdd]{color:#666;font-weight:700;font-size:14px;margin-top:20px}.order-step .process-description[data-v-0117dbdd]{color:#666;font-size:12px}.order-step[data-v-0117dbdd] .is-finish .el-step__icon{background:#67c23a}.order-info-card[data-v-0117dbdd]{display:flex}.order-info-card[data-v-0117dbdd] .el-descriptions{flex:1;flex-shrink:0;border-right:1px solid hsla(0,0%,60%,.1);padding:0 20px}.order-info-card[data-v-0117dbdd] .el-descriptions .el-descriptions-item__label{width:90px}.product-image[data-v-0117dbdd]{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;margin-right:15px;border-radius:4px}.total-card[data-v-0117dbdd]{margin-top:20px;background:#fafafa;box-shadow:none}.total-card[data-v-0117dbdd] .el-descriptions__body{background:none;text-align:right}.total-card[data-v-0117dbdd] .el-descriptions__body .el-descriptions-item__label{width:90%;text-align:right;justify-content:flex-end}.total-card[data-v-0117dbdd] .el-descriptions__body .el-descriptions-item__content{justify-content:flex-end} |
|||
@ -0,0 +1 @@ |
|||
.express-info[data-v-05881a53]{padding:15px;background-color:#fafafa;border-radius:4px;margin-bottom:25px}.express-logo[data-v-05881a53]{display:flex;align-items:center;margin-bottom:10px}.logo-img[data-v-05881a53]{width:30px;height:30px;margin-right:10px}.express-name[data-v-05881a53]{font-weight:500;color:#333}.express-number[data-v-05881a53]{display:flex;align-items:center}.number-label[data-v-05881a53]{color:#666;margin-right:8px}.number-value[data-v-05881a53]{color:#333;flex:1}.copy-btn[data-v-05881a53]{color:#1890ff;padding:0;height:auto}.timeline-container[data-v-05881a53]{padding-left:20px;max-height:50vh;overflow-y:auto}.el-timeline[data-v-05881a53]{padding-left:10px}.el-timeline-item[data-v-05881a53]:not(:last-child):before{height:100%;left:6px}.el-timeline-item__node--large[data-v-05881a53]{width:16px;height:16px}.timeline-status[data-v-05881a53]{font-weight:500;margin-bottom:5px;color:#333}.timeline-status.active[data-v-05881a53]{color:#ff7d00}.timeline-desc[data-v-05881a53]{color:#666;line-height:1.6;font-size:13px}.el-timeline-item__timestamp[data-v-05881a53]{color:#999;font-size:12px;width:80px;padding-top:2px}.dialog-footer[data-v-05881a53]{text-align:center}.bg[data-v-382893c1]{display:flex;flex-direction:column;font-size:14px}.common-card[data-v-382893c1]{width:100%;background-color:#fff;padding:20px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.order-status[data-v-382893c1]{border-right:1px solid #eee;width:350px;height:220px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:space-around}.order-status .order-no[data-v-382893c1]{color:#999}.order-status .order-no .el-button[data-v-382893c1]{width:-moz-fit-content;width:fit-content;margin:0;display:inline-block;padding:0}.order-status .status-title[data-v-382893c1]{display:flex;align-items:center;font-size:16px;font-weight:700}.order-status .status-title i[data-v-382893c1]{font-size:24px}.order-status .el-button[data-v-382893c1]{width:120px;display:block;margin:0 auto}.order-step[data-v-382893c1]{flex:1;width:1px;padding:0 20px;display:flex;align-items:center}.order-step[data-v-382893c1] .el-step__icon.is-text{border:none;width:30px;height:30px;border-radius:50%;background:#c0c4cc;color:#fff}.order-step[data-v-382893c1] .el-step__line{top:13px}.order-step[data-v-382893c1] .el-step__line-inner{border-color:#c0c4cc}.order-step .process-title[data-v-382893c1]{color:#666;font-weight:700;font-size:14px;margin-top:20px}.order-step .process-description[data-v-382893c1]{color:#666;font-size:12px}.order-step[data-v-382893c1] .is-finish .el-step__icon{background:#67c23a}.order-info-card[data-v-382893c1]{display:flex}.order-info-card[data-v-382893c1] .el-descriptions{flex:1;flex-shrink:0;border-right:1px solid hsla(0,0%,60%,.1);padding:0 20px}.order-info-card[data-v-382893c1] .el-descriptions .el-descriptions-item__label{width:90px}.product-image[data-v-382893c1]{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;margin-right:15px;border-radius:4px}.total-card[data-v-382893c1]{margin-top:20px;background:#fafafa;box-shadow:none}.total-card[data-v-382893c1] .el-descriptions__body{background:none;text-align:right}.total-card[data-v-382893c1] .el-descriptions__body .el-descriptions-item__label{width:90%;text-align:right;justify-content:flex-end}.total-card[data-v-382893c1] .el-descriptions__body .el-descriptions-item__content{justify-content:flex-end} |
|||
@ -0,0 +1 @@ |
|||
.express-info[data-v-05881a53]{padding:15px;background-color:#fafafa;border-radius:4px;margin-bottom:25px}.express-logo[data-v-05881a53]{display:flex;align-items:center;margin-bottom:10px}.logo-img[data-v-05881a53]{width:30px;height:30px;margin-right:10px}.express-name[data-v-05881a53]{font-weight:500;color:#333}.express-number[data-v-05881a53]{display:flex;align-items:center}.number-label[data-v-05881a53]{color:#666;margin-right:8px}.number-value[data-v-05881a53]{color:#333;flex:1}.copy-btn[data-v-05881a53]{color:#1890ff;padding:0;height:auto}.timeline-container[data-v-05881a53]{padding-left:20px;max-height:50vh;overflow-y:auto}.el-timeline[data-v-05881a53]{padding-left:10px}.el-timeline-item[data-v-05881a53]:not(:last-child):before{height:100%;left:6px}.el-timeline-item__node--large[data-v-05881a53]{width:16px;height:16px}.timeline-status[data-v-05881a53]{font-weight:500;margin-bottom:5px;color:#333}.timeline-status.active[data-v-05881a53]{color:#ff7d00}.timeline-desc[data-v-05881a53]{color:#666;line-height:1.6;font-size:13px}.el-timeline-item__timestamp[data-v-05881a53]{color:#999;font-size:12px;width:80px;padding-top:2px}.dialog-footer[data-v-05881a53]{text-align:center}.bg[data-v-dc03f51c]{display:flex;flex-direction:column}.bg[data-v-dc03f51c] .el-button--text,.bg[data-v-dc03f51c] .el-tabs__item.is-active{color:#6a8a27}.bg[data-v-dc03f51c] .el-tabs__active-bar{background-color:#6a8a27}.bg[data-v-dc03f51c] .el-tabs__item:hover{color:#6a8a27}.filter-bar[data-v-dc03f51c]{margin-bottom:20px}.order-card[data-v-dc03f51c]{border:1px solid #eee;border-radius:4px;margin-bottom:20px;overflow:hidden}.order-header[data-v-dc03f51c]{background-color:#f8f9fa;padding:12px 20px;display:flex;align-items:center;border-bottom:1px solid #eee;color:#666;font-size:14px}.order-products[data-v-dc03f51c]{padding:10px 20px;background:#fff}.product-item[data-v-dc03f51c]{display:flex;align-items:center;padding:15px 0;border-bottom:1px dashed #eee;font-size:14px}.product-item[data-v-dc03f51c]:last-child{border-bottom:none}.product-image[data-v-dc03f51c]{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;margin-right:15px;border-radius:4px}.product-details[data-v-dc03f51c]{flex:1}.product-name[data-v-dc03f51c]{color:#333;margin-bottom:5px}.product-spec[data-v-dc03f51c]{color:#999;font-size:12px}.product-price[data-v-dc03f51c]{width:120px;text-align:center;color:#333}.product-quantity[data-v-dc03f51c]{width:100px;text-align:center;color:#666}.product-total[data-v-dc03f51c]{width:120px;text-align:center;color:#333;font-weight:500}.product-actions[data-v-dc03f51c],.product-status[data-v-dc03f51c]{width:150px;text-align:center}.order-footer[data-v-dc03f51c]{background-color:#f8f9fa;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee}.order-summary[data-v-dc03f51c]{text-align:right}.order-amount[data-v-dc03f51c]{color:#333;margin-bottom:5px}.order-amount strong[data-v-dc03f51c]{color:#ff4d4f;font-size:16px}.order-tips[data-v-dc03f51c]{font-size:12px;color:#999}.order-actions[data-v-dc03f51c]{display:flex;gap:10px} |
|||
@ -1 +0,0 @@ |
|||
.bg[data-v-b4aad32e]{display:flex;flex-direction:column}.bg[data-v-b4aad32e] .el-button--text,.bg[data-v-b4aad32e] .el-tabs__item.is-active{color:#6a8a27}.bg[data-v-b4aad32e] .el-tabs__active-bar{background-color:#6a8a27}.bg[data-v-b4aad32e] .el-tabs__item:hover{color:#6a8a27}.filter-bar[data-v-b4aad32e]{margin-bottom:20px}.order-card[data-v-b4aad32e]{border:1px solid #eee;border-radius:4px;margin-bottom:20px;overflow:hidden}.order-header[data-v-b4aad32e]{background-color:#f8f9fa;padding:12px 20px;display:flex;align-items:center;border-bottom:1px solid #eee;color:#666;font-size:14px}.order-products[data-v-b4aad32e]{padding:10px 20px;background:#fff}.product-item[data-v-b4aad32e]{display:flex;align-items:center;padding:15px 0;border-bottom:1px dashed #eee;font-size:14px}.product-item[data-v-b4aad32e]:last-child{border-bottom:none}.product-image[data-v-b4aad32e]{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;margin-right:15px;border-radius:4px}.product-details[data-v-b4aad32e]{flex:1}.product-name[data-v-b4aad32e]{color:#333;margin-bottom:5px}.product-spec[data-v-b4aad32e]{color:#999;font-size:12px}.product-price[data-v-b4aad32e]{width:120px;text-align:center;color:#333}.product-quantity[data-v-b4aad32e]{width:100px;text-align:center;color:#666}.product-total[data-v-b4aad32e]{width:120px;text-align:center;color:#333;font-weight:500}.product-actions[data-v-b4aad32e],.product-status[data-v-b4aad32e]{width:150px;text-align:center}.order-footer[data-v-b4aad32e]{background-color:#f8f9fa;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee}.order-summary[data-v-b4aad32e]{text-align:right}.order-amount[data-v-b4aad32e]{color:#333;margin-bottom:5px}.order-amount strong[data-v-b4aad32e]{color:#ff4d4f;font-size:16px}.order-tips[data-v-b4aad32e]{font-size:12px;color:#999}.order-actions[data-v-b4aad32e]{display:flex;gap:10px} |
|||
@ -1 +1 @@ |
|||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>shiweisuzhou</title><script defer="defer" src="/js/chunk-vendors.981357e9.js"></script><script defer="defer" src="/js/app.cf4d2948.js"></script><link href="/css/chunk-vendors.10dd4e95.css" rel="stylesheet"><link href="/css/app.b0d0af41.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but shiweisuzhou doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html> |
|||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>shiweisuzhou</title><script defer="defer" src="/js/chunk-vendors.981357e9.js"></script><script defer="defer" src="/js/app.a5d22e80.js"></script><link href="/css/chunk-vendors.10dd4e95.css" rel="stylesheet"><link href="/css/app.b0d0af41.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but shiweisuzhou doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html> |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,205 @@ |
|||
<template> |
|||
<el-dialog |
|||
title="物流信息" |
|||
:visible.sync="visible" |
|||
width="700px" |
|||
:close-on-click-modal="false" |
|||
:show-close="true" |
|||
:before-close="handleClose" |
|||
v-if="show" |
|||
> |
|||
<!-- 快递信息 --> |
|||
<div class="express-info"> |
|||
<div class="express-logo"> |
|||
<span class="express-name">{{ logisticsInfo.express_name }}</span> |
|||
</div> |
|||
<div class="express-number"> |
|||
<span class="number-label">运单号：</span> |
|||
<span class="number-value">{{ logisticsInfo.courier_number }}</span> |
|||
<el-button type="text" class="copy-btn" @click="copyWaybillNumber"> |
|||
复制 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 物流时间线 --> |
|||
<div class="timeline-container"> |
|||
<el-timeline> |
|||
<el-timeline-item |
|||
v-for="(item, index) in logisticsList" |
|||
:key="index" |
|||
:timestamp="item.time" |
|||
:color="index === 0 ? 'orange' : '#8492a6'" |
|||
:icon="index === 0 ? 'el-icon-check' : ''" |
|||
:size="index === 0 ? 'large' : 'normal'" |
|||
> |
|||
<div class="timeline-content"> |
|||
<div class="timeline-status" :class="{ active: index === 0 }"> |
|||
{{ item.context }} |
|||
</div> |
|||
<div class="timeline-desc">{{ item.description }}</div> |
|||
</div> |
|||
</el-timeline-item> |
|||
</el-timeline> |
|||
</div> |
|||
|
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="handleClose">关闭</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "LogisticsModal", |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
orderId: { |
|||
type: String, |
|||
}, |
|||
logisticsInfo: { |
|||
type: Object, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 物流时间线数据 |
|||
logisticsList: [], |
|||
show: this.visible, |
|||
}; |
|||
}, |
|||
watch: { |
|||
visible(newVal) { |
|||
this.show = newVal; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.post( |
|||
{ |
|||
child_order_id: this.orderId, |
|||
}, |
|||
"/api/order/getExpress" |
|||
).then((res) => { |
|||
this.logisticsList = res.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 复制运单号 |
|||
copyWaybillNumber() { |
|||
// 创建一个临时输入框 |
|||
const input = document.createElement("input"); |
|||
input.value = this.logisticsInfo.courier_number; |
|||
document.body.appendChild(input); |
|||
input.select(); |
|||
document.execCommand("copy"); |
|||
document.body.removeChild(input); |
|||
|
|||
// 显示复制成功提示 |
|||
this.$message.success("运单号已复制"); |
|||
}, |
|||
handleClose() { |
|||
// 修改本地属性 |
|||
this.show = false; |
|||
// 通知父组件更新原始 prop |
|||
this.$emit("update:visible", false); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.express-info { |
|||
padding: 15px; |
|||
background-color: #fafafa; |
|||
border-radius: 4px; |
|||
margin-bottom: 25px; |
|||
} |
|||
|
|||
.express-logo { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.logo-img { |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.express-name { |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
|
|||
.express-number { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.number-label { |
|||
color: #666; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.number-value { |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
|
|||
.copy-btn { |
|||
color: #1890ff; |
|||
padding: 0; |
|||
height: auto; |
|||
} |
|||
|
|||
.timeline-container { |
|||
padding-left: 20px; |
|||
max-height: 50vh; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.el-timeline { |
|||
padding-left: 10px; |
|||
} |
|||
|
|||
.el-timeline-item:not(:last-child)::before { |
|||
height: 100%; |
|||
left: 6px; |
|||
} |
|||
|
|||
.el-timeline-item__node--large { |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
|
|||
.timeline-status { |
|||
font-weight: 500; |
|||
margin-bottom: 5px; |
|||
color: #333; |
|||
} |
|||
|
|||
.timeline-status.active { |
|||
color: #ff7d00; |
|||
} |
|||
|
|||
.timeline-desc { |
|||
color: #666; |
|||
line-height: 1.6; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.el-timeline-item__timestamp { |
|||
color: #999; |
|||
font-size: 12px; |
|||
width: 80px; |
|||
padding-top: 2px; |
|||
} |
|||
|
|||
.dialog-footer { |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue