效果圖：

1、生成二維碼

我這里用的是uniapp插件市場里的qrcode插件

先引入插件：

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

微信掃描二維碼跳轉頁面，可以參考下面代碼：

<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-navbartitle="核銷"@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/loginconst 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/loginconst 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>

到這，就完成了微信掃二維碼進行核銷。

總結

以上是生活随笔為你收集整理的uniapp实现微信扫二维码进行核销的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。