更新记录

1.0.3（2026-06-22） 下载此版本

修复小程序

1.0.2（2026-06-22） 下载此版本

添加app.json文件

1.0.1（2026-06-22） 下载此版本

1.0.1第一版

平台兼容性

uni-app(5.07)

uni-app x(5.07)

小程序自定义组件的通用使用方式详见：uni-app中使用小程序自定义组件教程

微信/支付宝 核销组件

支持微信小程序和支付宝小程序的统一核销组件。

目录结构

verification-component/
├── pages/
│   ├── index/              # 商家端示例
│   │   ├── index.js
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   └── index.json
│   └── verify/            # 核销组件页面
│       ├── verify.js
│       ├── verify.wxml
│       ├── verify.wxss
│       └── verify.json
├── README.md
└── qrcode-generator.html   # 二维码生成工具

安装

方式一：复制到现有项目

1. 将 pages/index/ 和 pages/verify/ 复制到你的 uni-app 项目
2. 在 pages.json 中添加页面配置

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": { "navigationBarTitleText": "商家端" }
        },
        {
            "path": "pages/verify/verify",
            "style": { "navigationBarTitleText": "核销组件" }
        }
    ]
}

方式二：新建项目

1. HBuilderX 新建 uni-app 项目
2. 删除默认页面，复制上述目录到项目中
3. 配置 pages.json

使用方法

商家端调用

// 微信小程序
wx.navigateTo({
    url: '/pages/verify/verify' +
         '?authorize_code=' + authorizeCode +
         '&stock_id=' + stockId +
         '&out_batch_no=' + outBatchNo,
    events: {
        verifyResult: (result) => {
            console.log('核销结果:', result);
            // result.product_path - 商品路径
        }
    }
});

// 支付宝小程序
my.navigateTo({
    url: '/pages/verify/verify' +
         '?authorize_code=' + authorizeCode +
         '&stock_id=' + stockId
});

// 接收回调（支付宝）
Page({
    verifyResultCallback(result) {
        console.log('核销结果:', result);
    }
});

参数说明

回调结果格式

{
    "errMsg": "verifyCoupon:ok",
    "errcode": 0,
    "platform": "wechat",
    "authorize_code": "1234567890123456",
    "product_id": "P001",
    "product_path": "饮品区/茶饮/柠檬茶",
    "consume_time": 1719000000000
}

二维码测试

打开 qrcode-generator.html 生成测试二维码。

二维码内容格式：

{"authorize_code":"1234567890123456","stock_id":"STK2024060001"}

防重复使用

组件会自动检测核销码状态：

• 查询服务端确认码是否已使用
• 已使用的码显示「已核销」状态，无法再次核销
• 实际项目中需配合服务端实现

测试步骤

1. 打开 qrcode-generator.html 生成二维码
2. 保存二维码图片
3. 在小程序中扫码或手动输入核销码
4. 点击「打开核销组件」
5. 选择商品并确认核销
6. 再次扫码相同码，验证防重机制