基于 Vue.js 的交通卡功能实现

应用场景介绍

在现代城市生活中，交通卡已成为人们日常出行必不可少的工具。为了满足用户便捷查询余额、交易记录和进行充值等需求，本文将介绍如何使用 Vue.js 实现一个交通卡功能。

代码基本功能介绍

本代码实现了以下功能：

• 实时显示交通卡余额
• 展示最近的交易记录
• 提供充值功能
• 底部导航栏，方便用户在不同页面间切换

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

1. 初始化 Vue 实例

const app = createApp({
  // ...
});

2. 定义组件

TransportCard 组件：

<van-card
  class="bg-blue-100 text-blue-500 border-blue-300"
  title="Mini Metro"
  thumb="https://source.unsplash.com/random/100x100"
>
  <template #footer>
    <div class="flex justify-between">
      <div>Bakerloo Tube Station</div>
      <div>£4.50</div>
    </div>
  </template>
</van-card>

• 使用 VanUI 的 Card 组件展示交通卡信息，包括余额和最近的交易记录。
• #footer 插槽用于自定义卡片底部内容，显示交易详情。

3. 定义数据和方法

const active = ref(0);

const historyList = [
  // ...
];

• active 变量用于控制底部导航栏的激活状态。
• historyList 数组存储了最近的交易记录。

4. 事件处理

充值按钮点击事件：

<van-button
  round
  type="primary"
  size="large"
  class="bg-orange-500 text-white"
>
  Top Up
</van-button>

• 使用 VanUI 的 Button 组件提供充值功能。

5. 底部导航栏

<van-tabbar
  :active="active"
  :model-value="active"
  :safe-area-inset-bottom="false"
>
  <van-tabbar-item icon="home-o" to="/home">Home</van-tabbar-item>
  <van-tabbar-item icon="message-o" to="/message">Message</van-tabbar-item>
  <van-tabbar-item icon="contact-o" to="/contact">Contact</van-tabbar-item>
  <van-tabbar-item icon="me-o" to="/me">Me</van-tabbar-item>
</van-tabbar>

• 使用 VanUI 的 Tabbar 组件实现底部导航栏，方便用户在不同页面间切换。

总结与展望

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

• 熟悉了 Vue.js 的组件化开发方式。
• 掌握了 VanUI 组件库的使用。
• 了解了如何在 Vue.js 中处理事件。

未来该卡片功能的拓展与优化：

• 实时查询交易记录，无需手动刷新。
• 支持多种充值方式，如银行卡、微信支付等。
• 集成地图功能，显示交通卡可用的站点和线路。