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 })
|
||||
|
||||
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) => {
|
||||
return whiteList.some(pattern => isPathMatch(pattern, path))
|
||||
|
||||
@@ -112,6 +112,12 @@ export const constantRoutes = [
|
||||
component: () => import('@/views/public/order-submit/index'),
|
||||
hidden: true
|
||||
},
|
||||
// 京东开放页面（免登录，可单独配置域名）
|
||||
{
|
||||
path: '/open/jd/promoter',
|
||||
component: () => import('@/views/open/jd/promoter/index'),
|
||||
hidden: true
|
||||
},
|
||||
// 移动端专用入口（隐藏菜单，底部导航直达）
|
||||
{
|
||||
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