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.
89 lines
3.1 KiB
89 lines
3.1 KiB
<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>
|