280 lines
9.5 KiB
HTML
280 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>跟团查询</title>
|
||
<script src="config.js"></script>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; }
|
||
.bg {
|
||
padding: 20px;
|
||
background: linear-gradient(to bottom right, #ccdcfd, #f6f4f7);
|
||
min-height: 14vh;
|
||
}
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: -20px 0 0 -20px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
height: 50px;
|
||
padding-left: 20px;
|
||
}
|
||
.search { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
|
||
.search-input {
|
||
flex: 1;
|
||
height: 36px;
|
||
padding: 0 12px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
outline: none;
|
||
}
|
||
.search-input:focus { border-color: #409eff; }
|
||
.search-btn {
|
||
margin-left: 12px;
|
||
height: 36px;
|
||
padding: 0 20px;
|
||
background: #f56c6c;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
.search-btn:disabled { background: #fab6b6; cursor: not-allowed; }
|
||
.search-btn:hover:not(:disabled) { background: #f78989; }
|
||
.body { padding: 6px 0; }
|
||
.empty-wrap {
|
||
padding: 48px 20px;
|
||
text-align: center;
|
||
color: #909399;
|
||
font-size: 14px;
|
||
}
|
||
.footer {
|
||
margin: 16px 20px;
|
||
padding: 16px;
|
||
border: 1px dashed rgb(119, 165, 199);
|
||
border-radius: 25px;
|
||
}
|
||
.footer-title {
|
||
text-align: center;
|
||
font-size: 16px;
|
||
padding-top: 15px;
|
||
font-weight: bold;
|
||
}
|
||
.footer-desc {
|
||
margin-top: 16px;
|
||
font-size: 12px;
|
||
line-height: 1.8;
|
||
color: #555;
|
||
}
|
||
.order-info {
|
||
padding: 8px;
|
||
margin: 6px 20px 0;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
background-color: #ffffff;
|
||
}
|
||
.shopinfo { display: flex; align-items: center; padding-bottom: 6px; }
|
||
.shopinfo-logo { width: 14px; height: 14px; border-radius: 3px; object-fit: cover; }
|
||
.shopinfo-name {
|
||
margin-left: 6px;
|
||
font-size: 12px;
|
||
color: #222;
|
||
font-weight: bold;
|
||
width: 190px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.info-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
|
||
.info-header-left { display: flex; flex-wrap: wrap; gap: 4px; }
|
||
.valid-msg { font-weight: bold; color: #ff6d6d; }
|
||
.info-body { margin-top: 16px; display: flex; }
|
||
.info-img { width: 70px; height: 70px; object-fit: cover; flex-shrink: 0; }
|
||
.info-img-placeholder {
|
||
width: 70px; height: 70px; background: #f0f0f0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: #ccc; font-size: 20px; flex-shrink: 0;
|
||
}
|
||
.info-cell { margin-left: 8px; overflow: auto; font-size: 10px; flex: 1; }
|
||
.info-cell-name {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
.info-cell-order { margin-top: 6px; word-break: break-all; overflow-wrap: break-word; }
|
||
.info-cell-price { margin-top: 6px; text-align: right; }
|
||
.price-val { color: #e02f2f; font-weight: bold; }
|
||
.info-footer { margin-top: 16px; color: #666; }
|
||
.tag {
|
||
display: inline-block;
|
||
font-size: 11px;
|
||
height: 16px;
|
||
line-height: 14px;
|
||
padding: 0 4px;
|
||
border-radius: 2px;
|
||
border: 1px solid;
|
||
margin: 0 4px 4px 0;
|
||
}
|
||
.tag-default { color: #409eff; border-color: #b3d8ff; background: #ecf5ff; }
|
||
.tag-danger { color: #f56c6c; border-color: #fbc4c4; background: #fef0f0; }
|
||
.tag-success { color: #67c23a; border-color: #c2e7b0; background: #f0f9eb; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div class="bg">
|
||
<div class="logo">订单跟团查询</div>
|
||
<div class="search">
|
||
<input
|
||
v-model="orderId"
|
||
class="search-input"
|
||
placeholder="请输入订单编号"
|
||
@keyup.enter="getList"
|
||
>
|
||
<button class="search-btn" :disabled="loading" @click="getList">
|
||
{{ loading ? '查询中...' : '查询' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="orderList && orderList.length" class="body">
|
||
<div v-for="(item, index) in orderList" :key="index" class="order-info">
|
||
<div class="shopinfo">
|
||
<img
|
||
:src="item.shopLogo || defaultLogo"
|
||
class="shopinfo-logo"
|
||
referrerpolicy="no-referrer"
|
||
@error="onLogoError"
|
||
>
|
||
<div class="shopinfo-name">{{ item.shopName }}</div>
|
||
</div>
|
||
<div class="info-header">
|
||
<div class="info-header-left">
|
||
<span v-if="item.orderSource" class="tag tag-default">{{ item.orderSource }}</span>
|
||
<span
|
||
v-if="item.traceTypeStr"
|
||
:class="['tag', item.traceTypeStr === '跨店' ? 'tag-danger' : 'tag-success']"
|
||
>{{ item.traceTypeStr }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-if="item.parentId" class="info-header">
|
||
<div>父单编号：{{ item.parentId }}</div>
|
||
</div>
|
||
<div class="info-header">
|
||
<div>订单编号：{{ item.orderId }}</div>
|
||
<div class="valid-msg">{{ item.validCodeMsg }}</div>
|
||
</div>
|
||
<div class="info-body">
|
||
<img
|
||
v-if="item.skuImageUrl && !item._imgFailed"
|
||
:src="item.skuImageUrl"
|
||
class="info-img"
|
||
referrerpolicy="no-referrer"
|
||
@error="onImageError(item, $event)"
|
||
>
|
||
<div v-else class="info-img-placeholder">图</div>
|
||
<div class="info-cell">
|
||
<div class="info-cell-name">{{ item.skuName }}</div>
|
||
<div class="info-cell-order">商品单ID：{{ item.itemId }}</div>
|
||
<div class="info-cell-price">
|
||
<span>共{{ item.skuNum }}件</span>
|
||
<span style="padding: 0 8px;">实付 <span class="price-val">¥{{ item.cosPrice }}</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="info-footer">
|
||
<div>下单时间：{{ item.orderTime }}</div>
|
||
<div>完成时间：{{ item.finishTime }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="errText && !orderList" class="empty-wrap">{{ errText }}</div>
|
||
|
||
<div class="footer">
|
||
<div class="footer-title">订单查询须知</div>
|
||
<div class="footer-desc">
|
||
1. 为保障您充分享受下单权益，建议下单10分钟后查询能否正常抓取，如查询结果为"暂无相关订单"即为无效订单，请尽快重拍。<br><br>
|
||
2. 淘宝/天猫订单仅展现已付款状态的订单，若订单尚未付款，无法通过此页面查询到；京东订单支持查询已下单待付款状态的订单。<br><br>
|
||
3. 京东/淘宝订单号可能存在更新的情况，请用京东/淘宝平台后台最新订单号进行查询。<br><br>
|
||
4. 下单不可使用超级红包，京享礼金，京东e卡，会导致订单无效。<br><br>
|
||
5. 请勿勾选非推荐商品合并付款，可能会导致订单无效。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
|
||
<script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
|
||
<script>
|
||
var BASE_API = (window.OPEN_JD_CONFIG && window.OPEN_JD_CONFIG.apiBase) || '/jarvis-api'
|
||
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
orderId: '',
|
||
orderList: null,
|
||
errText: '',
|
||
loading: false,
|
||
userId: null,
|
||
defaultLogo: 'https://www.jd.com/favicon.ico'
|
||
},
|
||
created: function () {
|
||
var params = new URLSearchParams(window.location.search)
|
||
this.userId = params.get('t')
|
||
document.title = '跟团查询'
|
||
},
|
||
methods: {
|
||
getList: function () {
|
||
if (!this.orderId) return
|
||
var self = this
|
||
this.loading = true
|
||
this.orderList = null
|
||
this.errText = ''
|
||
axios.get(BASE_API + '/open/jd/queryTkOrder', {
|
||
params: { orderId: this.orderId, t: this.userId }
|
||
}).then(function (res) {
|
||
var data = res.data || {}
|
||
if (data.orderInfoList && data.orderInfoList.length) {
|
||
self.orderList = data.orderInfoList
|
||
} else {
|
||
self.errText = data.msg || '暂无相关订单'
|
||
}
|
||
}).catch(function () {
|
||
self.errText = '查询失败，请稍后重试'
|
||
}).finally(function () {
|
||
self.loading = false
|
||
})
|
||
},
|
||
onLogoError: function (e) {
|
||
e.target.src = this.defaultLogo
|
||
},
|
||
onImageError: function (item, e) {
|
||
var tryCount = item._imgTry || 0
|
||
var fallbacks = []
|
||
if (item.skuId) {
|
||
fallbacks.push(
|
||
'https://img14.360buyimg.com/n5/s450x450_' + item.skuId + '.jpg',
|
||
'https://img10.360buyimg.com/n1/s450x450_' + item.skuId + '.jpg',
|
||
'https://img14.360buyimg.com/n1/s240x240_' + item.skuId + '.jpg'
|
||
)
|
||
}
|
||
if (tryCount < fallbacks.length) {
|
||
item._imgTry = tryCount + 1
|
||
e.target.src = fallbacks[tryCount]
|
||
return
|
||
}
|
||
this.$set(item, '_imgFailed', true)
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|