h5-colexiu/src/views/shop-mall/components/goods/index.tsx

import { Icon, Image } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

import iconAddCart from '../../images/icon-add-cart.png'
import iconSellOut from '../../images/icon-sell-out.png'
import { moneyFormat } from '@/helpers/utils'

export default defineComponent({
  name: 'goods',
  props: {
    showAdd: {
      type: Boolean,
      default: true
    },
    item: {
      type: Object,
      default: {}
    },
    onItemClick: {
      type: Function,
      default: (item: any) => {}
    },
    onBuyClick: {
      type: Function,
      default: (item: any) => {}
    }
  },
  render() {
    const item = this.item
    return (
      <div class={styles.goods} onClick={() => this.onItemClick(item)}>
        <div class={styles.goodsSection}>
          <Image src={item.pic} fit="cover" class={styles.goodsImg} />
          {item.stock <= 0 && (
            <div class={styles.sellOut}>
              <Image src={iconSellOut} fit="cover" class={styles.sellOutImg} />
            </div>
          )}
        </div>
        <div class={styles.goodsInfo}>
          <div class={[styles.goodsName, 'van-ellipsis']}>{item.name}</div>
          <div class={styles.goodsBuy}>
            {/* <del class={styles.goodsSale}>
              ￥{moneyFormat(item.originalPrice)}
            </del> */}
            <p class={styles.goodsPrice}><span class={styles.pre}>￥</span>{moneyFormat(item.price)}</p>

            {this.showAdd && (
              <Icon
                class={[
                  styles.addCart,
                  item.stock <= 0 && styles.addCartDisabled
                ]}
                name={iconAddCart}
                size={22}
                onClick={(e: MouseEvent) => {
                  e.stopPropagation()
                  item.stock > 0 && this.onBuyClick(item)
                }}
              />
            )}
          </div>
        </div>
      </div>
    )
  }
})