Skip to content

杨炀 / ztx_wx_gzt

Go to a project
Toggle navigation
Toggle navigation pinning
8cf99911 by lttnew
Options

证书

1 parent cdac517b
Expand all
Inline Side-by-side
Showing 4 changed files with 81 additions and 91 deletions
level/ztx/certLogistics.vue
1 <template> 1 <template>
2 <view class="logistics-page"> 2 <view class="logistics-page">
3 <!-- 物流信息卡片 -->
4 <view class="logistics-info-card"> 3 <view class="logistics-info-card">
5 <view class="info-header"> 4 <view class="info-header">
6 <uni-icons type=" truck" size="20" color="#AD181F"></uni-icons> 5 <uni-icons type="paperplane-filled" size="18" color="#AD181F"></uni-icons>
7 <text class="header-title">物流信息</text> 6 <text class="header-title">物流信息</text>
8 </view> 7 </view>
9 <view class="info-content"> 8 <view class="info-content">
10 <view class="info-row"> 9 <view class="info-row">
11 <text class="label">运单号</text> 10 <text class="label">运单号</text>
12 <text class="value tracking-number" @click="copyTracking">{{ currentItem.postCode || '-' }} 11 <text class="value tracking-number" @click="copyTracking">
13 <text class="copy-btn">复制</text> 12 {{ currentItem.postCode || '-' }}
14 </text> 13 </text>
15 </view> 14 </view>
16 <view class="info-row">
17 <text class="label">当前状态</text>
18 <text class="value status-sended" v-if="currentItem.postStatus == 1">已邮寄</text>
19 <text class="value status-pending" v-else>未邮寄</text>
20 </view>
21 <view class="info-row">
22 <text class="label">邮寄时间</text>
23 <text class="value">{{ currentItem.submitTime ? formatDateTime(currentItem.submitTime) : '-' }}</text>
24 </view>
25 </view> 15 </view>
26 </view> 16 </view>
27 17
28 <!-- 物流时间线 -->
29 <view class="timeline-section"> 18 <view class="timeline-section">
30 <view class="section-header"> 19 <view class="section-header">
31 <uni-icons type="location-filled" size="18" color="#AD181F"></uni-icons> 20 <uni-icons type="location-filled" size="20" color="#AD181F"></uni-icons>
32 <text class="section-title">运输轨迹</text> 21 <text class="section-title">运输轨迹</text>
33 </view> 22 </view>
34 23
...@@ -39,28 +28,28 @@ ...@@ -39,28 +28,28 @@
39 <view class="timeline-wrap" v-else> 28 <view class="timeline-wrap" v-else>
40 <view class="timeline-list" v-if="trackingNodes.length > 0"> 29 <view class="timeline-list" v-if="trackingNodes.length > 0">
41 <view 30 <view
42 class="timeline-item"
43 :class="{ first: idx === 0 }"
44 v-for="(node, idx) in trackingNodes" 31 v-for="(node, idx) in trackingNodes"
45 :key="idx" 32 :key="idx"
33 class="timeline-item"
34 :class="{ first: idx === 0 }"
46 > 35 >
47 <view class="timeline-left"> 36 <view class="timeline-left">
48 <view class="timeline-dot"> 37 <view class="timeline-dot">
49 <uni-icons v-if="idx === 0" type="check" size="12" color="#fff"></uni-icons> 38 <text v-if="idx === 0" class="timeline-check">✓</text>
50 </view> 39 </view>
51 <view class="timeline-line" v-if="idx < trackingNodes.length - 1"></view> 40 <view v-if="idx < trackingNodes.length - 1" class="timeline-line"></view>
52 </view> 41 </view>
53 <view class="timeline-right"> 42 <view class="timeline-right">
54 <view class="timeline-content"> 43 <view class="timeline-content">
55 <view class="timeline-title">{{ node.categoryName }}</view> 44 <view class="timeline-title">{{ node.categoryName || '物流更新' }}</view>
56 <view class="timeline-time">{{ node.operationTime }}</view> 45 <view class="timeline-time">{{ node.operationTime || '-' }}</view>
57 <view class="timeline-desc">{{ node.operationRemark }}</view> 46 <view class="timeline-desc">{{ node.operationRemark || '-' }}</view>
58 </view> 47 </view>
59 </view> 48 </view>
60 </view> 49 </view>
61 </view> 50 </view>
62 51
63 <view class="no-logistics" v-else> 52 <view class="nodata" v-else>
64 <image mode="aspectFit" :src="config.baseUrl_api + '/fs/static/nodata.png'"></image> 53 <image mode="aspectFit" :src="config.baseUrl_api + '/fs/static/nodata.png'"></image>
65 <text>暂无物流信息</text> 54 <text>暂无物流信息</text>
66 </view> 55 </view>
...@@ -81,26 +70,25 @@ const currentItem = ref({}) ...@@ -81,26 +70,25 @@ const currentItem = ref({})
81 const trackingNodes = ref([]) 70 const trackingNodes = ref([])
82 71
83 onLoad((options) => { 72 onLoad((options) => {
84 if (options.payId) { 73 if (!options.payId) return
85 payId.value = options.payId 74 payId.value = options.payId
86 if (options.postCode) currentItem.value.postCode = options.postCode 75 if (options.postCode) currentItem.value.postCode = options.postCode
87 if (options.postStatus) currentItem.value.postStatus = parseInt(options.postStatus) 76 if (options.postStatus) currentItem.value.postStatus = parseInt(options.postStatus)
88 if (options.submitTime) currentItem.value.submitTime = options.submitTime 77 if (options.submitTime) currentItem.value.submitTime = options.submitTime
89 getLogisticsInfo() 78 getLogisticsInfo()
90 }
91 }) 79 })
92 80
93 function getLogisticsInfo() { 81 function getLogisticsInfo() {
94 if (!payId.value) return 82 if (!payId.value) return
95 83
96 loading.value = true 84 loading.value = true
97 api.queryTrace(payId.value).then(res => { 85 api.queryTrace(payId.value).then((res) => {
98 loading.value = false
99 trackingNodes.value = res.data || [] 86 trackingNodes.value = res.data || []
100 }).catch(err => { 87 }).catch((err) => {
101 loading.value = false
102 console.error('获取物流信息失败', err) 88 console.error('获取物流信息失败', err)
103 uni.showToast({ title: '获取物流信息失败', icon: 'none' }) 89 uni.showToast({ title: '获取物流信息失败', icon: 'none' })
90 }).finally(() => {
91 loading.value = false
104 }) 92 })
105 } 93 }
106 94
...@@ -113,11 +101,6 @@ function copyTracking() { ...@@ -113,11 +101,6 @@ function copyTracking() {
113 } 101 }
114 }) 102 })
115 } 103 }
116
117 function formatDateTime(dateStr) {
118 if (!dateStr) return '-'
119 return dateStr.replace('T', ' ').substring(0, 19)
120 }
121 </script> 104 </script>
122 105
123 <style lang="scss" scoped> 106 <style lang="scss" scoped>
...@@ -128,7 +111,6 @@ function formatDateTime(dateStr) { ...@@ -128,7 +111,6 @@ function formatDateTime(dateStr) {
128 padding-bottom: 40rpx; 111 padding-bottom: 40rpx;
129 } 112 }
130 113
131 /* 物流信息卡片 */
132 .logistics-info-card { 114 .logistics-info-card {
133 background-color: #fff; 115 background-color: #fff;
134 border-radius: 16rpx; 116 border-radius: 16rpx;
...@@ -155,11 +137,6 @@ function formatDateTime(dateStr) { ...@@ -155,11 +137,6 @@ function formatDateTime(dateStr) {
155 justify-content: space-between; 137 justify-content: space-between;
156 align-items: center; 138 align-items: center;
157 padding: 16rpx 0; 139 padding: 16rpx 0;
158 border-bottom: 1px solid #f0f0f0;
159
160 &:last-child {
161 border-bottom: none;
162 }
163 140
164 .label { 141 .label {
165 font-size: 26rpx; 142 font-size: 26rpx;
...@@ -170,32 +147,15 @@ function formatDateTime(dateStr) { ...@@ -170,32 +147,15 @@ function formatDateTime(dateStr) {
170 font-size: 26rpx; 147 font-size: 26rpx;
171 color: #333; 148 color: #333;
172 149
173 &.status-sended {
174 color: #4caf50;
175 }
176
177 &.status-pending {
178 color: #ff9800;
179 }
180
181 &.tracking-number { 150 &.tracking-number {
182 display: flex; 151 max-width: 460rpx;
183 align-items: center; 152 text-align: right;
184 gap: 10rpx; 153 word-break: break-all;
185 } 154 }
186 } 155 }
187
188 .copy-btn {
189 font-size: 22rpx;
190 color: #AD181F;
191 background-color: #fef0f0;
192 padding: 4rpx 12rpx;
193 border-radius: 16rpx;
194 }
195 } 156 }
196 } 157 }
197 158
198 /* 时间线 */
199 .timeline-section { 159 .timeline-section {
200 background-color: #fff; 160 background-color: #fff;
201 border-radius: 16rpx; 161 border-radius: 16rpx;
...@@ -207,6 +167,36 @@ function formatDateTime(dateStr) { ...@@ -207,6 +167,36 @@ function formatDateTime(dateStr) {
207 align-items: center; 167 align-items: center;
208 margin-bottom: 30rpx; 168 margin-bottom: 30rpx;
209 169
170 .section-icon {
171 position: relative;
172 width: 22rpx;
173 height: 22rpx;
174 margin-right: 10rpx;
175 flex-shrink: 0;
176
177 .section-icon-ring {
178 width: 100%;
179 height: 100%;
180 border: 2rpx solid #c4121b;
181 border-radius: 50%;
182 box-sizing: border-box;
183 background: #fff;
184 }
185
186 .section-icon-dot {
187 position: absolute;
188 left: 50%;
189 top: 50%;
190 width: 8rpx;
191 height: 8rpx;
192 margin-left: -4rpx;
193 margin-top: -4rpx;
194 border-radius: 50%;
195 background: #c4121b;
196 box-shadow: 0 0 0 4rpx rgba(196, 18, 27, 0.08);
197 }
198 }
199
210 .section-title { 200 .section-title {
211 font-size: 30rpx; 201 font-size: 30rpx;
212 font-weight: 600; 202 font-weight: 600;
...@@ -249,8 +239,8 @@ function formatDateTime(dateStr) { ...@@ -249,8 +239,8 @@ function formatDateTime(dateStr) {
249 } 239 }
250 240
251 .timeline-dot { 241 .timeline-dot {
252 width: 28rpx; 242 width: 32rpx;
253 height: 28rpx; 243 height: 32rpx;
254 border-radius: 50%; 244 border-radius: 50%;
255 border: 2px solid #ccc; 245 border: 2px solid #ccc;
256 background-color: #fff; 246 background-color: #fff;
...@@ -261,12 +251,19 @@ function formatDateTime(dateStr) { ...@@ -261,12 +251,19 @@ function formatDateTime(dateStr) {
261 z-index: 1; 251 z-index: 1;
262 } 252 }
263 253
254 .timeline-check {
255 color: #fff;
256 font-size: 20rpx;
257 font-weight: 700;
258 line-height: 1;
259 }
260
264 .timeline-line { 261 .timeline-line {
265 width: 2rpx; 262 width: 2rpx;
266 flex: 1; 263 flex: 1;
267 background-color: #e0e0e0; 264 background-color: #e0e0e0;
268 margin: 8rpx 0; 265 margin: 10rpx 0;
269 min-height: 60rpx; 266 min-height: 64rpx;
270 } 267 }
271 268
272 .timeline-right { 269 .timeline-right {
...@@ -297,24 +294,24 @@ function formatDateTime(dateStr) { ...@@ -297,24 +294,24 @@ function formatDateTime(dateStr) {
297 border-radius: 8rpx; 294 border-radius: 8rpx;
298 } 295 }
299 } 296 }
297 }
300 298
301 .no-logistics { 299 .nodata {
302 display: flex; 300 display: flex;
303 flex-direction: column; 301 flex-direction: column;
304 align-items: center; 302 align-items: center;
305 justify-content: center; 303 justify-content: center;
306 padding: 80rpx 0; 304 padding: 80rpx 0;
307 305
308 image { 306 image {
309 width: 200rpx; 307 width: 200rpx;
310 height: 200rpx; 308 height: 200rpx;
311 } 309 }
312 310
313 text { 311 text {
314 font-size: 28rpx; 312 font-size: 28rpx;
315 color: #999; 313 color: #999;
316 margin-top: 20rpx; 314 margin-top: 20rpx;
317 }
318 } 315 }
319 } 316 }
320 </style> 317 </style>
......
pages.json
...@@ -918,13 +918,6 @@ ...@@ -918,13 +918,6 @@
918 } 918 }
919 }, 919 },
920 { 920 {
921 "path": "ztx/certDetail",
922 "style": {
923 "navigationBarTitleText": "考试详情",
924 "enablePullDownRefresh": false
925 }
926 },
927 {
928 "path": "ztx/certLogistics", 921 "path": "ztx/certLogistics",
929 "style": { 922 "style": {
930 "navigationBarTitleText": "物流跟踪", 923 "navigationBarTitleText": "物流跟踪",
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!