ShowEasyFrontEnd/FrontEnd/components/user/bookingList.vue

<template>
  <div class="tw-min-w-full tw-min-h-full lg:tw-w-[908px] tw-bg-transparent tw-px-[30px] tw-py-[30px] lg:tw-py-5">
    <div class="md:tw-flex md:tw-justify-between md:tw-items-center tw-mb-[15px] md:tw-mb-[30px]">
      <h2 class="t18 title-icon-left tw-text-neutrals-black tw-mb-[15px] md:tw-mb-0 tw-py-[11px] md:tw-py-0">
        {{ $t("My Bookings") }}
      </h2>
      <div class="element tw-w-full md:tw-w-[320px]">
        <userSearchBar :input="{
          id: 'searchQuery',
          placeHolder: $t('Enter exhibitions, booking number ...'),
          type: 'text',
        }" :default="searchQuery" @change="searchQuery = $event"></userSearchBar>
      </div>
    </div>
    <bookingListContent :searchQuery="searchQuery"></bookingListContent>
    <section class="step sercion-6 tw-px-[30px] tw-w-full md:tw-px-0 xl:tw-col-span-2">
      <h2 class="title-icon-left t16 md:t20 xl:t18 xl:tw-font-bold">
        {{ $t("You might like ...") }}
      </h2>
      <userYouMightLike :list="youMightLikeList" :countrycode="countrycode" :regionName="regionName"></userYouMightLike>
    </section>
  </div>
</template>
<script>
import userSearchBar from "@/components/user/userSearchBar.vue";
import bookingListContent from "./bookingListContent.vue";
import userYouMightLike from "./userYouMightLike.vue";
export default {
  layout: "profile",
  components: {
    userSearchBar,
    bookingListContent,
    userYouMightLike,
  },
  data() {
    return {
      apiUrl: process.env.BASE_URL,
      searchQuery: "",
      youMightLikeList: [],
      countrycode: [],
      regionName: [],
    };
  },
  created() {
    // this.getLocationName();
    // this.getYouMightLikeData();
  },
  methods: {
    // async getLocationName() {
    //   this.$axios
    //     .get(
    //       `${this.apiUrl}/t/exhibitions/locations?lang=${this.$i18n.localeProperties["langQuery"]}&sort=False`
    //     )
    //     .then((response) => {
    //       this.regionName = response.data.region_ori;
    //       this.countrycode = response.data.country_ori;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getYouMightLikeData() {
    //   this.youMightLikeList = [
    //     {
    //       package_photo: require("~/assets/img/serviceExample.png"),
    //       countryName: "Taipei",
    //       regionName: "Taiwan",
    //       name: "Taipei Popular Sightseeing Private Car Charter: Jiufen, Pingxi, and North Coast",
    //     },
    //     {
    //       package_photo: require("~/assets/img/serviceExample.png"),
    //       countryName: "Taipei",
    //       regionName: "Taiwan",
    //       name: "Taipei Popular Sightseeing Private Car Charter: Jiufen, Pingxi, and North Coast",
    //     },
    //     {
    //       package_photo: require("~/assets/img/serviceExample.png"),
    //       countryName: "Taipei",
    //       regionName: "Taiwan",
    //       name: "Taipei Popular Sightseeing Private Car Charter: Jiufen, Pingxi, and North Coast",
    //     },
    //   ];
    // },
  },
};
</script>
<style lang="scss" scoped>
.title-icon-left {
  background-position: left 0px center;
}
</style>