xiangyuan-app/src/pages/dig/admin/preview.vue

<template>
  <FlexCol :padding="30" :gap="20">
    <ImageSwiper
      :images="imageList"
      radius="radius.md"
      round
      mode="widthFix"
      :width="690" 
    />

    <FlexCol v-if="overviewLoader.content.value">
      <SubTitle :title="overviewLoader.content.value.villageName || querys.villageName" />
      <IntroBlock 
        small
        :descItems="[
          {
            label: '村社类型',
            value: overviewLoader.content.value.villageTypeText ,
          },
          {
            label: '地址',
            value: overviewLoader.content.value.cityAddress?.join(' '),
          },
        ]"
      />
      <FlexCol :margin="[20, 0, 0, 0]">
        <Parse :content="(overviewLoader.content.value.overview as string)" />
        <Text v-if="!overviewLoader.content.value.overview" fontConfig="subText">暂无采编简内容</Text>
      </FlexCol>
    </FlexCol>

    <FlexCol :gap="20">
      <CollectModuleList
        :villageId="querys.villageId"
        :villageVolunteerId="querys.villageVolunteerId"
        :taskName="''"
        :taskTitle="''"
        :taskPid="0"
        isView
      />
    </FlexCol>

    <FlexCol :margin="[20, 0, 30, 0]">
      <SubTitle title="地理位置" />
      <FlexCol radius="radius.md" 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',
          }"
        />
      </FlexCol>
    </FlexCol>

    <XBarSpace />
  </FlexCol>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import FlexCol from '@/components/layout/FlexCol.vue';
import CollectModuleList from '../components/CollectModuleList.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';
import VillageInfoApi, { CommonInfoModel } from '@/api/inhert/VillageInfoApi';
import SubTitle from '@/components/display/title/SubTitle.vue';
import IntroBlock from '@/pages/article/common/IntroBlock.vue';
import Parse from '@/components/display/parse/Parse.vue';
import Text from '@/components/basic/Text.vue';
import ImagesUrls from '@/common/config/ImagesUrls';
import { CollectableModulesIdMap } from '../forms/forms';

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

const center = ref([118.15723, 24.48147]);
const markers = ref<any>([]);
  
const imageList = computed(() => {
  const content = overviewLoader.content.value;
  if (!content) return [];
  if (content.images && content.images.length > 0) 
    return content.images;
  if (content.image)
    return [content.image];
  return ["https://mn.wenlvti.net/app_static/xiangan/banner_dig_1.jpg" ];
});
const overviewLoader = useSimpleDataLoader<CommonInfoModel>(async () => {
  const collectModuleId = CollectableModulesIdMap['overview'];
  const list = (await VillageInfoApi.getList({
    collectModuleId,
    villageId: querys.value.villageId,
    villageVolunteerId: querys.value.villageVolunteerId,
  })).list;

  if (list.length > 0) {
    const info =  (await VillageInfoApi.getInfo(
      collectModuleId,
      undefined,
      undefined,
      querys.value.villageId,
      querys.value.villageVolunteerId,
      undefined,
      list[0].id,
    )) as CommonInfoModel
     if (info.longitude && info.latitude) {
      center.value = [Number(info.longitude), Number(info.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,
      }
    ];

    return info;
  }
  return new CommonInfoModel();
});

</script>