287 lines
7.8 KiB
Vue
287 lines
7.8 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="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: 5px;
|
||
color: gray;" class="code-wrapper code-dialog">
|
||
<div class="input-captcha">
|
||
<div>
|
||
请输入手机号码后四位
|
||
</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" 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: '',
|
||
// 遮罩层
|
||
loading: true,
|
||
// 地球洲表格数据
|
||
traceInfoList: []
|
||
|
||
};
|
||
},
|
||
created() {
|
||
// this.queryData();
|
||
},
|
||
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;
|
||
console.log(this.traceInfoList);
|
||
this.loading = 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
|
||
console.log(this[inputValue], this[previousItem])
|
||
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
|
||
console.log(e.keyCode, this[inputValue], this[nextItem])
|
||
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: 80px;
|
||
height: 80px;
|
||
font-size: 40px;
|
||
text-align: center;
|
||
margin-right: 5px;
|
||
border: 1px solid #d3d3d3;
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
/* 去掉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
|
||
}
|
||
|
||
</style>
|