md

src/views/openpage/queryTraceInfo.vue

@@ -5,7 +5,7 @@
           <!-- <el-input v-model="billCode" placeholder="输入运单号查询物流详情" /> -->
 
           <div style="width:85%">
-            <el-input v-model="billCode" clearable="" placeholder="输入运单号查询物流详情" @keyup.enter.native="queryTrace"  >
+            <el-input v-model="billCode" clearable placeholder="输入运单号查询物流详情" @keyup.enter.native="queryTrace"  >
                   <i slot="prefix" class="iconfont">&#xe656;</i>
             </el-input>
           </div>
@@ -16,6 +16,12 @@
         </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="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>
@@ -39,12 +45,20 @@
 
 
       <div  v-if="open" style="z-index: 2004;width: 97%;
-    padding: 5px;
+    padding: 15px 15px;
     color: gray;" class="code-wrapper code-dialog">
-        <div class="input-captcha">
+        <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="">
@@ -54,7 +68,7 @@
               </div>
             </div>
             <div style="width:100%;text-align: center">
-              <el-button type="primary" style="    margin-top: 10px;
+              <el-button type="primary" plain style="    margin-top: 10px;
     width: 60%;
     height: 40px;" @click="handleShowSignPic" >确   定</el-button>
             </div>
@@ -102,6 +116,7 @@ export default {
       input1: '',
       input2: '',
       input3: '',
+      latestBillList:[],
       // 遮罩层
       loading: true,
       // 地球洲表格数据
@@ -129,11 +144,30 @@ export default {
          }
          queryTraceInfo(this.billCode,"1234").then(response => {
           this.traceInfoList = response.data;
-          console.log(this.traceInfoList);
+          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"] : [];
+        this.latestBillList.push(billCode);
+        let list= this.latestBillList.filter(function(item, index, arr) {
+          return arr.indexOf(item, 0) === index;
+        })
+        this.latestBillList=list;
+        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='';
@@ -145,7 +179,7 @@ export default {
         let code=this.input0+""+this.input1+""+this.input2+""+this.input3;
         this.loading = true;
         querySignedPic(this.billCode,code).then(response => {
-          console.log(response.data);
+          // console.log(response.data);
           this.signImageUrl = response.data;
           this.loading = false;
           this.open=false;
@@ -154,7 +188,6 @@ export default {
 
     },
     deleteValue (inputValue, previousItem) { // 键盘按下时$event，当前input，上一个input
-      console.log(this[inputValue], this[previousItem])
       if (this[inputValue].length > 0) { // 当前有值，清空之
         this[inputValue] = ''
       } else { // 当前没有值，光标跳转到上一个input，并清空该input值
@@ -166,7 +199,6 @@ export default {
       }
     },
     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
@@ -236,13 +268,13 @@ export default {
     .input-content {
       padding: 0px;
       input {
-        width: 80px;
+        width: 60px;
-        height: 80px;
+        height: 60px;
         font-size: 40px;
         text-align: center;
         margin-right: 5px;
         border: 1px solid #d3d3d3;
-        border-radius: 10px;
+        border-radius: 5px;
       }
     }
     /* 去掉input[type=number]浏览器默认的icon显示 */
@@ -283,4 +315,12 @@ export default {
     background: #000
 }
 
+.his-q-code {
+    background-color: #fcfcfc;
+    border-color: #d2d2d2;
+    color: #000000;
+    font-weight: 700;
+    border-radius: 20px;
+}
+
 </style>