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

<script lang="ts" setup>
import { formatNumber } from '@/utils/index'

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

const emit = defineEmits(['itemClick'])

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

<template>
  <view
    class="flex flex-col items-center border-1 border-#E0E0E0 border-solid pb-8rpx"
    :class="{ 'flex-[0.5]': flex }"
    @click="handleClick"
  >
    <view class="mb-10rpx" :style="{ maxWidth: Number.isFinite(width) ? `${width}rpx` : width, width: Number.isFinite(width) ? `${width}rpx` : width, height: Number.isFinite(height) ? `${height}rpx` : height }">
      <image
        :src="item.image"
        class="h-full w-full"
        mode="aspectFit"
      />
    </view>
    <view class="box-border w-full px-8rpx text-24rpx">
      <view class="truncate">
        {{ item.storeName }}
      </view>
      <view class="flex items-center justify-between">
        <view class="text-24rpx text-#FF334A font-bold">
          ৳ {{ formatNumber(item.price) }}
        </view>
        <view class="text-24rpx text-#898989">
          {{ item.sales }} Sold
        </view>
      </view>
    </view>
  </view>
</template>

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