支付方式管理卡片功能技术博客

应用场景介绍

在许多电子商务网站或在线支付系统中，用户需要管理多种支付方式，包括信用卡、借记卡、PayPal 等。为了方便用户查看和管理这些支付方式，需要设计一个专门的卡片功能，展示用户的支付方式信息并允许他们进行相关操作。

代码基本功能介绍

本卡片功能主要提供了以下功能：

• **展示支付方式信息：**显示用户的支付方式名称、卡号（部分遮挡）、默认支付方式标识等信息。
• **管理默认支付方式：**允许用户将某个支付方式设置为默认支付方式，该支付方式将在结账时优先使用。
• **添加新支付方式：**提供链接或按钮，引导用户添加新的支付方式。

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

1. 数据准备

首先，我们需要准备一个包含支付方式信息的数组 listData，每个元素代表一个支付方式。

const listData = ref([
  {
    id: 1,
    name: 'Master Card',
    number: '**** **** **** 2211',
    isDefault: true,
  },
  {
    id: 2,
    name: 'VISA',
    number: '**** **** **** 5422',
    isDefault: false,
  },
  {
    id: 3,
    name: 'PayPal',
    number: '**** **** **** 9547',
    isDefault: false,
  },
]);

2. 渲染卡片

使用 v-for 循环遍历 listData 数组，渲染每个支付方式的卡片。

<ul role="list" class="-my-5 divide-y divide-gray-200">
  <li class="py-5" v-for="item in listData" :key="item.id">
    <div class="flex items-center space-x-4">
      <div class="flex-shrink-0">
        <img class="h-10 w-10 rounded-full" src="https://source.unsplash.com/random/100x100" alt="">
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium text-gray-900 truncate">{{ item.name }}</p>
        <p class="text-sm text-gray-500 truncate">{{ item.number }}</p>
      </div>
      <div class="inline-flex items-center text-sm font-medium text-gray-900">
        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
        {{ item.isDefault ? 'Default' : 'Current' }}
      </div>
    </div>
  </li>
</ul>

3. 设置默认支付方式

使用 v-if 指令根据 isDefault 属性显示或隐藏 "Default" 标识。

<div class="inline-flex items-center text-sm font-medium text-gray-900">
  <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
  </svg>
  <span v-if="item.isDefault">Default</span>
  <span v-else>Current</span>
</div>

4. 添加新支付方式

提供一个链接或按钮，引导用户添加新的支付方式。

<a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">
  Add a new card
</a>

总结与展望

通过实现上述功能，我们创建了一个用户友好的卡片功能，方便用户查看和管理其支付方式。

开发过程中的经验与收获：

• 使用 Vue.js 的响应式特性可以轻松地根据数据变化更新 UI。
• 使用 CSS Flexbox 布局可以创建灵活且响应式的卡片布局。
• 通过使用 SVG 图标，可以增强卡片的视觉效果。

未来功能拓展与优化：

• **支持多种支付方式类型：**扩展功能以支持更多支付方式类型，如礼品卡、Apple Pay 等。
• **提供编辑和删除支付方式的功能：**允许用户编辑或删除其支付方式。
• **整合支付网关：**将该功能与支付网关集成，以便用户可以在线进行支付。
• **优化移动端体验：**优化卡片功能在移动设备上的显示和交互。