<template>
<div>
<div class="searchTop">
<div class="text" @click="showArea">{{province}}</div>
<div class="disflex">
<div>
<img src="../../assets/images/black.png" alt class="black" />
</div>
<div class="vansearch">
<van-search
v-model="value"
shape="round"
placeholder="搜索医院、城市"
@input="valueChange"
@clear="valueClear"
/>
</div>
</div>
</div>
<div class="tag"></div>
<div v-for="(item,index) in getlist" :key="index" class="nameBox">
<div class="name">{{item}}</div>
</div>
<addresspopup
:title="'地区'"
@confirmAddr="confirmAddr"
@cancleAddr="cancleAddr"
:showPopup="showPopup"
></addresspopup>
</div>
</template>
<script>
import addresspopup from "../../components/address-popup.vue";
import hospitalLsit from "@/mixins/hospital-dfpz";
export default {
name: "areaSearch",
components: { addresspopup },
data() {
return {
hospitalLsit: [],
value: "",
areaList: {},
showPopup: false, // 地区选择显示
getlist: [],
province: ""
};
},
created() {
this.hospitalLsit = hospitalLsit.hospital;
},
mounted() {
this.getBeijing();
},
methods: {
getBeijing() {
this.province = "北京市";
let valParams = {
province: "北京市",
city: "北京市"
};
for (let i in this.hospitalLsit) {
if (
valParams.province == this.hospitalLsit[i].province &&
valParams.city == this.hospitalLsit[i].city
) {
// console.log(this.hospitalLsit[i].hospital);
this.getlist.push(this.hospitalLsit[i].hospital);
}
}
},
showArea() {
this.showPopup = true;
},
cancleAddr(val) {
this.showPopup = false;
},
confirmAddr(val) {
this.getlist = [];
this.showPopup = false;
let valParams = {
province: val[0].name,
city: val[1].name
};
this.province = val[1].name;
for (let i in this.hospitalLsit) {
if (
valParams.province == this.hospitalLsit[i].province &&
valParams.city == this.hospitalLsit[i].city
) {
// console.log(this.hospitalLsit[i].hospital);
this.getlist.push(this.hospitalLsit[i].hospital);
}
}
},
valueChange() {
this.getlist = [];
var list = this.hospitalLsit;
for (var i = 0; i < list.length; i++) {
if (list[i].hospital.indexOf(this.value) >= 0) {
this.getlist.push(list[i].hospital);
}
}
if (this.value == "") {
this.getlist = [];
this.getBeijing();
}
},
valueClear() {
this.getlist = [];
this.getBeijing();
}
}
};
</script>
<style lang="less" scoped>
.searchTop {
height: 52px;
background: #ffffff;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 15px;
.text {
font-size: 14px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
color: #666666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.black {
6.5px;
height: 4.5px;
vertical-align: middle;
margin-left: 4px;
}
.tag {
100vw;
height: 8px;
background: #f8f8f7;
}
.nameBox {
margin-left: 12px;
border-bottom: 1px solid #f0f0f0;
}
.name {
margin-top: 16px;
margin-bottom: 16px;
}
.disflex {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
}
.vansearch {
flex-grow: 1;
}
</style>