修改榜单

src/views/home/learn/page-learn-content.vue

@@ -65,7 +65,7 @@
                 </div>
                 <div class="linkListItemContent">
                   <div class="linkListItemTitle">{{ getUrlName(item) }}</div>
-                  <div class="linkListItemDescribel">这里是描述</div>
+                  <!-- <div class="linkListItemDescribel">这里是描述</div> -->
                 </div>
               </a>
             </div>

src/views/home/person/rank.vue

@@ -1,80 +1,89 @@
 <template>
   <div class="contentBody">
-    <van-nav-bar v-if="env!=='pro'" title="排行榜" left-arrow @click-left="onClickLeft" />
-    <!-- <van-tabs :active="active" @click="rootChange">
+    <van-nav-bar
+      v-if="env !== 'pro'"
+      title="排行榜"
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <van-tabs :active="active" @click="rootChange">
       <van-tab
         v-for="(item, index) in rankList"
         :key="index"
         :title="item.name"
       >
       </van-tab>
-    </van-tabs> -->
-      <van-list
-          v-model="loading"
-          :finished="finished"
-          finished-text="没有更多了"
-          @load="onLoad"
-        >
-          <van-cell>
-            <div slot="default" class="contentItemTop">
-              <div
-                :class="{
-                  contentItemTopRowChild: true,
-                  contentItemTopRowOne: index === 0,
-                  contentItemTopRowTwo: index === 1,
-                  contentItemTopRowThree: index === 2,
-                }"
-                v-for="(item, index) in rankListTopThree"
-                :key="index"
-              >
-                <div class="contentItemTopRowChildImg">
-                  <van-image
-                    class="userHeaderImg"
-                    width="100%"
-                    height="100%"
-                    fit="cover"
-                    round
-                    :src="item.avatarPath || maleAvatar"
-                    :show-error="true"
-                    :error-icon="maleAvatar"
-                  />
-                  <div class="contentItemTopRowChildImgNum">
-                    {{ index + 1 }}
-                  </div>
-                </div>
-                <div class="contentItemTopRowChildName">
-                  {{ item.nickName || "userName" + (index + 1) }}
-                </div>
-                <span class="contentItemTopRowChildPoints">
-                  {{ item.totalPoints || 0 }}
-                </span>
-                <span class="contentItemTopRowChildSteps">积分</span>
+    </van-tabs>
+    <div class="rankLoading" v-if="rankLoading">
+      <van-loading type="spinner" vertical>加载中...</van-loading>
+    </div>
+    <van-list
+      v-else
+      v-model="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+    >
+      <van-cell>
+        <div slot="default" class="contentItemTop">
+          <div
+            :class="{
+              contentItemTopRowChild: true,
+              contentItemTopRowOne: index === 0,
+              contentItemTopRowTwo: index === 1,
+              contentItemTopRowThree: index === 2,
+            }"
+            v-for="(item, index) in rankListTopThree"
+            :key="index"
+          >
+            <div class="contentItemTopRowChildImg">
+              <van-image
+                class="userHeaderImg"
+                width="100%"
+                height="100%"
+                fit="cover"
+                round
+                :src="item.avatarPath || maleAvatar"
+                :show-error="true"
+                :error-icon="maleAvatar"
+              />
+              <div class="contentItemTopRowChildImgNum">
+                {{ index + 1 }}
               </div>
             </div>
-          </van-cell>
-          <van-cell v-for="(item, index) in rankListOthers" :key="index">
-            <div slot="default" class="contentItemDiv">
-              <div class="contentBox">
-                <div class="headerContent">
-                  <div class="userOrderNum">{{ index + 4 }}</div>
-                  <van-image
-                    class="userHeaderImg"
-                    fit="cover"
-                    round
-                    :src="item.avatarPath || maleAvatar"
-                    :show-error="true"
-                    :error-icon="maleAvatar"
-                  />
-                  <div>{{ item.nickName || "未知" }}</div>
-                </div>
-                <div class="userPonits">
-                  {{ item.totalPoints||0 }}
-                  <span>积分</span>
-                </div>
-              </div>
+            <div class="contentItemTopRowChildName">
+              {{ item.nickName || "userName" + (index + 1) }}
+            </div>
+            <span class="contentItemTopRowChildPoints">
+              {{ item.totalPoints || 0 }}
+            </span>
+            <span class="contentItemTopRowChildSteps">积分</span>
+          </div>
+        </div>
+      </van-cell>
+      <van-cell v-for="(item, index) in rankListOthers" :key="index">
+        <div slot="default" class="contentItemDiv">
+          <div class="contentBox">
+            <div class="headerContent">
+              <div class="userOrderNum">{{ index + 4 }}</div>
+              <van-image
+                class="userHeaderImg"
+                fit="cover"
+                round
+                :src="item.avatarPath || maleAvatar"
+                :show-error="true"
+                :error-icon="maleAvatar"
+              />
+              <div>{{ item.nickName || "未知" }}</div>
+            </div>
+            <div class="userPonits">
+              {{ item.totalPoints || 0 }}
+              <span>积分</span>
             </div>
-          </van-cell>
-        </van-list>
+          </div>
+        </div>
+      </van-cell>
+    </van-list>
   </div>
 </template>
 
@@ -88,7 +97,11 @@ export default {
     return {
       maleAvatar,
       active: 0,
-      rankList: [{ name: "魁首榜" }],
+      rankList: [
+        { name: "魁首榜", type: "ZongBang" },
+        { name: "跃进榜", type: "YueJinBang" }
+      ],
+      rankLoading: true,
       loading: false,
       finished: false,
       rankListTopThree: [{}, {}, {}], // 前三名
@@ -98,7 +111,7 @@ export default {
   },
   created() {
     this.env = process.env.VUE_APP_ENV;
-    this.getRankListFun();
+    this.getRankListFun("ZongBang");
     this.setLanXinNavigator();
   },
   activated() {
@@ -117,10 +130,11 @@ export default {
       });
     },
     // 查询：排行榜信息
-    getRankListFun() {
+    getRankListFun(type) {
+      this.rankLoading = true;
       this.$store.commit("toggleLoading", true);
       let params = {
-        type: "ZongBang"
+        type: type
       };
       this.$_http
         .get(this.$_API.JTXT_GET_LEADERBOARD, { params })
@@ -139,9 +153,11 @@ export default {
           this.finished = true;
           this.loading = false;
           this.$store.commit("toggleLoading", false);
+          this.rankLoading = false;
         })
         .catch(() => {
           this.$store.commit("toggleLoading", false);
+          this.rankLoading = false;
         });
     },
     // 操作：返回
@@ -149,7 +165,9 @@ export default {
       this.$router.back();
     },
     onLoad() {},
-    rootChange() {}
+    rootChange(index) {
+      this.getRankListFun(this.rankList[index].type);
+    }
   }
 };
 </script>
@@ -165,6 +183,12 @@ export default {
 .contentBody {
   font-size: 0.6rem;
   background-color: #fff;
+  .rankLoading{
+    height: 85vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
   .contentItemTop {
     display: flex;
     justify-content: space-between;