11<template >
22 <div class =" singer-list" >
33 <div class =" singer-type-list" >
4- <div class =" singer-country" >
54
5+ <div class =" singer-type-item" >
66 <button class =" btn btn-link"
7- @click =" selectCountry = code , getTheSingeList(1)"
8- v-for =" (code, country) in singertypeList "
9- :key =" code "
10- :disabled =" code !== selectCountry && loading"
11- :class =" {'active': code === selectCountry , 'loading': code === selectCountry && loading}" >
12- {{country }}
7+ @click =" selectTag.index = tag.id , getTheSingeList(1)"
8+ v-for =" tag in tagList.index "
9+ :key =" tag.id "
10+ :disabled =" tag.id !== selectTag.index && loading"
11+ :class =" {'active': tag.id === selectTag.index , 'loading': tag.id === selectTag.index && loading}" >
12+ {{tag.name }}
1313 </button >
14+ </div >
1415
16+ <div class =" singer-type-item d-inline-block" >
17+ <button class =" btn btn-link"
18+ @click =" selectTag.area = tag.id, getTheSingeList(1)"
19+ v-for =" tag in tagList.area"
20+ :key =" tag.id"
21+ :disabled =" tag.id !== selectTag.area && loading"
22+ :class =" {'active': tag.id === selectTag.area, 'loading': tag.id === selectTag.area && loading}" >
23+ {{tag.name}}
24+ </button >
1525 </div >
16- <div class =" singer-firstname" >
1726
27+ <div class =" singer-type-item d-inline-block" >
1828 <button class =" btn btn-link"
19- @click =" selectName = code , getTheSingeList(1)"
20- v-for =" (code, name) in singerNameList "
21- :key =" code "
22- :disabled =" code !== selectName && loading"
23- :class =" {'active': code === selectName , 'loading': code === selectName && loading}" >
24- {{name}}
29+ @click =" selectTag.sex = tag.id , getTheSingeList(1)"
30+ v-for =" tag in tagList.sex "
31+ :key =" tag.id "
32+ :disabled =" tag.id !== selectTag.sex && loading"
33+ :class =" {'active': tag.id === selectTag.sex , 'loading': tag.id === selectTag.sex && loading}" >
34+ {{tag. name}}
2535 </button >
36+ </div >
2637
38+ <div class =" singer-type-item" >
39+ <button class =" btn btn-link"
40+ @click =" selectTag.genre = tag.id, getTheSingeList(1)"
41+ v-for =" tag in tagList.genre"
42+ :key =" tag.id"
43+ :disabled =" tag.id !== selectTag.genre && loading"
44+ :class =" {'active': tag.id === selectTag.genre, 'loading': tag.id === selectTag.genre && loading}" >
45+ {{tag.name}}
46+ </button >
2747 </div >
2848 </div >
2949
4868</template >
4969<script >
5070import singerAvatar from ' ./SingerAvatar'
51- import { singertypeList , singerNameList } from ' ./common/SingerList.js'
52- import {getSingerList } from ' ../../spider'
71+ import {tag } from ' ./common/SingerList.js'
72+ import {getNewSingerList } from ' ../../spider'
5373import fPagination from ' ./Pagination'
5474
5575export default {
@@ -60,10 +80,10 @@ export default {
6080 totalPage: 0 ,
6181 page: 0 ,
6282 loading: false ,
63- singertypeList ,
64- singerNameList,
65- selectCountry : ' all_all ' ,
66- selectName : ' all '
83+ tagList : tag ,
84+ selectTag : {
85+ area : - 100 , sex : - 100 , genre : - 100 , index : - 100
86+ }
6787 }
6888 },
6989 components: {
@@ -72,9 +92,8 @@ export default {
7292 methods: {
7393 async getTheSingeList (newPage ) {
7494 this .loading = true
75- let data = await getSingerList ({
76- country: this .selectCountry ,
77- name: this .selectName ,
95+ let data = await getNewSingerList ({
96+ ... this .selectTag ,
7897 page: newPage
7998 })
8099 this .page = newPage
@@ -97,10 +116,10 @@ export default {
97116 border-radius : 10% ;
98117 box-shadow : 4px 5px 7px 1px rgba (112 ,128 ,151 ,0.35 );
99118}
100- .singer-type-list > .singer-country {
119+ .singer-type-list :first-child {
101120 margin-bottom : 3px ;
102121}
103- .singer-type-list > .singer-firstname {
122+ .singer-type-list > .singer-type-item {
104123 margin-bottom : 5px ;
105124}
106125.singer-type-list button {
0 commit comments