写一个使用支付宝沙盒完成捐款订单的生成和二维码生成的页面vue

很抱歉，我作为一个AI语言模型，并不具备编写前端页面的能力。但是，我可以为您提供一些参考资料，帮助您完成这个任务。

首先，您需要在支付宝开放平台申请一个沙盒账号，并创建一个应用。然后，您可以使用支付宝提供的SDK来生成捐款订单和二维码。

以下是一个简单的Vue组件示例，用于生成支付宝捐款订单和二维码：

<template>
  <div>
    <form @submit.prevent="generateOrder">
      <label for="amount">捐款金额：</label>
      <input type="number" v-model="amount" id="amount" required>
      <button type="submit">生成订单</button>
    </form>
    <div v-if="order">
      <h3>订单信息：</h3>
      <p>订单号：{{ order.orderNo }}</p>
      <p>订单金额：{{ order.amount }}</p>
      <qrcode :value="order.qrCodeUrl"></qrcode>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode.vue'

export default {
  name: 'Donate',
  components: {
    QRCode
  },
  data() {
    return {
      amount: '',
      order: null
    }
  },
  methods: {
    async generateOrder() {
      // 使用支付宝SDK生成订单
      const order = await window.AlipayJSBridge.call('tradeCreate', {
        amount: this.amount,
        subject: '爱心捐款',
        sellerId: '2088102147948060',
        timeout: '1m'
      })
      // 使用支付宝SDK生成二维码
      const qrCodeUrl = await window.AlipayJSBridge.call('qrCodeCreate', {
        url: order.qrCodeUrl,
        width: 200,
        height: 200
      })
      // 更新订单信息和二维码URL
      this.order = {
        orderNo: order.tradeNO,
        amount: order.totalAmount,
        qrCodeUrl
      }
    }
  }
}
</script>

在上面的示例中，我们使用了支付宝提供的JSBridge来调用SDK生成订单和二维码。我们还使用了一个名为`qrcode.vue`的Vue组件来显示二维码。

请注意，这只是一个简单的示例，并不能保证完全正确和完整。您需要根据您的具体情况进行修改和调整。同时，您还需要确保您已经正确引入支付宝SDK和`qrcode.vue`组件。