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

<template>
  <FlexCol :gap="20" :padding="20">
    <SearchBar placeholder="输入关键词搜索" @search="goList(undefined, '知识库 · 全部', $event)" />
    <FlexCol :radius="15" overflow="hidden">
      <ImageSwiper 
        :height="300"
        :images="[
          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/B1.jpg',
          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/B2.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 @click="goList(undefined, '知识库 · 全部')" />
          <GridItem title="优秀案例" icon="/static/images/icons/icon-camera.png" touchable @click="goList(359, '知识库 · 优秀案例')" />
          <GridItem title="经验分享" icon="/static/images/icons/icon-rules.png" touchable @click="goList(358, '知识库 · 经验分享')" />
          <GridItem title="常见问题" icon="/static/images/icons/icon-mark.png" touchable @click="goList(357, '知识库 · 常见问题')" />
          <GridItem title="挖掘技巧" icon="/static/images/icons/icon-pac.png" touchable @click="goList(356, '知识库 · 挖掘技巧')" />
          <GridItem title="认知基础" icon="/static/images/icons/icon-route.png" touchable @click="goList(355, '知识库 · 认知基础')" />
        </Grid>
      </ProvideVar>
    </Box>
    <Box title="最新" icon="/static/images/home/icon-shining.png" showMore @moreClicked="goList(undefined, '知识库 · 全部')">  
      <SimplePageContentLoader :loader="discoverLoader">
        <FlexCol :gap="20">
          <Touchable 
            v-for="(item, i) in discoverLoader.content.value"
            :key="i"
            justify="space-between"
            align="center"
            direction="row"
            @click="goDetail(item)"
          > 
            <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.keywords" :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"
            />
          </Touchable>
        </FlexCol>
      </SimplePageContentLoader>
    </Box>
    <Loadmore status="nomore" />
    <Height :height="150" />
  </FlexCol>
</template>

<script setup lang="ts">
import CommonContent, { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
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 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 { navTo } from '@/components/utils/PageAction';

const discoverLoader = useSimpleDataLoader(async () => {
  return (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(18)
    .setMainBodyColumnId(354)
  , 1, 30)).list
});

function goDetail(item: GetContentListItem) {
  navTo('/pages/article/details', {
    modelId: item.modelId,
    mainBodyColumnId: item.mainBodyColumnId,
    id: item.id,
  });
}
function goList(mainBodyColumnId: number|undefined, title: string, search?: string) {
  navTo('/pages/article/common/list', {
    modelId: 18,
    mainBodyColumnId,
    title,
    search: search || '',
  });
}
</script>