UnivateProperties/src/components/timeshare/resort/resortPageNew.vue

<template>
  <div>
    <carouselSection v-if="!wait" :resortImages="resort.images" />
    <main id="main" style="margin-top:-20px;">
      <section>
        <div class="container wider">
          <div class="row" id="resort-profile">
            <div class="col-md-3">
              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
              <div class="row no-gutters">
                <div class="col-6">
                  <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
                </div>
                <div class="col-6">
                  <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
                </div>
              </div>
              <gallerySection :images="resort.images" />
              <FilterComponent :hideTop="true" />
            </div>
            <div class="col-md-9 resort-profile" style="margin-top:15px; margin-bottom:15px;">
              <h2>{{ resort.prName }}</h2>
              <WeekList :resortCode="resortCode" />
              <p v-if="resort.description && resort.description !== ''">{{ resort.description }}</p>
              <br v-if="resort.description && resort.description !== ''" />
              <p>{{ resort.prNotes }}</p>
              <div class="d-flex mt-3">
                <iframe
                  width="100%"
                  height="200"
                  id="gmap_canvas"
                  :src="
                'https://maps.google.com/maps?q=' +
                  resort.prLatitude +
                  ',' +
                  resort.prLongitude +
                  '&hl=en&z=14&amp;output=embed'
              "
                  frameborder="0"
                  scrolling="no"
                  marginheight="0"
                  marginwidth="0"
                ></iframe>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <div v-if="wait" id="preloader"></div>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import WeekList from "../buy/weekListComponent.vue";
import FilterComponent from "../searchTimeshare.vue";
import ResortImages from "./resortImage.vue";
import gallerySection from "./gallerySection";
import carouselSection from "./carouselSection";

export default {
  components: {
    carouselSection,
    WeekList,
    FilterComponent,
    ResortImages,
    gallerySection,
  },
  data() {
    return {
      wait: false,
    };
  },
  props: {
    resortCode: {},
  },
  methods: {
    ...mapActions("resort", ["getResortData"]),
    routerGoTo(goto) {
      this.$router.push(goto);
    },
  },
  computed: {
    ...mapState("resort", ["resort"]),
  },
  mounted() {
    this.wait = true;
    this.getResortData(this.resortCode).then((fulfilled) => {
      this.wait = false;
    });
    // .then(() => {
    //   setTimeout(() => (this.boolLoaded = true), 2000);
    // });
  },
};
</script>

<style lang="scss" scoped>
.wider {
  width: 1600px;
}
</style>