基于 Vue 的航班卡片开发

应用场景介绍

该航班卡片可用于展示航班信息，包括出发航班、返程航班、航班票价、税费和总价。用户可以轻松查看航班详情，并通过点击按钮进行购买。

代码基本功能介绍

此代码的主要功能包括：

• **航班信息展示：**显示出发航班、返程航班的航空公司、出发/到达机场、出发/到达时间和价格。
• **航班票价计算：**根据出发航班和返程航班的价格计算总票价。
• **税费计算：**根据总票价计算税费。
• **总价计算：**将总票价和税费相加，得到总价。
• **按钮功能：**用户点击按钮后，可以触发购买航班的逻辑。

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

1. 数据绑定

首先，我们需要定义一个 data 对象来存储航班信息：

const data = ref({
  departureFlight: {
    // ...
  },
  returnFlight: {
    // ...
  },
  flightTickets: 1044.97,
  tax: 112.24,
  total: 1157.21,
});

2. 航班信息展示

在模板中，我们可以使用 v-for 循环来遍历航班信息，并使用插值语法显示航班详情：

<div class="bg-gray-800 px-4 py-6">
  <div class="text-white text-lg font-semibold">Departure Flight</div>
  <div class="flex items-center justify-between mt-4">
    <div class="flex items-center">
      <div class="w-10 h-10 rounded-full bg-gray-600 mr-2"></div>
      <div>
        <div class="text-white text-sm">{{ data.departureFlight.airline }}</div>
        <div class="text-gray-400 text-xs">{{ data.departureFlight.departureAirport }} > {{ data.departureFlight.arrivalAirport }}</div>
      </div>
    </div>
    <div>
      <div class="text-white text-sm">{{ data.departureFlight.departureTime }}</div>
      <div class="text-gray-400 text-xs">23 Kg / Person</div>
    </div>
    <div class="text-white text-lg font-semibold">${{ data.departureFlight.price }}</div>
  </div>
</div>

3. 航班票价计算

在 data 对象中，我们可以定义一个计算属性来计算总票价：

computed: {
  totalTicketsPrice() {
    return this.data.departureFlight.price + this.data.returnFlight.price;
  },
},

4. 税费计算

类似地，我们可以定义一个计算属性来计算税费：

computed: {
  tax() {
    return this.totalTicketsPrice * 0.1;
  },
},

5. 总价计算

最后，我们可以定义一个计算属性来计算总价：

computed: {
  total() {
    return this.totalTicketsPrice + this.tax;
  },
},

6. 按钮功能

在模板中，我们可以使用 van-button 组件来创建按钮：

<div class="flex justify-center mt-8">
  <van-button round type="primary" size="large">CHECKOUT</van-button>
</div>

点击按钮时，我们可以触发购买航班的逻辑，例如跳转到支付页面。

总结与展望

开发过程中的经验与收获

通过开发这段代码，我巩固了对 Vue、ECharts 和其他第三方库的使用。我还了解了如何设计和实现一个交互式的用户界面。

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

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

• 添加航班动态信息，如航班状态、延误时间等。
• 集成支付功能，允许用户直接在卡片中购买航班。
• 优化用户界面，使其更加美观和易用。