Pad_New/src/pages/search/index.vue

<template>
  <div class="page_search">
    <van-sticky>
      <div class="header">
        <i class="iconfont icon-zuojiantou" @click="toHomeIndex"></i>
        <van-search
          v-model="value"
          placeholder=" 姓名 / 透析号"
          @search="toSearchPatient"
        />
      </div>
    </van-sticky>
    <div class="searchList">
      <div
        class="patientOne"
        v-for="(item, index) in patientList"
        :key="index"
        @click="toPatient(item.id)"
      >
        <img :src="item.avatar" alt />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div class="history">
      <div class="historyTitle">
        <span>历史搜索</span>
        <i class="iconfont icon-lajixiang" @click="deteleHistory"></i>
      </div>
      <div class="record">
        <ul class="recordList">
          <li
            class="recordOne"
            v-for="(item, index) in historyWord"
            :key="index"
            @click="toSearchPatient(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { toSearchPatient } from "@/api/patient/patient";
import { setRem } from "@/libs/functionRem";
export default {
  data() {
    return {
      searchVal: "",
      active: 0,
      keyword: "",
      value: "",
      patientList: [],
      historyWord: []
    };
  },
  methods: {
    toHomeIndex() {
      this.$router.push({ path: "/homeIndex" });
    },
    toSearchPatient(val) {
      let searchWord = localStorage.getItem("searchWord");
      if (searchWord == null) {
        localStorage.setItem("searchWord", val);
      } else {
        let arr = localStorage.getItem("searchWord");
        arr = arr.split(",");
        if (arr.indexOf(val) != -1) {
          arr = arr;
        } else {
          arr.unshift(val);
        }
        self.historyWord = arr;
        localStorage.setItem("searchWord", self.historyWord);
      }

      toSearchPatient(val).then(response => {
        if (response.data.state === 1) {
          var patient = response.data.data.patient;
          console.log("patient", patient);
          this.patientList = patient;
          this.historyWord = localStorage.getItem("searchWord");
          this.historyWord = this.historyWord.split(",");
        }
      });
    },
    toPatient(id) {
      this.$router.push({ path: "/patientdetail?patientid=" + id });
    },
    deteleHistory() {
      this.historyWord = [];
      localStorage.removeItem("searchWord");
    }
  },
  created() {
    setRem()
    this.historyWord = localStorage.getItem("searchWord");
    this.historyWord = this.historyWord.split(","); // 将字符串转成数组
  }
};
</script>

<style lang="scss" scoped>
.page_search {
  overflow: hidden;
  overflow-y: auto;
  height: 100%;
  .header {
    height: 2.5rem;
    width: 100%;
    line-height: 2.5rem;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    background: #fff;
    .icon-zuojiantou {
      float: left;
      width: 2.5rem;
      height: 2.5rem;
      text-align: center;
      font-size: 1rem;
    }
    .van-search {
      padding: 0;
      width: 80%;
    }
    .van-search__content {
      border-radius: 0.9375rem;
    }
    .van-search .van-cell {
      display: flex;
      align-items: center;
    }
  }
  .history {
    padding: 1.25rem 0.75rem 0 0.875rem;
    .historyTitle {
      height: 1.25rem;
      line-height: 1.25rem;
      i {
        float: right;
        font-size: 1.625rem;
        color: #9b9b9b;
      }
      span {
        float: left;
        font-size: 0.9375rem;
        color: rgba(60, 60, 60, 1);
      }
    }
  }
  .record {
    margin-top: 1.25rem;
    .recordList {
      display: flex;
      flex-wrap: wrap;
    }
    .recordOne {
      min-width: 0.0625rem;
      background: rgba(244, 244, 244, 1);
      border-radius: 14px;
      color: rgba(155, 155, 155, 1);
      font-size: 0.875rem;
      padding: 0.4375rem 0.875rem;
      margin-right: 0.625rem;
      box-sizing: border-box;
      margin-bottom: 0.625rem;
    }
  }
  .searchList {
    padding: 0 0.875rem;
    .patientOne {
      display: flex;
      align-items: center;
      height: 3.75rem;
      img {
        width: 2.5rem;
        height: 2.5rem;
        margin-right: 0.875rem;
      }
      p {
        flex: 1;
        height: 100%;
        line-height: 3.75rem;
        box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
      }
    }
  }
}
::-webkit-scrollbar {
  width: 0;
}
</style>