Skip to content

L
logistics
Commit 3461954a by qinjianhui
Options

fix: 问题修改

parent c148640e
Showing with 677 additions and 11 deletions
track-order-shopline-curveshe_com.html 0 → 100644
<p>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>
</p>
<p>Tracking order</p>
<p>
<script>// <![CDATA[
// 物流异常提示话术
var exceptionTips = {
// 运输过久
10: 'Your package shipping time seems to be a bit long, contact our customer service to check it. Email:support@curveshe.com',
// 派件失败
8: 'Your order has failed to be delivered properly, please contact us to check it. Email:support@curveshe.com',
// 可能异常
9: 'Your order seems to be a bit unusual, please contact us to check it. Email:support@curveshe.com',
// 无法追踪
99: 'Your order cannot be tracked, please contact us to check it. Email:support@curveshe.com',
}
// ]]></script>
</p>
<style><!--
#order_main,
.tracking {
max-width: 1200px;
margin: 0 -100px;
}
.title {
text-align: center;
}
.desc {
text-align: center;
color: #888;
}
.order-form {
width: 400px;
box-sizing: border-box;
margin: 0 auto;
padding: 20px 0;
/* overflow: hidden; */
}
.order-form input,
.order-form button {
width: 100%;
height: 40px;
box-sizing: border-box;
text-align:center
}
.order-form input {
padding-left: 10px;
border: 1px solid #ddd;
color: #333;
}
.order-form input:focus {
outline: 2px solid #aaa;
border-radius: 2px;
}
.order-form button {
cursor: pointer;
background: #000;
color: #fff;
border: none;
font-size: 14px;
font-weight: bold;
}
.order-form button:hover {
background: rgb(63, 63, 63);
}
.order_wrap {
padding-left: 10px;
}
.order_wrap:not(:last-child) {
margin-bottom: 20px;
}
.order_wrap + .order_wrap {
margin-bottom: 20px;
}
.stage {
color: green;
font-weight: bold;
}
.location {
color: blue;
font-weight: bold;
}
.info_item {
display: inline-block;
margin-right: 10px;
}
.info_item span:nth-of-type(1) {
color: #999;
}
.info_item span:nth-of-type(2) {
margin-left: 10px;
color: #333;
}
.logistics_item {
font-size: 14px;
margin-bottom: 10px;
}
.error_info {
display: none;
color: red;
}
.loading {
position: absolute;
margin-left: 5px !important;
margin-top: 0px !important;
display: none;
}
.order-number {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.order-status {
margin-bottom: 20px;
}
.status {
font-size: 24px;
font-weight: bold;
}
.log-progress {
padding: 0 20px;
margin-top: 40px;
padding-bottom: 60px;
}
.content {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 30px;
}
.package-info {
display: flex;
align-items: center;
}
.package-info:not(:last-child) {
margin-bottom: 10px;
}
.package-msg {
margin-left: 10px;
}
.logistics:not(:first-child) {
margin-top: 20px;
}
.logistics-date {
margin-bottom: 10px;
}
.logistics-details {
padding: 0px 10px;
background-color: #f5f5f5;
border-radius: 4px;
}
.logistics-details:not(:first-child) {
padding-top: 20px;
}
.logistics-details:last-child {
padding-bottom: 20px;
}
.logistics-time {
color: #666;
font-size: 14px;
font-family: cursive;
}
.shippinp {
font-weight: bold;
margin-bottom: 20px;
}
.progress {
display: flex;
align-items: center;
}
.node-line {
flex: 3;
max-width: 200px;
height: 8px;
border-radius: 5px;
background-color: #ccc;
}
.node-line.active {
background-color: #2bb063;
}
.node-item {
position: relative;
flex: 1;
max-width: 50px;
padding: 0 10px;
}
.node-icon {
width: 30px;
height: 30px;
margin: 0 auto;
background-color: #ccc;
color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.node-item.active .node-icon {
background-color: #2bb063;
}
.node-item.active .node-icon:before {
content: '√';
/* TODO: 更换图标 */
font-weight: bold;
}
.node-text {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-top: 10px;
font-size: 14px;
display: flex;
flex-direction: column;
align-items: center;
}
.node-text div {
white-space: nowrap;
}
.package-contents {
margin-bottom: 10px;
}
.exception-tips {
color: red;
}
@media screen and (max-width: 800px) {
.order-form {
max-width: 90%;
}
.order-status .status {
font-size: 16px;
}
.log-progress {
margin-top: 10px;
padding: 0;
padding-bottom: 60px;
}
.node-item {
padding: 0 6px;
}
.node-icon {
width: 20px;
height: 20px;
}
.node-text {
font-size: 10px;
width: 200%;
transform: translateX(-50%) scale(0.7);
}
.node-text div {
white-space: normal;
word-break: break-all;
}
.content {
display: flex;
gap: 40px;
flex-direction: column-reverse;
}
}
--></style>
<div class="tracking">
<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="order-form">
<p style="margin-top: 25px;">&nbsp;</p>
<p style="margin-top: 25px;"><input name="email" type="text" placeholder="Enter email address" /></p>
<p style="margin-top: 25px;"><input name="orderNo" type="text" placeholder="Enter order No" /></p>
<p style="margin-top: 25px;"><button id="submit-button" type="button"> SUBMIT <img class="loading" style="vertical-align: sub; display: none;" src="https://img-va.myshopline.com/image/store/2000565473/1671082746181/blobid0.gif?w=300&amp;h=300&amp;_f=1" srcset="" alt="" width="20" /> </button></p>
</div>
</div>
<div id="order_main"></div>
<p>
<script>
function doc() {
var root = document.querySelector('.custom-page-render-container > div').shadowRoot
return root || document
}
</script>
<script>// <![CDATA[
function zero(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) {
var year = d.getFullYear()
var month = d.getMonth() + 1
var date = d.getDate()
var hour = d.getHours()
var minutes = d.getMinutes()
var seconds = d.getSeconds()
return (
year +
'-' +
zero(month) +
'-' +
zero(date) +
' ' +
zero(hour) +
':' +
zero(minutes) +
':' +
zero(seconds)
)
}
function setimgUrl(url, options = {}){
var clientWidth = document.body.clientWidth
var dpi = Math.ceil(clientWidth / 1920) + 0.5
var zImgPath = 'https://image.joshine.cn/'
var filePath = 'https://console.joshine.cn/upload/erp/'
var { w, h, ...others } = options
var query = ''
if (w) {
query += query ? '&w=' : 'w=' + Math.floor(dpi * w)
}
if (h) {
query += query ? '&h=' : 'h=' + Math.floor(dpi * h)
}
for (var key in others) {
query += `${query ? '&' : ''}${key}=${options[key]}`
}
if (!url) return ''
if (/(http|https):\/\/([^/]+)/i.test(url)) {
return url
} else if (url.indexOf('/') === -1) {
return zImgPath + url + (query ? '?' : '') + query
} else {
return filePath + url
}
}
// ]]></script>
<script>// <![CDATA[
var loading = false
function submit() {
if (loading) return
loading = true
doc().querySelector('.loading').style.display = 'inline'
/* 清空 */
var order_info = doc().getElementById('order_main')
order_info.innerHTML = ''
var error_info = doc().querySelector('.error_info')
/* 清空 */
var inputs = doc().querySelectorAll('#tracking_order_form input')
var params = {}
for (var i = 0; i < inputs.length; i++) {
var element = inputs[i]
var value = element.value
if (value) {
value = value.trim()
}
params[element.name] = value
}
fetch(`https://ordertrack.online/api/order/tracking?email=${encodeURIComponent(params.email)}&orderNo=${encodeURIComponent(params.orderNo)}`)
.then(res => {
return res.json().then(data => ({ status: res.status, data: data }))
})
.then((res) => {
loading = false
doc().querySelector('.loading').style.display = 'none'
if (res.status == 200) {
if (res.data.code === 200) {
var data = res.data?.data
if (!data || data.length === 0) {
order_info.innerHTML = `<p style="text-align:left"><span style="color:grey">No data, please try again later</span></p>`
return
}
for (var iterator of data) {
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">' +
'<div>' +
progresses[i].key_stage +
'</div>' +
(progresses[i].time_utc
? '<div>' + progresses[i].time_utc + '</div>'
: '') +
'</div></div>'
}
progressHtml += '</div>'
logContainer.innerHTML = progressHtml
div.appendChild(orderStatus)
var shippinpDetail = document.createElement('div')
var logisticsList = iterator?.detailsList || []
var dateMap = {}
var newData = logisticsList.map((item) => {
var d = formatDate(new Date(item.logisticsTime))
var data = d.split(' ')
var date = data[0]
var time = data[1]
item.date = date
item.time = time
return item
})
newData.forEach((item) => {
if (!dateMap[item.date]) dateMap[item.date] = []
dateMap[item.date].push(item)
})
var logisticsEl = document.createElement('div')
logisticsEl.classList.add('content')
var logisticsTxt = ''
logisticsTxt += `<div class="shipping-info">`
logisticsTxt += `<div class="shippinp">Shipping Details</div>`
var isFirst = true
for (var logistics in dateMap) {
var date = new Date(dateMap[logistics][0].logisticsTime)
var displayDate = formatDate1(date)
if (isFirst) {
isFirst = false
displayDate = 'Latest Update ' + displayDate
}
logisticsTxt += `<div class="logistics">`
logisticsTxt += `<div class="logistics-date">${
displayDate || ''
}</div>`
for (var item of dateMap[logistics]) {
logisticsTxt += `<div class="logistics-details">`
logisticsTxt += `<div class="logistics-item">
<span class="logistics-time">${item.time}</span>
<span style="font-family: fangsong;font-weight: bold;">
<span>${item.location || ''}</span>
<span class="description">${
item.description || ''
}</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 class="package-item-image" 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>`
}
logisticsTxt += `</div>`
logisticsTxt += `<div class="package-carrier">
<div style="margin-bottom:10px">Carrier</div>
<div class="package-info">
<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/en#nums=${iterator.trackingNumber}" target="_blank">${iterator.trackingNumber}</a>
</div>
</div>
</div>`
logisticsTxt += `</div>`
logisticsEl.innerHTML = logisticsTxt
div.appendChild(logisticsEl)
div.classList.add('order_wrap')
order_info.appendChild(div)
}
} else {
order_info.innerHTML = `<p style="text-align:left"><span style="color:red">${res.data.message}</span></p>`
}
setTimeout(function() {
var images = doc().querySelectorAll('img.package-item-image')
for (var i = 0; i < images.length; i++) {
var img = images[i]
if (img.dataset.src && !img.src) {
img.src = img.dataset.src
}
}
}, 1000)
}
})
.catch((err) => {
console.log(err)
loading = false
doc().querySelector('.loading').style.display = 'none'
})
}
window.onload = function () {
var url = window.location.href
var p = url.split('?')[1]
var params = new URLSearchParams(p)
var result = Object.fromEntries(params.entries())
if (result.email) {
doc().querySelector("input[name='email']").value = result.email
}
if (result.orderNo) {
doc().querySelector("input[name='orderNo']").value = result.orderNo
}
if (result.email && result.orderNo) {
submit()
}
}
doc().getElementById('submit-button').addEventListener('click', submit)
// ]]></script>
</p>
\ No newline at end of file
track-order.html
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>
<title>Tracking order</title> <title>Tracking order</title>
<script> <script>
// 物流异常提示话术 // 物流异常提示话术
...@@ -368,6 +367,12 @@ ...@@ -368,6 +367,12 @@
</div> </div>
<div id="order_main"></div> <div id="order_main"></div>
<script> <script>
function doc() {
var root = document.querySelector('.custom-page-render-container > div').shadowRoot
return root || document
}
</script>
<script>
function zero(n) { function zero(n) {
return (n < 10 ? '0' : '') + n return (n < 10 ? '0' : '') + n
} }
...@@ -442,13 +447,13 @@ ...@@ -442,13 +447,13 @@
function submit() { function submit() {
if (loading) return if (loading) return
loading = true loading = true
document.querySelector('.loading').style.display = 'inline' doc().querySelector('.loading').style.display = 'inline'
/* 清空 */ /* 清空 */
var order_info = document.getElementById('order_main') var order_info = doc().getElementById('order_main')
order_info.innerHTML = '' order_info.innerHTML = ''
var error_info = document.querySelector('.error_info') var error_info = doc().querySelector('.error_info')
/* 清空 */ /* 清空 */
var inputs = document.querySelectorAll('#tracking_order_form input') var inputs = doc().querySelectorAll('#tracking_order_form input')
var params = {} var params = {}
for (var i = 0; i < inputs.length; i++) { for (var i = 0; i < inputs.length; i++) {
var element = inputs[i] var element = inputs[i]
...@@ -458,11 +463,14 @@ ...@@ -458,11 +463,14 @@
} }
params[element.name] = value params[element.name] = value
} }
axios fetch(`https://ordertrack.online/api/order/tracking?email=${encodeURIComponent(params.email)}&orderNo=${encodeURIComponent(params.orderNo)}`)
.then(res => {
return res.json().then(data => ({ status: res.status, data: data }))
})
.get('api/order/tracking', { params }) .get('api/order/tracking', { params })
.then((res) => { .then((res) => {
loading = false loading = false
document.querySelector('.loading').style.display = 'none' doc().querySelector('.loading').style.display = 'none'
if (res.status == 200) { if (res.status == 200) {
if (res.data.code === 200) { if (res.data.code === 200) {
var data = res.data?.data var data = res.data?.data
...@@ -634,7 +642,7 @@ ...@@ -634,7 +642,7 @@
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( <img class="package-item-image" style="width: 58px" src="${setimgUrl(
l.warehouse_sku_image, l.warehouse_sku_image,
{ w: 60 } { w: 60 }
)}"/> )}"/>
...@@ -670,12 +678,22 @@ ...@@ -670,12 +678,22 @@
} 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>`
} }
setTimeout(function() {
var images = doc().querySelectorAll('img.package-item-image')
for (var i = 0; i < images.length; i++) {
var img = images[i]
if (img.dataset.src && !img.src) {
img.src = img.dataset.src
}
}
}, 1000)
} }
}) })
.catch((err) => { .catch((err) => {
console.log(err) console.log(err)
loading = false loading = false
document.querySelector('.loading').style.display = 'none' doc().querySelector('.loading').style.display = 'none'
}) })
} }
...@@ -685,10 +703,10 @@ ...@@ -685,10 +703,10 @@
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.email) {
document.querySelector("input[name='email']").value = result.email doc().querySelector("input[name='email']").value = result.email
} }
if (result.orderNo) { if (result.orderNo) {
document.querySelector("input[name='orderNo']").value = result.orderNo doc().querySelector("input[name='orderNo']").value = result.orderNo
} }
if (result.email && result.orderNo) { if (result.email && result.orderNo) {
submit() submit()
......
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