Vue 支付成功提示卡片功能实现

应用场景介绍

该卡片用于在用户支付成功后提供支付结果展示和确认按钮，常见于电商、金融等场景。

基本功能介绍

该卡片主要具备以下功能：

• 展示支付成功信息，包括支付金额、支付方式和支付时间；
• 提供确认按钮，用户点击后可关闭卡片。

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

1. 安装依赖

首先，在项目中安装 Vant 组件库：

npm install vant

2. 创建组件

在 Vue 项目中创建一个名为 PaymentSuccessCard.vue 的组件，代码如下：

<template>
  <div>
    <van-toast id="van-toast" />
    <div class="page">
      <div class="page__bd">
        <div class="weui-cells weui-cells_after-title">
          <div class="weui-cell weui-cell_active">
            <div class="weui-cell__bd">
              <p>支付成功</p>
            </div>
            <div class="weui-cell__ft">
              <van-icon name="success" class="weui-icon_success-no-circle" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__bd">
              <p>支付金额</p>
            </div>
            <div class="weui-cell__ft">15</div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__bd">
              <p>支付方式</p>
            </div>
            <div class="weui-cell__ft">微信支付</div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__bd">
              <p>支付时间</p>
            </div>
            <div class="weui-cell__ft">2023-03-08 12:30:00</div>
          </div>
        </div>
      </div>
      <div class="page__ft">
        <van-button round block type="primary" @click="pay">确认</van-button>
      </div>
    </div>
  </div>
</template>

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

const pay = () => {
  Toast("支付成功");
};
</script>

<style>
.page {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page__bd {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow:
    0 1px 6px rgba(0, 0, 0, 0.12),
    0 1px 4px rgba(0, 0, 0, 0.24);
}

.page__ft {
  margin-top: 20px;
  padding: 10px;
  text-align: center;
}

.weui-cell {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.weui-cell:last-child {
  border-bottom: none;
}

.weui-cell__bd {
  flex: 1;
}

.weui-cell__ft {
  text-align: right;
}

.weui-icon_success-no-circle {
  color: #09bb07;
  font-size: 24px;
}
</style>

3. 使用组件

在需要展示支付成功卡片的页面中，引入并使用 PaymentSuccessCard 组件：

<template>
  <div>
    <PaymentSuccessCard />
  </div>
</template>

<script>
import PaymentSuccessCard from "./PaymentSuccessCard.vue";

export default {
  components: {
    PaymentSuccessCard,
  },
};
</script>

4. 实现支付成功提示

在 pay 方法中，使用 Vant 的 Toast 组件展示支付成功提示：

const pay = () => {
  Toast("支付成功");
};

总结与展望

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

• 使用 Vant 组件库可以快速实现常见 UI 组件，简化开发过程。
• 充分利用 Vue 的响应式系统，可以方便地实现组件状态更新。

未来拓展与优化：

• 拓展卡片功能，支持展示更丰富的支付信息，如订单号、商品详情等。
• 优化卡片样式，使其更符合不同的业务场景需求。
• 考虑与后端系统集成，实现自动展示支付成功卡片的功能。