# 如何更换支付二维码图片

## 方法一：直接替换图片文件（推荐）

1. 准备你的支付二维码图片（微信/支付宝收款码）
2. 将图片重命名为 `payment-qrcode.png`
3. 放入 `oederFoodVue/images/` 文件夹
4. 刷新页面即可看到新的二维码

## 方法二：修改配置文件

如果你的图片名称不同，可以修改配置：

1. 打开 `oederFoodVue/js/app.js`
2. 找到第5行的配置：
   ```javascript
   const PAYMENT_QRCODE_IMAGE = 'images/payment-qrcode.png';
   ```
3. 修改为你的图片路径：
   ```javascript
   const PAYMENT_QRCODE_IMAGE = 'images/你的图片名称.jpg';
   ```
4. 保存文件并刷新页面

## 图片要求

- **格式**：PNG、JPG、JPEG、GIF 均可
- **尺寸**：建议 200x200 像素或更大（会自动缩放到200x200）
- **位置**：必须放在 `oederFoodVue/images/` 文件夹中

## 生成占位图片

如果暂时没有真实二维码，可以使用占位图：

1. 打开 `oederFoodVue/images/generate-placeholder.html`
2. 点击"下载为 payment-qrcode.png"按钮
3. 将下载的图片放入 `images` 文件夹

## 使用在线二维码

如果图片在网上，可以直接使用URL：

```javascript
const PAYMENT_QRCODE_IMAGE = 'https://example.com/your-qrcode.png';
```

## 故障排除

### 图片不显示
- 检查图片路径是否正确
- 检查图片文件是否存在
- 检查浏览器控制台是否有错误
- 如果图片加载失败，会显示绿色占位图

### 图片变形
- 确保图片是正方形（如200x200）
- CSS已设置 `object-fit: contain` 保持比例

### 更换后不生效
- 清除浏览器缓存（Ctrl+F5 强制刷新）
- 检查图片名称是否正确
- 检查配置文件是否保存

## 示例

### 使用微信收款码
```javascript
const PAYMENT_QRCODE_IMAGE = 'images/wechat-pay.png';
```

### 使用支付宝收款码
```javascript
const PAYMENT_QRCODE_IMAGE = 'images/alipay.png';
```

### 使用多个二维码（根据金额切换）
可以在 `showPaymentQRCode()` 函数中添加逻辑：
```javascript
function showPaymentQRCode(orderData) {
    // ...
    let qrcodePath = PAYMENT_QRCODE_IMAGE;
    
    // 根据金额选择不同的二维码
    if (orderData.finalAmount > 100) {
        qrcodePath = 'images/payment-large.png';
    }
    
    qrcodeImage.src = qrcodePath;
    // ...
}
```