xiangyuan-app/src/pages/home/village/details.vue

<template>
  <SimplePageContentLoader :loader="contentLoader">
    <FlexCol v-if="contentLoader.loadStatus.value == 'finished'">
      <swiper 
        circular
        :indicator-dots="false"
        :autoplay="true"
        :interval="2000"
        :duration="1000"
        :style="{
          width: '100%',
          height: '500rpx',
        }"
      >
        <swiper-item v-for="(item, k) in data.images" :key="k">
          <Image 
            :src="item" 
            :radius="20"
            :height="500"
            :width="750"
            mode="aspectFill"
            touchable
            @click="onPreviewImage(k)"
          />
        </swiper-item>
      </swiper>

      <FlexCol :padding="20" :radius="20" :gap="20">

        <Height :height="20" />
        <FlexCol>
          <SubTitle :title="data.villageName" />
          <IntroBlock 
            small
            :descItems="[
              {
                label: '保护级别',
                value: data.historyLevelText ,
              },
              {
                label: '年份时间',
                value: data.ageText,
              },
              {
                label: '所属区域',
                value: data.regionText ,
              },
            ]"
          />
          <FlexCol :margin="[20, 0, 0, 0]">
            <Parse :content="data.overview" />
            <Text v-if="!data.overview" fontConfig="subText">无内容，请添加内容! </Text>
          </FlexCol>
        </FlexCol>

        <FlexRow :margin="[40, 0, 40, 0]" :gap="[20, 0]" wrap>
          <Touchable 
            v-for="(tag, key) in tagsData"
            :key="key"
            width="20%"
            align="center"
            justify="center"
            direction="column"
            @click="goList(tag)"
          >
            <Image :src="tag.image" width="65%" mode="widthFix"></Image>
            <Text fontConfig="subText" textAlign="center">{{ tag.title }}</Text>
          </Touchable>
        </FlexRow>

        <FlexCol :margin="[20, 0, 30, 0]">
          <SubTitle title="地理位置" />
          <FlexCol :radius="20" backgroundColor="white" :margin="[20, 0, 0, 0]">
            <map 
              id="map"
              :latitude="center[1]"
              :longitude="center[0]"
              :markers="markers"
              :scale="15"
              :style="{
                width: '100%',
                height: '350rpx',
              }"
            />
            <Touchable 
              v-if="data.address"
              :title="data.address"
              touchable
              direction="column"
              :padding="20"
              @click="goAddress"
            >
              <IconTextBlock 
                icon="map-filling"
                :iconProps="{ size: 30 }"
                :title="data.address"
                extra="去这里"
                :extraProps="{
                  color: 'primary',
                }"
              />
            </Touchable>
          </FlexCol>
        </FlexCol>

        <template 
          v-for="(tag, index) in tagsDataRecommend"
          :key="index"
        >
          <Height :height="20" />
          <SubTitle :title="tag.title" showMore @moreClicked="tag.goList()" />
          <SimplePageContentLoader :loader="tag.loader" >
            <FlexCol :gap="20">
              <Box2LineLargeImageUserShadow 
                v-for="(item, i) in tag.loader.content.value"
                :key="i"
                :title="item.title"
                :desc="item.desc"
                :image="item.image"
                :likes="item.likes"
                :comment="item.comments"
                @click="tag.goDetail(item.id)"
              />
            </FlexCol>
          </SimplePageContentLoader>
        </template>
      </FlexCol>

    </FlexCol>
  </SimplePageContentLoader>
</template>

<script setup lang="ts">
import { ref, toRefs, type Ref } from 'vue';
import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
import { useSwiperImagePreview } from '@/common/composeabe/SwiperImagePreview';
import { navTo } from '@/components/utils/PageAction';
import { onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { useHomePageMiniCommonListGoMoreAndGoDetail, type IHomePageMiniCommonListGoMoreAndGoDetail } from '@/pages/article/common/CommonContent';
import IntroBlock from '@/pages/article/common/IntroBlock.vue';
import Parse from '@/components/display/parse/Parse.vue';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import Box2LineLargeImageUserShadow from '@/common/components/parts/Box2LineLargeImageUserShadow.vue';
import VillageApi from '@/api/inhert/VillageApi';
import ImagesUrls from '@/common/config/ImagesUrls';
import SubTitle from '@/components/display/title/SubTitle.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Height from '@/components/layout/space/Height.vue';
import IconTextBlock from '@/components/display/block/IconTextBlock.vue';

const EmptyImage = 'https://mncdn.wenlvti.net/app_static/minnan/EmptyImage.png';

interface TagDataItem {
  image: string, 
  title: string,
  villageId?: number,
  modelId?: number,
  mainBodyId?: number,
  mainBodyColumnId?: number,
}
interface TagDataRecommendItem extends TagDataItem, IHomePageMiniCommonListGoMoreAndGoDetail {
}

const center = ref([118.15723, 24.48147]);
const markers = ref<any>([]);
const tagsData = ref<TagDataItem[]>([]);
const tagsDataRecommend = ref<TagDataRecommendItem[]>([]) as unknown as Ref<TagDataRecommendItem[]>;

const { querys } = useLoadQuerys({ 
  id: 0,
}, () => contentLoader.loadData());

const data = ref<Record<string, any>>({
  images: [],
  overview: '',
  longitude: 0,
  latitude: 0,
  region: 0,
  address: '',
  villageName: '',
})
function goAddress() {
  uni.openLocation({
    latitude: data.value.latitude,
    longitude: data.value.longitude,
  })
}
const { onPreviewImage } = useSwiperImagePreview(() => data.value.images || [])

function goList(tag: TagDataItem) {
  navTo('/pages/article/common/list', {
    title: tag.title,
    modelId: tag.modelId,
    mainBodyColumnId: tag.mainBodyColumnId,
    region: data.value.region,
  });
}

const contentLoader = useSimpleDataLoader(async () => {
  data.value = {
    ...data.value,
    ...JSON.parse(uni.getStorageSync('VillageTemp') || '{}'),
  };
  console.log(data.value);

  if (data.value.longitude && data.value.latitude) {
    center.value = [Number(data.value.longitude), Number(data.value.latitude)];
  } else {
    center.value = [118.11593, 24.467580];
  }
  markers.value = [
    {
      id: 1,
      latitude: center.value[1],
      longitude: center.value[0],
      iconPath: ImagesUrls.IconMarker,
      width: 40,
      height: 40,
    }
  ];

  const menu = await VillageApi.getVillageMenuList(querys.value.id);

  tagsData.value = menu.map((item, index) => {
    return {
      title: item.name,
      image: item.logo || EmptyImage,
      modelId: item.modelId as number,
      villageId: item.villageId as number,
      mainBodyId: item.mainBodyId as number,
      mainBodyColumnId: item.mainBodyColumnId as number,
    };
  });

  tagsDataRecommend.value = tagsData.value.slice(0, 2).map((t) => {
    return {
      ...t,
      ...(toRefs(useHomePageMiniCommonListGoMoreAndGoDetail({
        title: t.title,
        villageId: t.villageId,
        mainBodyId: t.mainBodyId,
        mainBodyColumnId: t.mainBodyColumnId,
        modelId: t.modelId,
        itemType: 'article-common',
        detailsPage: '/pages/article/details',
      })))
    }
  }) as any;

  tagsDataRecommend.value.forEach(e => {
    e.loader.loadData();
  });
}, false);


function getPageShareData() {
  return {
    title: data.value.villageName,
    imageUrl: data.value.images[0],
  }
}
onShareTimeline(() => {
  return getPageShareData(); 
})
onShareAppMessage(() => {
  return getPageShareData();
})
</script>