8cf99911 by lttnew

证书

1 parent cdac517b
<template>
<view class="logistics-page">
<!-- 物流信息卡片 -->
<view class="logistics-info-card">
<view class="info-header">
<uni-icons type=" truck" size="20" color="#AD181F"></uni-icons>
<uni-icons type="paperplane-filled" size="18" color="#AD181F"></uni-icons>
<text class="header-title">物流信息</text>
</view>
<view class="info-content">
<view class="info-row">
<text class="label">运单号</text>
<text class="value tracking-number" @click="copyTracking">{{ currentItem.postCode || '-' }}
<text class="copy-btn">复制</text>
<text class="value tracking-number" @click="copyTracking">
{{ currentItem.postCode || '-' }}
</text>
</view>
<view class="info-row">
<text class="label">当前状态</text>
<text class="value status-sended" v-if="currentItem.postStatus == 1">已邮寄</text>
<text class="value status-pending" v-else>未邮寄</text>
</view>
<view class="info-row">
<text class="label">邮寄时间</text>
<text class="value">{{ currentItem.submitTime ? formatDateTime(currentItem.submitTime) : '-' }}</text>
</view>
</view>
</view>
<!-- 物流时间线 -->
<view class="timeline-section">
<view class="section-header">
<uni-icons type="location-filled" size="18" color="#AD181F"></uni-icons>
<uni-icons type="location-filled" size="20" color="#AD181F"></uni-icons>
<text class="section-title">运输轨迹</text>
</view>
......@@ -39,28 +28,28 @@
<view class="timeline-wrap" v-else>
<view class="timeline-list" v-if="trackingNodes.length > 0">
<view
class="timeline-item"
:class="{ first: idx === 0 }"
v-for="(node, idx) in trackingNodes"
:key="idx"
class="timeline-item"
:class="{ first: idx === 0 }"
>
<view class="timeline-left">
<view class="timeline-dot">
<uni-icons v-if="idx === 0" type="check" size="12" color="#fff"></uni-icons>
<text v-if="idx === 0" class="timeline-check"></text>
</view>
<view class="timeline-line" v-if="idx < trackingNodes.length - 1"></view>
<view v-if="idx < trackingNodes.length - 1" class="timeline-line"></view>
</view>
<view class="timeline-right">
<view class="timeline-content">
<view class="timeline-title">{{ node.categoryName }}</view>
<view class="timeline-time">{{ node.operationTime }}</view>
<view class="timeline-desc">{{ node.operationRemark }}</view>
<view class="timeline-title">{{ node.categoryName || '物流更新' }}</view>
<view class="timeline-time">{{ node.operationTime || '-' }}</view>
<view class="timeline-desc">{{ node.operationRemark || '-' }}</view>
</view>
</view>
</view>
</view>
<view class="no-logistics" v-else>
<view class="nodata" v-else>
<image mode="aspectFit" :src="config.baseUrl_api + '/fs/static/nodata.png'"></image>
<text>暂无物流信息</text>
</view>
......@@ -81,26 +70,25 @@ const currentItem = ref({})
const trackingNodes = ref([])
onLoad((options) => {
if (options.payId) {
payId.value = options.payId
if (options.postCode) currentItem.value.postCode = options.postCode
if (options.postStatus) currentItem.value.postStatus = parseInt(options.postStatus)
if (options.submitTime) currentItem.value.submitTime = options.submitTime
getLogisticsInfo()
}
if (!options.payId) return
payId.value = options.payId
if (options.postCode) currentItem.value.postCode = options.postCode
if (options.postStatus) currentItem.value.postStatus = parseInt(options.postStatus)
if (options.submitTime) currentItem.value.submitTime = options.submitTime
getLogisticsInfo()
})
function getLogisticsInfo() {
if (!payId.value) return
loading.value = true
api.queryTrace(payId.value).then(res => {
loading.value = false
api.queryTrace(payId.value).then((res) => {
trackingNodes.value = res.data || []
}).catch(err => {
loading.value = false
}).catch((err) => {
console.error('获取物流信息失败', err)
uni.showToast({ title: '获取物流信息失败', icon: 'none' })
}).finally(() => {
loading.value = false
})
}
......@@ -113,11 +101,6 @@ function copyTracking() {
}
})
}
function formatDateTime(dateStr) {
if (!dateStr) return '-'
return dateStr.replace('T', ' ').substring(0, 19)
}
</script>
<style lang="scss" scoped>
......@@ -128,7 +111,6 @@ function formatDateTime(dateStr) {
padding-bottom: 40rpx;
}
/* 物流信息卡片 */
.logistics-info-card {
background-color: #fff;
border-radius: 16rpx;
......@@ -155,11 +137,6 @@ function formatDateTime(dateStr) {
justify-content: space-between;
align-items: center;
padding: 16rpx 0;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.label {
font-size: 26rpx;
......@@ -170,32 +147,15 @@ function formatDateTime(dateStr) {
font-size: 26rpx;
color: #333;
&.status-sended {
color: #4caf50;
}
&.status-pending {
color: #ff9800;
}
&.tracking-number {
display: flex;
align-items: center;
gap: 10rpx;
max-width: 460rpx;
text-align: right;
word-break: break-all;
}
}
.copy-btn {
font-size: 22rpx;
color: #AD181F;
background-color: #fef0f0;
padding: 4rpx 12rpx;
border-radius: 16rpx;
}
}
}
/* 时间线 */
.timeline-section {
background-color: #fff;
border-radius: 16rpx;
......@@ -207,6 +167,36 @@ function formatDateTime(dateStr) {
align-items: center;
margin-bottom: 30rpx;
.section-icon {
position: relative;
width: 22rpx;
height: 22rpx;
margin-right: 10rpx;
flex-shrink: 0;
.section-icon-ring {
width: 100%;
height: 100%;
border: 2rpx solid #c4121b;
border-radius: 50%;
box-sizing: border-box;
background: #fff;
}
.section-icon-dot {
position: absolute;
left: 50%;
top: 50%;
width: 8rpx;
height: 8rpx;
margin-left: -4rpx;
margin-top: -4rpx;
border-radius: 50%;
background: #c4121b;
box-shadow: 0 0 0 4rpx rgba(196, 18, 27, 0.08);
}
}
.section-title {
font-size: 30rpx;
font-weight: 600;
......@@ -249,8 +239,8 @@ function formatDateTime(dateStr) {
}
.timeline-dot {
width: 28rpx;
height: 28rpx;
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border: 2px solid #ccc;
background-color: #fff;
......@@ -261,12 +251,19 @@ function formatDateTime(dateStr) {
z-index: 1;
}
.timeline-check {
color: #fff;
font-size: 20rpx;
font-weight: 700;
line-height: 1;
}
.timeline-line {
width: 2rpx;
flex: 1;
background-color: #e0e0e0;
margin: 8rpx 0;
min-height: 60rpx;
margin: 10rpx 0;
min-height: 64rpx;
}
.timeline-right {
......@@ -297,24 +294,24 @@ function formatDateTime(dateStr) {
border-radius: 8rpx;
}
}
}
.no-logistics {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80rpx 0;
.nodata {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80rpx 0;
image {
width: 200rpx;
height: 200rpx;
}
image {
width: 200rpx;
height: 200rpx;
}
text {
font-size: 28rpx;
color: #999;
margin-top: 20rpx;
}
text {
font-size: 28rpx;
color: #999;
margin-top: 20rpx;
}
}
</style>
......
......@@ -918,13 +918,6 @@
}
},
{
"path": "ztx/certDetail",
"style": {
"navigationBarTitleText": "考试详情",
"enablePullDownRefresh": false
}
},
{
"path": "ztx/certLogistics",
"style": {
"navigationBarTitleText": "物流跟踪",
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!