1
This commit is contained in:
van
11
src/api/open/jd/promoter.js
Normal file
11
src/api/open/jd/promoter.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
/** 跟团订单查询（免登录） */
|
||||||
|
export function queryTkOrder(params) {
|
||||||
|
return request({
|
||||||
|
url: '/open/jd/queryTkOrder',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
headers: { isToken: false }
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -9,7 +9,7 @@ import { isRelogin } from '@/utils/request'
|
|||||||
|
|
||||||
NProgress.configure({ showSpinner: false })
|
NProgress.configure({ showSpinner: false })
|
||||||
|
|
||||||
const whiteList = ['/login', '/register', '/public/home', '/tools/comment-gen', '/tools/order-search', '/public/order-submit', '/kdocs-callback', '/tendoc-callback']
|
const whiteList = ['/login', '/register', '/public/home', '/tools/comment-gen', '/tools/order-search', '/public/order-submit', '/open/**', '/kdocs-callback', '/tendoc-callback']
|
||||||
|
|
||||||
const isWhiteList = (path) => {
|
const isWhiteList = (path) => {
|
||||||
return whiteList.some(pattern => isPathMatch(pattern, path))
|
return whiteList.some(pattern => isPathMatch(pattern, path))
|
||||||
|
|||||||
@@ -112,6 +112,12 @@ export const constantRoutes = [
|
|||||||
component: () => import('@/views/public/order-submit/index'),
|
component: () => import('@/views/public/order-submit/index'),
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
|
// 京东开放页面（免登录，可单独配置域名）
|
||||||
|
{
|
||||||
|
path: '/open/jd/promoter',
|
||||||
|
component: () => import('@/views/open/jd/promoter/index'),
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
// 移动端专用入口（隐藏菜单，底部导航直达）
|
// 移动端专用入口（隐藏菜单，底部导航直达）
|
||||||
{
|
{
|
||||||
path: '/mobile',
|
path: '/mobile',
|
||||||
|
|||||||
277
src/views/open/jd/promoter/index.vue
Normal file
277
src/views/open/jd/promoter/index.vue
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
<template>
|
||||||
|
<div class="promoter-page">
|
||||||
|
<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"
|
||||||
|
@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"
|
||||||
|
:src="item.skuImageUrl"
|
||||||
|
class="info-img"
|
||||||
|
@error="onImageError"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
<el-empty :description="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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { queryTkOrder } from '@/api/open/jd/promoter'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'OpenJdPromoter',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
orderId: '',
|
||||||
|
orderList: null,
|
||||||
|
errText: '',
|
||||||
|
loading: false,
|
||||||
|
userId: null,
|
||||||
|
defaultLogo: 'https://www.jd.com/favicon.ico'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const params = new URLSearchParams(window.location.search)
|
||||||
|
this.userId = params.get('t')
|
||||||
|
document.title = '跟团查询'
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
if (!this.orderId) return
|
||||||
|
this.loading = true
|
||||||
|
this.orderList = null
|
||||||
|
this.errText = ''
|
||||||
|
queryTkOrder({
|
||||||
|
orderId: this.orderId,
|
||||||
|
t: this.userId
|
||||||
|
}).then(data => {
|
||||||
|
if (data && data.orderInfoList && data.orderInfoList.length) {
|
||||||
|
this.orderList = data.orderInfoList
|
||||||
|
} else {
|
||||||
|
this.errText = (data && data.msg) || '暂无相关订单'
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.errText = '查询失败，请稍后重试'
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onLogoError(e) {
|
||||||
|
e.target.src = this.defaultLogo
|
||||||
|
},
|
||||||
|
onImageError(e) {
|
||||||
|
e.target.style.display = 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
.promoter-page {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
background: #f5f5f5;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.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 20px; }
|
||||||
|
.empty-wrap { padding: 40px 20px; }
|
||||||
|
.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-top: 6px;
|
||||||
|
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>
|
||||||
Reference in New Issue
Block a user