md
This commit is contained in:
linfso
parent
bd41039fa8
commit
2a430f6a66
365
src/views/openpage/onlinePay.vue
Normal file
365
src/views/openpage/onlinePay.vue
Normal file
@ -0,0 +1,365 @@
|
|||||||
|
<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;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
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:35%; color: gray;">{{ extBillInfo.waybillStatus }}</div>
|
||||||
|
<div style="position: absolute; top:30px;left:35%; color: gray;">{{ extBillInfo.productTypeName }}</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="width:20%;color:black;font-weight: 600;font-size: 18px; display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;text-align: center;">{{ extBillInfo.destinationName }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%;color:black;font-weight: 600;padding-left: 10px;">
|
||||||
|
<div style="color: #880504;text-align: left;" v-if="extBillInfo.blSign==0"> 预计送达:{{ extBillInfo.estimateDate }}</div>
|
||||||
|
<div style="color: #880504;text-align: left;" v-if="extBillInfo.blSign==1"> 签收时间:{{ extBillInfo.signDate }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div v-if="extBillInfo!=null&&extBillInfo.blBillPicDispatchRmk==1" 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>
|
||||||
Loading…
Reference in New Issue
Block a user