YFYC2-H5/src/view/bldgMap/detail/index.vue

<script setup lang="ts">
import ModelList, { baseURL } from "@/assets/data/Model/index";
import { ModelType } from "@/types/Model/index";
import getNumNoRepeat from "@/utils/tool";
import restaurantList, { hotelList } from "@/assets/data/recommend/index";
import Swiper from "swiper";
import "swiper/swiper-bundle.css";
import { nextTick } from "vue";
const currentScene = ref({} as ModelType);
const route = useRoute();
const router = useRouter();

const isShow = ref(false);

const goVr = (code: string) => {
  console.log(code);
  router.push({
    path: "/bldgMap/detail/scene",
    query: {
      code: code,
    },
  });
};

// 美食的两个随机推荐
const recommendFoods = ref([]);
// 酒店的两个随机推荐
const recommendHotels = ref([]);

const lastY = ref(0);
const bottomHeight = ref("50%");
// 手指滑动
const touchMove = (event: any) => {
  // 左右切换为 X 即可
  let currentY = event.changedTouches[0].pageY;
  let ty = currentY - lastY.value;
  if (ty < -20) {
    bottomHeight.value = 97 + "%";
    return;
  } else if (ty > 20) {
    bottomHeight.value = 50 + "%";
    return;
  }
};

// 开始滑动
const handletouchstart = (event: any) => {
  lastY.value = event.changedTouches[0].pageY;
};

// 当前轮播下标
const swiperActiveIndex = ref(0);

const itRecommend = () => {
  // 产生推荐的随机数
  let recommendFoodIndexs = getNumNoRepeat(
    currentScene.value.recommend.food.length - 1,
    2
  );
  const recommendHotelIndexs = getNumNoRepeat(
    currentScene.value.recommend.hotel.length - 1,
    2
  );
  console.log(typeof recommendFoodIndexs);

  if (recommendFoodIndexs && recommendHotelIndexs) {
    // 获取推荐信息——美食
    recommendFoodIndexs.forEach((index: number) => {
      const res = restaurantList.find((item: any) => {
        return item.id == currentScene.value.recommend.food[index];
      });
      recommendFoods.value.push(res);
    });
    // 获取推荐信息——酒店
    recommendHotelIndexs.forEach((index: number) => {
      const res = hotelList.find((item: any) => {
        return item.id == currentScene.value.recommend.hotel[index];
      });
      recommendHotels.value.push(res);
    });
  }
  console.log(recommendFoods.value, recommendHotels.value);
};

onMounted(async () => {
  await nextTick(() => {
    currentScene.value = ModelList.find((item: ModelType) => {
      return item.code === route.query.code;
    });
    itRecommend();
  });

  var swiper = new Swiper(".mySwiper", {
    pagination: {
      el: ".swiper-pagination",
    },
    on: {
      slideChange: function (swiper: any) {
        nextTick(() => {
          const index = swiper.activeIndex;
          swiperActiveIndex.value = index;
        });
      },
    },
  });
});
</script>

<template>
  <div class="detail">
    <div class="top">
      <!-- <img
        src="/public/image/swiperImage/天主堂/DJI_0312.JPG"
        alt=""
      /> -->
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in currentScene.swiperImage"
            :key="index"
          >
            <img :src="item" alt="" />
          </div>
        </div>
        <div class="swiper-pagination" slot="pagination"></div>
      </div>
      <div
        class="viewBig"
        @click="
          () => {
            isShow = true;
          }
        "
      >
        <div>查看</div>
        <div>大图</div>
      </div>
    </div>
    <div
      class="bottom"
      :style="{
        height: bottomHeight,
        overflow: bottomHeight === '97%' ? 'auto' : '',
      }"
    >
      <div
        class="bottom-top"
        @touchmove="touchMove"
        @touchstart="handletouchstart"
      >
        <div class="bottom-line"></div>
      </div>
      <div
        class="bottom-name"
        @touchmove="touchMove"
        @touchstart="handletouchstart"
      >
        <!-- 拼音 -->
        <div class="bottom-name-pinyin">{{ currentScene.pinyin }}</div>
        <!-- 汉字 -->
        <div class="bottom-name-name">
          {{ currentScene.name }}
          <div
            class="bg"
            v-if="Object.keys(currentScene).length > 0"
            :style="{ width: currentScene.name.length * 1.5 + 'rem' }"
          ></div>
        </div>
      </div>

      <div class="bottom-other">
        <div class="adress">{{ "地址：" + currentScene.adress }}</div>
        <div class="rank">{{ "级别:" + currentScene.rank }}</div>
        <div class="openTime">{{ "开放时间:" + currentScene.openTime }}</div>
        <div class="ticketInfo">{{ "门票:" + currentScene.ticketInfo }}</div>
      </div>
      <div class="bottom-disc">
        {{ "简介:" + currentScene.disc }}
      </div>
      <div class="bottom-recommend">
        <div class="bottom-recommend-top">周边推荐</div>
        <div class="bottom-recommend-content">
          <!-- 食物 -->
          <div class="content-item">
            <div
              class="item"
              v-for="(item, index) in recommendFoods"
              :key="item.id"
            >
              <img
                :src="baseURL + '/image/service/food/' + item.coverName"
                alt=""
              />
              <div>{{ item.name }}</div>
            </div>
          </div>
          <!-- 酒店 -->
          <div class="content-item">
            <!-- <div class="item">
              <img src="@/assets/img/map/recommend/1/hotel/2(1).jpg" alt="" />
              <div>MS美宿艺术品酒店</div>
            </div>
            <div class="item">
              <img src="@/assets/img/map/recommend/1/hotel/3(1).jpg" alt="" />
              <div>芜湖奇士商务酒店</div>
            </div> -->
            <div
              class="item"
              v-for="(item, index) in recommendHotels"
              :key="item.id"
            >
              <img
                :src="baseURL + '/image/service/hotel/' + item.coverImg"
                alt=""
              />
              <div>{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <img
      v-if="currentScene.sceneId != ''"
      class="go-vr"
      src="@/assets/img/map/goVr.png"
      alt=""
      @click="goVr(currentScene.sceneId)"
    />
    <div class="big-img-box" v-if="isShow">
      <div class="img-box">
        <img
          class="content-img"
          :src="currentScene.swiperImage[swiperActiveIndex]"
          alt=""
        />
        <img
          class="close-icon"
          src="@/assets/img/map/close.png"
          alt=""
          @click="
            () => {
              isShow = false;
            }
          "
        />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.detail {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;

  .top {
    width: 100%;
    height: 50vh;
    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    img {
      width: 100%;
      height: 50vh;
      object-fit: cover;
    }
    .viewBig {
      position: absolute;
      border-radius: 50%;
      width: 18vw;
      height: 18vw;
      border: 1px solid white;
      background: #515151;
      font-size: 1.1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 110%;
      letter-spacing: 2px;
      color: white;
      top: 33vh;
      right: 5vw;
      z-index: 2;
    }
  }
  .bottom {
    width: 100%;
    background: var(--color-bg);
    position: absolute;
    bottom: 0;
    border-radius: 20px;
    padding: 15px 20px 12vh 20px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 2;

    // overflow: auto;
    transition-property: height;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
    transition-delay: 0.2s;
    .bottom-top {
      width: 100%;
      height: 10px;
      background: rgba(0, 128, 0, 0);
      display: flex;
      justify-content: center;
      .bottom-line {
        width: 25%;
        height: 5px;
        background: #867858;
        border-radius: 50px;
        margin: auto;
      }
    }

    &-name {
      overflow: auto;
      width: auto;
      margin-top: 10px;
      margin-bottom: 5px;
      &-pinyin {
        font-size: 0.6rem;
        width: inherit;
      }
      &-name {
        width: inherit;
        font-size: 1.3rem;
        /* letter-spacing: 0.1rem; */
        margin-left: 2px;
        position: relative;
        font-weight: bold;
        position: relative;
        z-index: 2;
      }
      .bg {
        height: 2vh;
        position: absolute;
        bottom: 0;
        background: #ede0c3;
        z-index: -1;
      }
    }
    &-other {
      font-size: 0.85rem;
      font-weight: bold;
      color: #665e4a;
      div {
        margin-top: 10px;
        letter-spacing: 2px;
      }
      div:before {
        content: "●";
        margin-right: 5px;
        color: #666;
      }
    }
    &-disc {
      font-size: 0.8rem;
      color: #918a6f;
      line-height: 1.2rem;
      letter-spacing: 2px;
      font-weight: bold;
      margin-top: 15px;
    }

    .ellipsis {
      width: 100%;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      letter-spacing: 2px;
    }
    .bottom-recommend {
      &-top {
        width: 100%;
        font-size: 1.4rem;
        color: #665e4a;
        font-weight: bold;
        margin-top: 20px;
      }
      &-content {
        width: 100%;
        margin-top: 10px;
        .content-item {
          width: 100%;
          display: flex;
          justify-content: space-around;

          .item {
            width: 43%;
            height: 20vh;
            img {
              width: 100%;
              height: 80%;
              object-fit: cover;
            }
            div {
              width: 100%;
              font-size: 0.8rem;
              color: #665e4a;
              font-weight: bold;
              margin-top: -6px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              margin-top: 0px;
            }
          }
        }
      }
    }
  }
  .go-vr {
    width: 60%;
    height: 50px;
    margin: auto;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 3;
  }
  .big-img-box {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #666666db;
    .img-box {
      position: absolute;
      width: 80%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      .content-img {
        width: 100%;
      }
      .close-icon {
        width: 10%;
        margin: auto;
        margin-top: 10px;
      }
    }
  }
}
</style>