123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196 |
- <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>
|