提交

src/view/toupiao/index.vue

@@ -201,7 +201,7 @@
             :key="item"
           >
             <van-button
-              @click="btnType = item"
+              @click="() => changetype(item)"
               :color="btnType === item ? '#ff5b4a' : '#fde7ea'"
               round
               size="small"
@@ -220,45 +220,43 @@
           />
 
           <div style="margin: 0 16px; background-color: #fff; padding: 0.5em; border-radius: 6px">
-            <template v-for="(v, index) in data" :key="index">
-              <van-cell v-if="v.userGroup === btnType || btnType === '全部'">
-                <template #title>
-                  <img
-                    v-if="v.userRanking <= 3"
-                    :src="require('../../assets/img/toupiao/top' + v.userRanking + '.png')"
-                    style="width: 2em; vertical-align: middle"
-                  />
-                  <span
-                    style="
-                      display: inline-block;
-                      text-align: center;
-                      width: 2em;
-                      vertical-align: middle;
-                    "
-                    v-text="v.userRanking"
-                    v-else
-                  ></span>
+            <van-cell v-for="(v, index) in rank" :key="index">
+              <template #title>
+                <img
+                  v-if="v.userRanking <= 3"
+                  :src="require('../../assets/img/toupiao/top' + v.userRanking + '.png')"
+                  style="width: 2em; vertical-align: middle"
+                />
+                <span
+                  style="
+                    display: inline-block;
+                    text-align: center;
+                    width: 2em;
+                    vertical-align: middle;
+                  "
+                  v-text="v.userRanking"
+                  v-else
+                ></span>
 
-                  <img
-                    :src="v.userCover"
-                    style="
-                      width: 4em;
-                      height: 4em;
-                      border-radius: 50%;
-                      margin-left: 5px;
-                      vertical-align: middle;
-                    "
-                  />
-                  <div style="display: inline-block; vertical-align: middle">
-                    <p style="margin-left: 0.5em">{{ v.userNumber }}号</p>
-                    <span style="margin-left: 0.5em">{{ v.userName }}</span>
-                  </div>
-                </template>
-                <template #right-icon>
-                    <span style="font-size: 14px;color: #ee1430;">{{ v.userVoteNum }}赞</span>
-                </template>
-              </van-cell>
-            </template>
+                <img
+                  :src="v.userCover"
+                  style="
+                    width: 4em;
+                    height: 4em;
+                    border-radius: 50%;
+                    margin-left: 5px;
+                    vertical-align: middle;
+                  "
+                />
+                <div style="display: inline-block; vertical-align: middle">
+                  <p style="margin-left: 0.5em">{{ v.userNumber }}号</p>
+                  <span style="margin-left: 0.5em">{{ v.userName }}</span>
+                </div>
+              </template>
+              <template #right-icon>
+                <span style="font-size: 14px; color: #ee1430">{{ v.userVoteNum }}赞</span>
+              </template>
+            </van-cell>
           </div>
         </div>
       </div>
@@ -297,6 +295,7 @@ const active = ref(1);
 const width = ref(null);
 const rw = ref(0);
 const rh = ref(0);
+const rank = ref(data);
 
 const li = ['全部'],
   obj = {};
@@ -319,6 +318,21 @@ const toDetail = item => {
   selectData.value = item;
   show.value = true;
 };
+
+const changetype = item => {
+  const rank_li = [];
+  for (let i = 0; i < data.length; i++) {
+    const v = JSON.parse(JSON.stringify(data[i]));
+    if (v.userGroup === item || item === '全部')
+      rank_li.push({
+        ...v,
+        userRanking: rank_li.length + 1
+      });
+  }
+  rank.value = rank_li;
+  console.log(rank);
+  btnType.value = item;
+};
 </script>
 <style>
 * {