orderFood/oederFoodVue/HOW_TO_CHANGE_QRCODE.md

如何更换支付二维码图片

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

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

方法二：修改配置文件

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

1. 打开 oederFoodVue/js/app.js

2. 找到第5行的配置：

   const PAYMENT_QRCODE_IMAGE = 'images/payment-qrcode.png';
   

3. 修改为你的图片路径：

   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：

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

故障排除

图片不显示

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

图片变形

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

更换后不生效

• 清除浏览器缓存（Ctrl+F5 强制刷新）
• 检查图片名称是否正确
• 检查配置文件是否保存

示例

使用微信收款码

const PAYMENT_QRCODE_IMAGE = 'images/wechat-pay.png';

使用支付宝收款码

const PAYMENT_QRCODE_IMAGE = 'images/alipay.png';

使用多个二维码（根据金额切换）

可以在 showPaymentQRCode() 函数中添加逻辑：

function showPaymentQRCode(orderData) {
    // ...
    let qrcodePath = PAYMENT_QRCODE_IMAGE;
    
    // 根据金额选择不同的二维码
    if (orderData.finalAmount > 100) {
        qrcodePath = 'images/payment-large.png';
    }
    
    qrcodeImage.src = qrcodePath;
    // ...
}