搜索功能 從新返回時數據保存

簡單的搜索功能實現

輸入關鍵字,點擊搜索調用相對應的接口,數據裏列表顯示出來,在從詳情頁面返回的時候,搜索的數據仍然保留

 

詳情頁面

this.bus.$emit("files2");//詳情頁面傳過去一個值到搜索的當前頁面作判斷

　

當前頁面:

<template>
 <div id="search">
    <header>
      <p>請輸入關鍵字進行搜索</p>
      <div class="ipt">
        <input type="text" placeholder="請輸入" v-model="queryStr" @blur.prevent="changeCount()"
        >
        <span @click="search()">搜索</span>
      </div>
    </header>
    <ul class="orderList">
      <li v-for="(item,i) in orderList" :key="i" @click="goDetail(item)"
      >
        <p class="goodsName" style=" display: flex; justify-content: space-between;"
        ><span>{{item.goodsName}}</span> <span>{{item.orderStatusName}}</span> </p>
        <div class="cont">
          <div class="left">
            <p>投保人：{{item.applied}}</p>
            <p>被保人：{{item.insured}}</p>
            <p v-show="item.syApplyNo">投保單號：{{item.syApplyNo}}</p>
            <p v-show="item.policyNo">保單號：{{item.policyNo}}</p>
          </div>
          <div class="right">
            <img src="../assets/images/jt.png" alt="">
          </div>
        </div>

      </li>
    </ul>
  </div>
</template>
<script> import { MessageBox, Indicator } from "mint-ui"; export default { name: "search", components: {}, data() { return { queryStr: "", orderList: "", isNo: false, date: "", routePath: "", isShow: false }; }, mounted() { this.getMonth(); this.showList(); this.bus.$on("isShow", obj => { this.isShow = true; sessionStorage.setItem("isShow", this.isShow); }); }, methods: {  showList() {  let isList = sessionStorage.getItem("isShow"); if (isList == "true") { this.queryStr = JSON.parse(sessionStorage.getItem("iptValue")); this.searchs(); sessionStorage.removeItem("isShow"); //從sessionStorage中刪除 } }, search() {
      if (this.queryStr == "") { MessageBox("提示", "請先輸入關鍵字再進行搜索"); } else { Indicator.open(); this.$http .post( "接口", this.$qs.stringify({ jsonData: JSON.stringify({
                queryNoCarStr: this.queryStr, startdate: this.date }), authorization: JSON.stringify({ uuid: this.$route.query.uuid }) }), { headers: { "Content-Type": "application/x-www-form-urlencoded" } } ) .then(res => { Indicator.close(); if (res.data.success) { sessionStorage.setItem( "orderList", JSON.stringify(res.data.result) ); this.orderList = JSON.parse(sessionStorage.getItem("orderList")); // console.log(res.data.result.length);
              if (res.data.result.length === 0) { MessageBox("提示", "暫時沒有數據，請從新搜索"); } } else { MessageBox("錯誤", res.data.message); } }); } }, goDetail(item) { sessionStorage.setItem("serachOrder", item.orderId); this.$router.push({ path: "/orderDetail", query: { uuid: this.$route.query.uuid } }); },

　　//獲取當前時間前三月的一天 getMonth() { let nowDate = new Date(); // let date1 = new Date('2030-02-30');
      nowDate.setMonth(nowDate.getMonth() - 3); let years = nowDate.getFullYear(); let months = nowDate.getMonth() + 1; let day = nowDate.getDate(); months = months < 10 ? "0" + months : months; day = day < 10 ? "0" + day : day; this.date = years.toString() + "-" + months.toString() + "-" + day.toString(); }, changeCount() { sessionStorage.setItem("iptValue", JSON.stringify(this.queryStr)); }, searchs() { this.$http .post( "/order/accident/list ", this.$qs.stringify({ jsonData: JSON.stringify({ queryNoCarStr: this.queryStr, startdate: this.date }), authorization: JSON.stringify({ uuid: this.$route.query.uuid }) }), { headers: { "Content-Type": "application/x-www-form-urlencoded" } } ) .then(res => { Indicator.close(); if (res.data.success) { sessionStorage.setItem( "orderList", JSON.stringify(res.data.result) ); this.orderList = JSON.parse(sessionStorage.getItem("orderList")); } else { // MessageBox("錯誤", res.data.message);
 } }); } } }; </script>

<style scoped lang="scss"></style>