📦 村社名片页

src/common/components/parts/IndexCommonImageItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <ImageBlock2
+    :src="image"
+    :title="title"
+    :desc="desc"
+    :width="340"
+    :imageWidth="340"
+    :imageRadius="15"
+    backgroundColor="transparent"
+  >
+    <template #footer> 
+      <FlexRow justify="space-between" align="center" :padding="[10,0]" :margin="[10,0,0,0]">
+        <FlexRow align="center" :gap="10">
+          <Avatar :url="image" :size="40" />
+          <Text :text="userName" :fontSize="24" color="gray" />
+        </FlexRow>
+        <FlexRow align="center" :gap="10">
+          <Icon icon="favorite" :color="isLike ? 'primary' : 'gray'" :size="30" />
+          <Text :text="likes" :fontSize="30" :color="isLike ? 'primary' : 'gray'" />
+        </FlexRow>
+      </FlexRow>
+    </template>
+  </ImageBlock2>
+</template>
+
+<script setup lang="ts">
+import Text from '@/components/basic/Text.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import Avatar from '@/components/display/Avatar.vue';
+import Icon from '@/components/basic/Icon.vue';
+import ImageBlock2 from '@/components/display/block/ImageBlock2.vue';
+
+const props = defineProps<{
+  image?: string;
+  title?: string;
+  desc?: string;
+  userName?: string;
+  likes?: number;
+  isLike?: boolean;
+}>()
+
+</script>

src/common/components/parts/RoundTags.vue

@@ -1,25 +1,27 @@
 <template>
-  <FlexRow wrap gap="gap.lg">
-    <template
-      v-for="(tag, k) in tags"
-      :key="k" 
-    >
-      <Touchable @click="emit('update:active', tag)">
-        <BackgroundBox 
-          v-if="tag"
-          :backgroundImage="tag === active ? 
-            'https://xy.wenlvti.net/app_static/images/village/TagActive.png' : 
-            'https://xy.wenlvti.net/app_static/images/village/TagNormal.png'"
-          :backgroundCutBorder="[10, 10, 10, 10]"
-          :backgroundCutBorderSize="[10, 10, 10, 10]"
-          :padding="[20, 30]"
-          :text="tag"
-        >
-          <Text :text="tag" fontConfig="contentText" :color="tag === active ? 'white' : 'text.content'" />
-        </BackgroundBox>
-      </Touchable>
-    </template>
-  </FlexRow>
+  <scroll-view scroll-x>
+    <FlexRow gap="gap.lg">
+      <template
+        v-for="(tag, k) in tags"
+        :key="k" 
+      >
+        <Touchable @click="emit('update:active', tag)">
+          <BackgroundBox 
+            v-if="tag"
+            :backgroundImage="tag === active ? 
+              'https://xy.wenlvti.net/app_static/images/village/TagActive.png' : 
+              'https://xy.wenlvti.net/app_static/images/village/TagNormal.png'"
+            :backgroundCutBorder="[10, 10, 10, 10]"
+            :backgroundCutBorderSize="[10, 10, 10, 10]"
+            :padding="[20, 30]"
+            :text="tag"
+          >
+            <Text :text="tag" fontConfig="contentText" :color="tag === active ? 'white' : 'text.content'" />
+          </BackgroundBox>
+        </Touchable>
+      </template>
+    </FlexRow>
+  </scroll-view>
 </template>
 
 <script setup lang="ts">

src/pages/home/index.vue

@@ -48,28 +48,14 @@
         :key="i"
         :width="340"
       >
-        <ImageBlock2
-          :src="item.image"
+        <IndexCommonImageItem
+          :image="item.image"
           :title="item.title"
           :desc="item.desc"
-          :width="340"
-          :imageWidth="340"
-          :imageRadius="15"
-          backgroundColor="transparent"
-        >
-          <template #footer> 
-            <FlexRow justify="space-between" align="center" :padding="[10,0]" :margin="[10,0,0,0]">
-              <FlexRow align="center" :gap="10">
-                <Avatar :url="item.image" :size="40" />
-                <Text :text="item.userName" :fontSize="24" color="gray" />
-              </FlexRow>
-              <FlexRow align="center" :gap="10">
-                <Icon icon="favorite" :color="item.isLike ? 'primary' : 'gray'" :size="30" />
-                <Text :text="item.likes" :fontSize="30" :color="item.isLike ? 'primary' : 'gray'" />
-              </FlexRow>
-            </FlexRow>
-          </template>
-        </ImageBlock2>
+          :userName="item.userName"
+          :likes="item.likes"
+          :isLike="item.isLike"
+        />
       </MasonryGridItem>
     </MasonryGrid>
 
@@ -100,6 +86,7 @@ import Icon from '@/components/basic/Icon.vue';
 import Text from '@/components/basic/Text.vue';
 import MasonryGrid from '@/components/layout/masonry/MasonryGrid.vue';
 import MasonryGridItem from '@/components/layout/masonry/MasonryGridItem.vue';
+import IndexCommonImageItem from '@/common/components/parts/IndexCommonImageItem.vue';
 
 const themeContext = useTheme();
 const searchKeywords = ref('');

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

@@ -124,32 +124,81 @@
     <VillageUserRankList />
 
     <!-- 魅力乡源 -->
-    <HomeTitle title="魅力乡源">
+    <HomeTitle title="魅力乡源" showMore>
       <template #right>
         <BackgroundImageButton 
           backgroundImage="https://xy.wenlvti.net/app_static/images/village/TagActive.png"
           :backgroundCutBorder="[10, 10, 10, 10]"
+          :backgroundCutBorderSize="[10, 10, 10, 10]"
           :padding="[15, 20]"
+          :innerStyle="{ marginRight: '20rpx' }"
         >
           <Text text="120乡源果兑换" fontConfig="contentText" color="white" />
         </BackgroundImageButton>
       </template>
     </HomeTitle>
+    <ProvideVar :vars="{
+      GridItemIconSize: 90,
+      GridItemBackgroundColor: 'transparent',
+      GridItemPaddingHorizontal: 0,
+      GridItemPaddingVertical: 8,
+    }">
+      <Grid :borderGrid="false" :mainAxisCount="4">
+        <GridItem title="村庄概况" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeIntrod.png" touchable />
+        <GridItem title="自然风光" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeEnvirounment.png" touchable />
+        <GridItem title="历史沿革" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHistory.png" touchable />
+        <GridItem title="特色产业" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeIndustry.png" touchable />
+        <GridItem title="文艺活动" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeActivity.png" touchable />
+        <GridItem title="非遗展示" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeShow.png" touchable />
+        <GridItem title="民俗风采" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeFolkloreVibe.png" touchable />
+        <GridItem title="文化志愿者" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeVolunteer.png" touchable />
+      </Grid>
+    </ProvideVar>
 
     <!-- 活力乡源 -->
     <HomeTitle title="活力乡源" />
+    <ProvideVar :vars="{
+      GridItemIconSize: 90,
+      GridItemBackgroundColor: 'transparent',
+      GridItemPaddingHorizontal: 0,
+      GridItemPaddingVertical: 8,
+    }">
+      <Grid :borderGrid="false" :mainAxisCount="4">
+        <GridItem title="乡源荣光" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHornor.png" touchable />
+        <GridItem title="乡源好物" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGoods.png" touchable />
+        <GridItem title="乡源树" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeTree.png" touchable />
+        <GridItem title="共编村史" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeIndustry.png" touchable />
+        <GridItem title="互动游戏" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGame.png" touchable />
+      </Grid>
+    </ProvideVar>
 
     <!-- 文脉乡源 -->
     <HomeTitle title="文脉乡源" />
-
+    <RoundTags v-model:active="listActiveTag" :tags="['广场', '老味道', '老手艺', '老物件', '老故事']" />
+    <MasonryGrid>
+      <MasonryGridItem
+        v-for="(item, i) in recommendLoader.content.value"
+        :key="i"
+        :width="340"
+      >
+        <IndexCommonImageItem
+          :image="item.image"
+          :title="item.title"
+          :desc="item.desc"
+          :userName="item.userName"
+          :likes="item.likes"
+          :isLike="item.isLike"
+        />
+      </MasonryGridItem>
+    </MasonryGrid>
 
   </FlexCol>
 
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import HomeTitle from '@/common/components/parts/HomeTitle.vue';
-import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';
 import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
 import Button from '@/components/basic/Button.vue';
 import Icon from '@/components/basic/Icon.vue';
@@ -161,12 +210,16 @@ import FlexCol from '@/components/layout/FlexCol.vue';
 import FlexRow from '@/components/layout/FlexRow.vue';
 import VillageMiniMap from '../../components/VillageMiniMap.vue';
 import Divider from '@/components/display/Divider.vue';
-import VillageRankList from '../../components/VillageRankList.vue';
 import RoundTags from '@/common/components/parts/RoundTags.vue';
 import VillageUserRankList from '../../components/VillageUserRankList.vue';
-import { ref } from 'vue';
-import ImageButton from '@/components/basic/ImageButton.vue';
 import BackgroundImageButton from '@/components/basic/BackgroundImageButton.vue';
+import ProvideVar from '@/components/theme/ProvideVar.vue';
+import Grid from '@/components/layout/grid/Grid.vue';
+import GridItem from '@/components/layout/grid/GridItem.vue';
+import MasonryGrid from '@/components/layout/masonry/MasonryGrid.vue';
+import MasonryGridItem from '@/components/layout/masonry/MasonryGridItem.vue';
+import IndexCommonImageItem from '@/common/components/parts/IndexCommonImageItem.vue';
+import Width from '@/components/layout/space/Width.vue';
 
 const villageInfoLoader = useSimpleDataLoader(async () => {
   return {
@@ -190,4 +243,58 @@ const villageInfoLoader = useSimpleDataLoader(async () => {
 });
 
 const rankActiveTag = ref('乡源果');
+const listActiveTag = ref('广场');
+
+const recommendLoader = useSimpleDataLoader(async () => {
+  return [
+    {
+      image: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest1.jpg',
+      title: '厦门村庄精选记忆',
+      desc: '描述1',
+      userName: '月下木子',
+      likes: 100,
+      isLike: true,
+    },
+    {
+      image: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest2.jpg',
+      title: '厦门村庄精选记忆',
+      desc: '描述2',
+      userName: '月下木子',
+      likes: 200,
+      isLike: false,
+    },
+    {
+      image: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest3.jpg',
+      title: '厦门村庄精选记忆',
+      desc: '描述3',
+      userName: '月下木子',
+      likes: 300,
+      isLike: true,
+    },
+    {
+      image: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest4.jpg',
+      title: '厦门村庄精选记忆',
+      desc: '描述4',
+      userName: '月下木子',
+      likes: 400,
+      isLike: false,
+    },
+    {
+      image: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest5.jpg',
+      title: '厦门村庄精选记忆',
+      desc: '描述5',
+      userName: '月下木子',
+      likes: 500,
+      isLike: true,
+    },
+    {
+      image: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest6.jpg',
+      title: '厦门村庄精选记忆',
+      desc: '描述6',
+      userName: '月下木子',
+      likes: 600,
+      isLike: false,
+    },
+  ];
+});
 </script>