67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<template>
|
|
<view class="product-card" @click="emit('select', props.product)">
|
|
<view class="product-card__img-wrap">
|
|
<image
|
|
class="product-card__img"
|
|
:src="props.product.coverImageUrl"
|
|
mode="aspectFill"
|
|
/>
|
|
<text
|
|
v-if="props.product.tagTexts?.length"
|
|
class="product-card__img-tag"
|
|
:class="tagClass"
|
|
>
|
|
{{ props.product.tagTexts[0] }}
|
|
</text>
|
|
</view>
|
|
<view class="product-card__body">
|
|
<view>
|
|
<text class="product-card__name">{{ props.product.name }}</text>
|
|
<text class="product-card__desc">{{ props.product.description }}</text>
|
|
<view class="product-card__meta">
|
|
<text class="product-card__sales">{{ props.product.salesText }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="product-card__bottom">
|
|
<view class="product-card__price">
|
|
<text class="product-card__price-unit">¥</text>
|
|
<text class="product-card__price-value">{{ props.product.price }}</text>
|
|
<text
|
|
v-if="props.product.originalPriceText"
|
|
class="product-card__price-origin"
|
|
>
|
|
¥{{ props.product.originalPriceText }}
|
|
</text>
|
|
</view>
|
|
<view
|
|
class="product-card__btn"
|
|
:class="{ 'product-card__btn--disabled': props.product.soldOut }"
|
|
@click.stop="emit('action', props.product)"
|
|
>
|
|
<text>{{ props.product.hasOptions ? '选规格' : '加入购物车' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { MiniProductCard } from '@/shared'
|
|
import { useProductCard } from './useProductCard'
|
|
|
|
const props = defineProps<{
|
|
product: MiniProductCard
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
select: [product: MiniProductCard]
|
|
action: [product: MiniProductCard]
|
|
}>()
|
|
|
|
const { tagClass } = useProductCard(props)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use './styles.scss';
|
|
</style>
|