搜索功能

src/pages/search/index.vue

@@ -1,59 +1,38 @@
 <template>
   <div class="page_search">
-    <div class="header">
-      <i class="iconfont icon-zuojiantou" @click="toHomeIndex"></i>
-      <van-search
-        v-model="value"
-        placeholder=" 姓名 / 首拼 / 透析号"
-        @search="toSearchPatient"
-      />
-    </div>
+    <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">
-        <img src="../../assets/images/m01.png" alt="" />
-        <p>名字</p>
+      <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"></i>
+        <i class="iconfont icon-lajixiang" @click="deteleHistory"></i>
       </div>
       <div class="record">
         <ul class="recordList">
-          <li class="recordOne">123</li>
-          <li class="recordOne">123</li>
-          <li class="recordOne">哦驾驶的拉升的</li>
-          <li class="recordOne">哦驾驶的拉升的</li>
-          <li class="recordOne">asd</li>
+          <li
+            class="recordOne"
+            v-for="(item,index) in historyWord"
+            :key="index"
+            @click="toSearchPatient(item)"
+          >{{item}}</li>
         </ul>
       </div>
     </div>
-
-    <!-- <div class="searchList">
-      <van-tabs
-        v-model="active"
-        title-active-color="#000000"
-        title-inactive-color="#3C3C3C"
-      >
-        <van-tab title="全部">
-          <ul class="list">
-            <li class="searchOne">
-              <img src="../../assets/images/one.jpg" alt />
-              <span>爱听课的小</span>
-            </li>
-            <li class="searchOne">
-              <img src="../../assets/images/one.jpg" alt />
-              <span>爱听课的小</span>
-            </li>
-          </ul>
-        </van-tab>
-        <van-tab title="血透">血透</van-tab>
-        <van-tab title="慢病">慢病</van-tab>
-        <van-tab title="会员">会员</van-tab>
-        <van-tab title="电商">电商</van-tab>
-      </van-tabs>
-    </div> -->
   </div>
 </template>
 
@@ -65,35 +44,61 @@ export default {
       searchVal: "",
       active: 0,
       keyword: "",
-      value: ""
+      value: "",
+      patientList: [],
+      historyWord: []
     };
   },
   methods: {
-    SaveSearch() {
-      SaveSearch(this.searchVal).then(response => {});
-    },
-    watchNum() {
-      console.log(this.searchVal);
-    },
     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() {}
+  created() {
+    this.historyWord = localStorage.getItem("searchWord");
+    this.historyWord = this.historyWord.split(","); //将字符串转成数组
+    console.log();
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .page_search {
   overflow: hidden;
+  overflow-y: auto;
   height: 100%;
   .header {
     height: 2.5rem;
@@ -102,6 +107,7 @@ export default {
     border-bottom: 1px solid #f4f4f4;
     display: flex;
     align-items: center;
+    background: #fff;
     .icon-zuojiantou {
       float: left;
       width: 2.5rem;
@@ -175,4 +181,7 @@ export default {
     }
   }
 }
+::-webkit-scrollbar {
+  width: 0;
+}
 </style>