designer-hub/packages/app/src/pages/home/mall/components/product.vue

<script lang="ts" setup>
import { addBlack } from '@designer-hub/assets/src/assets/svgs'
import { useRouter } from '../../../../core/utils/router'
import { PropType } from 'vue'
import { requestToast } from '../../../../core/utils/common'
import { createProductItemBuy } from '../../../../core/libs/requests'
import { useUserStore } from '../../../../store'
import { storeToRefs } from 'pinia'
import { needLoginPages } from '@/utils'

const props = defineProps({
  options: {
    type: Object as PropType<any>,
    default: () => {},
  },
})
const emits = defineEmits<{ change: [] }>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const router = useRouter()
const handleAddToCart = async () => {
  await requestToast(
    () =>
      createProductItemBuy({
        doList: [
          {
            userId: userInfo.value.userId,
            productId: props.options?.productId || '',
            points: props.options?.points,
            nums: 1,
          },
        ],
      }),
    { success: true, successTitle: '加入购物车成功' },
  )
  emits('change')
}
</script>
<template>
  <div
    class="w-full flex flex-col gap-2.5"
    @click="router.push(`/pages/home/mall/detail/index?id=${options.productId}`)"
  >
    <div class="bg-[#f6f6f6] rounded-2xl w-full aspect-square overflow-hidden">
      <wd-img
        width="100%"
        height="100%"
        :src="options.productCoverImgUrl"
        mode="aspectFill"
        custom-class="aspect-square"
      ></wd-img>
    </div>
    <div class="flex">
      <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal line-clamp-1 text-ellipsis overflow-hidden">
        <!-- 阿芙佳朵 -->
        {{ options.prodcutName }}
      </div>
      <div class="flex-1"></div>
      <div
        v-if="Number(options.productPrice)"
        class="w-[26px] text-black/30 text-xs font-normal font-['PingFang_SC'] line-through leading-normal"
      >
        <!-- ¥60 -->
        ¥{{ options.productPrice }}
      </div>
    </div>
    <div class="flex items-center mb-6">
      <template v-if="String(options.needPoints) === '0'">
        <div class="flex items-end gap-1">
          <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN_Exp'] leading-5.5">
            <!-- 1000 -->
            {{ options.showFavourable ? options.favourablePoints : options.points }}
          </div>
          <div class="text-black/60 text-sm font-normal font-['PingFang_SC']">积分</div>
        </div>
        <div class="flex-1"></div>
        <div class="" @click.stop="handleAddToCart">
          <wd-img width="32" height="32" :src="addBlack"></wd-img>
        </div>
      </template>
      <template v-if="String(options.needPoints) === '1'">
        <div class="flex items-end gap-1">
          <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN_Exp'] leading-5.5">
            <!-- 1000 -->
            {{ options.points }}
          </div>
          <div class="text-black/60 text-sm font-normal font-['PingFang_SC']">折</div>
          <div class="text-black/60 text-sm font-normal font-['PingFang_SC']">（积分结算）</div>
        </div>
        <div class="flex-1"></div>
        <!--        <div class="" @click.stop="handleAddToCart">-->
        <!--          <wd-img width="32" height="32" :src="addBlack"></wd-img>-->
        <!--        </div>-->
      </template>
    </div>
  </div>
</template>