Goods 卡片

结合业务的商品信息

暂无标题

￥1元

1人购买

商品卡片，必须用插槽：price、number或cart覆盖默认数据

￥1元

1人购买

暂无标题

￥9.9元

999人购买

这是一个标题

商品卡片需要两个插槽：price、number或cart覆盖默认数据，否则没必要使用

￥9.9元

999人购买

Goods 卡片

这是 Slot 基础例子

<script setup lang="ts">

</script>

<template>
  <div class="goods-demo">
    <NpGoods v-for="num in 2" :key="num" size="small" :border="false" :circle="false">
      <template #cover>
        <img
          style="height: 200px;"
          src="https://img.alicdn.com/imgextra/i1/2216071220018/O1CN01kLNlc21C0IAPB7O08_!!2216071220018.jpg"
          alt=""
        >
      </template>
      <template v-if="num % 2 === 0" #title>
        <a href="">商品卡片，必须用插槽：price、number或cart覆盖默认数据</a>
      </template>
    </NpGoods>
  </div>
  <div class="goods-demo">
    <NpGoods v-for="num in 2" :key="num" size="small">
      <template #cover>
        <img
          style="height: 200px;"
          src="https://img.alicdn.com/imgextra/i1/2216071220018/O1CN01kLNlc21C0IAPB7O08_!!2216071220018.jpg"
          alt=""
        >
      </template>
      <template v-if="num % 2 === 0" #title>
        <a href="">这是一个标题</a>
      </template>
      <template v-if="num % 2 === 0" #desc>
        商品卡片需要两个插槽：price、number或cart覆盖默认数据，否则没必要使用
      </template>
      <template #price>
        <span>￥9.9</span>
        <span>元</span>
      </template>
      <template #number>
        <span class="np-goods-intro__number">999人购买</span>
      </template>
    </NpGoods>
  </div>
</template>

<style>
.goods-demo {
  margin: 20px;
  display: flex;
  gap: 20px;
}

.goods-demo .np-card {
  flex: 1;
}
</style>

电话核实

暂无标题

￥9.9元/斤

999人购买加入购物车

现场核实

这是一个标题

商品卡片需要两个插槽：price、number或cart覆盖默认数据，否则没必要使用

￥9.9元/斤

999人购买加入购物车

Goods 卡片

这是 area verify 结合业务的 二次封装

<script setup lang="ts">

</script>

<template>
  <div class="goods-demo">
    <NpGoods v-for="num in 2" :key="num" size="small" area verify>
      <div class="np-goods-area" style="background-image: url(/icon-area.png)" />
      <div v-if="num % 2 === 0" class="np-goods-verify" style="background: rgba(245, 166, 35, .55);">
        现场核实
      </div>
      <div v-else class="np-goods-verify" style="background: rgba(126, 211, 33, .55);">
        电话核实
      </div>
      <template #cover>
        <a href="">
          <img
            style="height: 200px;"
            src="https://img.alicdn.com/imgextra/i1/2216071220018/O1CN01kLNlc21C0IAPB7O08_!!2216071220018.jpg"
            alt=""
          >
        </a>
      </template>
      <template v-if="num % 2 === 0" #title>
        <a href="">这是一个标题</a>
      </template>
      <template v-if="num % 2 === 0" #desc>
        商品卡片需要两个插槽：price、number或cart覆盖默认数据，否则没必要使用
      </template>
      <template #price>
        <span>￥9.9</span>
        <span>元/斤</span>
      </template>
      <template #cart>
        <span class="np-goods-intro__buy">999人购买</span>
        <span class="np-goods-intro__cart">
          <NpIcon icon="shopping" type="fill" />
          <span>加入购物车</span>
        </span>
      </template>
    </NpGoods>
  </div>
</template>

<style scoped>
.goods-demo {
  margin: 20px;
  display: flex;
  gap: 20px;
}
.goods-demo .np-goods {
  flex: 1;
}
</style>