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

<template>
  <CommonTopBanner title="乡源好物">
    <FlexCol gap="gap.md" padding="padding.md">
      <FlexRow justify="space-between" align="center" gap="gap.sm">
        <SearchBar v-model:value="searchValue" placeholder="搜索乡源好物" :innerStyle="{ width: '270rpx' }" />
        <FrameButton text="我要发布" @click="handlePublish" size="small" />
        <FrameButton text="开通微信小店" size="small" />
      </FlexRow>
      <SimplePageListLoader :loader="goodsLoader">
        <FlexRow wrap justify="space-around" gap="gap.sm">
          <BoxMid
            v-for="good in goodsLoader.list.value" :key="good.id"
            :innerStyle="{
              width: 'calc(50% - 80rpx)',
            }"
          >
            <Touchable direction="column" gap="gap.lg" @click="handleGoodDetail(good)">
              <Image 
                :src="good.image"
                :radius="20"
                width="100%"
                height="300rpx"
                mode="aspectFill"
              />
              <Text :text="good.title" fontConfig="titleText" />
              <FlexRow align="center" gap="gap.md">
                <Avatar 
                  :src="good.villageVolunteerAvatar"
                  :size="40"
                />
                <Text :text="`发布人: ${good.villageVolunteerName}`" fontConfig="contentText" />
              </FlexRow>
            </Touchable>
          </BoxMid>
          <FlexCol v-if="goodsLoader.list.value.length % 2 !== 0" width="calc(50% - 40rpx)" />
        </FlexRow>
      </SimplePageListLoader>
    </FlexCol>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { navTo } from '@/components/utils/PageAction';
import { onMounted, ref } from 'vue';
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useUserTools } from '@/common/composeabe/UserTools';
import BoxMid from '@/common/components/box/BoxMid.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';
import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
import VillageInfoApi from '@/api/inhert/VillageInfoApi';
import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
import { confirm } from '@/components/utils/DialogAction';

const { querys } = useLoadQuerys({
  villageId: 0,
});

const { getIsVolunteer, getIsJoinedVillage, volunteerInfo } = useUserTools();
const isJoined = ref(false);
const CollectModuleId = 24; // 乡源好物模块id

const goodsLoader = useSimplePageListLoader(20, async (page, pageSize, params) => {
  return await VillageInfoApi.getList({
    collectModuleId: CollectModuleId,
    villageId: querys.value.villageId,
    page, pageSize,
    keywords: searchValue.value,
  });
});
const searchValue = ref('');

function handleJoin() {
  navTo('/pages/home/light/submit', {
    villageId: querys.value.villageId,
  });
}
const handleGoodDetail = (good: { id: number }) => {
  navTo('./detail', {
    id: good.id,
  });
};
const handlePublish = () => {
  if (!isJoined.value) {
    confirm({ 
      title: '提示', 
      content: "您还不是当前村社的志愿者，请先加入志愿者队伍才能采编信息哦", 
      confirmText: '去加入',
    }).then((res) => {
      if (res) {
        handleJoin();
      }
    });
    return;
  }
  navTo('/pages/dig/forms/common', { 
    id: -1,
    villageId: querys.value.villageId,  
    villageVolunteerId: volunteerInfo.value?.id || 0,  
    collectModuleId: CollectModuleId,  
    subTitle: '乡源好物',
  });
}

onMounted(async () => {
  await getIsVolunteer();
  isJoined.value = await getIsJoinedVillage(querys.value.villageId);
  await goodsLoader.load();
});

defineExpose({
  onPageBack(name: string, param: any) {
    if (param && param.needRefresh)
      goodsLoader.reload();
  },
});
</script>