xiangyuan-app/src/pages/home/village/goods/index.vue

<template>
  <FlexCol gap="gap.md" padding="padding.md">
    <FlexRow justify="space-between" align="center" gap="gap.sm">
      <SearchBar v-model:value="searchValue" placeholder="搜索乡源好物" :innerStyle="{ width: '440rpx' }" />
      <FrameButton text="开通微信小店" size="small" />
    </FlexRow>
    <Construction text="现在是测试数据，暂无接口" />
    <FlexRow wrap justify="space-around" gap="gap.sm">
      <BoxMid
        v-for="good in goodsLoader.content.value" :key="good.id"
        :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>
      </BoxMid>
    </FlexRow>
  </FlexCol>
</template>

<script setup lang="ts">
import { navTo } from '@/components/utils/PageAction';
import { ref } from 'vue';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import BoxMid from '@/common/components/box/BoxMid.vue';
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 Avatar from '@/components/display/Avatar.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';

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>