product.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <script lang="ts" setup>
  2. import { formatNumber } from '@/utils/index'
  3. defineOptions({
  4. name: 'Product', // 商品组件
  5. })
  6. const props = defineProps({
  7. item: {
  8. type: Object,
  9. required: true,
  10. },
  11. width: {
  12. type: [Number, String],
  13. default: 260,
  14. },
  15. height: {
  16. type: [Number, String],
  17. default: 260,
  18. },
  19. })
  20. const emit = defineEmits(['itemClick'])
  21. function handleClick() {
  22. emit('itemClick', props.item)
  23. }
  24. </script>
  25. <template>
  26. <view
  27. class="flex flex-col items-center border-1 border-#E0E0E0 border-solid pb-8rpx"
  28. @click="handleClick"
  29. >
  30. <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 }">
  31. <image
  32. :src="item.image"
  33. class="h-full w-full"
  34. mode="aspectFit"
  35. />
  36. </view>
  37. <view class="box-border w-full px-14rpx text-24rpx">
  38. <view class="truncate">
  39. {{ item.storeName }}
  40. </view>
  41. <view class="flex items-center justify-between">
  42. <view class="text-24rpx text-#FF334A font-bold">
  43. ৳ {{ formatNumber(item.price) }}
  44. </view>
  45. <view class="text-24rpx text-#898989">
  46. {{ item.sales }} Sold
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <style lang="scss" scoped>
  53. //
  54. </style>