1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
<div class="flex flex-col guide-list" style="height: 100vh">
<div class="p-3 text-16 text-black text-center shrink-0 doc-nav-bar">
<span>健康指导</span>
</div>
<van-tabs v-model:active='activeTab' class='shrink-0' v-if='tabList.length'
@change='tabChange'
shrink>
<van-tab v-for='item in tabList' :key='item.name'
:title='item.title' :name='item.name'></van-tab>
</van-tabs>
<div class='grow overflow-y-auto card-list' ref='list'>
<van-pull-refresh v-model='loadingRefresh' @refresh='onRefresh'
:disabled='isRefreshDisable'>
<van-list
v-model:loading='loading'
:finished='finished'
:finished-text="list.length ? '没有更多了' : ''"
:immediate-check='false'
@load='onMore'
>
<div v-for='item in list' :key='item.id' class='p-4 mt-3 card' @click.stop='toDetail(item)'>
<div class='flex items-center'>
<div class='detail-left'>日期</div>
<div class='detail-right'></div>
</div>
<div class='flex items-center'>
<div class='detail-left'>指导单位</div>
<div class='detail-right'></div>
</div>
<div class='flex items-center'>
<div class='detail-left'>指导科室</div>
<div class='detail-right'></div>
</div>
<span class='px-3 float-bt'>健康指导</span>
<span class='px-3 float-bt'>健康宣教</span>
</div>
</van-list>
<div class='text-center shrink-0 empty' v-if='!list.length'>
<img src='@/assets/image/doctor/empty.png' alt='' style='width: 1.2rem;'>
<p>暂无数据</p>
</div>
</van-pull-refresh>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: undefined,
list: [],
pagination: {
total: 0,
pageIndex: 1,
pageSize: 4
},
loading: false,
finished: false,
loadingRefresh: false,
isRefreshDisable: false
}
},
computed: {
tabList() {
const list = [
{ title: '全部', name: '' },
{ title: '健康指导', name: '' },
{ title: '健康宣教', name: '' },
]
return list
}
},
methods: {
load() {
},
onMore() {
this.pagination.pageIndex++
this.load()
},
onRefresh() {
this.list = []
this.pagination.pageIndex = 1
this.load(false)
},
tabChange() {
this.list = []
this.pagination.pageIndex = 1
this.load()
},
toDetail(record) {
}
}
}
</script>
<style lang="less" scoped>
.card-list {
padding-bottom: 76px;
}
.card {
position: relative;
background-color: #fff;
.detail-left {
width: 8em;
color: #8C8C8C;
flex-shrink: 0;
}
.float-bt {
position: absolute;
top: 10px;
right: 0;
background-color: var(--van-primary-color);
color: #fff;
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
height: 26px;
line-height: 26px;
}
}
</style>