# 微信二维码支付组件 (WechatPayment)

基于参考博客 [H5微信支付、PC端微信支付](https://blog.csdn.net/WANGLING0108/article/details/133808856) 实现的Vue3微信支付组件。

## 功能特性

- ✅ 二维码自动生成和展示
- ✅ 支付状态实时轮询
- ✅ 支付超时处理（5分钟倒计时）
- ✅ 支付成功/失败/取消状态处理
- ✅ 二维码刷新功能
- ✅ 响应式设计（PC端/移动端适配）
- ✅ 完整的错误处理和用户提示

## 安装依赖

```bash
npm install qrcode
```

## 使用方式

### 基础用法

```vue
<template>
  <div>
    <!-- 触发支付按钮 -->
    <el-button type="primary" @click="startPayment">
      发起支付
    </el-button>
    
    <!-- 微信支付组件 -->
    <WechatPayment
      v-model="showPayment"
      :payment-data="paymentData"
      @success="handlePaymentSuccess"
      @cancel="handlePaymentCancel"
      @failed="handlePaymentFailed"
    />
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import WechatPayment from '@/components/common/WechatPayment.vue';

export default {
  components: {
    WechatPayment
  },
  setup() {
    const showPayment = ref(false);
    const paymentData = reactive({
      orderId: '',      // 订单ID
      title: '',        // 支付标题
      amount: 0,        // 支付金额（分）
      body: ''          // 商品描述
    });

    // 发起支付
    const startPayment = () => {
      paymentData.orderId = 'ORDER_123456';
      paymentData.title = '商品购买';
      paymentData.amount = 1000; // 10元（以分为单位）
      paymentData.body = '商品描述信息';
      
      showPayment.value = true;
    };

    // 支付成功回调
    const handlePaymentSuccess = (outTradeNo) => {
      console.log('支付成功，交易号:', outTradeNo);
      // 处理支付成功逻辑
    };

    // 支付取消回调
    const handlePaymentCancel = () => {
      console.log('用户取消支付');
      // 处理取消逻辑
    };

    // 支付失败回调
    const handlePaymentFailed = (errorMessage) => {
      console.log('支付失败:', errorMessage);
      // 处理失败逻辑
    };

    return {
      showPayment,
      paymentData,
      startPayment,
      handlePaymentSuccess,
      handlePaymentCancel,
      handlePaymentFailed
    };
  }
};
</script>
```

## 组件属性 (Props)

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `modelValue` | Boolean | `false` | 控制支付弹窗显示/隐藏 |
| `paymentData` | Object | `{}` | 支付相关数据 |

### paymentData 对象结构

```javascript
{
  orderId: '',      // 订单ID（必填）
  title: '',        // 支付标题（必填）
  amount: 0,        // 支付金额，单位：分（必填）
  body: ''          // 商品描述（可选）
}
```

## 组件事件 (Events)

| 事件名 | 参数 | 说明 |
|--------|------|------|
| `update:modelValue` | `Boolean` | 更新弹窗显示状态 |
| `success` | `String` (outTradeNo) | 支付成功回调，返回微信交易号 |
| `cancel` | - | 用户取消支付回调 |
| `failed` | `String` (errorMessage) | 支付失败回调，返回错误信息 |

## API接口要求

组件需要后端提供以下API接口：

### 1. 创建微信支付订单
```javascript
// POST /wechat_pay/createOrder
// 请求参数
{
  orderId: 'ORDER_123456',     // 订单ID
  totalFee: 1000,              // 支付金额（分）
  body: '商品描述'              // 商品描述
}

// 响应格式
{
  code: 200,
  result: {
    codeUrl: 'weixin://wxpay/bizpayurl?pr=xxx',  // 支付二维码URL
    outTradeNo: 'WX_ORDER_123456'                 // 微信订单号
  },
  message: 'success'
}
```

### 2. 查询支付状态
```javascript
// GET /wechat_pay/queryOrder?outTradeNo=WX_ORDER_123456
// 响应格式
{
  code: 200,
  result: {
    resultCode: 'SUCCESS',    // 业务结果
    returnCode: 'SUCCESS',    // 通信标识
    tradeState: 'SUCCESS'     // 交易状态：SUCCESS-支付成功，CLOSED-已关闭，REVOKED-已撤销
  },
  message: 'success'
}
```

### 3. 取消支付订单（可选）
```javascript
// POST /wechat_pay/cancelOrder
// 请求参数
{
  outTradeNo: 'WX_ORDER_123456'  // 微信订单号
}
```

## 支付流程

1. 用户点击支付按钮
2. 调用创建订单API获取支付二维码
3. 显示二维码供用户扫码
4. 开始轮询查询支付状态（每2秒一次）
5. 用户完成支付后，组件检测到支付成功
6. 触发成功回调，关闭支付弹窗

## 状态说明

组件内部维护以下支付状态：

- `loading`: 正在生成支付二维码
- `pending`: 等待用户扫码支付
- `success`: 支付成功
- `failed`: 支付失败
- `timeout`: 支付超时（5分钟后自动超时）

## 样式定制

组件使用了项目的主色调 `#0A2463`，如需自定义样式，可以通过CSS变量或深度选择器进行修改：

```scss
// 自定义主色调
.wechat-payment {
  --primary-color: #your-color;
}

// 深度选择器修改样式
:deep(.wechat-payment) {
  .payment-amount {
    color: #your-color;
  }
}
```

## 注意事项

1. **金额单位**：组件内部金额以分为单位，显示时会自动转换为元
2. **轮询频率**：默认每2秒轮询一次支付状态，可根据需要调整
3. **超时时间**：默认5分钟超时，可在组件内部修改 `countdown` 初始值
4. **错误处理**：建议在业务层面添加网络异常处理
5. **移动端适配**：组件已适配移动端，二维码会自动缩小

## 完整示例

参考 `src/views/user/PaymentExample.vue` 文件查看完整的使用示例。

## 技术栈

- Vue 3 + Composition API
- Element Plus UI框架
- QRCode.js 二维码生成库
- SCSS样式预处理

## 浏览器兼容性

- Chrome 70+
- Firefox 63+
- Safari 12+
- Edge 79+

## 参考资料

- [微信支付官方文档](https://pay.weixin.qq.com/wiki/doc/api/index.html)
- [H5微信支付、PC端微信支付 - CSDN博客](https://blog.csdn.net/WANGLING0108/article/details/133808856) 