11<template >
2- <div class =" rank" >
3- <span class =" title" >Sign Rank </span >
4- <div
5- class =" mainContainer"
6- v-for =" (item, index) in rankers"
7- :key =" item.nickname"
8- v-loading =" isLoading.single"
9- >
10- <Card class =" card" :author =" item" />
11- <span class =" time" >{{ new Date(item.timeStamp).toLocaleString() }}</span >
12- <span class =" th"
13- >{{ index + 1 }}  ; <sup >{{ thString(index + 1) }}</sup ></span
14- >
15- </div >
16- </div >
2+ <div class =" rank" >
3+ <span class =" title" >签到榜单 </span >
4+ <div
5+ class =" mainContainer"
6+ v-for =" (item, index) in rankers"
7+ :key =" item.nickname"
8+ v-loading =" isLoading.single"
9+ >
10+ <Card class =" card" :author =" item" />
11+ <span class =" time" >{{ new Date(item.timeStamp).toLocaleString() }}</span >
12+ <span class =" th"
13+ >{{ index + 1 }}  ; <sup >{{ thString(index + 1) }}</sup ></span
14+ >
15+ </div >
16+ </div >
1717</template >
1818
1919<script >
20- import Card from " @/components/UserAssets/Card/index.vue" ;
20+ import Card from " @/components/UserAssets/Card/index.vue"
2121
2222export default {
23- name: " Rank" ,
24- components: { Card },
25- data () {
26- return {
27- isLoading: true ,
28- rankers: [],
29- };
30- },
31- beforeCreate () {
32- this .$public .on (" update-user-check" , () => {
33- this .initRankers ();
34- });
35- this .$public .on (" clear-user-sign-status" , () => {
36- this .initRankers ();
37- });
38- },
39- mounted () {
40- this .initRankers ();
41- },
42- methods: {
43- initRankers : function () {
44- this .$conf
45- .getHost ()
46- .then ((h ) => {
47- this .isLoading = true ;
48- this .isLoading = true ;
49- this .$conf
50- .allCheckToday (this .$conf .getHttpString (h .host ))
51- .then ((adata ) => {
52- this .rankers = [];
53- adata .data .forEach ((element ) => {
54- this .$conf .getHost ().then ((h ) => {
55- this .$conf
56- .getUserDetailById ({
57- host: this .$conf .getHttpString (h .host ),
58- id: element .userid ,
59- })
60- .then ((data ) => {
61- const { nickname , avatar , introduce } = data .data [0 ];
62- this .rankers .push ({
63- nickname,
64- avatar,
65- introduce,
66- timeStamp: Number (element .timeStamp ),
67- });
68- this .rankers .sort ((a , b ) => a .timeStamp - b .timeStamp );
69- this .isLoading = false ;
70- this .isLoading = false ;
71- });
72- });
73- });
74- })
75- .catch ((e ) => {
76- console .log (e .messgae );
77- });
78- })
79- .catch ((e ) => {
80- console .log (e .messgae );
81- });
82- },
83- thString : function (i ) {
84- if (i == 1 ) return " st" ;
85- else if (i == 2 ) return " nd" ;
86- else if (i == 3 ) return " rd" ;
87- return " th" ;
88- },
89- },
90- };
23+ name: " Rank" ,
24+ components: { Card },
25+ data () {
26+ return {
27+ isLoading: true ,
28+ rankers: [],
29+ }
30+ },
31+ beforeCreate () {
32+ this .$public .on (" update-user-check" , () => {
33+ this .initRankers ()
34+ })
35+ this .$public .on (" clear-user-sign-status" , () => {
36+ this .initRankers ()
37+ })
38+ },
39+ mounted () {
40+ this .initRankers ()
41+ },
42+ methods: {
43+ initRankers : function () {
44+ this .$conf
45+ .getHost ()
46+ .then ((h ) => {
47+ this .isLoading = true
48+ this .$conf
49+ .allCheckToday (this .$conf .getHttpString (h .host ))
50+ .then ((adata ) => {
51+ this .rankers = []
52+ adata .data .forEach ((element ) => {
53+ this .$conf .getHost ().then ((h ) => {
54+ this .$conf
55+ .getUserDetailById ({
56+ host: this .$conf .getHttpString (h .host ),
57+ id: element .userid ,
58+ })
59+ .then ((data ) => {
60+ const { nickname , avatar , introduce } = data .data [0 ]
61+ this .rankers .push ({
62+ nickname,
63+ avatar,
64+ introduce,
65+ timeStamp: Number (element .timeStamp ),
66+ })
67+ this .rankers .sort ((a , b ) => a .timeStamp - b .timeStamp )
68+ this .isLoading = false
69+ })
70+ })
71+ })
72+ })
73+ .catch ((e ) => {
74+ console .log (e .messgae )
75+ })
76+ })
77+ .catch ((e ) => {
78+ console .log (e .messgae )
79+ })
80+ },
81+ thString : function (i ) {
82+ if (i == 1 ) return " st"
83+ else if (i == 2 ) return " nd"
84+ else if (i == 3 ) return " rd"
85+ return " th"
86+ },
87+ },
88+ }
9189 </script >
9290
9391<style scoped lang="postcss">
9492.rank {
95- @apply relative w-full mt-8;
93+ @apply relative w-full mt-8;
9694}
9795
9896.title {
99- @apply sticky inline-block w-full h-full top-0 mx-4 px-4 py-4 text-lg font-bold text-left font-mono;
100- z-index : 2001 ;
97+ @apply sticky inline-block w-full h-full top-0 px-4 py-4 text-lg font-bold text-left font-mono;
98+ z-index : 2001 ;
10199}
102100.mainContainer {
103- @apply relative py-4 my-2 max-w-xs;
101+ @apply relative py-4 my-2 max-w-xs;
104102}
105103
106104.card {
107- @apply flex-col px-4;
105+ @apply flex-col px-4;
108106}
109107.time {
110- @apply text-xs font-bold opacity-60;
108+ @apply text-xs font-bold opacity-60;
111109}
112110
113111.th {
114- @apply inline-block absolute top-0 right-8 font-semibold text-lg;
112+ @apply inline-block absolute top-0 right-8 font-semibold text-lg;
115113}
116114
117115@media (prefers-color-scheme : dark) {
118- .title {
119- @apply bg-gray-800;
120- }
116+ .title {
117+ @apply bg-gray-800;
118+ }
121119}
122120
123121@media (prefers-color-scheme : light) {
124- .title {
125- @apply bg-gray-100;
126- }
122+ .title {
123+ @apply bg-gray-100;
124+ }
127125}
128- </style >
126+ </style >
0 commit comments