From 2a430f6a668d2d4dd9fd27c415344d57d8cc88e1 Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Thu, 19 Jun 2025 03:12:07 +0800
Subject: [PATCH] md

---
 src/views/openpage/onlinePay.vue | 365 +++++++++++++++++++++++++++++++
 1 file changed, 365 insertions(+)
 create mode 100644 src/views/openpage/onlinePay.vue

diff --git a/src/views/openpage/onlinePay.vue b/src/views/openpage/onlinePay.vue
new file mode 100644
index 0000000..3ca0af1
--- /dev/null
+++ b/src/views/openpage/onlinePay.vue
@@ -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>