更新代码

src/views/components/rankList/index.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <div class="title">{{ title }}</div>
       <div class="operation">
-        <div :class="['btn', index === activeIndex ? 'active' : '']"
+        <div :class="['btn', prop === activeTime ? 'active' : '']"
              v-for="({ prop, label }, index) in operation"
              :key="prop || index"
              @click="handleSwitch(label, prop, index)">{{ label }}</div>
@@ -11,28 +11,34 @@
     </div>
 
     <div class="list-content">
-      <div class="list-item" v-for="(item, index) in 6">
-        <div class="numerical">{{ index + 1 }}</div>
-        <div class="detail">
-          <div class="head_portrait">
-            <img :src="require('../../../assets/icons/head_portrait.png')" alt="">
+      <template v-if="data.length">
+        <div class="list-item" v-for="(item, index) in data">
+          <div class="numerical">{{ index + 1 }}</div>
+          <div class="detail">
+            <div class="head_portrait">
+              <img :src="require('../../../assets/icons/head_portrait.png')" alt="">
+            </div>
+            <div class="user-info">
+              <div class="user-name">{{ item.nickname }}</div>
+              <div class="user-id">{{ item.usercode }}</div>
+            </div>
           </div>
-          <div class="user-info">
-            <div class="user-name">向天再借五百年</div>
-            <div class="user-id">767D85</div>
+          <div class="count">
+            <slot v-if="$scopedSlots.default" :data="item" :$index="index"></slot>
+            <count-to v-else :start-val="0" :end-val="item.value" :duration="2600" class="card-panel-num" />
           </div>
         </div>
-        <div class="count">
-          <slot v-if="$scopedSlots.default" :data="item" :$index="index"></slot>
-          <count-to v-else :start-val="0" :end-val="900" :duration="2600" class="card-panel-num" />
-        </div>
-      </div>
+      </template>
+      <el-empty v-else :image-size="100" description="暂无数据"></el-empty>
+
     </div>
   </div>
 </template>
 
 <script>
 import CountTo from 'vue-count-to';
+import { staticRank } from '@/api/cai/static'
+import publisherInstance from '@/utils/pubsub'
 export default {
   name: 'index',
   components: {
@@ -43,13 +49,10 @@ export default {
       type: String,
       default: ''
     },
-    data: {
-      type: Array,
-      default: ()=> []
-    },
+    type: [Number, String],
     operation: {
       type: Array,
-      default: ()=> ([{ label: '总', prop: '' }, { label: '日', prop: '' }])
+      default: ()=> ([{ label: '总', prop: 'Total' }, { label: '日', prop: 'Day' }])
     },
     url: {
       type: String,
@@ -59,13 +62,25 @@ export default {
 
   data() {
     return {
-      activeIndex: 0
+      activeTime: 'Total',
+      data: []
     }
   },
+  created() {
+    publisherInstance.subscribe('refresh', this.getRankList);
+    this.getRankList();
+  },
   methods: {
+    async getRankList() {
+      const { code, data, msg } = await staticRank(this.type, this.activeTime);
+      if (code === 200) {
+        return (this.data = data);
+      }
+    },
+
     handleSwitch(label, prop, index) {
-      console.log(label, prop)
-      this.activeIndex = index;
+      this.activeTime = prop;
+      this.getRankList();
       this.$emit('switch-change', { label, prop, index });
     }
   }
@@ -116,7 +131,9 @@ export default {
 
   .list-content {
     width: 100%;
-    overflow: hidden;
+    height: 323px;
+    overflow: auto;
+    padding-right: 17px;
     .list-item {
       height: 37px;
       line-height: 37px;