fashion-ssr-vue3/components/business/goods/right.vue

<!-- @format -->

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

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
const emit = defineEmits(['update:data', 'addToCart', 'inquire'])
const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)
const { openLoginModal } = useLoginModal()
const temporaryData = ref()
const price = ref(0)
const quantity = ref(0)

watch(
  () => props.data,
  (data) => {
    temporaryData.value = JSON.parse(JSON.stringify(data))
    quantity.value = +data.moq
    price.value = +data.sellPrice
    // const timer = setTimeout(() => {
    //   handlerData(quantity.value)
    //   clearTimeout(timer)
    // }, 200)
  },
  {
    immediate: true,
    deep: true,
  },
)
async function onInquire() {
  try {
    const { status, isFirstLogin } = await openLoginModal()
    if (status) {
      emit('inquire')
      if (isFirstLogin)
        emit('update:data')
    }
  }
  catch (error) {
    console.log(error)
  }
}
const getLabelList = computed(() => {
  if (!props.data.tag_dictText)
    return []
  // 字符串转化为数组
  return props.data.tag_dictText.split(',')
})
</script>

<template>
  <div class="flex-1">
    <div class="flex justify-between">
      <h1
        class="fw-700 text-30px w-510px lh-40px line-clamp-2 text-#363C40 custom-title-font"
      >
        {{ data.merchandiseEnglishName }}
      </h1>
      <common-favorite :data="data" w="34px" svg-size="18" />
    </div>
    <div v-if="getLabelList.length" class="flex gap-12px mt-20px">
      <div
        v-for="item in getLabelList"
        :key="item.id"
        class="bg-#8230F5 b-rd-6px text-#fff py-8px px-12px"
      >
        {{ item }}
      </div>
    </div>
    <div class="my-20px">
      <div v-if="isLogin" class="text-24px text-#C58C46 flex">
        <div class="fw-700 w-200px">
          Unit Price
        </div>
        <span class="cursor-pointer hover:underline fw-500 ml-40px" @click="onInquire">Go inquire</span>
      </div>
      <div
        v-else
        class="fw-500 text-24px underline my-20px text-#C58C64 cursor-pointer"
        @click="onInquire"
      >
        Inquire
      </div>
    </div>

    <div class="py-20px pb-40px">
      <div class="mb-25px flex">
        <div class="w-200px text-#666">
          Product Code
        </div>
        <div class="ml-40px text-#333">
          {{ data.billNo }}
        </div>
      </div>
      <div class="mb-25px flex">
        <div class="w-200px text-#666">
          Size
        </div>
        <div class="ml-40px text-#333">
          {{ data.size }} cm
        </div>
      </div>
      <div class="mb-25px flex">
        <div class="w-200px text-#666">
          Caton Size
        </div>
        <div class="ml-40px text-#333">
          {{ data.width }}cm * {{ data.height }}cm * {{ data.length }}cm
        </div>
      </div>
      <div class="mb-25px flex">
        <div class="w-200px text-#666">
          Material
        </div>
        <div class="ml-40px text-#333">
          others
        </div>
      </div>
      <div class="mb-25px flex">
        <div class="w-200px text-#666">
          Packaging Method
        </div>
        <div class="ml-40px text-#333">
          {{ data.packagingMethod }}
        </div>
      </div>
      <div class="mb-25px flex">
        <div class="w-200px text-#666">
          QTY/CTN
        </div>
        <div class="ml-40px text-#333">
          {{ data.cartonQuantity }}
        </div>
      </div>
      <div class="mb-25px flex">
        <div class="w-200px text-#666">
          Delivery Time
        </div>
        <div class="ml-40px text-#333">
          {{ data.deliveryTime }}
        </div>
      </div>
      <div class="flex items-center">
        <div class="w-200px text-#666">
          MOQ
        </div>
        <div class="ml-40px text-#333">
          {{ data.moq }} {{ data.unitCode_dictText }}
          <!-- <el-input-number
            :disabled="!isLogin"
            :model-value="quantity"
            class="!w-150px custom-input"
            :step="1"
            :min="data.moq"
            @change="changeQuantity"
          /> -->
        </div>
      </div>
    </div>
    <el-button
      plain
      class="!bg-#C58C46 !text-#fff !w-full !h-48px !text-16px !b-rd-6px"
      @click="emit('addToCart')"
    >
      <!-- Add to Cart (${{ quantity * price ? (quantity * price).toFixed(2) : 0 }}) -->
      Add to Cart
    </el-button>
  </div>
</template>

<style lang="less" scoped>
.custom-input {
  height: 32px !important;
  border-radius: 2px;
  ::v-deep(.el-input-number__increase) {
    width: 36px !important;
    display: flex;
    justify-content: items-center;
    align-items: center;
    &:hover {
      color: #c58c64 !important;
      box-shadow: 0 0 0 1px #c58c64 inset !important;
    }
  }
  ::v-deep(.el-input-number__decrease) {
    width: 36px !important;
    display: flex;
    justify-content: items-center;
    align-items: center;
    &:hover {
      color: #c58c64 !important;
      box-shadow: 0 0 0 1px #c58c64 inset !important;
    }
  }
}
</style>