枕头定制小程序项目
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

<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>