基于 Vue 的沙发展示卡片功能开发

应用场景

本卡片功能适用于电子商务网站或移动应用程序，用于展示和销售家具产品，如沙发。它提供了一个交互式且信息丰富的界面，允许用户浏览和选择符合其需求的产品。

基本功能

该卡片功能具有以下基本功能：

**展示沙发信息：**包括价格、标题、评分、销量和图片。
**卡片点击事件：**当用户点击卡片时，它将导航到该沙发的详细信息页面。

功能实现步骤及关键代码分析

1. 数据准备

首先，我们需要定义一个沙发列表数组 sofaList，其中包含每个沙发的相关信息。

const sofaList = [
  {
    id: 1,
    title: "Mid Century Sofa",
    price: "$140.00",
    rate: 4.8,
    sold: 9782,
    image: "https://source.unsplash.com/random/300x300",
  },
  // ... 其他沙发数据
];

2. 卡片组件

使用 Vue 的 van-card 组件创建沙发卡片。该组件负责显示沙发的基本信息，如价格、标题和图片。

<van-card
  :price="sofa.price"
  :title="sofa.title"
  :rate="sofa.rate"
  :sold="sofa.sold"
  :image="sofa.image"
  @click="toDetail(sofa)"
/>

3. 卡片点击事件

当用户点击卡片时，触发 toDetail 方法。该方法使用 Vue Router 将用户导航到该沙发的详细信息页面。

const toDetail = (sofa) => {
  $router.push({
    path: "/sofa/detail",
    query: {
      id: sofa.id,
    },
  });
};

4. 布局

将卡片组件放入一个网格布局中，以展示多个沙发。使用 Vue 的 van-row 和 van-col 组件创建网格。

<div class="sofa-list">
  <van-row>
    <van-col span="6">
      <van-card
        :price="sofa.price"
        :title="sofa.title"
        :rate="sofa.rate"
        :sold="sofa.sold"
        :image="sofa.image"
        @click="toDetail(sofa)"
      />
    </van-col>
    <!-- ... 其他卡片 -->
  </van-row>
</div>