minnan-website/src/views/village/detail.vue

<template>
  <div class="d-flex flex-column village-details">
    <!-- 轮播图 -->
    <ImageSwiper
      v-if="data.images && data.images.length > 0"
      :items="data.images"
      :autoplay="2500"
      style="height:300px"
    >
      <template #item="{ item }">
        <img class="swiper-slide" :src="item" />
      </template>
    </ImageSwiper>
    <img 
      v-else 
      :src="data.image" 
      class="swiper-slide"
    />
    <div class="mt-3" />
    <div class="d-flex flex-col content-box">
      <SimpleRichHtml
        v-if="data.overview"
        :contents="[ data.overview ]"
        :tag-style="{
          a: 'text-decoration: underline ; color: #fff;',
          p: 'color: #fff; margin-bottom: 20px;',
          img: 'border-radius: 10px;'
        }"
      />
      <span v-else>无内容，请添加内容!</span>
    </div>
    <div class="mt-3" />
    <div class="d-flex flex-row flex-wrap">
      <div
        v-for="(i, k) in tagsData"
        :key="k"
        class="tag-item"
        @click="handleGoDetail(i)"
      >
        <img :src="i.image" />
        <span>{{ i.title }}</span>
      </div>
    </div>
    <div class="mt-3" />
    <div class="map-container">
      <el-amap
        style="width: 100%;"
        :center="center"
        :zoom="zoom"
        @init="handleInit"
      />
    </div>
    <div class="mt-3" />
  </div>
</template>

<script setup lang="ts">
import SimpleRichHtml from '@/components/display/SimpleRichHtml.vue';
import router from '@/router';
import { useRoute } from 'vue-router';
import { ref, watch } from 'vue';
import VillageApi from '@/api/village/VillageApi';
import ImageSwiper from '@/components/content/ImageSwiper.vue';

const tagsData = ref<{ image: string, title: string }[]>([]);
const route = useRoute();
const data = ref({
  image: '',
  images: [],
  overview: '',
  longitude: "",
  latitude: '',
  modelId: 0,
  mainBodyColumnId: 0,
  region: 0,
})
const zoom = ref(12);
const center = ref([121.59996, 31.197646]);
let map: any = null;

function handleInit(mapRef: any) {
  map = mapRef;
}

watch(route, () => {
  setTimeout(() => {
    loadInfo();
  }, 500);
}, { immediate: true })

async function loadInfo() {
  const id = Number(route.query.id);
  data.value = {
    ...data.value,
    ...JSON.parse(localStorage.getItem('VillageTemp') || '{}'),
  };

  if (data.value.longitude && data.value.latitude) {
    center.value = [Number(data.value.longitude), Number(data.value.latitude)];
  } else {
    center.value = [118.850895, 28.982787];
  }
  map?.add(new AMap.Marker({
    position: center.value as [number, number]
  }));

  const menu = await VillageApi.getVillageMenuList(id);

  tagsData.value = menu.map((item, index) => {
    return {
      title: item.name,
      image: item.logo,
      region: data.value.region,
      ...item,
    };
  });
}
function handleGoDetail(item: any) {
  router.push({
    name: 'VillageList2',
    query: { 
      id: item.id,
      model_id: item.modelId,
      main_body_column_id: item.mainBodyColumnId,
      region: item.region,
    }, 
  })
}

</script>
    
<style lang="scss">
@use "@/assets/scss/colors";

.village-details {
  .swiper-slide {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
  .tag-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 13%;
    cursor: pointer;

    img {
      width: 40px;
      height: 40px;
    }
  }
  .content-box {
    width: 100%;
    padding: 20px;
    background-color: colors.$box-color;
    border: 1px solid colors.$border-split-color;
    box-shadow: 0 0 10px 5px colors.$box-dark-trans-color2;
    border-radius: 8px;
  }
  .map-container {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;

    .el-vue-amap-container {
      width: 100%;
    }
  }
}

</style>