Vue.js 卡片式产品详情页

应用场景

本代码片段用于创建一个Vue.js卡片式产品详情页，该页面展示产品信息、价格、数量选择器和添加到购物车按钮。

基本功能

• **产品信息展示：**显示产品名称、价格、图片和简要描述。
• **数量选择器：**允许用户选择产品数量。
• **添加到购物车按钮：**将产品添加到购物车。
• **产品详情：**提供产品的其他详细信息，如成分、使用说明等。

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

1. 设置数据

<script lang="tsx" setup>
import { ref } from "vue";

const quantity = ref(1);
</script>

• 使用Vue.js的ref钩子创建quantity响应式数据，用于跟踪用户选择的数量。

2. 产品信息模板

<template>
  <div class="bg-gray-100">
    <div class="max-w-2xl mx-auto py-12 sm:px-6 lg:px-8">
      <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 bg-white border-b border-gray-200">
          <div class="flex justify-between">
            <div class="text-lg font-medium text-gray-900">Drug</div>
            <div class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 text-gray-400"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm2 10a1 1 0 10-2 0v3a1 1 0 102 0v-3zm2-3a1 1 0 011-1h4a1 1 0 110 2h-4a1 1 0 01-1-1z"
                  clip-rule="evenodd"
                />
              </svg>
            </div>
          </div>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex items-center">
              <img
                class="h-10 w-10 rounded-full"
                src="https://source.unsplash.com/random/100x100"
                alt=""
              />
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900">$29.00</div>
                <div class="text-sm text-gray-500">Quantity</div>
              </div>
            </div>
            <div class="ml-4">
              <div class="flex items-center">
                <button
                  type="button"
                  class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  Add to cart
                </button>
              </div>
            </div>
          </div>
          <div class="mt-10">
            <div class="text-lg font-medium text-gray-900">What is this?</div>
            <div class="mt-2 text-sm text-gray-500">
              Amoxicillin is a semi-synthetic penicillin of moderate spectrum
              used in the treatment of infections...
            </div>
          </div>
          <div class="mt-6">
            <div class="text-lg font-medium text-gray-900">Important</div>
            <div class="mt-2 text-sm text-gray-500">
              It acts on the bacterial membrane ...
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

• 创建Vue.js组件模板，包括产品名称、价格、图片、简要描述和产品详情。
• 使用flex布局来控制元素的排列方式。

3. 数量选择器

<template>
  <!-- ... -->
  <div class="mt-4 flex items-center justify-between">
    <div class="flex items-center">
      <!-- ... -->
      <input
        type="number"
        min="1"
        class="w-10 text-center border border-gray-300 rounded-md"
        v-model="quantity"
      />
    </div>
    <!-- ... -->
  </div>
  <!-- ... -->
</template>

<script lang="tsx" setup>
  // ...
  const handleChangeQuantity = (e) => {
    const value = parseInt(e.target.value);
    if (value > 0) {
      quantity.value = value;
    }
  };
</script>

• 在数量选择器中添加<input>元素，用于用户输入数量。
• 使用v-model将输入值绑定到quantity响应式数据。
• 添加handleChangeQuantity方法，当用户更改输入值时，验证输入并更新quantity数据。

4. 添加到购物车按钮

<template>
  <!-- ... -->
  <div class="ml-4">
    <div class="flex items-center">
      <button
        type="button"
        class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        @click="addToCart"
      >
        Add to cart
      </button>
    </div>
  </div>
  <!-- ... -->
</template>

<script lang="tsx" setup>
  // ...
  const addToCart = () => {
    // 模拟添加到购物车操作，此处可根据实际需求实现
    console.log(`Added ${quantity.value} items to cart.`);
  };
</script>

• 添加一个按钮，当用户点击时触发addToCart方法。
• 在addToCart方法中，模拟添加到购物车操作，并打印消息到控制台。

总结与展望

通过本代码，我们创建了一个功能齐全的Vue.js卡片式产品详情页，包括产品信息展示、数量选择器和添加到购物车按钮。

未来，该卡片功能可以进一步扩展和优化，例如：

• 添加AJAX请求，从服务器获取产品数据。
• 实现真正的添加到购物车功能，与购物车状态管理系统集成。
• 响应式设计，以适应不同屏幕尺寸。