personList.vue
3 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
<template>
<div>
<div class="box">
<el-breadcrumb class="mt20 forPc" :separator-icon="ArrowRight">
<el-breadcrumb-item :to="{ path: '/' }">
<el-icon>
<HomeFilled/>
</el-icon>
首页
</el-breadcrumb-item>
<el-breadcrumb-item>人员列表</el-breadcrumb-item>
<el-breadcrumb-item>{{kindName}}</el-breadcrumb-item>
</el-breadcrumb>
<el-card class="mt20 mb20 forPc">
<el-row class="JsmemberList" :gutter="20">
<el-col v-for="m in list" :lg="4" :xs="12">
<div class="item" style="margin: 0" @click="goDetail(m)">
<div class="imgbox">
<img :src="fillImgUrl_webSite(m.picUrl)">
</div>
<h3>{{ m.realName }}</h3>
</div>
</el-col>
</el-row>
<div class="pc-page-box" v-if="total>17">
<PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList"/>
</div>
</el-card>
<div class="mt20 mb20 forWei">
<el-row class="JsmemberList" :gutter="20">
<el-col v-for="m in list" :lg="4" :xs="12">
<div class="item" style="margin: 0" @click="goDetail(m)">
<div class="imgbox">
<img :src="fillImgUrl_webSite(m.picUrl)">
</div>
<h3>{{ m.realName }}</h3>
</div>
</el-col>
</el-row>
<div class="pc-page-box" v-if="total>10">
<PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList"/>
</div>
</div>
<el-empty v-if="list.length == 0" description="暂无数据"/>
</div>
</div>
</template>
<script setup>
import { ArrowRight, Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getPersonByLabel } from '@/apiPc/webSite'
const router = useRouter()
const route = useRoute()
const list = ref([])
const kindName = ref('')
const query = ref({
pageSize: 24,
pageNum: 1
})
const total = ref(0)
onMounted(() => {
console.log(route.query)
query.value.label = route.query.label
switch (route.query.label) {
case '0':
kindName.value = '国家队'
break
case '1':
kindName.value = '教练员'
break
case '2':
kindName.value = '裁判员'
break
case '5':
kindName.value = '国青队'
break
case '6':
kindName.value = '解说员'
break
case '7':
kindName.value = '宣传员'
break
case '8':
kindName.value = '人物专栏'
break
}
getList()
})
const getList = () => {
getPersonByLabel(query.value).then(res => {
list.value = res.rows
total.value = res.total
})
}
const goDetail = (m) => {
router.push({
path: `/about/leader/${m.id}`,
query: {
name: encodeURIComponent(m.labelStr),
from: 'list'
}
})
}
</script>
<style scoped lang="scss">
</style>