You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
8.4 KiB
278 lines
8.4 KiB
<template> |
|
<view class="process_more"> |
|
<view class="com_box"> |
|
<view class="com_txt"> |
|
{{company}} |
|
</view> |
|
<view class="com_num"> |
|
{{logisticsNo}} |
|
</view> |
|
</view> |
|
<!-- 步骤条 --> |
|
<view class="pro_box"> |
|
<view class="set-2" :key="index" v-for="(item,index) in options"> |
|
<view class="wuliu_box"> |
|
<view class="left_box"> |
|
<!-- <image v-if="item.statusCode == '投柜或驿站'" src="../../../static/image/over.png" mode=""></image> --> |
|
<image v-if="(item.statusCode == '1' || item.statusCode == '101' || item.statusCode == '102' || item.statusCode == '103') && index !== 0" src="../../../static/image/lanshou.png" mode=""></image> |
|
<image v-if="(item.statusCode == '1' || item.statusCode == '101' || item.statusCode == '102' || item.statusCode == '103') && index == 0" src="../../../static/image/lanshou_act.png" mode=""></image> |
|
<image v-if="(item.statusCode == '0' || item.statusCode == '1001' || item.statusCode == '1002' || item.statusCode == '1003') && index !== 0" src="../../../static/image/zaitu.png"></image> |
|
<image v-if="(item.statusCode == '0' || item.statusCode == '1001' || item.statusCode == '1002' || item.statusCode == '1003') && index == 0" src="../../../static/image/zaitu_act.png" mode=""></image> |
|
<image v-if="(item.statusCode == '5' || item.statusCode == '501') && index !== 0" src="../../../static/image/paijian.png"></image> |
|
<image v-if="(item.statusCode == '5' || item.statusCode == '501') && index == 0" src="../../../static/image/paijian_act.png" mode=""></image> |
|
<image v-if="(item.statusCode == '3' || item.statusCode == '301' || item.statusCode == '302' || item.statusCode == '303' || item.statusCode == '304') && index !== 0" src="../../../static/image/over.png"></image> |
|
<image v-if="(item.statusCode == '3' || item.statusCode == '301' || item.statusCode == '302' || item.statusCode == '303' || item.statusCode == '304') && index == 0" src="../../../static/image/over_act.png" mode=""></image> |
|
</view> |
|
<view class="right_box"> |
|
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '1' || item.status == '103'"> |
|
已揽收 |
|
</view> |
|
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '101'"> |
|
已下单 |
|
</view> |
|
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '102'"> |
|
待揽收 |
|
</view> |
|
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '0' || item.statusCode == '1001' || item.statusCode == '1002' || item.statusCode == '1003'"> |
|
运输中 |
|
</view> |
|
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '5'"> |
|
派件中 |
|
</view> |
|
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '501'"> |
|
已投递菜鸟驿站/快递柜 |
|
</view> |
|
<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '3' || item.statusCode == '301' || item.statusCode == '302' || item.statusCode == '303' || item.statusCode == '304'"> |
|
已签收 |
|
</view> |
|
<view class="cen_title" :class="index == 0 ? 'active_cen' : ''"> |
|
{{item.context}} |
|
</view> |
|
<view class="bot_title"> |
|
{{item.time}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import md5 from "js-md5"; |
|
export default { |
|
data() { |
|
return { |
|
options: [ |
|
// { |
|
// status: '投柜或驿站', |
|
// context: '【青岛市】 快件已被 菜鸟的【青岛康泰源惠客友超市店】代收,【取件地址:青岛康泰源惠客友超市店】,请及时取件。如有疑问请联系:15805321109,投诉电话:0532-88985563', |
|
// time: '2023-08-18 10:33:33' |
|
// }, |
|
// { |
|
// status: '派件', |
|
// context: '【青岛市】青岛市中五二部(0532-88985563)业务员【杨金梅,19106394524】正在为您派件(95720为中通快递员外呼专属号码,请放心接听,如有问题可联系投诉电话:0532-88985563)', |
|
// time: '2023-08-18 08:08:38' |
|
// }, |
|
// { |
|
// status: '在途', |
|
// context: '【青岛市】 快件已到达 青岛市中五二部', |
|
// time: '2023-08-18 08:08:33' |
|
// }, |
|
// { |
|
// status: '在途', |
|
// context: '【青岛市】 快件已发往 青岛市中五二部', |
|
// time: '2023-08-18 04:36:56' |
|
// }, |
|
// { |
|
// status: '在途', |
|
// context: '【青岛市】 快件已到达 青岛中转部', |
|
// time: '2023-08-18 01:04:40' |
|
// }, |
|
// { |
|
// status: '在途', |
|
// context: '【昆明市】 快件已发往 青岛中转部', |
|
// time: '2023-08-16 00:51:30' |
|
// }, |
|
// { |
|
// status: '在途', |
|
// context: '【昆明市】 快件已到达 昆明中转', |
|
// time: '2023-08-15 15:30:16' |
|
// }, { |
|
// status: '在途', |
|
// context: '【丽江市】 快件已发往 昆明中转', |
|
// time: '2023-08-14 19:02:02' |
|
// }, { |
|
// status: '揽收', |
|
// context: '【丽江市】 【丽江华坪县】(0888-8834031) 的 P1陈平(15108866686) 已揽收', |
|
// time: '2023-08-14 19:01:18' |
|
// } |
|
], |
|
logisticsNo:'', |
|
company:'', |
|
companyCode:'', |
|
} |
|
}, |
|
onLoad(options) { |
|
console.log(options) |
|
this.logisticsNo = options.logisticsNo; |
|
this.company = options.company; |
|
this.companyCode = options.companyCode; |
|
if(this.logisticsNo){ |
|
this.getInfo() |
|
} |
|
// this.getInfo() |
|
}, |
|
methods: { |
|
getInfo(){ |
|
let param = { |
|
customer: "1C32AD38DC92D3A1950391AD766C7F6D", |
|
sign: "", |
|
param: JSON.stringify({ |
|
"com": this.companyCode, |
|
"num": this.logisticsNo, |
|
"phone": '17852327323', |
|
"from": "", |
|
"to": "", |
|
"resultv2": "4", |
|
"show": "0", |
|
"order": "desc" |
|
}) |
|
} |
|
param.sign = md5(param.param + 'ubdRnSOv5517' + param.customer).toUpperCase(); |
|
uni.request({ |
|
url:"https://poll.kuaidi100.com/poll/query.do", |
|
method:"post", |
|
header:{ |
|
"Content-Type": "application/x-www-form-urlencoded", |
|
}, |
|
data: param, |
|
success:(res =>{ |
|
this.options = res.data.data |
|
}) |
|
}) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.process_more { |
|
height: 100%; |
|
overflow-y: hidden; |
|
|
|
.com_box { |
|
width: 690rpx; |
|
height: 90rpx; |
|
margin: 0 auto; |
|
margin-top: 30rpx; |
|
background: #FFFFFF; |
|
border-radius: 30rpx 30rpx 30rpx 30rpx; |
|
display: flex; |
|
align-items: center; |
|
|
|
.com_txt { |
|
margin-left: 38rpx; |
|
margin-right: 20rpx; |
|
font-size: 26rpx; |
|
color: #333; |
|
} |
|
|
|
.com_num { |
|
font-size: 26rpx; |
|
color: #333; |
|
} |
|
} |
|
|
|
.pro_box{ |
|
width: 690rpx; |
|
height: 75%; |
|
overflow-y: auto; |
|
overflow-x: hidden; |
|
background: #FFFFFF; |
|
border-radius: 30rpx 30rpx 30rpx 30rpx; |
|
margin: 0 auto; |
|
margin-top: 30rpx; |
|
padding: 30rpx 0; |
|
|
|
.set-2{ |
|
width: 100%; |
|
|
|
&:last-child{ |
|
.wuliu_box{ |
|
.right_box{ |
|
border-left: none; |
|
} |
|
} |
|
} |
|
|
|
.wuliu_box{ |
|
width: 100%; |
|
// position: relative; |
|
// height: 200rpx; |
|
// background: red; |
|
margin: 0 auto; |
|
display: flex; |
|
// border-left: 2rpx solid #E8E8E8; |
|
|
|
.left_box{ |
|
width: 60rpx; |
|
height: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
padding-left: 20rpx; |
|
justify-content: center; |
|
align-items: center; |
|
|
|
.line_box{ |
|
width: 2rpx; |
|
height: 100%; |
|
background: #E8E8E8; |
|
// position: relative; |
|
} |
|
|
|
image{ |
|
width: 56rpx; |
|
height: 56rpx; |
|
margin-left: 40rpx; |
|
position: relative; |
|
z-index: 100; |
|
// position: absolute; |
|
// left: 20rpx; |
|
} |
|
} |
|
.right_box{ |
|
width: 100%; |
|
padding-left: 60rpx; |
|
padding-bottom: 60rpx; |
|
padding-right: 80rpx; |
|
margin-left: -10rpx; |
|
border-left: 2rpx solid #E8E8E8; |
|
|
|
.top_title{ |
|
font-size: 26rpx; |
|
color: #666; |
|
|
|
&.active_top{ |
|
color: #333; |
|
} |
|
} |
|
.cen_title{ |
|
font-size: 22rpx; |
|
color: #999; |
|
margin: 20rpx 0; |
|
|
|
&.active_cen{ |
|
color: #333; |
|
} |
|
} |
|
.bot_title{ |
|
font-size: 20rpx; |
|
color: #999; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style> |