效果图：
1、生成二维码
- 先引入插件：
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-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>
到这，就完成了微信扫二维码进行核销。
