📦 乡源好物页

src/common/components/FrameButton.vue

@@ -4,7 +4,7 @@
       'https://xy.wenlvti.net/app_static/images/FrameButton.png'"
     :backgroundCutBorder="32"
     :backgroundCutBorderSize="36"
-    :padding="[32, 36]"
+    :padding="padding"
     @click="emit('click')"
   >
     <Text :text="text" fontConfig="contentText" :color="primary ? 'white' : 'black'" />
@@ -14,14 +14,25 @@
 <script setup lang="ts">
 import BackgroundImageButton from '@/components/basic/BackgroundImageButton.vue';
 import Text from '@/components/basic/Text.vue';
+import { computed } from 'vue';
 
 const props = withDefaults(defineProps<{
   text: string;
   primary?: boolean;
+  size?: 'large' | 'small';
 }>(), {
   text: '去发布',
   primary: false,
+  size: 'large',
 }); 
 
+const padding = computed(() => {
+  if (props.size === 'large') {
+    return [32, 36];
+  } else {
+    return [24, 25];
+  }
+});
+
 const emit = defineEmits(['click']);
 </script>

src/components/display/Avatar.vue

@@ -8,7 +8,8 @@
     @click="$emit('click')"
   >
     <image 
-      v-if="url || defaultAvatar" :src="url || defaultAvatar"
+      v-if="url || defaultAvatar || src" 
+      :src="url || defaultAvatar || src"
       :style="{
         width: themeContext.resolveThemeSize(size),
         height: themeContext.resolveThemeSize(size),
@@ -50,6 +51,10 @@ export interface AvatarProps {
    */
   url?: string,
   /**
+   * 头像的图片URL
+   */
+  src?: string,
+  /**
    * 背景颜色
    */
   background?: string,

src/pages.json

@@ -90,7 +90,20 @@
         "enablePullDownRefresh": false
       }
     },
-    
+    {
+      "path": "pages/home/village/goods/index",
+      "style": {
+        "navigationBarTitleText": "乡源好物",
+        "enablePullDownRefresh": true
+      }
+    },
+    {
+      "path": "pages/home/village/goods/detail",
+      "style": {
+        "navigationBarTitleText": "乡源好物详情",
+        "enablePullDownRefresh": true
+      }
+    },
     {
       "path": "pages/article/details",
       "style": {

src/pages/home/village/goods/detail.vue

@@ -0,0 +1,89 @@
+<template>
+  <FlexCol gap="gap.md" padding="padding.md">
+    <SimplePageContentLoader :loader="goodLoader">
+      <template v-if="goodLoader.content.value">
+        <BackgroundBox 
+          backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
+          :backgroundCutBorder="32"
+          :backgroundCutBorderSize="36"
+          :padding="24"
+        >
+          <Image :src="goodLoader.content.value.image" :radius="20" width="100%" height="300rpx" mode="aspectFill" />
+        </BackgroundBox>
+        <BackgroundBox 
+          backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
+          :backgroundCutBorder="32"
+          :backgroundCutBorderSize="36"
+          padding="padding.lg"
+        >
+          <FlexRow justify="space-between" align="center" gap="gap.md">
+            <FlexCol>
+              <Text :text="goodLoader.content.value.name" fontConfig="titleText" />
+              <Text :text="`出售：${goodLoader.content.value.price}元`" fontConfig="contentText" />
+            </FlexCol>
+            <FlexRow align="center" gap="gap.md">
+              <Avatar 
+                :src="goodLoader.content.value.avatar"
+                :size="40"
+              />
+              <Text :text="`发布人: ${goodLoader.content.value.userName}`" fontConfig="contentText" />
+            </FlexRow>
+          </FlexRow>
+          <Divider />
+          <Text :text="goodLoader.content.value.description" fontConfig="contentText" />
+        </BackgroundBox>
+        <Height :height="160" />
+        <ImageButton
+          src="https://xy.wenlvti.net/app_static/images/village/ButtonPrimary.png"
+          text="去咨询"
+          width="500rpx"
+          height="80rpx"
+          @click="handleConsult"
+        />
+      </template>
+    </SimplePageContentLoader>
+  </FlexCol>
+</template>
+
+<script setup lang="ts">
+import Construction from '@/common/components/Construction.vue';
+import FrameButton from '@/common/components/FrameButton.vue';
+import Image from '@/components/basic/Image.vue';
+import ImageButton from '@/components/basic/ImageButton.vue';
+import Text from '@/components/basic/Text.vue';
+import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
+import Avatar from '@/components/display/Avatar.vue';
+import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+import Divider from '@/components/display/Divider.vue';
+import Touchable from '@/components/feedback/Touchable.vue';
+import SearchBar from '@/components/form/SearchBar.vue';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import Height from '@/components/layout/space/Height.vue';
+import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
+import { toast } from '@/components/utils/DialogAction';
+import { navTo } from '@/components/utils/PageAction';
+import { ref } from 'vue';
+
+const goodLoader = useSimpleDataLoader(async () => {
+  return {
+    id: 1,
+    name: '乡源好物',
+    image: 'https://xy.wenlvti.net/app_static/images/home/games/Games1.png',
+    avatar: 'https://xy.wenlvti.net/app_static/images/home/games/Games1.png',
+    userName: '张三',
+    price: 100,
+    originalPrice: 120,
+    description: '产地:个手回匠风造畜，竹音编、钉踏、产地品有桶祖指，唐祖精选了众多好物伤，同防于国美彭柯细匠桶吴订单，规格图至于俗、猛火，贪级传译答于撑精。',
+    content: '乡源好物',
+    tags: ['乡源好物'],
+    comments: ['乡源好物'],
+    likes: ['乡源好物'],
+  };
+});
+
+
+const handleConsult = () => {
+  toast('暂未开放，敬请期待！');
+};
+</script>

src/pages/home/village/goods/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <FlexCol gap="gap.md" padding="padding.md">
+    <FlexRow justify="space-between" align="center" gap="gap.sm">
+      <SearchBar v-model:value="searchValue" :innerStyle="{ width: '440rpx' }" />
+      <FrameButton text="开通微信小店" size="small" />
+    </FlexRow>
+    <Construction text="测试数据，暂无接口">
+      <FlexRow wrap justify="space-around" gap="gap.sm">
+        <BackgroundBox 
+          v-for="good in goodsLoader.content.value" :key="good.id"
+          backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
+          :backgroundCutBorder="32"
+          :backgroundCutBorderSize="36"
+          :padding="24"
+          :innerStyle="{
+            width: 'calc(50% - 50rpx)',
+          }"
+        >
+          <Touchable direction="column" gap="gap.lg" @click="handleGoodDetail(good)">
+            <Image 
+              :src="good.image"
+              :radius="20"
+              width="100%"
+              height="300rpx"
+              mode="aspectFill"
+            />
+            <FlexRow align="center" gap="gap.md">
+              <Avatar 
+                :src="good.avatar"
+                :size="40"
+              />
+              <Text :text="`发布人: ${good.userName}`" fontConfig="contentText" />
+            </FlexRow>
+          </Touchable>
+        </BackgroundBox>
+      </FlexRow>
+    </Construction>
+  </FlexCol>
+</template>
+
+<script setup lang="ts">
+import Construction from '@/common/components/Construction.vue';
+import FrameButton from '@/common/components/FrameButton.vue';
+import Image from '@/components/basic/Image.vue';
+import Text from '@/components/basic/Text.vue';
+import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
+import Avatar from '@/components/display/Avatar.vue';
+import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+import Touchable from '@/components/feedback/Touchable.vue';
+import SearchBar from '@/components/form/SearchBar.vue';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import { navTo } from '@/components/utils/PageAction';
+import { ref } from 'vue';
+
+const goodsLoader = useSimpleDataLoader(async () => {
+  let games = [
+    {
+      id: 1,
+      name: '知识竞赛',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games1.png',
+      avatar: 'https://xy.wenlvti.net/app_static/images/home/games/Games1.png',
+      userName: '张三',
+    },
+    {
+      id: 2,
+      name: '乡源寻美景',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games2.png',
+      avatar: 'https://xy.wenlvti.net/app_static/images/home/games/Games2.png',
+      userName: '李四',
+    },
+    {
+      id: 3,
+      name: '农耕小拼图',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games3.png',
+      avatar: 'https://xy.wenlvti.net/app_static/images/home/games/Games3.png',
+      userName: '王五',
+    },
+    {
+      id: 4,
+      name: '乡情口令接龙',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games4.png',
+      avatar: 'https://xy.wenlvti.net/app_static/images/home/games/Games4.png',
+      userName: '赵六',
+    },
+    {
+      id: 5,
+      name: '农耕小拼图',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games5.png',
+      avatar: 'https://xy.wenlvti.net/app_static/images/home/games/Games5.png',
+      userName: '孙七',
+    },
+    {
+      id: 6,
+      name: '乡情口令接龙',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games6.png',
+      avatar: 'https://xy.wenlvti.net/app_static/images/home/games/Games6.png',
+      userName: '周八',
+    },
+  ];
+
+  games = games.concat(games);
+  return games;
+});
+const searchValue = ref('');
+
+const handleGoodDetail = (good: { id: number }) => {
+  navTo('./detail', {
+    id: good.id,
+  });
+};
+</script>

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

@@ -204,7 +204,7 @@
     }">
       <Grid :borderGrid="false" :mainAxisCount="4">
         <GridItem title="乡源荣光" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHornor.png" touchable @click="toast('暂未开放，敬请期待！')" />
-        <GridItem title="乡源好物" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGoods.png" touchable @click="toast('暂未开放，敬请期待！')" />
+        <GridItem title="乡源好物" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGoods.png" touchable @click="navTo('/pages/home/village/goods/index')" />
         <GridItem title="乡源树" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeTree.png" touchable @click="emit('goTree')" />
         <GridItem title="政贤连心" icon="https://xy.wenlvti.net/app_static/images/village/IconGovAffairs.png" touchable @click="toast('暂未开放，敬请期待！')" />
         <GridItem title="互动游戏" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGame.png" touchable @click="navTo('/pages/home/village/games/index')" />