minnan-website/pages/village/detail.vue

<template>
  <div class="main-background main-background main-background-type2">
    <div class="nav-placeholder"></div>
    <section class="main-section">
      <div class="content">
        <div class="d-flex flex-column village-details">
          <div
            v-if="loading"
            class="d-flex justify-content-center align-items-center"
            style="min-height: 200px;"
          >
            <a-spin tip="加载中" />
          </div>
          <template v-else>
            <!-- 轮播图 -->
            <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="(item, k) in tagsData"
                :key="k"
                class="tag-item"
              >
                <NuxtLink :to="{ 
                  path: '/village/list',
                  query: { 
                    id: item.id,
                    model_id: item.modelId,
                    main_body_column_id: item.mainBodyColumnId,
                    region: item.region,
                  }, 
                }">
                  <img :src="item.logo" />
                  <span>{{ item.name }}</span>
                </NuxtLink> 
              </div>
            </div>
            <div class="mt-3" />
            <div class="map-container">
              <el-amap
                style="width: 100%;"
                :center="center"
                :zoom="zoom"
                @init="handleInit"
              >
                <el-amap-marker
                  :position="center"
                />
              </el-amap>
            </div>
            <div style="height: 40px;flex-shrink: 0;" />
          </template>
        </div>
      </div>
    </section>
  </div>
</template>

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

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

function handleInit(mapRef: any) {
  map = mapRef;
  console.log('handleInit', mapRef);

  
}

watch(route, () => {
  loading.value = true;
  if (import.meta.client) {
    setTimeout(() => {
      loadInfo();
    }, 500);
  }
}, { immediate: true })

async function loadInfo() {

  loading.value = true;
  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];
  }

  const menu = await VillageApi.getVillageMenuList(id);

  loading.value = false;
  tagsData.value = menu;
}

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

.village-details {
  .swiper-slide {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
  .tag-item {
    width: 13%;

    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      text-decoration: none;
      color: colors.$text-color;

      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;
    margin: 40px 0;
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;

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

</style>