Vue.js 中构建一个打车费用结算卡片

应用场景介绍

在打车应用中，用户在完成行程后需要查看费用并支付。为了提供直观且易于使用的体验，可以创建一个打车费用结算卡片，其中包含行程摘要、评分、小费选项和支付按钮。

代码基本功能介绍

此代码片段展示了一个使用 Vue.js 构建的打车费用结算卡片。它具有以下基本功能：

• 显示行程摘要，包括起点、终点、距离和费用
• 允许用户评分行程
• 提供预设和自定义小费选项
• 显示总费用并提供支付按钮

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

1. 布局和样式

卡片的布局使用 flexbox，分为三个部分：头部、主体和底部。头部显示行程摘要和总费用，主体包含评分和打赏选项，底部包含支付按钮。

<div class="flex flex-col justify-between h-full bg-gray-100">
  <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200">
    <div class="flex items-center">
      <van-icon name="arrow-left" size="20px" color="#333" />
      <div class="ml-2 text-lg font-semibold">Ride Summary</div>
    </div>
    <div class="text-lg font-semibold">
      <span class="text-red-500">~</span>
      $17
    </div>
  </div>
  <div class="flex-1 px-4 py-6">...</div>
  <div class="px-4 py-2 border-t border-gray-200">...</div>
</div>

2. 行程摘要

行程摘要包含起点、终点、距离和费用信息。它使用 Vue.js 的插槽功能从父组件接收数据。

<div class="flex items-center justify-between">
  <div class="flex items-center">
    <div class="w-10 h-10 rounded-full bg-gray-300"></div>
    <div class="ml-2">
      <div class="text-lg font-semibold">John Doe</div>
      <div class="text-sm text-gray-500">5km</div>
    </div>
  </div>
  <div class="text-lg font-semibold">$15</div>
</div>

3. 评分

评分功能使用 Vuetify 的 v-rate 组件。它允许用户从 1 到 5 评分行程。

<div class="mt-4">
  <van-rate
    v-model="rate"
    max="5"
    size="20px"
    color="#FFC107"
    inactive-color="#ccc"
  />
</div>

4. 小费选项

小费选项包括预设金额和自定义金额输入框。预设金额使用 Vue.js 的 v-for 指令从 tips 数组中循环生成。

<div class="mt-6">
  <div class="text-lg font-semibold">ADD TIP</div>
  <div class="flex items-center mt-2">
    <van-button
      v-for="item in tips"
      :key="item"
      :plain="true"
      class="mr-2"
      >{{ item }}</van-button
    >
  </div>
  <div class="mt-2">
    <van-field
      v-model="customTip"
      type="number"
      placeholder="Enter tip"
      class="w-full"
    />
  </div>
</div>

5. 支付按钮

支付按钮使用 Vuetify 的 v-btn 组件。它是一个带有圆角和块状外观的按钮。

<div class="px-4 py-2 border-t border-gray-200">
  <van-button round block type="danger" class="text-lg font-semibold"
    >Pay $17</van-button
  >
</div>

总结与展望

开发这段代码让我对 Vue.js 构建交互式 UI 组件有了更深入的了解。它还展示了如何将第三方库集成到 Vue.js 应用程序中。

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

• 添加行程地图以显示路线
• 实时计算费用以反映动态定价
• 集成支付网关以处理实际付款