fashion-ssr-vue3/components/common/goods/item.vue

<!-- @format -->

<script lang="ts" setup>
import { useUserStore } from '@/stores/modules/user'
import { addShopCartApi } from '~/api/model/goods'

const props = defineProps({
  item: Object as any,
  w: {
    type: String,
    default: 'w-300px',
  },
  h: {
    type: String,
    default: 'h-300px',
  },
})
const emit = defineEmits(['update:login'])

const flag = ref(false)
const inquireVisible = ref(false)
const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)
const { openLoginModal } = useLoginModal()

function onClickDetail(item: any) {
  const router = useRouter()
  router.push({
    path: `/product/${item.id}`,
  })
}
async function addShopCart() {
  try {
    const { status, isFirstLogin } = await openLoginModal()
    if (status) {
      await addShopCartApi({
        mid: props.item.id,
        quantity: props.item.moq,
      })
      ElMessage({
        message: 'Add to cart successfully',
        type: 'success',
        plain: true,
      })
      if (isFirstLogin)
        emit('update:login')
      // commonStore.getCartGoodsList()
    }
  }
  catch (error) {
    console.log(error)
  }
}
async function onClickLogin() {
  const { status, isFirstLogin } = await openLoginModal()
  if (status) {
    inquireVisible.value = true
    if (isFirstLogin)
      emit('update:login')
  }
}
function getFeaturedLabel(item: any) {
  if (item.recommend)
    return item.recommend.split(',')[0]

  return ''
}

// 验证是否过期
function getIsExpire(item: any) {
  const currentTime = Date.now()
  if (item.recommendPeriodTime) {
    // 转化为时间戳
    const expireTime = new Date(item.recommendPeriodTime).getTime()
    if (expireTime < currentTime)
      return true
    return false
  }
  return false
}
function getImgList() {
  const list = []
  if (props.item.masterImage)
    list.push(...props.item.masterImage.split(','))
  if (list.length > 2)
    return list
  else if (list.length > 0 && list.length < 2 && props.item.detailImage)
    return list.concat(...props.item.detailImage.split(','))

  return list
}
</script>

<template>
  <div>
    <div
      class="pos-relative custom-main cursor-pointer b-rd-10px b-#FAFAFA b-1px b-solid overflow-hidden"
      :class="[w, h]"
      @click="onClickDetail(item)"
    >
      <img
        class="object-cover h-full w-full"
        :src="getImgList()[0]"
        alt=""
        srcset=""
      >
      <img
        class="object-cover h-full w-full pos-absolute top-0 left-0 right-0 bottom-0 z-10 transition-duration-1000"
        :class="flag ? 'opacity-100' : 'opacity-0'"
        :src="getImgList()[1]"
        alt=""
        srcset=""
        @mouseover="flag = true"
        @mouseleave="flag = false"
      >
      <div
        v-if="getFeaturedLabel(item) && !getIsExpire(item)"
        class="py-4px px-10px bg-#CC9879 text-#fff pos-absolute top-10px left-10px b-rd-4px z-12"
      >
        {{ getFeaturedLabel(item) }}
      </div>
      <common-favorite
        :data="item"
        class="custom-like pos-absolute bottom-60px z-12"
        svg-size="18px"
        w="36px"
      />
      <el-button
        class="custom-add !h-40px !b-rd-6px !bg-transparent pos-absolute left-50% transform-translate-x--50% w-94% z-12"
        @click.stop="addShopCart"
      >
        Add to Cart
      </el-button>
    </div>
    <div class="text-left">
      <div class="text-16px hover:underline text-#666 mt-20px mb-10px">
        <nuxt-link v-if="item.brandId" :to="`/brand/${item.brandId}`">
          {{ item.brandName }}
        </nuxt-link>
        <div v-else class="h-21px" />
      </div>
      <div
        class="fw-600 text-24px mb-20px text-#363C40 line-clamp-2 cursor-pointer hover:underline custom-title-font"
        @click="onClickDetail(item)"
      >
        {{ item.title }}
      </div>
      <div class="flex justify-between items-center">
        <div class="text-#666666">
          MOQ {{ item.moq }} Pcs
        </div>
        <div v-if="!isLogin" class="flex items-center">
          <div class="text-#AB7045 cursor-pointer hover:fw-500" @click="onClickLogin">
            Inquire
          </div>
          <!-- <el-popover
            placement="top"
            :width="200"
            popper-class="text-center"
            trigger="hover"
            content="Join to unlock pricing"
          >
            <template #reference>
              <div
                class="underline text-#B06B3C ml-8px cursor-pointer"
                @click="onClickLogin"
              >
                Price
              </div>
            </template>
          </el-popover> -->
        </div>
        <div v-else class="text-#B06B3C cursor-pointer" @click="onClickLogin">
          <!-- $ {{ numberToTwoDecimals(item.sellPrice || 0) }} USD -->
          Inquire
        </div>
      </div>
    </div>
    <business-account-rfqs-quotation-modal v-if="inquireVisible" v-model:visible="inquireVisible" />
  </div>
</template>

<style lang="less" scoped>
.custom-main {
  .custom-like {
    right: -50px;
    opacity: 0;
    transition: all 0.3s ease-out;
  }

  .custom-add {
    bottom: -50px;
    opacity: 0;
    transition: all 0.3s ease-out;
  }

  &:hover {
    .custom-like {
      right: 10px;
      opacity: 1;
    }

    .custom-add {
      bottom: 10px;
      opacity: 1;
    }
  }
}
</style>