Teacher.vue
3.14 KB
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
127
128
129
130
131
132
<template>
<div id="article">
<van-tabs v-model="active" @click="tabChange">
<van-tab title="特级导师"> </van-tab>
<van-tab title="一级导师"> </van-tab>
<van-tab title="二级导师"> </van-tab>
</van-tabs>
<div class="line"></div>
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getTeacherList">
<!-- 3图文章内容的容器 1图添加class one-->
<div v-for="(item, index) in TeacherList" class="teacher_item" :key="index">
<img :src="item.teacherPhoto" alt="" />
<div>
<p class="name">
{{ item.teacherName }}<span>{{ item.teacherIntroduction }}</span>
</p>
<p class="des">导师级别：{{ item.level }}</p>
<p class="des">有效期至：{{ Moment(item.invalidTime).format('YYYY-MM-DD') }}</p>
<p class="des">所在机构：{{ item.belongOrgan }}</p>
</div>
</div>
</van-list>
</div>
</template>
<script>
export default {
name: 'Teacher',
data() {
return {
id: '',
active: 0,
level: ['特级导师', '一级导师', '二级导师'],
page: 1,
loading: false,
finished: false,
TeacherList: [], //导师列表
}
},
mounted() {
// this.getTeacherList()
},
methods: {
// 获取导师列表
getTeacherList() {
let that = this
this.yxAxios
.post(`${this.yanxueUrl}/StudyTeacher/List`, { level: this.level[this.active], pageIndex: this.page, pageSize: 10 })
.then((res) => {
if (res.data.status == 1) {
let all = res.data.data.data
this.page++
this.TeacherList.push(...all)
this.loading = false
if (this.TeacherList.length >= res.data.data.count) {
this.finished = true
}
} else {
this.$toast.fail(res.data.message)
}
})
},
tabChange() {
this.page = 1
this.TeacherList = []
this.getTeacherList()
return true
},
},
}
</script>
<style lang="scss" scoped>
#article {
width: 100%;
height: 100%;
overflow: auto;
padding-left: 30px;
box-sizing: border-box;
.line {
width: 704px;
height: 2px;
background: #f3f3f3;
margin: 20px auto;
}
.teacher_item {
width: 702px;
padding: 12px;
background: #fafafa;
border-radius: 14px;
box-sizing: border-box;
margin: 14px 0;
img {
width: 156px;
height: 220px;
margin-right: 22px;
vertical-align: top;
border-radius: 8px;
}
div {
display: inline-block;
padding-top: 10px;
}
.name {
font-size: 30px;
color: #333;
display: flex;
align-items: center;
margin-bottom: 30px;
span {
font-size: 26px;
color: #666;
margin-left: 16px;
}
}
.des {
font-size: 26px;
color: #666;
margin-top: 12px;
line-height: 36px;
}
}
}
</style>
<style lang="scss">
// 长辈版
.elder {
#article .teacher_item .name,#article .teacher_item .name span,#article .teacher_item .des{
font-size: 36px;
}
}
</style>