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.ServiceID}?CurrencyID=${service.CurrencyID}&PreviewFile=`+encodeURIComponent(`${service.PreviewFile}`))"
        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"
      >
        <img
          :src="service.PreviewFile"
          class="tw-w-full tw-h-full tw-transition tw-duration-200 tw-ease-in-out 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]"
        >
            <span>{{ service.PlaceName }}</span>
          <!-- <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.ServiceID}?CurrencyID=${service.CurrencyID}&PreviewFile=`+encodeURIComponent(`${service.PreviewFile}`))" 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.ServiceName }}
          </h2>
        </a>
        <div
          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.ServiceCategoryName }}
        </div>
        <!-- <div class="tw-flex tw-justify-end">
          <div
            :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-between">
          <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 md:tw-py-2">
            <!-- <div
              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.MinPrice) }}&nbsp;{{ service.CurrencyID }}
              <!-- {{ service.payment_currency }} -->
              <span
                class="tw-body-3 tw-text-primary-2 tw-font-bold md:tw-body-2"
                >{{ $t("up") }}</span
              >
            </div>
          </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(total==undefined || total ==null || total ==""){
          total = 0;
        }
        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>