ShowEasyFrontEnd/FrontEnd/pages/index.vue

<template>
  <div class="home-view">
    <Hero :slogan="slogan" :subslogan="subslogan" :populars="populars"
      :exhibitionsSearchs="exhibitionsSearchs"
      :exhibitionsLocations="exhibitionsLocations" :exhibitionsCategories="exhibitionsCategories" :banner="banner"
      :exhibitionsKeywords="exhibitionsKeywords" />
    <centerMode :list="ads" v-if="ads.length"></centerMode>
    <!-- <AdBanner :item="apiData.ads" /> -->
    <section class="tw-mt-[50px] md:tw-mt-[70px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <ChoiceReason :reasons="reasons"></ChoiceReason>
    </section>
    <section class="xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <FocusExhibition v-if="focusExhibitionlist1.length>0 || focusExhibitionlist2.length>0" :focusExhibitionlist1="focusExhibitionlist1" :focusExhibitionlist2="focusExhibitionlist2"></FocusExhibition>
    </section>
    <!-- <section class="tw-px-[30px] xl:tw-px-[60px] tw-mt-[50px] md:tw-mt-[70px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <h2 class="t18 tw-font-medium tw-mb-[28px] md:tw-float-left md:t24 xl:t28">
        * 國外 {{ $t("Focus Exhibitions") }}
      </h2>
      <FocusExhibition2 v-if="focusExhibitionlist.length > 0" :focusExhibitionlist="focusExhibitionlist"></FocusExhibition2>
    </section> -->
    <section class="xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <ExhibitionStrategy v-if="strategyList.length > 0" :strategyList="strategyList"></ExhibitionStrategy>
    </section>
    <section class="xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <Advertisement v-if="advertisementList.length > 0" :advertisementList="advertisementList"></Advertisement>
    </section>
    <!-- <section class="tw-px-[30px] xl:tw-px-[60px] tw-mt-[50px] md:tw-mt-[70px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[28px] md:tw-float-left md:t24 xl:t28">
        {{ $t("Highlight Exhibitions") }}
      </h2>
      <newHighlightExhibitions></newHighlightExhibitions>
    </section>
    <section class="tw-pl-[30px] xl:tw-px-[60px] tw-mt-[50px] md:tw-mt-[70px] xl:tw-max-w-[1366px] xl:tw-mx-auto"
      v-show="services.length > 0">
      <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[8px] md:t24 xl:tw-float-left xl:t28">
        {{ $t("Trending Services") }}
      </h2>
      <TrendingService :services="services" />
    </section>
    <section class="tw-px-[30px] xl:tw-px-[60px] tw-mt-[50px] md:tw-mt-[70px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[24px] md:t24  xl:t28" v-show="themes.length > 0">
        {{ $t("Featured Exhibition Themes") }}
      </h2>
      <FeaturedExhibitonThemes :themes="themes" :title="themesTitle" />
    </section>

    <section class="tw-pl-[30px] xl:tw-px-[60px] tw-mt-[50px] md:tw-mt-[70px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[24px] md:t24  xl:t28">
        {{ $t("Trending Destination Services") }}
      </h2>
      <TrendingDestinationServices :themes="serviceThemes" :title="serviceThemesTitle">
      </TrendingDestinationServices>
    </section> -->
    <OtherInfo />
    <section class="tw-px-[30px] tw-mt-[50px] md:tw-mt-[95px] xl:tw-px-[60px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <h2 class="t18 tw-font-medium tw-text-primary-default tw-mt-[25px] md:t24 xl:t28">
        {{ $t("Partnership") }}
      </h2>
      <Partnership v-if="partnershiplist.length > 0" :partnershiplist="partnershiplist"></Partnership>
    </section>
    <BottomInfo :countries="countries" :cards="cards" :categories="categories"/>
    <CookieUnderModal />
  </div>
</template>

<script>
import Hero from "@/components/home/Hero";
// import AdBanner from "@/components/home/AdBanner";
import centerMode from "@/components/swiper/centerMode";
import ChoiceReason from "@/components/home/ChoiceReason";
import FocusExhibition from "@/components/home/FocusExhibition";
// import FocusExhibition2 from "@/components/home/FocusExhibition2";
// import newHighlightExhibitions from "@/components/home/newHighlightExhibitions.vue";
// import TrendingService from "@/components/home/TrendingService";
// import FeaturedExhibitonThemes from "@/components/home/FeaturedExhibitonThemes";
// import TrendingDestinationServices from "@/components/home/TrendingDestinationServices";
import OtherInfo from "@/components/home/OtherInfo";
import Partnership from "@/components/home/Partnership";
import BottomInfo from "@/components/home/BottomInfo";
import CookieUnderModal from "@/components/home/CookieUnderModal";
import ExhibitionStrategy from "@/components/home/ExhibitionStrategy";
import Advertisement from "@/components/home/Advertisement";
// import jwt_decode from "jwt-decode";
// import { getData } from "~/utils/assist";
// import { onMounted } from "vue";

export default {
  data() {
    return {
      title: '1',
      apiUrl: process.env.SERVICE_CONSOLE,
      slogan: '',
      subslogan: '',
      populars: {
        search: [],
        service: []
      },
      // servicesSearchs: [],
      // servicesLocations: [],
      // serviceKeywords: [],
      exhibitionsSearchs: [],
      exhibitionsLocations: [{
        id: '1',
        region: 'Taiwan',
        countries: [{
          id: '2',
          country: 'USA',
          cities: [{
            id: '3',
            city: 'Japan'
          }]
        }]
      }],
      exhibitionsCategories: [
      ],
      exhibitionsKeywords: [],
      banner: '',
      ads: [
        {
          id: 'banner_1',
          image: require('/assets/img/banner/banner_1.png'),
          url: '/service?taiwan=taiwan'
        },
        {
          id: 'banner_2',
          image: require('/assets/img//banner/banner_2.png'),
          url: 'javascript:void(0);'
        },
        {
          id: 'banner_3',
          image: require('/assets/img//banner/banner_3.png'),
          url: 'javascript:void(0);'
        },
        {
          id: 'banner_4',
          image: require('/assets/img//banner/banner_4.png'),
          url: 'javascript:void(0);'
        },
        {
          id: 'banner_5',
          image: require('/assets/img//banner/banner_5.png'),
          url: 'javascript:void(0);'
        }
      ],
      advertisementList: [{
        image: require('/assets/img/Frame.jpg')
      },{
        image: require('/assets/img/Frame.jpg')
      },{
        image: require('/assets/img/Frame.jpg')
      }
      ],
      focusExhibitionlist1: [],
      focusExhibitionlist2: [],
      services: [{
        id: '1',
        name: 'VISA Application (Vietnam)',
        price: '35',
        region: '0',
        country: '0',
        subcategory: 'VISA',
        rating: '5.4',
        reviews: '344',
        preview_image: require('~/assets/img/bookingInfoTest.png'),
        payment_currency: 'USD',
      },{
        id: '1',
        name: 'VISA Application (Vietnam)',
        price: '35',
        region: '0',
        country: '0',
        subcategory: 'VISA',
        rating: '5.4',
        reviews: '344',
        preview_image: require('~/assets/img/bookingInfoTest.png'),
        payment_currency: 'USD',
      },{
        id: '1',
        name: 'VISA Application (Vietnam)',
        price: '35',
        region: '0',
        country: '0',
        subcategory: 'VISA',
        rating: '5.4',
        reviews: '344',
        preview_image: require('~/assets/img/bookingInfoTest.png'),
        payment_currency: 'USD',
      },{
        id: '1',
        name: 'VISA Application (Vietnam)',
        price: '35',
        region: '0',
        country: '0',
        subcategory: 'VISA',
        rating: '5.4',
        reviews: '344',
        preview_image: require('~/assets/img/bookingInfoTest.png'),
        payment_currency: 'USD',
      }],
      reasons:[{
        name: '一站可查全球展會',
        content: '全球上千場展覽，透過關鍵字或類別查詢，時間、地點、展館、主辦單位…等，資料為您備齊。',
        url: 'javascript:void(0);',
        image: require('~/assets/img/search-field.png')
      },{
        name: '網羅辦展所需服務',
        content: '展品運輸、展館服務…等服務，我們一一為您網羅，ShowEasy 讓您線上查詢、預約，輕鬆管理您的訂單。',
        url: 'javascript:void(0);',
        image: require('~/assets/img/shopping-bag.png')
      },{
        name: '嚴選供應商品質保障',
        content: 'ShowEasy 擁有嚴謹的供應商審核制度，憑藉展會業資深團隊深厚的經驗，為您所訂購的服務品質查核。',
        url: 'javascript:void(0);',
        image: require('~/assets/img/medal.png')
      },{
        name: '展會服務數位化',
        content: 'ShowEasy 將展會產業鏈數位化，達到查找服務便利、訂購流程簡便、線上即時下單的效益。',
        url: 'javascript:void(0);',  
        image: require('~/assets/img/mac-os.png')
      }],
      themes: [{
        name: '',
        url: '/',
        image: require('~/assets/img/thems/Exhibiton-Themes-01.png')
      },{
        name: '',
        url: '/',
        image: require('/assets/img/thems/Exhibiton-Themes-02.png')
      },{
        name: '',
        url: '/',
        image: require('/assets/img/thems/Exhibiton-Themes-03.png')
      },{
        name: '',
        url: '/',
        image: require('/assets/img/thems/Exhibiton-Themes-04.png')
      }],
      themesTitle: '',
      serviceThemes: [{
        name: '',
        image: require('/assets/img/thems/Frame33.png')
      },{
        name: '',
        image: require('/assets/img/thems/Frame34.png')
      },{
        name: '',
        image: require('/assets/img/thems/Frame35.png')
      },{
        name: '',
        image: require('/assets/img/thems/Frame36.png')
      },{
        name: '',
        image: require('/assets/img/thems/Frame37.png')
      }],
      serviceThemesTitle: '',
      countries: [
      ],
      cards: [
      ],
      categories: [
      ],
      partnershiplist: [{
        image: require('/assets/img/partnership/A_best_world.png')
      },{
        image: require('/assets/img/partnership/Brilliant.png')
      },{
        image: require('/assets/img/partnership/DJB_logo.jpg')
      },{
        image: require('/assets/img/partnership/euro_logo.png')
      },{
        image: require('/assets/img/partnership/fullon.jpg')
      },{
        image: require('/assets/img/partnership/hanselogo.png')
      },{
        image: require('/assets/img/partnership/nanrunglogo.png')
      },{
        image: require('/assets/img/partnership/PILATUS.png')
      },{
        image: require('/assets/img/partnership/Shilin_Flower_ArtLOGO.png')
      },{
        image: require('/assets/img/partnership/starpubliclogo.png')
      },{
        image: require('/assets/img/partnership/Tripool.png')
      },{
        image: require('/assets/img/partnership/Xinfeng_Logo.png')
      }],
    strategyList:[{
      title: '海外參展大補帖 — 申請展覽補助',
      url:'https://medium.com/showeasy/%E6%B5%B7%E5%A4%96%E5%8F%83%E5%B1%95%E5%A4%A7%E8%A3%9C%E5%B8%96-%E7%94%B3%E8%AB%8B%E5%B1%95%E8%A6%BD%E8%A3%9C%E5%8A%A9-2de6e9a4b6f9',
      date: 'June 14, 2021',
      content: '疫情的侵略，全世界會展產業都停滯，參展商也很難在收入銳減的的情況下參加國際展，但你知道嗎，其實有方法可以減少負擔的參與國際展覽呦',
    },{
      title: '【與誰同行?】 展覽選好了、報名好了 老闆該派誰去? 我們該怎麼準備呢?',
      url:'https://medium.com/showeasy/%E8%88%87%E8%AA%B0%E5%90%8C%E8%A1%8C-%E5%B1%95%E8%A6%BD%E9%81%B8%E5%A5%BD%E4%BA%86-%E5%A0%B1%E5%90%8D%E5%A5%BD%E4%BA%86-%E8%80%81%E9%97%86%E8%A9%B2%E6%B4%BE%E8%AA%B0%E5%8E%BB-%E6%88%91%E5%80%91%E8%A9%B2%E6%80%8E%E9%BA%BC%E6%BA%96%E5%82%99%E5%91%A2-bc45769a06b',
      date: 'June 14, 2021',
      content: '講到「參展」，我們第一個會想到怎麼裝潢攤位、擺設商品，或者是怎麼將我們的展品運到展場。但是，你有想到其實工作人員的安排也是一件很重要的事嗎?',
    },{
      title: '如何挑選合適的攤位面積?',
      url:'https://medium.com/showeasy/%E5%A6%82%E4%BD%95%E6%8C%91%E9%81%B8%E5%90%88%E9%81%A9%E7%9A%84%E6%94%A4%E4%BD%8D%E9%9D%A2%E7%A9%8D-43a9b027c35e',
      date: 'June 14, 2021',
      content: '臺灣是外銷出口大國，在各種行銷方法中，「參加國際展覽」是接觸海外買主、開發潛在客戶的重要渠道，但報名參展時，很多的製造商或品牌商對於自己的',
    }
    ]
    };
  },
  props: ["langChange"],
  name: "IndexPage",
  auth: false,
  head: {
    title: "ShowEasy-we make your show easy!",
  },
  components: {
    Hero,
    // AdBanner,
    centerMode,
    ChoiceReason,
    FocusExhibition,
    // newHighlightExhibitions,
    // TrendingService,
    // FeaturedExhibitonThemes,
    // TrendingDestinationServices,
    OtherInfo,
    Partnership,
    BottomInfo,
    CookieUnderModal,
    ExhibitionStrategy,
    Advertisement,
  },
  created() {
    // this.getBanner();
    this.getBaseInfo();
    this.getCategories();
    this.getLocations();
    this.getPopular();
    this.getCategoryExhibition1();
    this.getCategoryExhibition2();
    this.getPopularCountry();
    this.getPopularCategory();
    // await this.getServiceKeywords();
    // await this.getExhibitionsKeywords();
    // await this.getServiceHistory();
    // await this.getExhibitionsHistory();
    // await this.getServiceLocations();
    // await this.getExhibitionsLocations();
    // await this.getExhibitionsCategories();
    // await this.getExhibitionsCollections();
    // await this.getExhibitionsTheme();
    // await this.getServiceTheme();
    // await this.getPartnership();
    if (this.$auth.loggedIn) {
      this.$store.dispatch("updatePicture");
    }
  },
  watch: {
    currency: {
      handler: function () {
        // 首頁已沒有服務方案展示
        // await this.getServices();
      },
    },
  },
  computed: {
    currency() {
      return this.$store.getters.getCurrency;
    },
  },
  methods: {
    // getBanner() {
    //   this.$axios
    //   .get(`/trending/api/index/banner?Lang=${this.$i18n.localeProperties["langQuery"]}`)
    //   .then((response) => {
    //     if(response && response.data && response.data.DATA && response.data.DATA.rel){
    //       let data = response.data.DATA.rel
    //       if(data.length>0){
    //         let arr = [];
    //         for(let i=0;i<data.length;i++){
    //           let target = {};
    //           target.image = data[i];
    //           arr.push(target);
    //         }
    //         this.ads = arr;
    //       }
    //     }
    //   })
    //   .catch((error) => 
    //     console.log(error)
    //   );
    // },
    getBaseInfo(){
      this.$axios
      .get(`/trending/api/index/baseInfo?Lang=${this.$i18n.localeProperties["langQuery"]}`)
      .then((response) => {
        if(response && response.data && response.data.DATA && response.data.DATA.rel){
          let data = response.data.DATA.rel
          if(data){
            this.slogan = data.Slogan;
            this.subslogan = data.SubSlogan;
            this.banner = data.Image;
            if(data.PopularSearchs){
              if(data.PopularSearchs.indexOf(',') !=-1){
                this.populars.search = data.PopularSearchs.split(',');
              }else{
                this.populars.search.push(data.PopularSearchs);
              }
            }
            if(data.ProductNames){
              if(data.ProductNames.indexOf(',') !=-1){
                this.populars.service = data.ProductNames.split(',');
              }else{
                this.populars.service.push(data.ProductNames);
              }
            }
          }
        }
      })
      .catch((error) => 
        console.log(error)
      );
    },
    getPopularCountry() {
      this.$axios
      .get(`/trending/api/Exhibition/PopularCountry?Lang=${this.$i18n.localeProperties["langQuery"]}&Count=10`)
      .then((response) => {
        if(response && response.data && response.data.DATA && response.data.DATA.rel){
          let data = response.data.DATA.rel
          if(data.length>0){
            let arr = [];
            for(let i=0;i<data.length;i++){
              let target = {};
              target.name = data[i].CountryName;
              target.id = data[i].CountryID; 
              target.url = "/exhibition?country=" + data[i].CountryID; 
              arr.push(target);
            }
            this.countries = arr;
          }
        }
      })
      .catch((error) => 
        console.log(error)
      );
    },
    getCategories() {
      this.$axios
      .get(`/trending/api/Exhibition/Categories?Lang=${this.$i18n.localeProperties["langQuery"]}`)
      .then((response) => {
        if(response && response.data && response.data.DATA && response.data.DATA.rel){
          let data = response.data.DATA.rel
          if(data.length>0){
            this.exhibitionsCategories = data;
          }
        }
      })
      .catch((error) => 
        console.log(error)
      );
    },
    getLocations() {
      this.$axios
      .get(`/trending/api/Exhibition/Locations?Lang=${this.$i18n.localeProperties["langQuery"]}`)
      .then((response) => {
        if(response && response.data && response.data.DATA && response.data.DATA.rel){
          let data = response.data.DATA.rel
          if(data){
            this.exhibitionsLocations = data;
          }
        }
      })
      .catch((error) => 
        console.log(error)
      );
    },
    getPopular() {
      this.$axios
      .get(`/trending/api/Exhibition/Popular?Lang=${this.$i18n.localeProperties["langQuery"]}&Count=10`)
      .then((response) => {
        if(response && response.data && response.data.DATA && response.data.DATA.rel){
          let data = response.data.DATA.rel
          if(data.length>0){
            let arr = [];
            for(let i=0;i<data.length;i++){
              let target = {};
              target.name = data[i].ExhibitionName;
              target.id = data[i].ExhibitionID; 
              target.url = "/exhibition/" + data[i].ExhibitionID;
              arr.push(target);
            } 
            this.cards = arr;
          }
        }
      })
      .catch((error) => 
        console.log(error)
      );
    },
    getCategoryExhibition1() {
      this.$axios
      .get(`/trending/api/Exhibition/CategoryExhibition?Lang=${this.$i18n.localeProperties["langQuery"]}&IncludeCountryIDs=['995384cd-f908-48ad-96a9-0e150e9b0eac']&ExcludeCountryIDs`)
      .then((response) => {
        if(response && response.data && response.data.DATA && response.data.DATA.rel){
          let data = response.data.DATA.rel
          if(data.length>0){
            this.focusExhibitionlist1 = data;
            // let arr = [];
            // for(let i=0;i<data.length;i++){
            //   let target = {};
            //   target.name = data[i].ExhibitionName;
            //   target.id = data[i].ExhibitionID; 
            //   target.url = "/exhibition/" + data[i].ExhibitionID;
            //   arr.push(target);
            // } 
            // this.cards = arr;
          }
        }
      })
      .catch((error) => 
        console.log(error)
      );
    },
    getCategoryExhibition2() {
      this.$axios
      .get(`/trending/api/Exhibition/CategoryExhibition?Lang=${this.$i18n.localeProperties["langQuery"]}&IncludeCountryIDs&ExcludeCountryIDs=['995384cd-f908-48ad-96a9-0e150e9b0eac']`)
      .then((response) => {
        if(response && response.data && response.data.DATA && response.data.DATA.rel){
          let data = response.data.DATA.rel
          if(data.length>0){
            this.focusExhibitionlist2 = data;
            // let arr = [];
            // for(let i=0;i<data.length;i++){
            //   let target = {};
            //   target.name = data[i].ExhibitionName;
            //   target.id = data[i].ExhibitionID; 
            //   target.url = "/exhibition/" + data[i].ExhibitionID;
            //   arr.push(target);
            // } 
            // this.cards = arr;
          }
        }
      })
      .catch((error) => 
        console.log(error)
      );
    },
    getPopularCategory() {
      this.$axios
      .get(`/trending/api/Exhibition/PopularCategory?Lang=${this.$i18n.localeProperties["langQuery"]}&Count=10`)
      .then((response) => {
        if(response && response.data && response.data.DATA && response.data.DATA.rel){
          let data = response.data.DATA.rel
          if(data.length>0){
            let arr = [];
            for(let i=0;i<data.length;i++){
              let target = {};
              target.name = data[i].CategoryName;
              target.id = data[i].CategoryID; 
              target.url = "/exhibition?category=" + data[i].CategoryID; 
              arr.push(target);
            } 
            this.categories = arr;
          }
        }
      })
      .catch((error) => 
        console.log(error)
      );
    },
  }
}; 
</script>
<style lang="scss" scoped>

</style>