feat: 添加骑行数据接口，整合骑行排名页面逻辑，优化展示样式

packages/app/src/core/libs/requests.ts

@@ -887,6 +887,27 @@ export const getBadges = (query = {}) =>
  */
 export const getCertificates = (query = {}) =>
   httpGet<Certificate[]>('/app-api/member/stylist-honor/get-certificate-list')
+/**
+ * 获取骑行下拉
+ */
+export const getRidingOptions = () =>
+  httpGet<
+    {
+      id: string
+      name: string
+    }[]
+  >('/app-api/member/app-riding/listFinishedRidingActivity')
+/**
+ * 获取骑行数据
+ */
+export const getRidings = (query) =>
+  httpGet<
+    ResPageData<{
+      memberStylistName: string
+      avatar: string
+      radeKmTotal: string
+    }>
+  >('/app-api/member/app-riding/page', query)
 export const refreshToken = (refreshToken: string) =>
   httpPost<any>('/app-api/member/auth/refresh-token', {}, { refreshToken })
 export const httpGetMock = <T>(data: T) =>

packages/app/src/pages/home/offline-activity/cycling-rankings/index.vue

@@ -4,6 +4,8 @@
 <script setup lang="ts">
 import NavbarEvo from '@/components/navbar-evo.vue'
 import { NetImages } from '../../../../core/libs/net-images'
+import { getRidings } from '../../../../core/libs/requests'
+import PageHelperEvo from '@/components/page-helper-evo.vue'
 
 // const { data, run } = useRequest(() => ({}), { initialData: [] })
 </script>
@@ -18,42 +20,78 @@ import { NetImages } from '../../../../core/libs/net-images'
         :src="NetImages.CyclingRankingsHeaderBg"
       ></wd-img>
     </div>
-    <div class="flex-grow relative bg-[linear-gradient(180deg,#EFEFEF_0.4%,#FFF_21.41%)]">
-      <div class="absolute h-4 top--4 left-0 right-0 bg-[#EFEFEF] rounded-t-2xl"></div>
-      <div class="flex justify-between">
-        <template v-for="(it, i) in [1, 2, 3]" :key="i">
-          <div
-            class="flex-1 py-2 relative"
-            :class="`${i === 1 ? 'w-[143px] h-[141px] bg-white rounded-xl relative bottom-8 pt-4' : ''}`"
-          >
-            <div
-              class="text-center font-bold font-['D-DIN'] leading-relaxed"
-              :class="`${i === 1 ? 'text-[#ef4343] text-2xl ' : 'text-black text-[22px]'}`"
-            >
-              198.2
-            </div>
-            <div
-              class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-relaxed"
-            >
-              骑行里程km
-            </div>
-            <div class="absolute top--30 left-0 right-0 flex flex-col items-center gap-2">
-              <wd-img
-                class="rounded-full border-2 border-solid border-[#c5cdd4]"
-                width="71"
-                height="71"
-                src="https://via.placeholder.com/71x71"
-              ></wd-img>
+    <PageHelperEvo :request="getRidings" :query="{}">
+      <template #default="{ source }">
+        <div class="flex-grow relative bg-[linear-gradient(180deg,#EFEFEF_0.4%,#FFF_21.41%)]">
+          <div class="absolute h-4 top--4 left-0 right-0 bg-[#EFEFEF] rounded-t-2xl"></div>
+          <div class="flex justify-between">
+            <template v-for="(it, i) in source.list.slice(0, 3)" :key="i">
               <div
-                class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-relaxed"
+                class="flex-1 py-2 relative"
+                :class="`${i === 0 ? 'w-[143px] h-[141px] bg-white rounded-xl relative bottom-8 pt-4 order-1 ' : ''}`"
+                :style="{ order: i === 0 ? 1 : i - 1 }"
               >
-                苏小萌
+                <div
+                  class="text-center font-bold font-['D-DIN'] leading-relaxed"
+                  :class="`${i === 0 ? 'text-[#ef4343] text-2xl ' : 'text-black text-[22px]'}`"
+                >
+                  <!-- 198.2 -->
+                  {{ it.radeKmTotal }}
+                </div>
+                <div
+                  class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-relaxed"
+                >
+                  骑行里程km
+                </div>
+                <div class="absolute top--30 left-0 right-0 flex flex-col items-center gap-2">
+                  <wd-img
+                    class="rounded-full border-2 border-solid border-[#c5cdd4] overflow-hidden"
+                    width="71"
+                    height="71"
+                    :src="it.avatar"
+                  ></wd-img>
+                  <div
+                    class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-relaxed"
+                  >
+                    <!-- 苏小萌 -->
+                    {{ it.memberStylistName }}
+                  </div>
+                </div>
               </div>
-            </div>
+            </template>
           </div>
-        </template>
-        <template></template>
-      </div>
-    </div>
+          <div class="flex flex-col gap-8 mt--10">
+            <template v-for="(it, i) in source.list" :key="i">
+              <div v-if="i > 2" class="flex items-center gap-2 px-7">
+                <div
+                  class="text-center w-8 text-black/40 text-base font-bold font-['DIN'] leading-relaxed"
+                >
+                  {{ i < 9 ? '0' + (i + 1) : i + 1 }}
+                </div>
+                <wd-img class="w-8 h-8 rounded-full" round :src="it.avatar" />
+                <div
+                  class="text-center text-black/80 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
+                >
+                  {{ it.memberStylistName }}
+                </div>
+                <div class="flex-1"></div>
+                <div>
+                  <div
+                    class="text-center text-black/80 text-xl font-bold font-['D-DIN'] leading-relaxed"
+                  >
+                    {{ it.radeKmTotal }}
+                  </div>
+                  <div
+                    class="text-center text-black/40 text-[10px] font-normal font-['PingFang_SC'] leading-relaxed"
+                  >
+                    累计里程km
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </PageHelperEvo>
   </div>
 </template>