bandhuBuy-uniapp/src/components/product/product.vue

<script setup>
import { formatNumber } from '@/utils/index'

defineOptions({
  name: 'Product', // 商品组件
})
const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  titleFontSize: {
    type: [Number, String],
    default: 22,
  },
  width: {
    type: [Number, String],
    default: 260,
  },
  height: {
    type: [Number, String],
    default: 260,
  },
  borderRadius: {
    type: [Number, String],
    default: 6,
  },
})

const emit = defineEmits(['itemClick'])

function handleClick() {
  emit('itemClick', props.item)
}
</script>

<template>
  <view
    class="flex flex-col items-center overflow-hidden"
    :style="{
      maxWidth: Number.isFinite(width) ? `${width}rpx` : width,
      width: Number.isFinite(width) ? `${width}rpx` : width,
      borderRadius: Number.isFinite(borderRadius) ? `${borderRadius}rpx` : borderRadius,
    }"
    @click="handleClick"
  >
    <view
      class="overflow-hidden"
      :style="{
        maxWidth: Number.isFinite(width) ? `${width}rpx` : width,
        width: Number.isFinite(width) ? `${width}rpx` : width,
        height: Number.isFinite(height) ? `${height}rpx` : height,
        borderTopLeftRadius: Number.isFinite(borderRadius) ? `${borderRadius}rpx` : borderRadius,
        borderTopRightRadius: Number.isFinite(borderRadius) ? `${borderRadius}rpx` : borderRadius,
      }"
    >
      <image
        :src="item.image"
        class="h-full w-full"
        mode="aspectFit"
      />
    </view>
    <view
      class="box-border w-full bg-white px-14rpx pb-8rpx pt-10rpx"
      :style="{
        fontSize: Number.isFinite(titleFontSize) ? `${titleFontSize}rpx` : titleFontSize,
        borderBottomLeftRadius: Number.isFinite(borderRadius) ? `${borderRadius}rpx` : borderRadius,
        borderBottomRightRadius: Number.isFinite(borderRadius) ? `${borderRadius}rpx` : borderRadius,
      }"
    >
      <view class="mb-3px truncate">
        {{ item.productName || item.storeName }}
      </view>
      <view class="flex items-center justify-between">
        <view class="text-#FF334A font-bold" :style="{ fontSize: Number.isFinite(titleFontSize) ? `${titleFontSize}rpx` : titleFontSize }">
          ৳ {{ formatNumber(item.price) }}
        </view>
        <view class="text-16rpx text-#898989">
          {{ item.sales }} Sold
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>