Skip to content

L
logistics
Commit 5308d120 by zhangxiaolong
Options

跟踪订单修改

parent 322f6eff
Showing with 115 additions and 226 deletions
index.html
...@@ -6,19 +6,6 @@ ...@@ -6,19 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>
<title>Tracking order</title> <title>Tracking order</title>
<script>
// 物流异常提示话术
var exceptionTips = {
// 运输过久
10: '运输过久提示文本：包裹很长一段时间显示在运输途中，一直没有派送结果。',
// 派件失败
8: '派件失败提示文本',
// 可能异常
9: '可能异常提示文本',
// 无法追踪
99: '无法追踪提示文本',
}
</script>
<style> <style>
#order_main, #order_main,
.tracking { .tracking {
...@@ -28,6 +15,7 @@ ...@@ -28,6 +15,7 @@
.title { .title {
text-align: center; text-align: center;
margin-bottom: -20px;
} }
.desc { .desc {
...@@ -148,7 +136,7 @@ ...@@ -148,7 +136,7 @@
} }
.content { .content {
display: grid; /* display: grid; */
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
column-gap: 30px; column-gap: 30px;
} }
...@@ -181,7 +169,7 @@ ...@@ -181,7 +169,7 @@
} }
.logistics-details:not(:first-child) { .logistics-details:not(:first-child) {
padding-top: 20px; padding-top: 15px;
} }
.logistics-details:last-child { .logistics-details:last-child {
...@@ -189,9 +177,10 @@ ...@@ -189,9 +177,10 @@
} }
.logistics-time { .logistics-time {
color: #666; color: #000;
font-size: 14px; font-size: 18px;
font-family: cursive; font-family: -apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB',"Microsoft Yahei",sans-serif;
margin-right: 15px;
} }
.shippinp { .shippinp {
...@@ -206,14 +195,12 @@ ...@@ -206,14 +195,12 @@
.node-line { .node-line {
flex: 3; flex: 3;
max-width: 200px; max-width: 5px;
height: 8px; height: 20px;
border-radius: 5px; border-radius: 5px;
background-color: #ccc; background-color: #ccc;
} margin-top: 20px;
margin-left: -10px;
.node-line.active {
background-color: #2bb063;
} }
.node-item { .node-item {
...@@ -223,37 +210,30 @@ ...@@ -223,37 +210,30 @@
padding: 0 10px; padding: 0 10px;
} }
.node-icon { .logistics-item{
width: 30px;
height: 30px;
margin: 0 auto;
background-color: #ccc;
color: #fff;
border-radius: 50%;
display: flex; display: flex;
justify-content: center; position: relative;
align-items: center;
}
.node-item.active .node-icon {
background-color: #2bb063;
} }
.logistics-item::before{
.node-item.active .node-icon:before { content: '';
content: '√'; background-color: #b4b4b4;
/* TODO: 更换图标 */ border: 1px solid #b4b4b4;
font-weight: bold; transform: rotate(45deg);
width: 10px;
height: 10px;
display: block;
position: absolute;
top: 5px;
left: -2px;
} }
.node-text { .node-text {
position: absolute; position: absolute;
left: 50%; width: 1px;
transform: translateX(-50%); min-height: 15px;
margin-top: 10px; background-color: #121212;
font-size: 14px; margin-left: 5px;
display: flex; margin-top: 21px;
flex-direction: column;
align-items: center;
} }
.node-text span { .node-text span {
...@@ -267,12 +247,53 @@ ...@@ -267,12 +247,53 @@
.exception-tips { .exception-tips {
color: red; color: red;
} }
.node-font{
margin-left: 25px;
}
.logistics-item::after{
content: '';
border: 1px solid #b4b4b4;
height: 100%;
position: absolute;
top: 16px;
left: 3px;
}
.logistics-details:last-child .logistics-item::after {
height: 0;
}
.node-iconactive::before{
content: '';
background-color: #121212;
border: 1px solid #121212;
transform: rotate(45deg);
width: 10px;
height: 10px;
display: block;
position: absolute;
top: 5px;
left: -2px;
z-index: 1;
}
.node-fontactive{
margin-left: 25px;
color: blue;
font-size: 17px;
}
.active{
margin-left: 13px;
}
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
.content { .content {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
column-gap: 30px; column-gap: 30px;
} }
.node-fontactive{
margin-left: 25px;
color: blue;
font-size: 18px;
}
.form { .form {
padding: 0 0 5px 0; padding: 0 0 5px 0;
} }
...@@ -284,10 +305,6 @@ ...@@ -284,10 +305,6 @@
.status { .status {
font-size: 18px; font-size: 18px;
} }
.node-icon{
width: 15px;
height: 15px;
}
.progress { .progress {
display: contents; display: contents;
...@@ -298,18 +315,31 @@ ...@@ -298,18 +315,31 @@
.node-line { .node-line {
width: 4px; width: 4px;
height: 18px; height: 18px;
margin-left: 33px; margin-top: 20px;
margin-left: -10px;
} }
.node-text { .node-text {
margin-left: 22px; height: 25px;
margin-top: -18px; margin-left: 5px;
margin-top: 26px;
transform: translateX(1%); transform: translateX(1%);
} }
.logistics-item::after{
content: '';
border: 1px solid #b4b4b4;
height: 100%;
position: absolute;
top: 16px;
left: 3px;
}
.log-progress { .log-progress {
margin-top: 15px; margin-top: 15px;
padding-bottom: 0; padding-bottom: 0;
margin-left: -45px; margin-left: -45px;
} }
.node-font {
width: 340px;
}
} }
</style> </style>
</head> </head>
...@@ -317,22 +347,18 @@ ...@@ -317,22 +347,18 @@
<body> <body>
<div class="tracking"> <div class="tracking">
<h2 class="title">Tracking order</h2> <h2 class="title">Tracking order</h2>
<p class="desc">
View and track your orders! Enter your order email address and order No.
below
</p>
<div id="tracking_order_form" class="form"> <div id="tracking_order_form" class="form">
<p style="margin-top: 25px"> <!-- <p style="margin-top: 25px">
<input <input
placeholder="Enter email address" placeholder="Enter email address"
name="email" name="email"
type="text" type="text"
/> />
</p> </p> -->
<p style="margin-top: 25px"> <p style="margin-top: 25px">
<input <input
placeholder="Enter order No" placeholder="Enter Tracking Number"
name="orderNo" name="number"
type="text" type="text"
/><br /> /><br />
</p> </p>
...@@ -357,23 +383,6 @@ ...@@ -357,23 +383,6 @@
function zero(n) { function zero(n) {
return (n < 10 ? '0' : '') + n return (n < 10 ? '0' : '') + n
} }
function formatDate1(d) {
var months = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
]
return months[d.getMonth()] + ' ' + d.getDate()
}
function formatDate(d) { function formatDate(d) {
var year = d.getFullYear() var year = d.getFullYear()
...@@ -447,15 +456,15 @@ ...@@ -447,15 +456,15 @@
} }
var website = window.location.href var website = window.location.href
var p = website.split('?')[1] var p = website.split('?')[1]
let url = 'api/order/tracking'
if(p){ if(p){
var n = p.split('=')[0] var n = p.split('=')[0]
if(n === 'number'){ if(n === 'number'){
params.number = p.split('=')[1]
url = 'api/order/number' url = 'api/order/number'
} }
} }
axios axios
.get(url, { params }) .get(`api/order/number/${params.number}`)
.then((res) => { .then((res) => {
loading = false loading = false
document.querySelector('.loading').style.display = 'none' document.querySelector('.loading').style.display = 'none'
...@@ -466,104 +475,13 @@ ...@@ -466,104 +475,13 @@
order_info.innerHTML = `<p style="text-align:left"><span style="color:grey">No data, please try again later</span></p>` order_info.innerHTML = `<p style="text-align:left"><span style="color:grey">No data, please try again later</span></p>`
return return
} }
for (var iterator of data) {
var div = document.createElement('div') var div = document.createElement('div')
// 跟踪号 国家 物流状态 店铺单号
var orderInfo = document.createElement('div')
orderInfo.classList.add('order-number')
orderInfo.innerHTML = `<span>Order</span>：<span>${
iterator.shopNumber || ''
}</span>`
var statusList = iterator.statusList.filter((item) => {
if (item.key_stage !== 'InfoReceived' && item.key_stage !== 'PickedUp' && item.key_stage !== 'Returned' && item.key_stage !== 'Returning') {
return true
}
})
var progresses = [
{ key_stage: 'Processing' },
{ key_stage: 'Departure' },
{ key_stage: 'Arrival' },
{ key_stage: 'Delivered' }
]
var statusMap = {}
statusList.forEach((item) => {
statusMap[item.key_stage] = item.time_utc
if (item.key_stage === 'OutForDelivery' && item.time_utc) {
progresses.splice(3, 0, { key_stage: item.key_stage })
}
if (item.key_stage === 'AvailableForPickup' && item.time_utc) {
progresses.splice(3, 0, { key_stage: item.key_stage })
}
})
if (progresses.length === 4) {
progresses.splice(3, 0, {key_stage: 'AvailableForPickup'}, {key_stage: 'OutForDelivery'})
}
progresses.forEach((item, i) => {
progresses[i].time_utc = statusMap[item.key_stage] && formatDate1(new Date(statusMap[item.key_stage]))
})
var lastStatus = undefined
for (var i = progresses.length - 1; i >= 0; i--) {
if (progresses[i].time_utc) {
lastStatus = progresses[i]
break;
}
}
div.appendChild(orderInfo)
var orderStatus = document.createElement('div')
orderStatus.classList.add('order-status')
orderStatus.innerHTML =
`<div class="status"><span>Status: ${
exceptionTips[iterator.status.code] ? lastStatus.key_stage || '' : iterator.status.name || ''
}</span></div>` +
`<div class="log-progress"></div>` +
(exceptionTips[iterator.status.code]
? `<div class="exception-tips">${
exceptionTips[iterator.status.code]
}</div>`
: '')
// 进度条
var logContainer = orderStatus.querySelector('.log-progress')
var progressHtml = ''
const index = progresses.findIndex((item) => item.key_stage === lastStatus.key_stage)
for (var i = 0; i <= index; i++) {
progresses[i].show = true
}
progressHtml += '<div class="progress">'
for (var i = 0; i < progresses.length; i++) {
var p = progresses[i]
if (i > 0) {
progressHtml +=
'<div class="node-line' +
(p.time_utc || progresses[i].show ? ' active' : '') +
'"></div>'
}
progressHtml +=
'<div class="node-item' +
(p.time_utc || progresses[i].show ? ' active' : '') +
'"><div class="node-icon"></div><div class="node-text">' +
'<span>' +
progresses[i].key_stage +
'</span>' +
(progresses[i].time_utc
? '<span>' + progresses[i].time_utc + '</span>'
: '') +
'</div></div>'
}
progressHtml += '</div>'
logContainer.innerHTML = progressHtml
div.appendChild(orderStatus)
var shippinpDetail = document.createElement('div') var shippinpDetail = document.createElement('div')
var logisticsList = iterator?.detailsList || [] var logisticsList = data?.detailsList || []
var dateMap = {} var dateMap = {}
var newData = logisticsList.map((item) => { var newData = logisticsList.map((item) => {
var d = formatDate(new Date(item.logisticsTime)) var d = formatDate(new Date(item.logisticsTime))
var data = d.split(' ') item.time = d
var date = data[0]
var time = data[1]
item.date = date
item.time = time
return item return item
}) })
newData.forEach((item) => { newData.forEach((item) => {
...@@ -578,65 +496,36 @@ ...@@ -578,65 +496,36 @@
var isFirst = true var isFirst = true
for (var logistics in dateMap) { for (var logistics in dateMap) {
var date = new Date(dateMap[logistics][0].logisticsTime) var date = new Date(dateMap[logistics][0].logisticsTime)
var displayDate = formatDate1(date)
if (isFirst) { if (isFirst) {
isFirst = false isFirst = false
displayDate = 'Latest Update ' + displayDate
} }
logisticsTxt += `<div class="logistics">` logisticsTxt += '<div class="logistics">'
logisticsTxt += `<div class="logistics-date">${ logisticsTxt += '<div class="logistics-date"></div>'
displayDate || ''
}</div>`
for (var item of dateMap[logistics]) { for (var item of dateMap[logistics]) {
logisticsTxt += `<div class="logistics-details">` logisticsTxt += '<div class="logistics-details">'
logisticsTxt += `<div class="logistics-item"> logisticsTxt += '<div class="logistics-item">'
<span class="logistics-time">${item.time}</span> logisticsTxt += '<div class="node-icon' + (item.stage==data.stage ? 'active' : '') + '"></div>'
<span style="font-family: fangsong;font-weight: bold;"> logisticsTxt += `
<span>${item.location || ''}</span> <div class="node-font${item.stage==data.stage ? 'active' : ''}">
<span class="logistics-time${item.stage==data.stage ? 'active' : ''}">${item.time}</span>
<span style="font-family: -apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB',"Microsoft Yahei",sans-serif;font-weight: bold;">
<span class="${item.stage==data.stage ? 'active' : ''}">${item.location || ''}</span>
<span class="description">${ <span class="description">${
item.description || '' item.description || ''
}</span> }</span>
</span> </span>
</div>`
logisticsTxt += `</div>`
}
logisticsTxt += `</div>`
}
logisticsTxt += `</div>`
logisticsTxt += `<div class="package">`
logisticsTxt += `<div class="shippinp">Package Info</div>`
logisticsTxt += `<div class="package-contents">
<div style="margin-bottom: 10px">Package Contents</div>`
for (var c in iterator.productList) {
var l = iterator.productList[c]
logisticsTxt += `
<div class="package-info">
<img style="width: 58px" src="${setimgUrl(l.warehouse_sku_image, { w: 60 })}"/>
<div class="package-msg">
<div style="margin-bottom: 6px;font-family: fangsong;">${l.shop_sku_name || ''}</div>
<span style="font-family: fangsong;">${l.shop_sku || ''}</span>
</div> </div>
</div>` </div>`
logisticsTxt += '</div>'
} }
logisticsTxt += `</div>` logisticsTxt += '</div>'
// logisticsTxt += `<div class="package-carrier"> }
// <div style="margin-bottom:10px">Carrier</div> logisticsTxt += '</div>'
// <div class="package-info"> logisticsTxt += '<div class="package">'
// <svg t="1667015263702" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11548" width="58" height="58"><path d="M51.48672 730.35776c0 113.6128 199.55712 205.71136 445.71648 205.71136s445.70624-92.09856 445.70624-205.7216c0-113.60256-199.54688-205.71136-445.70624-205.71136-246.1696 0-445.71648 92.1088-445.71648 205.7216z" fill="#40A9FF" p-id="11549"></path><path d="M51.48672 501.59616c0 113.6128 199.55712 205.7216 445.71648 205.7216s445.70624-92.1088 445.70624-205.7216-199.54688-205.71136-445.70624-205.71136c-246.1696 0-445.71648 92.09856-445.71648 205.7216z" fill="#BAE7FF" p-id="11550"></path><path d="M51.48672 272.8448c0 113.6128 199.55712 205.7216 445.71648 205.7216S942.8992 386.4576 942.8992 272.83456 743.36256 67.1232 497.2032 67.1232c-246.1696 0-445.71648 92.1088-445.71648 205.7216z" fill="#40A9FF" p-id="11551"></path></svg>
// <div class="package-msg">
// <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"/>
// </div>
// <a style="color: #649EFF;" href="https://t.17track.net/zh-cn#nums=${iterator.trackingNumber}" target="_blank">${iterator.trackingNumber}</a>
// </div>
// </div>
// </div>`
// logisticsTxt += `</div>`
logisticsEl.innerHTML = logisticsTxt logisticsEl.innerHTML = logisticsTxt
div.appendChild(logisticsEl) div.appendChild(logisticsEl)
div.classList.add('order_wrap') div.classList.add('order_wrap')
order_info.appendChild(div) order_info.appendChild(div)
}
} else { } else {
order_info.innerHTML = `<p style="text-align:left"><span style="color:red">${res.data.message}</span></p>` order_info.innerHTML = `<p style="text-align:left"><span style="color:red">${res.data.message}</span></p>`
} }
...@@ -654,13 +543,13 @@ ...@@ -654,13 +543,13 @@
var p = url.split('?')[1] var p = url.split('?')[1]
var params = new URLSearchParams(p) var params = new URLSearchParams(p)
var result = Object.fromEntries(params.entries()) var result = Object.fromEntries(params.entries())
if (result.email) { if (result.number) {
document.querySelector("input[name='email']").value = result.email document.querySelector("input[name='number']").value = result.number
}
if (result.orderNo) {
document.querySelector("input[name='orderNo']").value = result.orderNo
} }
if (result.email && result.orderNo) { // if (result.orderNo) {
// document.querySelector("input[name='orderNo']").value = result.orderNo
// }
if (result.number) {
submit() submit()
} }
} }
......
order.html 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
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