Skip to content

L
logistics
Commit c148640e by qinjianhui
Options

fix: 样式修改

parent b5d76efc
Showing with 66 additions and 26 deletions
track-order.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
...@@ -274,16 +273,24 @@ ...@@ -274,16 +273,24 @@
max-width: 90%; max-width: 90%;
} }
.shippinp {
margin-bottom: 10px;
}
.order-status .status { .order-status .status {
font-size: 16px; font-size: 16px;
} }
.logistics-details:not(:first-child) {
padding-top: 10px;
}
.log-progress { .log-progress {
margin-top: 10px; margin-top: 10px;
padding: 0; padding: 0;
padding-bottom: 60px; padding-bottom: 40px;
}
.logistics:not(:first-child) {
margin-top: 10px;
} }
.node-item { .node-item {
padding: 0 6px; padding: 0 6px;
} }
...@@ -300,15 +307,27 @@ ...@@ -300,15 +307,27 @@
} }
.node-text div { .node-text div {
white-space: normal; white-space: nowrap;
word-break: break-all; word-break: break-all;
font-size: 14px;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
}
.node-line {
height: 5px;
} }
.content { .content {
display: flex; display: flex;
gap: 40px; gap: 20px;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.order-number {
font-size: 18px;
}
} }
</style> </style>
</head> </head>
...@@ -322,11 +341,7 @@ ...@@ -322,11 +341,7 @@
</p> </p>
<div id="tracking_order_form" class="order-form"> <div id="tracking_order_form" class="order-form">
<p style="margin-top: 25px"> <p style="margin-top: 25px">
<input <input placeholder="Enter email address" name="email" type="text" />
placeholder="Enter email address"
name="email"
type="text"
/>
</p> </p>
<p style="margin-top: 25px"> <p style="margin-top: 25px">
<input <input
...@@ -337,7 +352,7 @@ ...@@ -337,7 +352,7 @@
</p> </p>
<p style="margin-top: 25px"> <p style="margin-top: 25px">
<button onclick="submit()" type="button"> <button type="button" id="track_button" onclick="submit">
SUBMIT SUBMIT
<img <img
class="loading" class="loading"
...@@ -396,7 +411,7 @@ ...@@ -396,7 +411,7 @@
) )
} }
function setimgUrl(url, options = {}){ function setimgUrl(url, options = {}) {
var clientWidth = document.body.clientWidth var clientWidth = document.body.clientWidth
var dpi = Math.ceil(clientWidth / 1920) + 0.5 var dpi = Math.ceil(clientWidth / 1920) + 0.5
var zImgPath = 'https://image.joshine.cn/' var zImgPath = 'https://image.joshine.cn/'
...@@ -424,7 +439,6 @@ ...@@ -424,7 +439,6 @@
} }
</script> </script>
<script> <script>
var loading = false
function submit() { function submit() {
if (loading) return if (loading) return
loading = true loading = true
...@@ -465,7 +479,12 @@ ...@@ -465,7 +479,12 @@
iterator.shopNumber || '' iterator.shopNumber || ''
}</span>` }</span>`
var statusList = iterator.statusList.filter((item) => { var statusList = iterator.statusList.filter((item) => {
if (item.key_stage !== 'InfoReceived' && item.key_stage !== 'PickedUp' && item.key_stage !== 'Returned' && item.key_stage !== 'Returning') { if (
item.key_stage !== 'InfoReceived' &&
item.key_stage !== 'PickedUp' &&
item.key_stage !== 'Returned' &&
item.key_stage !== 'Returning'
) {
return true return true
} }
}) })
...@@ -473,7 +492,7 @@ ...@@ -473,7 +492,7 @@
{ key_stage: 'Processing' }, { key_stage: 'Processing' },
{ key_stage: 'Departure' }, { key_stage: 'Departure' },
{ key_stage: 'Arrival' }, { key_stage: 'Arrival' },
{ key_stage: 'Delivered' } { key_stage: 'Delivered' },
] ]
var statusMap = {} var statusMap = {}
statusList.forEach((item) => { statusList.forEach((item) => {
...@@ -481,21 +500,31 @@ ...@@ -481,21 +500,31 @@
if (item.key_stage === 'OutForDelivery' && item.time_utc) { if (item.key_stage === 'OutForDelivery' && item.time_utc) {
progresses.splice(3, 0, { key_stage: item.key_stage }) progresses.splice(3, 0, { key_stage: item.key_stage })
} }
if (item.key_stage === 'AvailableForPickup' && item.time_utc) { if (
item.key_stage === 'AvailableForPickup' &&
item.time_utc
) {
progresses.splice(3, 0, { key_stage: item.key_stage }) progresses.splice(3, 0, { key_stage: item.key_stage })
} }
}) })
if (progresses.length === 4) { if (progresses.length === 4) {
progresses.splice(3, 0, {key_stage: 'AvailableForPickup'}, {key_stage: 'OutForDelivery'}) progresses.splice(
3,
0,
{ key_stage: 'AvailableForPickup' },
{ key_stage: 'OutForDelivery' }
)
} }
progresses.forEach((item, i) => { progresses.forEach((item, i) => {
progresses[i].time_utc = statusMap[item.key_stage] && formatDate1(new Date(statusMap[item.key_stage])) progresses[i].time_utc =
statusMap[item.key_stage] &&
formatDate1(new Date(statusMap[item.key_stage]))
}) })
var lastStatus = undefined var lastStatus = undefined
for (var i = progresses.length - 1; i >= 0; i--) { for (var i = progresses.length - 1; i >= 0; i--) {
if (progresses[i].time_utc) { if (progresses[i].time_utc) {
lastStatus = progresses[i] lastStatus = progresses[i]
break; break
} }
} }
div.appendChild(orderInfo) div.appendChild(orderInfo)
...@@ -503,7 +532,9 @@ ...@@ -503,7 +532,9 @@
orderStatus.classList.add('order-status') orderStatus.classList.add('order-status')
orderStatus.innerHTML = orderStatus.innerHTML =
`<div class="status"><span>Status: ${ `<div class="status"><span>Status: ${
exceptionTips[iterator.status.code] ? lastStatus.key_stage || '' : iterator.status.name || '' exceptionTips[iterator.status.code]
? lastStatus.key_stage || ''
: iterator.status.name || ''
}</span></div>` + }</span></div>` +
`<div class="log-progress"></div>` + `<div class="log-progress"></div>` +
(exceptionTips[iterator.status.code] (exceptionTips[iterator.status.code]
...@@ -514,7 +545,9 @@ ...@@ -514,7 +545,9 @@
// 进度条 // 进度条
var logContainer = orderStatus.querySelector('.log-progress') var logContainer = orderStatus.querySelector('.log-progress')
var progressHtml = '' var progressHtml = ''
const index = progresses.findIndex((item) => item.key_stage === lastStatus.key_stage) const index = progresses.findIndex(
(item) => item.key_stage === lastStatus.key_stage
)
for (var i = 0; i <= index; i++) { for (var i = 0; i <= index; i++) {
progresses[i].show = true progresses[i].show = true
} }
...@@ -601,10 +634,17 @@ ...@@ -601,10 +634,17 @@
var l = iterator.productList[c] var l = iterator.productList[c]
logisticsTxt += ` logisticsTxt += `
<div class="package-info"> <div class="package-info">
<img style="width: 58px" src="${setimgUrl(l.warehouse_sku_image, { w: 60 })}"/> <img style="width: 58px" src="${setimgUrl(
l.warehouse_sku_image,
{ w: 60 }
)}"/>
<div class="package-msg"> <div class="package-msg">
<div style="margin-bottom: 6px;font-family: fangsong;">${l.shop_sku_name || ''}</div> <div style="margin-bottom: 6px;font-family: fangsong;">${
<span style="font-family: fangsong;">${l.shop_sku || ''}</span> l.shop_sku_name || ''
}</div>
<span style="font-family: fangsong;">${
l.shop_sku || ''
}</span>
</div> </div>
</div>` </div>`
} }
...@@ -617,7 +657,7 @@ ...@@ -617,7 +657,7 @@
<div style="margin-bottom: 6px;"> <div style="margin-bottom: 6px;">
<img style="width: 100px" src="https://res.17track.net/global-v2/imgs/logo/svg/full_owt_296x48.svg?v=3c2ed98eac"/> <img style="width: 100px" src="https://res.17track.net/global-v2/imgs/logo/svg/full_owt_296x48.svg?v=3c2ed98eac"/>
</div> </div>
<a style="color: #649EFF;" href="https://t.17track.net/zh-cn#nums=${iterator.trackingNumber}" target="_blank">${iterator.trackingNumber}</a> <a style="color: #649EFF;" href="https://t.17track.net/en#nums==${iterator.trackingNumber}" target="_blank">${iterator.trackingNumber}</a>
</div> </div>
</div> </div>
</div>` </div>`
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment