359 lines
12 KiB
Vue
359 lines
12 KiB
Vue
<template>
|
||
<div class="" style="background-color: #F3F4F8;padding:5px">
|
||
<div>
|
||
<div style="display: inline-flex;width: 100%;" class="panel">
|
||
<!-- <el-input v-model="billCode" placeholder="输入运单号查询物流详情" /> -->
|
||
|
||
<div style="width:85%">
|
||
<el-input v-model="billCode" clearable placeholder="输入运单号查询物流详情" @keyup.enter.native="queryTrace" >
|
||
<i slot="prefix" class="iconfont"></i>
|
||
</el-input>
|
||
</div>
|
||
<div style="width: 15%;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
line-height: 30px;" @click="queryTrace">查询</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div v-if="latestBillList!=null&&latestBillList.length>0" style="margin-top: 10px; font-size: 14px;width:100%" class="panel" >
|
||
<!-- <div style="width: 85%;color:gray;padding-left: 10px;">T12321321</div> -->
|
||
<el-tag class="his-q-code" type="info" v-for="item in latestBillList" :key="item" @click="latestClick(item)">
|
||
{{ item }}
|
||
</el-tag>
|
||
</div>
|
||
<div v-if="extBillInfo!=null" style="line-height:30px;margin-top: 10px; font-size: 14px;width:100%" class="panel" >
|
||
<div style="display: inline-flex; width: 100%;">
|
||
<div style="width:20%;color:black;font-weight: 600; font-size: 18px;line-height: 50px;text-align: center;">{{ extBillInfo.sendSiteName }}</div>
|
||
<div style="position: relative; text-align: center;">
|
||
<svg t="1726269105329" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="2426" width="200" height="50" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M 1467.617 655.095 L -534.095 655.095 C -589.52 653.579 -620.594 625.007 -590.029 603.666 C -577.517 594.93 -556.788 589.42 -534.095 588.798 L 1467.617 588.798 C 1523.042 587.282 1561.249 613.957 1536.386 636.814 C 1523.467 648.693 1496.419 655.882 1467.617 655.095 Z" p-id="2427" style="fill: rgb(135, 5, 5);"/>
|
||
<path d="M 1522.012 638.505 C 1515.688 638.601 1509.572 636.246 1504.945 631.934 L 1319.089 456.404 C 1304.914 444.275 1309.185 421.349 1326.776 415.138 C 1335.725 411.978 1345.694 414.332 1352.284 421.161 L 1538.567 596.692 C 1552.099 609.534 1546.655 632.209 1528.767 637.507 C 1526.574 638.157 1524.3 638.493 1522.012 638.505 Z" p-id="2428" style="fill: rgb(148, 6, 6);"/>
|
||
</svg>
|
||
<div style="position: absolute; top:0px;left:50px; color: gray;">{{ extBillInfo.waybillStatus }}</div>
|
||
<div style="position: absolute; top:30px;left:50px; color: gray;">{{ extBillInfo.productTypeName }}</div>
|
||
|
||
</div>
|
||
<div style="width:20%;color:black;font-weight: 600;font-size: 18px; line-height: 50px; text-align: center;">{{ extBillInfo.destinationName }}</div>
|
||
</div>
|
||
<div style="width: 100%;color:black;font-weight: 600;padding-left: 10px;">
|
||
<div style="color: gray"> 预计送达:{{ extBillInfo.estimateDate }}</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div v-if="traceInfoList!=null&&traceInfoList.length>0" style="line-height:30px;margin-top: 10px; font-size: 14px;display: inline-flex;width:100%" class="panel" >
|
||
<div style="width: 85%;color:gray;padding-left: 10px;">签收底单</div>
|
||
<div style="width: 15%;text-align: center;font-size: 14px;" @click="viewSignedPic">查看</div>
|
||
</div>
|
||
|
||
<!-- <el-scrollbar style="height:400px;"> -->
|
||
<div style="min-height:50px;margin-top: 10px;" class="panel" >
|
||
<!-- <div style="font-weight: 600;margin-bottom: 20px;padding-left: 40px;">运单号:{{ billCode }}</div> -->
|
||
<el-timeline :reverse="reverse">
|
||
<el-timeline-item
|
||
v-for="(step, stepIndex) in traceInfoList"
|
||
:key="stepIndex"
|
||
:timestamp="step.time"
|
||
:type="stepIndex==0?'primary ':''"
|
||
>
|
||
{{step.content}}
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
<!-- </el-scrollbar> -->
|
||
|
||
|
||
<div v-if="open" style="z-index: 2004;width: 97%;
|
||
padding: 15px 15px;
|
||
color: gray;" class="code-wrapper code-dialog">
|
||
<div class="input-captcha" style=" position: relative;">
|
||
<div>
|
||
请输入手机号码后四位
|
||
</div>
|
||
<div style="position: absolute;right: 5px;top: 0px;">
|
||
<span
|
||
@click.stop="clostBtnClick"
|
||
>
|
||
<i class="el-icon-close" style="font-size: 26px;color: black"></i>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="input-box">
|
||
<div class="input-content">
|
||
<input v-model.trim.number="input0" ref="input0" @keydown.8="deleteValue('input0','input0')" @keyup="changeValue($event,'input0','input1')" type="number" placeholder="">
|
||
<input v-model.trim.number="input1" ref="input1" @keydown.8="deleteValue('input1','input0')" @keyup="changeValue($event,'input1','input2')" type="number" placeholder="">
|
||
<input v-model.trim.number="input2" ref="input2" @keydown.8="deleteValue('input2','input1')" @keyup="changeValue($event,'input2','input3')" type="number" placeholder="">
|
||
<input v-model.trim.number="input3" ref="input3" @keydown.8="deleteValue('input3','input2')" @keyup="changeValue($event,'input3','input0')" type="number" placeholder="">
|
||
</div>
|
||
</div>
|
||
<div style="width:100%;text-align: center">
|
||
<el-button type="primary" plain style=" margin-top: 10px;
|
||
width: 60%;
|
||
height: 40px;" @click="handleShowSignPic" >确 定</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="open" class="code-mask" tabindex="0" style="z-index: 2003;"></div>
|
||
|
||
|
||
<el-dialog
|
||
:visible.sync="dialogVisible"
|
||
title="图片"
|
||
width="100%"
|
||
append-to-body
|
||
>
|
||
<img
|
||
:src="signImageUrl"
|
||
style="display: block; max-width: 100%; margin: 0 auto"
|
||
/>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { queryTraceInfo,querySignedPic } from "@/api/oms/emisCommon";
|
||
|
||
export default {
|
||
name: "queryTraceInfo",
|
||
props:{
|
||
// billCode:{
|
||
// type: String,
|
||
// }
|
||
},
|
||
dicts: [],
|
||
data() {
|
||
return {
|
||
billCode:null,
|
||
reverse: false,
|
||
open:false,
|
||
showSignPic:false,
|
||
dialogVisible:false,
|
||
signImageUrl:"",
|
||
input0: '',
|
||
input1: '',
|
||
input2: '',
|
||
input3: '',
|
||
latestBillList:[],
|
||
extBillInfo:null,
|
||
// 遮罩层
|
||
loading: true,
|
||
// 地球洲表格数据
|
||
traceInfoList: []
|
||
|
||
};
|
||
},
|
||
created() {
|
||
// this.queryData();
|
||
this.recordLatestBill();
|
||
},
|
||
watch: {
|
||
// "billCode": {
|
||
// handler (newValue, oldValue) {
|
||
// this.queryData();
|
||
// },
|
||
// deep: true
|
||
// }
|
||
},
|
||
methods: {
|
||
/** 查询地球洲列表 */
|
||
queryTrace() {
|
||
this.loading = true;
|
||
if(!this.billCode){
|
||
return this.$message.error("输入查询单号")
|
||
}
|
||
queryTraceInfo(this.billCode,"1234").then(response => {
|
||
this.traceInfoList = response.data;
|
||
this.extBillInfo=response.extBillInfo;
|
||
this.recordLatestBill(this.billCode);
|
||
this.loading = false;
|
||
});
|
||
|
||
},
|
||
recordLatestBill(billCode){
|
||
const storage = window.localStorage.getItem('queryDataStorage') ? JSON.parse(window.localStorage.getItem('queryDataStorage')) : {}
|
||
this.latestBillList = storage["latestBillList"] ? storage["latestBillList"] : [];
|
||
|
||
if(billCode){
|
||
this.latestBillList.push(billCode);
|
||
let list= this.latestBillList.filter(function(item, index, arr) {
|
||
return arr.indexOf(item, 0) === index;
|
||
})
|
||
this.latestBillList=list;
|
||
}
|
||
|
||
if(this.latestBillList&&this.latestBillList.length>0){
|
||
this.latestBillList= this.latestBillList.reverse();
|
||
let cutList=[...this.latestBillList];
|
||
this.latestBillList=cutList.slice(0,5);
|
||
storage["latestBillList"] = this.latestBillList
|
||
window.localStorage.setItem('queryDataStorage', JSON.stringify(storage))
|
||
}
|
||
|
||
},
|
||
latestClick(item){
|
||
this.billCode=item;
|
||
this.queryTrace();
|
||
},
|
||
clostBtnClick(){
|
||
this.open=false;
|
||
},
|
||
viewSignedPic(){
|
||
this.input0='';
|
||
this.input1='';
|
||
this.input2='';
|
||
this.input3='';
|
||
this.open=true;
|
||
},
|
||
handleShowSignPic(){
|
||
let code=this.input0+""+this.input1+""+this.input2+""+this.input3;
|
||
this.loading = true;
|
||
querySignedPic(this.billCode,code).then(response => {
|
||
// console.log(response.data);
|
||
this.signImageUrl = response.data;
|
||
this.loading = false;
|
||
this.open=false;
|
||
this.dialogVisible=true;
|
||
});
|
||
|
||
},
|
||
deleteValue (inputValue, previousItem) { // 键盘按下时$event，当前input，上一个input
|
||
if (this[inputValue].length > 0) { // 当前有值，清空之
|
||
this[inputValue] = ''
|
||
} else { // 当前没有值，光标跳转到上一个input，并清空该input值
|
||
this.$nextTick(() => {
|
||
this.$refs[previousItem].focus()
|
||
this[previousItem] = ''
|
||
this[inputValue] = ''
|
||
})
|
||
}
|
||
},
|
||
changeValue (e, inputValue, nextItem) { // 键盘抬起时$event，当前input，下一个input
|
||
if (e.keyCode !== 8) {
|
||
this.$nextTick(() => {
|
||
this.$refs[nextItem].focus() // 截取当前值最后一位，跳到下一个input
|
||
this[inputValue] = (this[inputValue]).toString().slice(-1)
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
|
||
<style rel="stylesheet/scss" lang="scss">
|
||
|
||
:deep #app{
|
||
background-color: #fff!important;
|
||
}
|
||
|
||
.el-input__inner:hover {
|
||
border-color: #eeeeee;
|
||
}
|
||
|
||
.panel {
|
||
background-color: #fff;
|
||
padding: 5px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
|
||
|
||
|
||
.input-captcha{
|
||
min-height: 200px;
|
||
.input-box {
|
||
text-align: center;
|
||
min-height: 100px;
|
||
border-radius: 8px;
|
||
width: 100%;
|
||
max-width: 500px;
|
||
display: inline-block;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
input {
|
||
vertical-align: middle;
|
||
}
|
||
& + .input-box {
|
||
margin-top: 20px;
|
||
}
|
||
// 六个span时的样式
|
||
.simple-input-content {
|
||
label {
|
||
padding: 20px;
|
||
}
|
||
span {
|
||
vertical-align: middle;
|
||
border: 1px solid silver;
|
||
display: inline-block;
|
||
height: 20px;
|
||
width: 20px;
|
||
&.highlight {
|
||
border-color: purple;
|
||
}
|
||
}
|
||
}
|
||
// 六个input时的样式
|
||
.input-content {
|
||
padding: 0px;
|
||
input {
|
||
width: 60px;
|
||
height: 60px;
|
||
font-size: 40px;
|
||
text-align: center;
|
||
margin-right: 5px;
|
||
border: 1px solid #d3d3d3;
|
||
border-radius: 5px;
|
||
}
|
||
}
|
||
/* 去掉input[type=number]浏览器默认的icon显示 */
|
||
input::-webkit-outer-spin-button,
|
||
input::-webkit-inner-spin-button { // chrome
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
margin: 0;
|
||
}
|
||
input{ // 火狐
|
||
-moz-appearance:textfield;
|
||
}
|
||
}
|
||
}
|
||
|
||
.code-wrapper {
|
||
position: absolute;
|
||
top: 100px;
|
||
text-align: center;
|
||
}
|
||
.code-dialog{
|
||
margin: 0 auto 50px;
|
||
background: #fff;
|
||
border-radius: 2px;
|
||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.code-mask {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: .5;
|
||
background: #000
|
||
}
|
||
|
||
.his-q-code {
|
||
background-color: #fcfcfc;
|
||
border-color: #d2d2d2;
|
||
color: #000000;
|
||
font-weight: 700;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
</style>
|