🎨 优化志愿者排名显示

src/common/composeabe/ErrorDisplay.ts

@@ -13,7 +13,7 @@ const ignoreMessages = [
  * @param callback 弹窗确认回调
  */
 export function showError(e: any, title = '提示', callback?: () => void) {
-  console.log('showError', e);
+  console.log('显示错误信息', title, e);
   let message = '';
   if (e?.errMsg) 
     message = e.errMsg;

src/pages/home/components/VillageUserRankList.vue

@@ -2,7 +2,7 @@
   <Empty v-if="list.length === 0" description="暂无排名数据" />
   <FlexRow align="flex-end" justify="space-around">
     <Touchable 
-      v-for="(item) in list" 
+      v-for="(item) in first3" 
       position="relative" 
       :key="item.id" 
       :width="item.rank == 1 ? '35%' : '32.5%'" 
@@ -15,7 +15,7 @@
       }"
       direction="column"
       overflow="hidden"
-      @click="emit('goDetails', item)"
+      @click="handleGoDetails(item)"
     >
       <FlexCol 
         position="absolute"
@@ -32,7 +32,7 @@
         <Height :height="item.rank == 1 ? 15 : 10" />
         <Text fontConfig="h4" :text="item.title" :lines="1" color="white" />
         <Height :height="6" />
-        <Text fontConfig="h2" :text="`${item.score}`" :fontSize="30" :color="scoreColors[item.rank - 1]" fontFamily="SongtiSCBlack" />
+        <Text fontConfig="h2" :text="item.score >= 0 ? `${item.score}` : '等你加入'" :fontSize="30" :color="scoreColors[item.rank - 1]" fontFamily="SongtiSCBlack" />
         <Text fontFamily="SongtiSCBlack" :fontSize="18" :text="scoreSuffix" :color="scoreColors[item.rank - 1]" />
       </FlexCol>
     </Touchable>
@@ -40,6 +40,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import Text from '@/components/basic/Text.vue';
 import Avatar from '@/components/display/Avatar.vue';
 import Empty from '@/components/feedback/Empty.vue';
@@ -47,6 +48,15 @@ import Touchable from '@/components/feedback/Touchable.vue';
 import FlexCol from '@/components/layout/FlexCol.vue';
 import FlexRow from '@/components/layout/FlexRow.vue';
 import Height from '@/components/layout/space/Height.vue';
+import { ArrayUtils } from '@imengyu/imengyu-utils';
+
+export interface UserRankItem {
+  id: number;
+  image: string;
+  title: string;
+  rank: number;
+  score: number;
+}
 
 const scoreColors = [
   '#cb8833',
@@ -54,27 +64,41 @@ const scoreColors = [
   '#cd7853',
 ]
 
-withDefaults(defineProps<{
-  list?: {
-    id: number;
-    image: string;
-    title: string;
-    rank: number;
-    score: number;
-  }[];
+const props = withDefaults(defineProps<{
+  list?: UserRankItem[];
   scoreSuffix?: string;
 }>(), {
   list: () => [],
 });
 
 const emit = defineEmits<{
-  (e: 'goDetails', item: {
-    id: number;
-    image: string;
-    title: string;
-    rank: number;
-    score: number;
-  }): void;
+  (e: 'goDetails', item: UserRankItem): void;
 }>();
 
+const first3 = computed(() => {
+  const list = props.list.concat();
+  if (list.length < 3) {
+    let rank = list.length;
+    for (let i = 0; i < 3 - list.length; i++) {
+      list.push({
+        id: -i,
+        image: 'https://xy.wenlvti.net/app_static/images/mine/DefaultAvatar.png',
+        title: '?',
+        rank: ++rank,
+        score: -1,
+      });
+    }
+  }
+  //移动第一名到中间
+  const first = list[0];
+  ArrayUtils.removeAt(list, 0);
+  ArrayUtils.insert(list, 1, first);
+  return list.slice(0, 3);
+})
+
+function handleGoDetails(item: UserRankItem) {
+  if (item.id <= 0)
+    return;
+  emit('goDetails', item)
+}
 </script>

src/pages/home/discover/details.vue

@@ -52,6 +52,10 @@
             width="100%"
             mode="widthFix"
           />
+          <FlexCol v-else>
+            <StatusBarSpace />
+            <Height height="40px" />
+          </FlexCol>
           <FlexRow justify="space-between" padding="padding.md" >
             <FlexCol gap="gap.md">
               <H3 class="size-ll color-title-text">{{ loader.content.value.title }}</H3>
@@ -147,6 +151,7 @@ import Touchable from "@/components/feedback/Touchable.vue";
 import StatusBarSpace from "@/components/layout/space/StatusBarSpace.vue";
 import NavBar from "@/components/nav/NavBar.vue";
 import LikeFooter from "./components/LikeFooter.vue";
+import Height from "@/components/layout/space/Height.vue";
 
 const { onPreviewImage } = useSwiperImagePreview(() => loader.content.value?.images || []);
 const emptyContent = computed(() => 

src/pages/home/index.vue

@@ -301,14 +301,6 @@ const villageUserRankListLoader = useSimpleDataLoader(async () => {
       rank: i + 1,
       score: item.points,
     }));
-
-  if (res.length >= 3) {
-    //移动第一名到中间
-    const first = res[0];
-    ArrayUtils.removeAt(res, 0);
-    ArrayUtils.insert(res, 1, first);
-  }
-
   return res
 });
 

src/pages/home/village/introd/card.vue

@@ -372,12 +372,6 @@ const villageUserRankListLoader = useSimpleDataLoader(async () => {
       rank: i + 1,
       score: item.points,
     }));
-  if (res.length >= 3) {
-    //移动第一名到中间
-    const first = res[0];
-    ArrayUtils.removeAt(res, 0);
-    ArrayUtils.insert(res, 1, first);
-  }
   return res
 });
 

src/pages/home/village/rank/volunteer.vue

@@ -58,13 +58,6 @@ const villageUserRankListLoader = useSimpleDataLoader(async () => {
       score: item.points,
       isAdmin: item.type === 'admin',
     }));
-
-  if (res.length >= 3) {
-    //移动第一名到中间
-    const first = res[0];
-    ArrayUtils.removeAt(res, 0);
-    ArrayUtils.insert(res, 1, first);
-  }
   return res
 });
 const villageUserRankListFirst3 = computed(() => {