xiangyuan-gov-app/src/pages/home/light/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 as number)"
          />
        </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>

        <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>
      </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';


const center = ref([118.15723, 24.48147]);
const markers = ref<any>([]);

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: Number(data.value.latitude),
    longitude: Number(data.value.longitude),
  })
}
const { onPreviewImage } = useSwiperImagePreview(() => data.value.images || [])

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,
    }
  ];
}, false);


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