📦 增加村落关注页面

src/pages/home/village/follow/list.vue

@@ -0,0 +1,77 @@
+<template>
+  <CommonTopBanner title="关注人数">
+    <SimplePageListLoader :loader="villageUserRankListLoader">
+      <FlexCol gap="gap.lg" padding="space.md">
+        <Touchable
+          v-for="(item, index) in villageUserRankListLoader.list.value"
+          :key="item.id"
+          direction="column"
+          @click="goDetails(item)"
+        >
+          <BackgroundBox
+            backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxDark.png"
+            :backgroundCutBorder="[6,6,6,6]"
+            :backgroundCutBorderSize="[10,10,10,10]"
+            :padding="[25,25]"
+            direction="row"
+            justify="space-between"
+            align="center"
+            gap="gap.md"
+            
+          >
+            <FlexRow align="center" gap="gap.lg">
+              <Avatar 
+                :url="item.avatar"
+                defaultAvatar="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteerNew.png"
+                :size="70" 
+                mode="aspectFill" 
+                radius="radius.md" 
+              />
+              <Text :text="item.nickname" fontConfig="contentText" />
+            </FlexRow>
+            <FlexRow center gap="gap.md">
+              <Tag v-if="item.isAdmin" text="管理员" size="small" />
+            </FlexRow>
+          </BackgroundBox>
+        </Touchable>
+      </FlexCol>
+    </SimplePageListLoader>
+  </CommonTopBanner>
+</template>
+
+<script setup lang="ts">
+import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
+import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
+import { navTo } from '@/components/utils/PageAction';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+import Text from '@/components/basic/Text.vue';
+import Avatar from '@/components/display/Avatar.vue';
+import Tag from '@/components/display/Tag.vue';
+import Image from '@/components/basic/Image.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import Touchable from '@/components/feedback/Touchable.vue';
+import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
+import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
+import FollowVillageApi from '@/api/light/FollowVillageApi';
+
+const { querys } = useLoadQuerys({
+  villageId: 0,
+}, () => {
+  villageUserRankListLoader.reload();
+}); 
+
+const villageUserRankListLoader = useSimplePageListLoader(20, async (page, pageSize) => {
+  return (await FollowVillageApi.getFollowedUsers({
+    page, pageSize, 
+    villageId: querys.value.villageId
+  }))
+});
+
+function goDetails(item: {
+  id: number;
+}) {
+  navTo('../volunteer/detail', { id: item.id });
+}
+
+</script>

src/pages/home/village/follows.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
-import VillageMyFollow from '../components/VillageMyFollow.vue';
+import VillageMyFollow from '../../components/VillageMyFollow.vue';
 import { backAndCallOnPageBack } from '@/components/utils/PageAction';
 
 function goDetails(item: { id: number }) {

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

@@ -134,11 +134,11 @@
       </FlexRow>
 
       <FlexRow backgroundColor="background.tertiary" radius="radius.md" :padding="[30, 20]">
-        <FlexCol center gap="gap.sm" flexBasis="25%">
+        <Touchable direction="column" center gap="gap.sm" flexBasis="25%" @click="navTo('/pages/home/village/task/index')">
           <Text text="乡源光" fontConfig="secondText" />
           <Text :text="villageInfoLoader.content.value?.light || '0'" fontConfig="importantTitle" />
           <Button type="text" size="mini" text="做任务" @click="navTo('/pages/home/village/task/index')" />
-        </FlexCol>
+        </Touchable>
         <Divider type="vertical" />
         <FlexCol center gap="gap.sm" flexBasis="25%">
           <Touchable direction="column" center @click="navTo('/pages/home/village/volunteer/list', { villageId: villageStore.currentVillage?.id ?? undefined })">
@@ -150,7 +150,7 @@
           </WxButton>
         </FlexCol>
         <Divider type="vertical" />
-        <Touchable direction="column" center gap="gap.sm" flexBasis="25%" @click="navTo('/pages/home/village/volunteer/list', {
+        <Touchable direction="column" center gap="gap.sm" flexBasis="25%" @click="navTo('/pages/home/village/follow/list', {
           villageId: villageStore.currentVillage?.id ?? undefined,
         })">
           <Text text="关注人数" fontConfig="contentText" />

src/pages/user/index.vue

@@ -33,7 +33,7 @@
       GridItemPaddingHorizontal: 0,
     }">
       <Grid :borderGrid="false" :mainAxisCount="4">
-        <GridItem title="我的关注" icon="https://xy.wenlvti.net/app_static/images/mine/IconLevel.png" touchable @click="requireLogin(() => navTo('/pages/home/village/follows'), '登录后查看我的关注哦')" />
+        <GridItem title="我的关注" icon="https://xy.wenlvti.net/app_static/images/mine/IconLevel.png" touchable @click="requireLogin(() => navTo('/pages/home/village/follow/my-follows'), '登录后查看我的关注哦')" />
         <GridItem title="我的订单" icon="https://xy.wenlvti.net/app_static/images/mine/IconArchive.png" touchable @click="requireLogin(() => navTo('/pages/home/village/orders'), '登录后查看我的订单哦')" />
         <GridItem title="任务中心" icon="https://xy.wenlvti.net/app_static/images/mine/IconTask.png" touchable @click="navTo('/pages/home/village/task/index')" />
         <GridItem title="兑换商城" icon="https://xy.wenlvti.net/app_static/images/mine/IconShop.png" touchable @click="goStore" />