数据库分析和对应不同角色页面
This commit is contained in:
not-like-juvenile
278
pages/mall/delivery/test/platform-tracking-query.uvue
Normal file
278
pages/mall/delivery/test/platform-tracking-query.uvue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text class="title">运单/轨迹查询 (运维排障)</text>
|
||||
</view>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-section">
|
||||
<input v-model="searchQuery" placeholder="请输入运单号或订单号" class="search-input" />
|
||||
<button class="search-btn" @click="doSearch">查询</button>
|
||||
</view>
|
||||
|
||||
<view v-if="waybillInfo" class="result-section">
|
||||
<!-- 运单摘要 -->
|
||||
<view class="card summary-card">
|
||||
<view class="card-title">基本信息</view>
|
||||
<view class="grid">
|
||||
<view class="info-item">
|
||||
<text class="label">运单号:</text>
|
||||
<text class="value highlight">{{ waybillInfo.tracking_no }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">承运商:</text>
|
||||
<text class="value">{{ waybillInfo.carrier }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">订单号:</text>
|
||||
<text class="value">{{ waybillInfo.order_no }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">当前状态:</text>
|
||||
<text class="value">{{ waybillInfo.status }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 轨迹列表 -->
|
||||
<view class="card events-card">
|
||||
<view class="card-title">轨迹列表 (内网入库)</view>
|
||||
<view v-for="(event, index) in events" :key="index" class="event-row">
|
||||
<view class="event-time-col">
|
||||
<text class="event-time">{{ formatTime(event.event_time) }}</text>
|
||||
</view>
|
||||
<view class="event-main-col">
|
||||
<text class="event-text">{{ event.event_text }}</text>
|
||||
<view class="event-meta">
|
||||
<text class="meta-tag blue">CODE: {{ event.event_code }}</text>
|
||||
<text class="meta-tag orange">MAP: {{ event.status_code }}</text>
|
||||
</view>
|
||||
<view class="raw-box" v-if="showRaw[index]">
|
||||
<text class="raw-text">{{ JSON.stringify(event.raw_payload, null, 2) }}</text>
|
||||
</view>
|
||||
<text class="toggle-raw" @click="toggleRaw(index)">{{ showRaw[index] ? '折叠原始报文' : '查看原始报文' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Mock 控制板 (仅测试环境) -->
|
||||
<view v-if="isTestEnv" class="card mock-card">
|
||||
<view class="card-title">Mock 控制台 (测试辅助)</view>
|
||||
<view class="action-grid">
|
||||
<button class="mock-btn" @click="runScenario('full')">生成全流程轨迹</button>
|
||||
<button class="mock-btn" @click="runScenario('exception')">注入异常节点</button>
|
||||
<button class="mock-btn" @click="runScenario('standard')">步进下一节点</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="hasSearched" class="empty-section">
|
||||
<text>未找到相关运单记录</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script uts>
|
||||
import { mockService, MockOrder, MockTrackingEvent } from './mock-service.uts'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchQuery: 'YD987654321',
|
||||
hasSearched: false,
|
||||
waybillInfo: null as MockOrder | null,
|
||||
events: [] as MockTrackingEvent[],
|
||||
showRaw: [] as boolean[],
|
||||
isTestEnv: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async doSearch() {
|
||||
if (!this.searchQuery) return
|
||||
uni.showLoading({ title: '查询中...' })
|
||||
|
||||
setTimeout(() => {
|
||||
this.hasSearched = true
|
||||
const tracking = mockService.getMockTracking(this.searchQuery)
|
||||
const orders = mockService.getMockOrders()
|
||||
const order = orders.find((o: MockOrder): boolean => o.tracking_no === this.searchQuery || o.order_no === this.searchQuery)
|
||||
|
||||
if (order != null) {
|
||||
this.waybillInfo = order
|
||||
this.events = tracking
|
||||
} else {
|
||||
this.waybillInfo = null
|
||||
this.events = []
|
||||
}
|
||||
|
||||
this.showRaw = new Array(this.events.length).fill(false)
|
||||
uni.hideLoading()
|
||||
}, 600)
|
||||
},
|
||||
formatTime(time: string) : string {
|
||||
return time
|
||||
},
|
||||
toggleRaw(index: number) {
|
||||
const current = this.showRaw[index]
|
||||
this.showRaw[index] = !current
|
||||
},
|
||||
runScenario(type: string) {
|
||||
if (this.waybillInfo == null) return
|
||||
uni.showModal({
|
||||
title: '确认模拟',
|
||||
content: `是否对 ${this.waybillInfo!.tracking_no} 运行【${type}】场景模拟？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
mockService.runScenario(this.waybillInfo!.tracking_no, type)
|
||||
uni.showToast({ title: '已触发' })
|
||||
setTimeout(() => this.doSearch(), 1000)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 24rpx;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.search-section {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.search-input {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.search-btn {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
padding: 0 40rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
|
||||
}
|
||||
.card-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
margin-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #ebeef5;
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.info-item {
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.label {
|
||||
color: #909399;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.value {
|
||||
color: #303133;
|
||||
}
|
||||
.value.highlight {
|
||||
color: #409eff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.event-row {
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #f2f6fc;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.event-time-col {
|
||||
width: 200rpx;
|
||||
}
|
||||
.event-time {
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
}
|
||||
.event-main-col {
|
||||
flex: 1;
|
||||
}
|
||||
.event-text {
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
.event-meta {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.meta-tag {
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
.meta-tag.blue {
|
||||
background-color: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
.meta-tag.orange {
|
||||
background-color: #fdf6ec;
|
||||
color: #e6a23c;
|
||||
}
|
||||
.toggle-raw {
|
||||
font-size: 22rpx;
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.raw-box {
|
||||
background-color: #f5f7fa;
|
||||
padding: 16rpx;
|
||||
border-radius: 4rpx;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
.raw-text {
|
||||
font-size: 20rpx;
|
||||
color: #606266;
|
||||
font-family: monospace;
|
||||
}
|
||||
.action-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.mock-btn {
|
||||
font-size: 24rpx;
|
||||
padding: 16rpx 0;
|
||||
background-color: #f4f4f5;
|
||||
color: #909399;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
}
|
||||
.empty-section {
|
||||
text-align: center;
|
||||
padding: 100rpx 0;
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user