|
@@ -12,7 +12,12 @@
|
|
|
<Region></Region>
|
|
|
<!-- 展示医院的信息 -->
|
|
|
<div class="hospital">
|
|
|
- <Card class="item" v-for="item in 10" :key="item"></Card>
|
|
|
+ <Card
|
|
|
+ class="item"
|
|
|
+ v-for="item in hasHospitalArr"
|
|
|
+ :hospitalInfo="item"
|
|
|
+ :key="item"
|
|
|
+ ></Card>
|
|
|
</div>
|
|
|
<!-- 展示分页器 -->
|
|
|
|
|
@@ -22,7 +27,9 @@
|
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
|
layout="prev, pager, next, jumper,->, sizes,total"
|
|
|
background="true"
|
|
|
- :total="20"
|
|
|
+ :total="total"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ @current-change="currentChange"
|
|
|
/>
|
|
|
</el-col>
|
|
|
<el-col :span="4"></el-col>
|
|
@@ -36,6 +43,51 @@ import Search from "./search/index.vue";
|
|
|
import Level from "./level/index.vue";
|
|
|
import Region from "./region/index.vue";
|
|
|
import Card from "./card/index.vue";
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
+import { reqHospital } from "@/api/home/index";
|
|
|
+
|
|
|
+//分页器页码
|
|
|
+let pageNo = ref<number>(1);
|
|
|
+
|
|
|
+//一页展示多少条数据
|
|
|
+let pageSize = ref<number>(10);
|
|
|
+
|
|
|
+//存储已有的医院数据
|
|
|
+let hasHospitalArr = ref([]);
|
|
|
+
|
|
|
+//存储医院总个数
|
|
|
+let total = ref<number>(0);
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getHospitalInfo();
|
|
|
+});
|
|
|
+
|
|
|
+//获取医院已有的数据
|
|
|
+const getHospitalInfo = async () => {
|
|
|
+ //获取医院数据 默认获取第一页 一页是个医院的数据
|
|
|
+ let result: any = await reqHospital(pageNo.value, pageSize.value);
|
|
|
+ console.log(result);
|
|
|
+ if (result.data.code == 200) {
|
|
|
+ //存储数据
|
|
|
+ hasHospitalArr.value = result.data.data.content;
|
|
|
+ // console.log(result)
|
|
|
+ //存储医院总个数
|
|
|
+ total.value = result.data.data.totalElements;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+//分页器页码发生变化的时候
|
|
|
+const currentChange = () => {
|
|
|
+ getHospitalInfo();
|
|
|
+};
|
|
|
+
|
|
|
+//分页器下拉菜单发生变化的时候 会触发
|
|
|
+const sizeChange = () => {
|
|
|
+ //当前页码回归第一页
|
|
|
+ pageNo.value = 1
|
|
|
+ //在发送一次请求
|
|
|
+ getHospitalInfo()
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|