使用Vue调用支付宝创建订单

好的，可以参考以下代码：

<template>
  <div>
    <!-- 点击按钮触发支付宝支付 -->
    <button @click="createAlipayOrder">支付宝支付</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderNumber: "20210420123456789", // 订单号
      totalAmount: "0.01", // 订单总金额
      subject: "测试商品", // 商品名称
      body: "测试商品的描述", // 商品描述
    };
  },
  methods: {
    createAlipayOrder() {
      // 调用后端接口创建支付宝订单
      axios.post('/api/createAlipayOrder', {
        orderNumber: this.orderNumber,
        totalAmount: this.totalAmount,
        subject: this.subject,
        body: this.body
      }).then(res => {
        // 调用支付宝支付接口
        window.location.href = res.data.payUrl;
      }).catch(err => {
        console.error(err);
      });
    },
  },
};
</script>

在 `createAlipayOrder` 方法中，我们通过 `axios` 发送请求到后端接口 `/api/createAlipayOrder`，将订单信息传递给后端。后端接口需要调用支付宝 API 创建订单并返回 `payUrl`，即支付宝支付页面链接。在成功获取 `payUrl` 后，我们通过 `window.location.href` 跳转到支付宝支付页面进行支付。