<template>
|
<el-container>
|
<el-header height="80px">
|
<page-header></page-header>
|
</el-header>
|
<el-main>
|
<el-carousel :interval="8000" height="250px" class="slider-area">
|
<el-carousel-item style="background:url(https://auod-bucket-wms.oss-ap-southeast-2.aliyuncs.com/Upload/Site/slider3.jpg);background-position-y: -150px;">
|
<div class="container">
|
<div class="slide-content-wrapper">
|
<div class="slide-content">
|
<h2>货物追踪查询</h2>
|
<p>请输入运单号即可查询到运单轨迹信息 </p>
|
</div>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<!-- Cowork Start -->
|
<section class="container cowork-area">
|
<el-row>
|
<el-col :span="6" :xs="24" class="card-left">
|
<div class="search-box">
|
<div class="title">货物追踪查询</div>
|
</div>
|
<div class="search-region">
|
<div class="title">运单号：</div>
|
<el-input v-model="wayBillCode" class="w-100pc margin-bottom-10" @keyup.native.enter.stop="getWayBillInfo"></el-input>
|
<el-button type="primary" @click="getWayBillInfo()">查询</el-button>
|
</div>
|
</el-col>
|
<el-col :span="18" :xs="24" class="card-main">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>货物追踪查询</el-breadcrumb-item>
|
</el-breadcrumb>
|
<div class="split-line"></div>
|
<div class="remark">
|
<h2>运单查询结果</h2>
|
<table class="table xl" cellspacing="0" cellpadding="0">
|
<tbody>
|
<tr>
|
<td class="title w-150">运单号：</td>
|
<td class="value">{{ waybillData.wayBillCode }}</td>
|
<td class="title" w-150>快递单号：</td>
|
<td class="value">
|
<span v-if="waybillData.expressCode">
|
{{ waybillData.expressCode }} ({{ changeExpressName(waybillData.expressCorpName) }})
|
</span>
|
</td>
|
</tr>
|
<tr>
|
<td class="title">出运地：</td>
|
<td class="value">{{ (waybillData && waybillData.storageName)?waybillData.storageName.replace("仓", "").replace("库", ""):"" }}</td>
|
<td class="title">目的地：</td>
|
<td class="value">{{ waybillData.cityName }}</td>
|
</tr>
|
<tr>
|
<td class="title">件数：</td>
|
<td class="value">{{ 1 }}</td>
|
<td class="title">重量：</td>
|
<td class="value">{{ waybillData.grossWeight }}KG</td>
|
</tr>
|
<tr>
|
<td class="title">当前状态：</td>
|
<td class="value" colspan="3">{{ waybillHistory.length?waybillHistory[0].toStatus:"" }}</td>
|
</tr>
|
</tbody>
|
</table>
|
|
<table class="table xs" cellspacing="0" cellpadding="0">
|
<tbody>
|
<tr>
|
<td class="title w-150">运单号：</td>
|
<td class="value">{{ waybillData.wayBillCode }}</td>
|
</tr>
|
<tr>
|
<td class="title" w-150>快递单号：</td>
|
<td class="value">
|
<span v-if="waybillData.expressCode">
|
{{ waybillData.expressCode }} ({{ changeExpressName(waybillData.expressCorpName) }})
|
</span>
|
</td>
|
</tr>
|
<tr>
|
<td class="title">出运地：</td>
|
<td class="value">{{ (waybillData && waybillData.storageName)?waybillData.storageName.replace("仓", "").replace("库", ""):"" }}</td>
|
</tr>
|
<tr>
|
<td class="title">目的地：</td>
|
<td class="value">{{ waybillData.cityName }}</td>
|
</tr>
|
<tr>
|
<td class="title">件数：</td>
|
<td class="value">{{ 1 }}</td>
|
</tr>
|
<tr>
|
<td class="title">重量：</td>
|
<td class="value">{{ waybillData.grossWeight }}KG</td>
|
</tr>
|
<tr>
|
<td class="title">当前状态：</td>
|
<td class="value" colspan="3">{{ waybillHistory.length?waybillHistory[waybillHistory.length - 1].toStatus:"" }}</td>
|
</tr>
|
</tbody>
|
</table>
|
<h2 class="margin-top-20">货物跟踪信息</h2>
|
<div>
|
<div class="track-rcol">
|
<div class="track-list">
|
<div v-if="!waybillHistory.length">{{ msg }}</div>
|
<ul v-else>
|
<li v-for="(item, index) in waybillHistory" :key="index" :class="{first:index===0, last:index===waybillHistory.length - 1}">
|
<span class="time">{{ item.createDate }}</span>
|
<i class="node-icon"></i>
|
<span class="txt">{{ displayTitle(item.toStatus) }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</section>
|
<!-- Cowork End -->
|
</el-main>
|
<el-footer height="auto">
|
<!-- Footer Start -->
|
<page-footer></page-footer>
|
<!-- Footer End -->
|
</el-footer>
|
</el-container>
|
</template>
|
|
<script>
|
import pageHeader from "./components/header.vue";
|
import pageFooter from "./components/footer.vue";
|
|
export default {
|
components: {
|
pageHeader,
|
pageFooter
|
},
|
data() {
|
return {
|
wayBillCode: null,
|
waybillData: {},
|
waybillHistory: [],
|
msg: "暂无数据"
|
};
|
},
|
created() {
|
var wayBillCode = this.$route.params.id;
|
if (wayBillCode) {
|
this.wayBillCode = wayBillCode;
|
this.getWayBillInfo();
|
}
|
},
|
activated() {
|
var wayBillCode = this.$route.params.id;
|
if (wayBillCode) {
|
this.wayBillCode = wayBillCode;
|
}
|
},
|
methods: {
|
onWaySearch() {},
|
// 点击查询按钮跳转到url
|
goSearch() {
|
this.$router.push("/way-search/" + this.wayBillCode);
|
},
|
getWayBillInfo() {
|
var url = "/api/tms/userSys/client/getRouterList";
|
var params = { wayBillCode: this.wayBillCode };
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
const hisList = res.data.hisList;
|
// 过滤重复
|
const filterHisList = hisList.filter((item, index) => {
|
const existIndex = hisList.findIndex(fItem => {
|
return fItem.toStatus === item.toStatus;
|
});
|
return existIndex === index;
|
});
|
|
this.waybillData = res.data.wbInfo;
|
this.waybillHistory = filterHisList;
|
if (res.data.wbInfo === null) {
|
this.waybillData = {};
|
}
|
this.waybillHistory = this.waybillHistory.sort((a, b) => {
|
const s = a.createDate > b.createDate ? -1 : 1;
|
return s;
|
});
|
} else {
|
this.waybillData = {};
|
this.waybillData = {};
|
this.waybillHistory = [];
|
}
|
},
|
true
|
);
|
},
|
// 快递公司名称转换
|
changeExpressName(name) {
|
if (!name) return name;
|
|
if (name.toLowerCase().indexOf("ems") >= 0) {
|
name = "EMS";
|
} else if (name.indexOf("顺丰") >= 0) {
|
name = "顺丰";
|
} else if (name.indexOf("圆通") >= 0) {
|
name = "圆通";
|
}
|
|
return name;
|
},
|
// 显示内容
|
displayTitle(title) {
|
if (title && title.indexOf("清关中") >= 0) {
|
title = "清关中";
|
} else if (title && title.indexOf("未上传身份证") >= 0) {
|
title = "未上传身份证";
|
}
|
return title;
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
@import "@/styles/user.scss";
|
</style>
|
|
<style lang="scss" scoped>
|
.el-header {
|
background-color: white;
|
padding: 10px;
|
}
|
.el-main {
|
background-color: white;
|
padding: 0px;
|
.slide-content-wrapper {
|
display: inline-table;
|
width: 100%;
|
margin-top: 50px;
|
}
|
.slide-content {
|
display: table-cell;
|
text-align: center;
|
vertical-align: middle;
|
}
|
.slide-content h2 {
|
color: #fff;
|
font-family: "Playfair Display", serif;
|
font-size: 40px;
|
font-weight: 400;
|
margin-bottom: 20px;
|
text-transform: capitalize;
|
-webkit-animation-delay: 0.7s;
|
animation-delay: 0.7s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slide-content p {
|
color: #fff;
|
font-family: "Lato", sans-serif;
|
font-size: 20px;
|
font-weight: 400;
|
margin-bottom: 30px;
|
-webkit-animation-delay: 0.8s;
|
animation-delay: 0.8s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slide-content .banner-btn {
|
-webkit-animation-delay: 1.2s;
|
animation-delay: 1.2s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slider-area .el-carousel__item.is-active .slide-content h2,
|
.slider-area .el-carousel__item.is-active .slide-content p,
|
.slider-area .el-carousel__item.is-active .banner-btn {
|
-webkit-animation-name: fadeInUp;
|
animation-name: fadeInUp;
|
}
|
.slider-area .el-carousel__item.is-active .banner-btn {
|
-webkit-animation-name: fadeInUp;
|
animation-name: fadeInUp;
|
}
|
|
.card-left {
|
padding: 20px 20px 50px;
|
.search-box {
|
border-bottom: 2px solid #e4e7ed;
|
padding-top: 2px;
|
padding-bottom: 13px;
|
margin-bottom: 10px;
|
position: relative;
|
&:after {
|
content: " ";
|
position: absolute;
|
bottom: -2px;
|
width: 100px;
|
border-bottom: 2px solid #409eff;
|
}
|
}
|
.search-region {
|
.title {
|
padding: 10px 0;
|
}
|
}
|
}
|
.card-main {
|
padding: 20px 20px 50px;
|
border-left: 1px solid #e4e7ed;
|
h2 {
|
font-size: 25px;
|
}
|
|
.table {
|
border: 1px solid #ddd;
|
border-collapse: collapse;
|
font-size: 14px;
|
width: 800px;
|
&.xs {
|
display: none;
|
}
|
|
thead tr th,
|
tbody tr td {
|
padding: 8px 12px;
|
color: #333;
|
border: 1px solid #ddd;
|
border-collapse: collapse;
|
background-color: #fff;
|
}
|
.title {
|
font-weight: bold;
|
color: #666;
|
text-align: right;
|
}
|
}
|
}
|
.el-steps {
|
/deep/ .el-step.is-vertical {
|
height: 70px;
|
}
|
/deep/ .el-step__icon-inner {
|
display: none;
|
}
|
}
|
}
|
.el-footer {
|
padding: 0;
|
}
|
/* 手机屏 */
|
@media screen and (max-width: 480px) {
|
.container {
|
padding-left: 0px;
|
padding-right: 0px;
|
}
|
.el-main {
|
.card-left {
|
padding: 20px 20px 10px;
|
}
|
.card-main {
|
padding: 20px 20px 50px;
|
border-left: 0px solid #e4e7ed;
|
.table {
|
width: 100%;
|
&.xl {
|
display: none;
|
}
|
&.xs {
|
display: block;
|
}
|
.title {
|
width: 35%;
|
}
|
.value {
|
width: 65%;
|
}
|
}
|
}
|
}
|
}
|
/*******************************/
|
ul li {
|
list-style: none;
|
}
|
.track-rcol {
|
width: 100%;
|
border: 1px solid #eee;
|
}
|
.track-list {
|
margin: 20px 10px;
|
padding-left: 5px;
|
position: relative;
|
ul li::before {
|
border-left: 1px solid #999;
|
position: absolute;
|
content: " ";
|
height: 100%;
|
left: 97px;
|
top: 10px;
|
}
|
ul li.last::before {
|
height: 8px;
|
}
|
}
|
.track-list li {
|
position: relative;
|
padding: 5px 0 10px 0px;
|
line-height: 1.2;
|
color: #666;
|
width: 100%;
|
font-size: 14px;
|
}
|
.track-list li.first {
|
color: #333;
|
padding-top: 0;
|
border-left-color: #fff;
|
font-weight: bolder;
|
&::before {
|
color: #333;
|
border-left: 1px solid #999;
|
}
|
.node-icon {
|
background-color: #333;
|
}
|
}
|
.track-list li .node-icon {
|
position: relative;
|
left: -10px;
|
top: 0;
|
width: 7px;
|
height: 7px;
|
background-color: #999;
|
margin-right: 5px;
|
display: inline-block;
|
border-radius: 20px;
|
font-size: 1px;
|
line-height: 1px;
|
}
|
.track-list li.first .node-icon {
|
background-position: 0 -72px;
|
}
|
.track-list li .time {
|
padding-right: 10px;
|
position: relative;
|
top: 4px;
|
display: inline-block;
|
vertical-align: top;
|
width: 100px;
|
text-align: center;
|
}
|
.track-list li .txt {
|
position: relative;
|
top: 4px;
|
display: inline-block;
|
vertical-align: top;
|
word-break: break-all;
|
max-width: 250px;
|
}
|
.track-list li.first .time {
|
margin-right: 0px;
|
}
|
|
/* 手机屏 */
|
@media screen and (min-width: 760px) {
|
.track-list li .txt {
|
max-width: 500px;
|
}
|
}
|
|
/* 手机屏 */
|
@media screen and (max-width: 420px) {
|
.track-list li .txt {
|
max-width: 210px;
|
}
|
}
|
|
/* 手机屏 */
|
@media screen and (max-width: 375px) {
|
.track-list li .txt {
|
max-width: 180px;
|
}
|
}
|
|
/* 手机屏 */
|
@media screen and (max-width: 360px) {
|
.track-list li .txt {
|
max-width: 160px;
|
}
|
}
|
</style>
|
