minnan/src/pages/inhert/village/details.vue

<template>
  <SimplePageContentLoader :loader="contentLoader">
    <view 
      v-if="contentLoader.loadStatus.value == 'finished'"
      class="d-flex flex-column bg-base"
    >
      <swiper 
        circular
        class="height-500"
        :indicator-dots="false"
        :autoplay="true"
        :interval="2000"
        :duration="1000"
      >
        <swiper-item v-for="(item, k) in data.images" :key="k">
          <image 
            class="w-100 height-500 radius-l-top" 
            :src="item" 
            mode="aspectFill"
            @click="onPreviewImage(k)"
          />
        </swiper-item>
      </swiper>

      <view class="d-flex flex-col p-3 radius-l-top p-3 bg-light">

        <view class="d-flex flex-col">
          <HomeTitle :title="data.villageName" />
          <IntroBlock 
            small
            :descItems="[
              {
                label: '保护级别',
                value: data.historyLevelText ,
              },
              {
                label: '年份时间',
                value: data.ageText,
              },
              {
                label: '所属区域',
                value: data.regionText ,
              },
              {
                label: '保护编号',
                value: data.code 
              },
            ]"
          />
          <view class="mt-3 color-text-content">
            <u-parse :content="data.overview" :tagStyle="commonParserStyle"></u-parse>
            <text v-if="!data.overview" >无内容，请添加内容! {{ data.overview }}</text>
          </view>
        </view>

        <view class="d-flex flex-row flex-wrap mt-3">
          <view 
            v-for="(tag, key) in tagsData"
            :key="key"
            class="w-20 d-flex flex-column align-center"
            @click="goList(tag)"
          >
            <image :src="tag.image" class="width-100 mt-2" mode="widthFix"></image>
            <view class="text-align-center color-text-content size-ss">{{ tag.title }}</view>
          </view>
        </view>

        <view class="d-flex flex-col mt-3 mb-2">
         <HomeTitle title="地理位置" />
          <map id="map"
            class="w-100 height-350 mt-3"
            :latitude="center[1]"
            :longitude="center[0]"
            :markers="markers"
            :scale="15"
          />
          <view class="d-flex flex-row justify-between bg-light radius-base p-2 mt-2">
            <view>
              <text class="iconfont icon-navigation"></text>
              <text class="address">{{ data.address }}</text>
            </view>
            <view class="d-flex flex-row align-center" @click="goAddress">
              <text class="color-orange">去这里</text>
              <text class="iconfont icon-arrow-right"></text>
            </view>
          </view>
        </view>

        <template 
          v-for="(tag, index) in tagsDataRecommend"
          :key="index"
        >
          <HomeTitle :title="tag.title" showMore @clickMore="tag.goList()" />
          <SimplePageContentLoader :loader="tag.loader" >
            <view class="d-flex flex-col">
              <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)"
              />
            </view>
          </SimplePageContentLoader>
        </template>
            
        <ContentNote />
      </view>

    </view>
  </SimplePageContentLoader>
</template>

<script setup lang="ts">
import VillageApi from '@/api/inhert/VillageApi';
import commonParserStyle from '@/common/style/commonParserStyle';
import uParse from '@/uni_modules/uview-plus/components/u-parse/u-parse.vue';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import HomeTitle from '@/pages/parts/HomeTitle.vue';
import Box2LineLargeImageUserShadow from '@/pages/parts/Box2LineLargeImageUserShadow.vue';
import { ref, toRefs, type Ref } from 'vue';
import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
import { useSwiperImagePreview } from '@/common/composeabe/SwiperImagePreview';
import { navTo } from '@/common/utils/PageAction';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { useHomePageMiniCommonListGoMoreAndGoDetail, type IHomePageMiniCommonListGoMoreAndGoDetail } from '@/pages/article/common/CommonContent';
import ContentNote from '@/pages/parts/ContentNote.vue';
import IntroBlock from '@/pages/article/common/IntroBlock.vue';
import ImagesUrls from '@/common/config/ImagesUrls';

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

interface TagDataItem {
  image: string, 
  title: string,
  modelId?: 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() {
  navTo('/pages/travel/nav/navto', {
    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') || '{}'),
  };


  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,
      mainBodyColumnId: item.mainBodyColumnId as number,
    };
  });

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

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

</script>