uniapp支付loading

可以通过以下方式实现支付loading效果：

1. 在支付按钮点击后，添加一个loading状态变量，例如：`isPaying: false`。

2. 在支付按钮上添加一个`v-if`指令，根据`isPaying`的值来显示或隐藏loading状态。例如：

   <button v-if="!isPaying" @click="pay()">支付</button>
   <div v-else>
     <img src="loading.gif">
     <span>正在支付，请稍等...</span>
   </div>

3. 在支付函数中设置`isPaying`为`true`，并在支付完成后再将其设置为`false`。例如：

   methods: {
     pay() {
       this.isPaying = true;
       // 发起支付请求...
       // 支付完成后，将isPaying设置为false
       this.isPaying = false;
     }
   }

相关问题

uniapp扫码点餐代码

这里是一个简单的uniapp扫码点餐代码示例：

1. 在 `pages` 目录下新建 `order` 页面。

2. 在 `order` 目录下新建 `order.vue` 文件，编写以下代码：

<template>
  <view>
    <image :src="qrCode" mode="aspectFit" />
    <view v-if="showLoading" class="loading">
      <loading></loading>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      qrCode: '',
      showLoading: true,
      orderData: [], // 点餐数据
    }
  },
  onLoad() {
    // 生成订单二维码
    this.generateQRCode()
  },
  methods: {
    // 生成订单二维码
    generateQRCode() {
      // TODO: 调用后端接口生成订单二维码，并返回二维码链接
      this.qrCode = 'https://example.com/qrcode.png'

      // 模拟加载时间
      setTimeout(() => {
        this.showLoading = false
      }, 2000)
    },
  },
}
</script>

<style>
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

3. 在 `main.js` 中注册 `vue-qriously` 插件，用于生成二维码：

import VueQriously from 'vue-qriously'

Vue.use(VueQriously)

4. 在 `order.vue` 中引入 `vue-qriously`，并在模板中使用 `qriously` 组件生成二维码：

<template>
  <view>
    <qriously :value="qrCode" :size="200" />
    <view v-if="showLoading" class="loading">
      <loading></loading>
    </view>
  </view>
</template>

<script>
import VueQriously from 'vue-qriously'

export default {
  components: {
    qriously: VueQriously,
  },
  data() {
    return {
      qrCode: '',
      showLoading: true,
      orderData: [], // 点餐数据
    }
  },
  onLoad() {
    // 生成订单二维码
    this.generateQRCode()
  },
  methods: {
    // 生成订单二维码
    generateQRCode() {
      // TODO: 调用后端接口生成订单二维码，并返回二维码链接
      this.qrCode = 'https://example.com/qrcode.png'

      // 模拟加载时间
      setTimeout(() => {
        this.showLoading = false
      }, 2000)
    },
  },
}
</script>

<style>
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

5. 在 `order.vue` 中添加扫码支付逻辑：

<template>
  <view>
    <qriously :value="qrCode" :size="200" />
    <view v-if="showLoading" class="loading">
      <loading></loading>
    </view>
    <view v-else class="bottom" @tap="scanCode">
      <text class="text">扫码支付</text>
    </view>
  </view>
</template>

<script>
import VueQriously from 'vue-qriously'

export default {
  components: {
    qriously: VueQriously,
  },
  data() {
    return {
      qrCode: '',
      showLoading: true,
      orderData: [], // 点餐数据
    }
  },
  onLoad() {
    // 生成订单二维码
    this.generateQRCode()
  },
  methods: {
    // 生成订单二维码
    generateQRCode() {
      // TODO: 调用后端接口生成订单二维码，并返回二维码链接
      this.qrCode = 'https://example.com/qrcode.png'

      // 模拟加载时间
      setTimeout(() => {
        this.showLoading = false
      }, 2000)
    },
    // 扫码支付
    scanCode() {
      uni.scanCode({
        onlyFromCamera: true,
        success: (res) => {
          // TODO: 调用后端接口查询订单状态并完成支付
          uni.showToast({
            title: '支付成功',
            icon: 'success',
            duration: 2000,
            success: () => {
              uni.redirectTo({
                url: '/pages/pay/pay',
              })
            },
          })
        },
      })
    },
  },
}
</script>

<style>
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  color: #fff;
  font-size: 32rpx;
}
</style>

这样，我们就完成了一个简单的uniapp扫码点餐功能。当用户打开 `order` 页面时，会生成一个订单二维码，用户扫描二维码后，会进入扫码支付流程。