ShowEasyFrontEnd/FrontEnd/components/service/ServiceListCard.vue

<template>
  <div
    class="card tw-bg-white tw-rounded-[25px] md:tw-rounded-[30px] tw-border tw-border-solid tw-border-neutrals-200 tw-relative tw-shadow-[0px_1px_1px_0px_rgba(0,0,0,0.03)] tw-shadow-neutral-200"
  >
    <div class="tw-absolute like tw-w-[20px] tw-h-[18px]">
      <like
        :like="service.liked"
        :serviceId="service.id"
        :isForUserprofile="service.isUserProfile"
        @remove-relation="$emit('remove-relation')"
      ></like>
    </div>
    <div
      class="tw-grid tw-grid-cols-1 md:tw-grid-cols-[35%_65%] xl:tw-grid-cols-[264px_auto]"
    >
      <a
        :href="localePath(`/service/${service.id}`)"
        target="_blank"
        class="tw-w-full tw-h-auto tw-overflow-hidden tw-mb-[10px] tw-rounded-t-[25px] md:tw-mb-0 md:tw-rounded-bl-[25px] md:tw-rounded-tr-none md:tw-h-[25vw] xl:tw-h-[198px]"
      >
        <img
          :src="service.preview_image"
          class="tw-w-full tw-h-[64vw] tw-transition tw-duration-200 tw-ease-in-out md:tw-h-[25vw] xl:tw-w-[264px] xl:tw-h-[198px] xl:hover:tw-scale-110"
        />
      </a>
      <div class="tw-px-4 tw-pb-[9px] md:tw-px-5 md:tw-py-[10px]">
        <div
          class="tw-body-4 tw-text-[#757575] tw-flex tw-items-center tw-mb-1 md:tw-pt-[10px] md:tw-pb-[5px]"
        >
          <nuxt-link
            :to="localePath(`/service?country=${service.country}`)"
            class="tw-text-neutrals-600"
          >
            <span>{{ service.countryName }}</span>
          </nuxt-link>
          <div
            v-if="service.city"
            class="circle-decoration-location tw-bg-[#757575] tw-h-1 tw-w-1 tw-mx-[6px]"
          ></div>
          <nuxt-link
            :to="localePath(`/service?city=${service.city}`)"
            class="tw-text-neutrals-600"
          >
            <span>{{ service.cityName }}</span>
          </nuxt-link>
        </div>
        <a :href="localePath(`/service/${service.id}`)" target="_blank">
          <h2
            class="tw-body-4 md:tw-body-3 lg:tw-body-2 tw-text-black tw-font-bold tw-mb-[10px] md:tw-mt-[7px]"
          >
            {{ service.name }}
          </h2>
        </a>
        <div
          v-if="service.category"
          class="tw-mb-[10px] tw-bg-neutrals-100 tw-rounded-[10px] tw-w-fit tw-px-[10px] tw-py-1 tw-text-hint tw-body-4 tw-font-normal"
        >
          {{ service.categoryName }}
        </div>
        <div class="tw-flex tw-justify-start tw-items-center tw-mb-[10px]">
          <span v-if="service.rating" class="tw-body-3 tw-text-primary-1">{{
            service.rating || 0
          }}</span>
          <img
            v-if="service.rating"
            class="tw-mr-[6px]"
            src="~/assets/svg/reviewStar.svg"
            alt=""
          />
          <span v-if="service.reviews" class="tw-text-[#757575]">{{
            `(${service.reviews || 0}reviews)`
          }}</span>
        </div>
        <div class="tw-flex tw-justify-end">
          <div
            v-show="service.disacount"
            :class="[
              'tw-mb-[8px]',
              'tw-text-right',
              'tw-bg-primary-1',
              'tw-text-white',
              'tw-text-size-[12px]',
              'tw-w-fit',
              'tw-rounded-[10px]',
              'tw-py-[4px]',
              'tw-px-[10px]',
              'tw-text-right',
            ]"
          >
            10% OFF
          </div>
        </div>
        <div class="tw-flex tw-justify-end md:tw-py-2">
          <div
            v-show="service.disacount"
            class="tw-body-3 tw-text-right tw-text-base-hint tw-line-through md:tw-body-2"
          >
            ${{ formatTotal(40500) }}
          </div>
          <div
            class="tw-body-3 tw-font-bold tw-text-primary-1 tw-ml-[8px] md:tw-body-2"
          >
            ${{ formatTotal(service.price) }}&nbsp;{{
              service.payment_currency === "TWD" ? $t("TWD") : $t("USD")
            }}
            <span
              class="tw-body-3 tw-text-primary-2 tw-font-bold md:tw-body-2"
              >{{ $t("up") }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import like from "@/components/newComponent/like/like.vue";
export default {
  props: {
    service: {
      type: Object,
    },
  },
  components: {
    like,
  },
  computed: {
    formatTotal() {
      return function (total) {
        if (typeof total === "String") {
          const totalNumber = parseInt(total);
          return totalNumber.toLocaleString("en-US");
        } else {
          return total.toLocaleString("en-US");
        }
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.like {
  left: 25px;
  top: 25px;

  @media screen and (min-width: 768px) {
    left: initial;
    right: 25px;
  }
}
</style>