aike/emis-oms-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

md

Browse Source
This commit is contained in:
linfso 2025-06-19 03:12:07 +08:00
parent bd41039fa8
commit 2a430f6a66
1 changed files with 365 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

365
src/views/openpage/onlinePay.vue Normal file
View 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">&#xe656;</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>