You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

400 lines
14 KiB

2 years ago
  1. <template>
  2. <div class="home-view">
  3. <Hero :slogan="slogan" :subslogan="subslogan" :populars="populars" :servicesSearchs="servicesSearchs"
  4. :servicesLocations="servicesLocations" :exhibitionsSearchs="exhibitionsSearchs"
  5. :exhibitionsLocations="exhibitionsLocations" :exhibitionsCategories="exhibitionsCategories" :banner="banner"
  6. :serviceKeywords="serviceKeywords" :exhibitionsKeywords="exhibitionsKeywords" />
  7. <centerMode :list="ads" v-if="ads.length"></centerMode>
  8. <!-- <AdBanner :item="apiData.ads" /> -->
  9. <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">
  10. <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[28px] md:tw-float-left md:t24 xl:t28">
  11. {{ $t("Highlight Exhibitions") }}
  12. </h2>
  13. <newHighlightExhibitions></newHighlightExhibitions>
  14. </section>
  15. <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"
  16. v-show="services.length > 0">
  17. <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[8px] md:t24 xl:tw-float-left xl:t28">
  18. {{ $t("Trending Services") }}
  19. </h2>
  20. <TrendingService :services="services" />
  21. </section>
  22. <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">
  23. <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[24px] md:t24 xl:t28" v-show="themes.length > 0">
  24. {{ $t("Featured Exhibition Themes") }}
  25. </h2>
  26. <FeaturedExhibitonThemes :themes="themes" :title="themesTitle" />
  27. </section>
  28. <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">
  29. <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[24px] md:t24 xl:t28">
  30. {{ $t("Trending Destination Services") }}
  31. </h2>
  32. <TrendingDestinationServices :themes="serviceThemes" :title="serviceThemesTitle">
  33. </TrendingDestinationServices>
  34. </section>
  35. <OtherInfo />
  36. <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">
  37. <h2 class="t18 tw-font-medium tw-text-primary-default tw-mt-[25px] md:t24 xl:t28">
  38. {{ $t("Partnership") }}
  39. </h2>
  40. <Partnership v-if="partnershiplist.length > 0" :partnershiplist="partnershiplist"></Partnership>
  41. </section>
  42. <BottomInfo :collections="collections" />
  43. <CookieUnderModal />
  44. </div>
  45. </template>
  46. <script>
  47. import Hero from "@/components/home/Hero";
  48. // import AdBanner from "@/components/home/AdBanner";
  49. import centerMode from "@/components/swiper/centerMode";
  50. import newHighlightExhibitions from "@/components/home/newHighlightExhibitions.vue";
  51. import TrendingService from "@/components/home/TrendingService";
  52. import FeaturedExhibitonThemes from "@/components/home/FeaturedExhibitonThemes";
  53. import TrendingDestinationServices from "@/components/home/TrendingDestinationServices";
  54. import OtherInfo from "@/components/home/OtherInfo";
  55. import Partnership from "@/components/home/Partnership";
  56. import BottomInfo from "@/components/home/BottomInfo";
  57. import CookieUnderModal from "@/components/home/CookieUnderModal";
  58. import jwt_decode from "jwt-decode";
  59. import { getData } from "~/utils/assist";
  60. import { onMounted } from "vue";
  61. export default {
  62. data() {
  63. return {
  64. title: '1',
  65. apiUrl: process.env.SERVICE_CONSOLE,
  66. slogan: 'A Better Event Journey',
  67. subslogan: 'Start your journey from ShowEasy, Make Your Show Easy!',
  68. populars: {
  69. search: ['Fastener','Automation','Computer','Sports','Medical'],
  70. service: ['Fastener','Automation','Computer','Sports','Medical']
  71. },
  72. servicesSearchs: [],
  73. servicesLocations: ['Taiwan','USA','Germany','Japan'],
  74. serviceKeywords: [],
  75. exhibitionsSearchs: ['Food Equipment','Machine Tool','Food Equipment','Machine Tool'],
  76. exhibitionsLocations: [],
  77. exhibitionsCategories: [{ subcategory: [], },],
  78. exhibitionsKeywords: [],
  79. banner: require('/assets/img/ExhibitionBanner.jpeg'),
  80. ads: [{
  81. image: require('/assets/img/thems/Frame33.png')
  82. },{
  83. image: require('/assets/img/thems/Frame33.png')
  84. },{
  85. image: require('/assets/img/thems/Frame33.png')
  86. }],
  87. services: [{
  88. id: '1',
  89. name: 'VISA Application (Vietnam)',
  90. price: '35',
  91. region: 0,
  92. country: 0,
  93. subcategory: 'VISA',
  94. rating: '5.4',
  95. reviews: '344',
  96. preview_image: require('~/assets/img/bookingInfoTest.png'),
  97. payment_currency: 'USD',
  98. },{
  99. id: '1',
  100. name: 'VISA Application (Vietnam)',
  101. price: '35',
  102. region: 0,
  103. country: 0,
  104. subcategory: 'VISA',
  105. rating: '5.4',
  106. reviews: '344',
  107. preview_image: require('~/assets/img/bookingInfoTest.png'),
  108. payment_currency: 'USD',
  109. },{
  110. id: '1',
  111. name: 'VISA Application (Vietnam)',
  112. price: '35',
  113. region: 0,
  114. country: 0,
  115. subcategory: 'VISA',
  116. rating: '5.4',
  117. reviews: '344',
  118. preview_image: require('~/assets/img/bookingInfoTest.png'),
  119. payment_currency: 'USD',
  120. },{
  121. id: '1',
  122. name: 'VISA Application (Vietnam)',
  123. price: '35',
  124. region: 0,
  125. country: 0,
  126. subcategory: 'VISA',
  127. rating: '5.4',
  128. reviews: '344',
  129. preview_image: require('~/assets/img/bookingInfoTest.png'),
  130. payment_currency: 'USD',
  131. }],
  132. themes: [{
  133. name: '',
  134. url: '/',
  135. image: require('~/assets/img/thems/Exhibiton-Themes-01.png')
  136. },{
  137. name: '',
  138. url: '/',
  139. image: require('/assets/img/thems/Exhibiton-Themes-02.png')
  140. },{
  141. name: '',
  142. url: '/',
  143. image: require('/assets/img/thems/Exhibiton-Themes-03.png')
  144. },{
  145. name: '',
  146. url: '/',
  147. image: require('/assets/img/thems/Exhibiton-Themes-04.png')
  148. }],
  149. themesTitle: '',
  150. serviceThemes: [{
  151. name: '',
  152. image: require('/assets/img/thems/Frame33.png')
  153. },{
  154. name: '',
  155. image: require('/assets/img/thems/Frame34.png')
  156. },{
  157. name: '',
  158. image: require('/assets/img/thems/Frame35.png')
  159. },{
  160. name: '',
  161. image: require('/assets/img/thems/Frame36.png')
  162. },{
  163. name: '',
  164. image: require('/assets/img/thems/Frame37.png')
  165. }],
  166. serviceThemesTitle: '',
  167. collections: [],
  168. partnershiplist: [{
  169. image: require('/assets/img/thems/pti01.png')
  170. },{
  171. image: require('/assets/img/thems/pti02.png')
  172. },{
  173. image: require('/assets/img/thems/pti03.png')
  174. },{
  175. image: require('/assets/img/thems/pti04.png')
  176. },{
  177. image: require('/assets/img/thems/pti05.png')
  178. },{
  179. image: require('/assets/img/thems/pti06.png')
  180. }],
  181. };
  182. },
  183. props: ["langChange"],
  184. name: "IndexPage",
  185. auth: false,
  186. head: {
  187. title: "ShowEasy-we make your show easy!",
  188. },
  189. components: {
  190. Hero,
  191. // AdBanner,
  192. centerMode,
  193. newHighlightExhibitions,
  194. TrendingService,
  195. FeaturedExhibitonThemes,
  196. TrendingDestinationServices,
  197. OtherInfo,
  198. Partnership,
  199. BottomInfo,
  200. CookieUnderModal,
  201. },
  202. async created() {
  203. // await this.getAds();
  204. // await this.getBanner();
  205. // await this.getSlogans();
  206. // await this.getPopulars();
  207. // await this.getServiceKeywords();
  208. // await this.getExhibitionsKeywords();
  209. // await this.getServiceHistory();
  210. // await this.getExhibitionsHistory();
  211. // await this.getServiceLocations();
  212. // await this.getExhibitionsLocations();
  213. // await this.getExhibitionsCategories();
  214. // await this.getExhibitionsCollections();
  215. // await this.getServices();
  216. // await this.getExhibitionsTheme();
  217. // await this.getServiceTheme();
  218. // await this.getPartnership();
  219. // if (this.$auth.loggedIn) {
  220. // this.$store.dispatch("updatePicture");
  221. // }
  222. },
  223. watch: {
  224. currency: {
  225. handler: async function () {
  226. // await this.getServices();
  227. },
  228. },
  229. },
  230. computed: {
  231. currency() {
  232. return this.$store.getters.getCurrency;
  233. },
  234. },
  235. methods: {
  236. // async getSlogans() {
  237. // await this.$axios
  238. // .get(`/trending/slogans?lang=${this.$i18n.localeProperties["langQuery"]}`)
  239. // .then((response) => {
  240. // this.slogan = response.data.slogan;
  241. // this.subslogan = response.data.subslogan;
  242. // })
  243. // .catch((error) => console.log(error));
  244. // },
  245. // async getPopulars() {
  246. // await this.$axios
  247. // .get(`/trending/search/popular?lang=${this.$i18n.localeProperties["langQuery"]}`)
  248. // .then((response) => {
  249. // this.populars = response.data;
  250. // })
  251. // .catch((error) => console.log(error));
  252. // },
  253. // async getBanner() {
  254. // await this.$axios
  255. // .get(`/trending/banner?lang=${this.$i18n.localeProperties["langQuery"]}`)
  256. // .then((response) => {
  257. // this.banner = response.data.banner;
  258. // })
  259. // .catch((error) => console.log(error));
  260. // },
  261. // async getAds() {
  262. // await this.$axios
  263. // .get(`/trending/ads?lang=${this.$i18n.localeProperties["langQuery"]}`)
  264. // .then((response) => {
  265. // this.ads = response.data.ads;
  266. // })
  267. // .catch((error) => console.log(error));
  268. // },
  269. // async getExhibitionsTheme() {
  270. // await this.$axios
  271. // .get(`/trending/themes/exhibitions?lang=${this.$i18n.localeProperties["langQuery"]}`)
  272. // .then((response) => {
  273. // this.themes = response.data.themes;
  274. // this.themesTitle = response.data.title;
  275. // })
  276. // .catch((error) => console.log(error));
  277. // },
  278. // async getServiceTheme() {
  279. // await this.$axios
  280. // .get(`/trending/themes/services?lang=${this.$i18n.localeProperties["langQuery"]}`)
  281. // .then((response) => {
  282. // this.serviceThemes = response.data.themes;
  283. // this.serviceThemesTitle = response.data.title;
  284. // })
  285. // .catch((error) => console.log(error));
  286. // },
  287. // async getServiceHistory() {
  288. // await this.$axios
  289. // .get(`/trending/services/search/history?lang=${this.$i18n.localeProperties["langQuery"]}`)
  290. // .then((response) => {
  291. // this.servicesSearchs = response.data.searches;
  292. // })
  293. // .catch((error) => console.log(error));
  294. // },
  295. // async getExhibitionsHistory() {
  296. // await this.$axios
  297. // .get(`/trending/exhibitions/search/history?lang=${this.$i18n.localeProperties["langQuery"]}`)
  298. // .then((response) => {
  299. // this.exhibitionsSearchs = response.data.searches;
  300. // })
  301. // .catch((error) => console.log(error));
  302. // },
  303. // async getServiceLocations() {
  304. // await this.$axios
  305. // .get(`/trending/services/locations?lang=${this.$i18n.localeProperties["langQuery"]}`)
  306. // .then((response) => {
  307. // this.servicesLocations = response.data.locations;
  308. // })
  309. // .catch((error) => console.log(error));
  310. // },
  311. // async getExhibitionsLocations() {
  312. // await this.$axios
  313. // .get(`/trending/exhibitions/locations?lang=${this.$i18n.localeProperties["langQuery"]}`)
  314. // .then((response) => {
  315. // this.exhibitionsLocations = response.data.locations;
  316. // })
  317. // .catch((error) => console.log(error));
  318. // },
  319. // async getExhibitionsCategories() {
  320. // await this.$axios
  321. // .get(
  322. // `/t/exhibitions/categories?lang=${this.$i18n.localeProperties["langQuery"]}&sort=true`
  323. // )
  324. // .then((result) => {
  325. // this.exhibitionsCategories = result.data.sort_results;
  326. // this.exhibitionsCategories = this.exhibitionsCategories.map(
  327. // (item) => {
  328. // item.subcategories_list = item.subcategories_list.map(
  329. // (children) => {
  330. // return {
  331. // id: children.subcategory_id,
  332. // title: children.subcategory_name,
  333. // key: children.subcategory_name,
  334. // type: "subcategory",
  335. // };
  336. // }
  337. // );
  338. // return {
  339. // id: item.categories_id,
  340. // title: item.category_name,
  341. // key: item.category_name,
  342. // type: "category",
  343. // subcategory: item.subcategories_list,
  344. // };
  345. // }
  346. // );
  347. // })
  348. // .catch((err) => {
  349. // console.log(err);
  350. // });
  351. // },
  352. // async getExhibitionsCollections() {
  353. // await this.$axios
  354. // .get(`/trending/exhibitions/collections?lang=${this.$i18n.localeProperties["langQuery"]}`)
  355. // .then((response) => {
  356. // this.collections = response.data.collections;
  357. // })
  358. // .catch((error) => console.log(error));
  359. // },
  360. // async getServiceKeywords() {
  361. // await this.$axios
  362. // .get(`/trending/services/keywords?lang=${this.$i18n.localeProperties["langQuery"]}`)
  363. // .then((response) => {
  364. // this.serviceKeywords = response.data.keywords;
  365. // })
  366. // .catch((error) => console.log(error));
  367. // },
  368. // async getExhibitionsKeywords() {
  369. // await this.$axios
  370. // .get(`/trending/exhibitions/keywords?lang=${this.$i18n.localeProperties["langQuery"]}`)
  371. // .then((response) => {
  372. // this.exhibitionsKeywords = response.data.keywords;
  373. // })
  374. // .catch((error) => console.log(error));
  375. // },
  376. // async getServices() {
  377. // // await this.$axios
  378. // // .get(`${this.apiUrl}/user-services/list?lang_code=${this.$i18n.localeProperties["langQuery"]}&currency=${this.currency}`)
  379. // // .then((response) => {
  380. // // this.services = response.data.sort((a, b) => b.view_counts - a.view_counts);
  381. // // })
  382. // // .catch((error) => console.log(error));
  383. // },
  384. // async getPartnership() {
  385. // await this.$axios
  386. // .get(`/trending/partnerships?lang=${this.$i18n.localeProperties["langQuery"]}`)
  387. // .then((response) => {
  388. // this.partnershiplist = response.data.partnerships;
  389. // })
  390. // .catch((error) => console.log(error));
  391. // },
  392. }
  393. };
  394. </script>
  395. <style lang="scss" scoped>
  396. </style>