xiangyuan-app/src/pages/home/store/index.vue

<template>
  <FlexCol :gap="20" :padding="20">
    <SearchBar placeholder="输入关键词搜索" />
    <FlexCol :radius="15" overflow="hidden">
      <ImageSwiper 
        :height="200"
        :images="[
          'https://mn.wenlvti.net/app_static/minnan/images/home/BackgroundBanner5.jpg',
          'https://mn.wenlvti.net/app_static/minnan/images/home/BackgroundBanner4.jpg',
          'https://mn.wenlvti.net/app_static/minnan/images/home/BackgroundBanner3.jpg',
        ]"
      />
    </FlexCol>
    <Box title="主题导览" icon="/static/images/home/icon-compass.png">
      <ProvideVar :vars="{
        GridItemIconSize: 70,
        GridItemBackgroundColor: 'transparent',
        GridItemPaddingHorizontal: 0,
      }">
        <Grid :borderGrid="false" :mainAxisCount="3">
          <GridItem title="全部" icon="/static/images/icons/icon-all.png" touchable />
          <GridItem title="拍摄标准" icon="/static/images/icons/icon-camera.png" touchable />
          <GridItem title="命名规则" icon="/static/images/icons/icon-rules.png" touchable />
          <GridItem title="文本规范" icon="/static/images/icons/icon-mark.png" touchable />
          <GridItem title="隐私授权" icon="/static/images/icons/icon-pac.png" touchable />
          <GridItem title="错误案例" icon="/static/images/icons/icon-route.png" touchable />
        </Grid>
      </ProvideVar>
    </Box>
    <Box title="最新" icon="/static/images/home/icon-shining.png" showMore @moreClicked="$emit('goDiscover')">  
      <SimplePageContentLoader :loader="discoverLoader">
        <FlexCol :gap="20">
          <Touchable 
            v-for="(item, i) in discoverLoader.content.value"
            :key="i"
            justify="space-between"
            align="center"
            direction="row"
          > 
            <FlexCol flex="1" :gap="10">
              <Text :text="item.title" fontConfig="h5" />
              <Text :text="item.desc" fontConfig="subText" />
              <FlexRow :gap="10">
                <Tag v-for="tag in item.tags" :key="tag" :text="tag" size="small" type="primary" scheme="light" />
              </FlexRow>
            </FlexCol>
            <Width :width="25" />
            <Image 
              :src="item.thumbnail || item.image" 
              :width="120" 
              :height="120" 
              :radius="15" 
              mode="aspectFill" 
              round
            />
          </Touchable>
        </FlexCol>
      </SimplePageContentLoader>
    </Box>
    <Loadmore status="nomore" />
    <Height :height="150" />
  </FlexCol>
</template>

<script setup lang="ts">
import Box from '@/common/components/parts/Box.vue';
import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import AppCofig from '@/common/config/AppCofig';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import Loadmore from '@/components/display/loading/Loadmore.vue';
import Tag from '@/components/display/Tag.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 Grid from '@/components/layout/grid/Grid.vue';
import GridItem from '@/components/layout/grid/GridItem.vue';
import Height from '@/components/layout/space/Height.vue';
import Width from '@/components/layout/space/Width.vue';
import ProvideVar from '@/components/theme/ProvideVar.vue';
import { RandomUtils } from '@imengyu/imengyu-utils';

function testImage() {
  return 'https://mncdn.wenlvti.net/app_static/minnan/images/home/ImageTest' + RandomUtils.genRandom(1, 5) +'.jpg';
}

const discoverLoader = useSimpleDataLoader(async () => {
  return new Array(12).fill(0).map((_, i) => ({ 
    title: '茶艺传承作坊' + i, 
    desc: '多馆联展，沉浸式交互体验。',
    tags: ['拍摄标准', '命名规则','拍摄标准', '命名规则'],
    image: testImage(),
    thumbnail: testImage(),
  }));
});
</script>