搜索功能 重新返回时数据保存

简单的搜索功能实现

输入关键字,点击搜索调用相对应的接口,数据里列表显示出来,在从详情页面返回的时候,搜索的数据仍然保留

 

详情页面

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>