uniapp实现微信扫二维码进行核销

效果图：

1、生成二维码

我这里用的是uniapp插件市场里的qrcode插件

1. 先引入插件：

 import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'

2. 微信扫描二维码跳转页面，可以参考下面代码：

<uqrcode :ref="item.skuName" :canvas-id="item.skuName" :value="`https://shop.gengduoke.com/#/pages/payment/payment?barCode=${item.barCode}&goodsId=${item.goodsId}&outId=${item.outId}&orderId=${item.orderId}&status=${item.status}&skuName=${item.skuName}`"></uqrcode>

<template>
    <view>
        <u-navbar
                    title="核销"
                    @rightClick="rightClick"
                    :autoBack="true"
                >
                </u-navbar>
        <view class="one">
            <view style="margin-top: 40px;">
                <view style="margin-top: 20px;" v-for="item in list">
                    <view class="twocode">
                        <view>{{item.skuName}}</view>
                        <view style="font-size: 14px; margin-top: 10px; color: #888;">{{item.firstTimeDate}}至{{item.lastTimeDate}}</view>
                    </view> 
                    <view class="code">
                        <view style="margin-left: 80px; margin-top: 20px; position: relative;">
                            <view v-show="item.status == 1" style="position: absolute; top: 0; left: 0; width: 200px; height: 200px; z-index: 10; background-color: rgba(148, 148, 148, 0.8);"></view>
                            <uqrcode :ref="item.skuName" :canvas-id="item.skuName" :value="`https://shop.gengduoke.com/#/pages/payment/payment?barCode=${item.barCode}&goodsId=${item.goodsId}&outId=${item.outId}&orderId=${item.orderId}&status=${item.status}&skuName=${item.skuName}`"></uqrcode>
                        </view>
                        <view style="margin-top: 20px; display: flex; justify-content: center; align-items: center;">
                            <view style=" font-size: 18px; color: #888; margin-right: 10px; letter-spacing: 3px;">卷码</view>
                            <view v-show="item.status == 0" style="font-size: 18px; letter-spacing: 2px;">{{item.barCode}}</view>
                            <view v-show="item.status == 1" style="font-size: 18px; letter-spacing: 2px; text-decoration:line-through;">{{item.barCode}}</view>
                        </view>
                    </view>
                    <view class="zz">转赠</view>
                </view>
            </view>
            <view class="notice">
                <view style="font-size: 16px; margin-bottom: 10px;">使用须知</view>
                <view>{{purchaseNotes}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'
    export default {
        data() {
            return {
                 xx:'',
                 zzbb:'',
                 list:[],
                 purchaseNotes:'',
            }
        },
        async onLoad(yy) {
             const pages = getCurrentPages();
             const currentPage = pages[pages.length - 1]; //当前页面的全部信息
             const route = currentPage.route; //当前路由的路径 pages/login/login
             const options = currentPage.options; //url里面的参数json类型
             this.xx = options.orderId;
             this.zzbb = options.merchantId;
             let ss = await this.$myRequest({
                 url:'/index/out/listByOrderId',
                 data:{orderId: options.orderId, merchantId: options.merchantId}
             })
             this.list = ss.data.date;
             ss.data.date.forEach((item) => {
                 this.purchaseNotes = item.purchaseNotes;
             })
        },
        methods: {
            
        }
    }
</script>

<style lang="scss">
    .one {
        padding: 20px;
    }
    .twocode {
        margin-bottom: 30px;
    }
    .code {
        text-align: center;
        background-color: #f4f4f4;
        padding: 20px 0;
    }
    .zz {
        margin-top: 30px; 
        border: 1px solid #888; 
        display: inline-block;
        margin-left: 50%;
        transform: translateX(-50%);
        padding: 5px 50px;
        font-size: 14px;
    }
    .notice {
        font-size: 12px;
        line-height: 20px;
        background-color: #f4f4f4;
        margin-top: 30px;
        padding: 10px;
    }
</style>

2、核销页面

<template>
    <view>
        <view v-if="status == 0">
            <view>这是核销页面</view>
            <view>
                <u-button type="primary" @click="hx">核销</u-button>
            </view>
        </view>
        <view v-else>该商品已经被核销了</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                payment: '',
                barCode: '',
                outId: '',
                orderId: '',
                goodsId: '',
                codee: '',
                status: '',
                show: true,
                title:'',
            }
        },
        async onLoad() {
            const pages = getCurrentPages();
            const currentPage = pages[pages.length - 1]; //当前页面的全部信息
            const route = currentPage.route; //当前路由的路径 pages/login/login
            const options = currentPage.options; //url里面的参数json类型
            this.barCode = options.barCode;
            this.orderId = options.orderId;
            this.outId = options.outId;
            this.goodsId = options.goodsId;
            this.status = options.status;
            this.title = options.skuName;
            }
        },
        methods: {
        async hx() {
            this.show = true;
            await this.$myRequest({
                        url: 'index/out/cancelAfterVerification',
                        method: 'post',
                        data: {
                            goodsId: this.goodsId,
                            outId: this.outId,
                            orderId: this.orderId,
                            barCode: this.barCode
                        }
                    })
                    .then((res) => {
                        uni.showModal({
                            title: `${this.title}`,
                            content: `${res.data.msg}`,
                            showCancel: false
                        });
                    })
                    .catch((err) => {
                        alert(err);
                        console.log(err);
                    })
            },
        }
    }
</script>

<style>
</style>

到这，就完成了微信扫二维码进行核销。