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 中实现安全的金钱支付功能

#### 支付流程设计与安全性考虑

为了确保支付过程中的安全性，特别是在处理金钱交易时，建议采用以下措施：

- **接口幂等性保障**：由于支付涉及到资金流动，必须严格保证接口调用的幂等性。这可以通过使用唯一主键方案来防止重复提交订单[^2]。

- **加密传输**：所有的敏感数据应当通过HTTPS协议进行加密传输，避免中间人攻击。

- **签名验证机制**：每次发起支付请求前都需要生成带有时间戳的一次性签名，并将其发送给服务器端校验，以此确认客户端身份合法性并防范重放攻击。

- **前端防抖动逻辑**：为了避免用户误触导致多次点击按钮触发相同事件的情况发生，在UI层面上加入简单的防抖动逻辑是非常必要的。

#### 示例代码展示

下面是一个基于上述原则构建的基础版微信小程序内嵌网页形式下的在线支付案例（假设已经完成 uni-app 环境搭建）:

// pages/pay/index.vue
<template>
  <view class="container">
    <!-- 显示金额 -->
    <text>应付金额: {{ amount }}元</text>

    <!-- 提交按钮 -->
    <button @click="handlePay">立即付款</button>
    
    <!-- 加载提示符 -->
    <loading v-if="isLoading"></loading>
  </view>
</template>

<script>
import { createOrder, verifySignature } from '@/api/payment'; // 假设这是封装好的API函数
export default {
  data() {
    return {
      amount: '0.01', // 测试环境固定值
      isLoading: false,
      nonceStr: '',   // 随机字符串
      timestamp: '' , // 时间戳
      signType : 'MD5' // 默认签名算法类型
    };
  },
  methods: {
    async handlePay() {
      this.isLoading = true;
      
      try{
        const res = await createOrder({
          body: "测试商品",
          out_trade_no: Date.now(), // 订单编号作为唯一标识
          total_fee: parseInt(this.amount * 100), // 单位转换成分为整数传入
          spbill_create_ip: window.location.host.split(':')[0], // 获取当前页面IP地址
          notify_url: `${process.env.VUE_APP_BASE_API}/notify`, // 后台回调通知URL路径
          trade_type: 'JSAPI',
          openid: wx.getStorageSync('openid') || ''
        });

        let payParams = Object.assign({},res,{timeStamp:this.timestamp});
        
        if(verifySignature(payParams)){
           wx.requestPayment({
             ...payParams,
             success(res){
               console.log('支付成功');
             },
             fail(err){
               console.error('支付失败:',err);
             }
           });
         }

      } catch (error) {
        console.error(error.message);
      } finally {
        this.isLoading = false;
      }
    }
  },

  mounted(){
     // 初始化随机串和时间戳
     this.nonceStr = Math.random().toString(36).substr(-8);
     this.timestamp = new Date().getTime();
  }
};
</script>

此段代码展示了如何利用 `createOrder` API 创建一笔新的订单记录，并且在接收到响应之后再执行一次本地签名检验以增强安全性；如果一切正常，则继续调用微信内置 SDK 完成交互式的 H5 页面支付体验。

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` 页面时，会生成一个订单二维码，用户扫描二维码后，会进入扫码支付流程。