diff --git a/package.json b/package.json index eaf46fc..e1aec15 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "@tarojs/taro": "3.6.34", "dayjs": "^1.11.10", "pinia": "^2.1.7", + "uqrcodejs": "^4.0.7", "vue": "^3.3.9" }, "devDependencies": { diff --git a/src/pages/users/order_list/index.vue b/src/pages/users/order_list/index.vue index e353967..10d9f45 100644 --- a/src/pages/users/order_list/index.vue +++ b/src/pages/users/order_list/index.vue @@ -5,6 +5,7 @@ import Pay from '@/components/Pay.vue'; import {getActiveOrderList, deleteActiveOrder} from '@/api/goods'; import {getOrderStatistics} from '@/api/order'; import {getUserPoint} from '@/api/admin'; +import UQRCode from 'uqrcodejs'; const tabValue = ref(0); @@ -201,7 +202,21 @@ const t_id = ref(); const openCode = item => { if (item.status === 2) return; - url.value = `https://api.pwmqr.com/qrcode/create?url=${item.oid}`; + // url.value = `https://api.pwmqr.com/qrcode/create?url=${item.oid}`; + // 获取uQRCode实例 + const qr = new UQRCode(); + // 设置二维码内容 + qr.data = item.oid; + // 设置二维码大小,必须与canvas设置的宽高一致 + qr.size = 200; + // 调用制作二维码方法 + qr.make(); + // 获取canvas元素 + const ctx = Taro.createCanvasContext('qrcode'); + // 设置uQRCode实例的canvas上下文 + qr.canvasContext = ctx; + // 调用绘制方法将二维码图案绘制到canvas上 + qr.drawCanvas(); isShowCode.value = true; t_id.value = setInterval(() => { checkStatus(item); @@ -371,7 +386,14 @@ const closed = () => { @closed="closed"> 核销码 - + + + + diff --git a/src/pages/users/order_list_detail/index.vue b/src/pages/users/order_list_detail/index.vue index f9ccad5..a15a646 100644 --- a/src/pages/users/order_list_detail/index.vue +++ b/src/pages/users/order_list_detail/index.vue @@ -204,7 +204,14 @@ @closed="closed"> 核销码 - + + + + ({}); +const qrcode = ref(); + const type = ref(''); const url = ref(''); @@ -347,7 +357,21 @@ const t_id = ref(); const openCode = () => { if (goodInfo.value.status === 2) return; - url.value = `https://api.pwmqr.com/qrcode/create?url=${goodInfo.value.oid}`; + // 获取uQRCode实例 + const qr = new UQRCode(); + // 设置二维码内容 + qr.data = goodInfo.value.oid; + // 设置二维码大小,必须与canvas设置的宽高一致 + qr.size = 200; + // 调用制作二维码方法 + qr.make(); + // 获取canvas元素 + const ctx = Taro.createCanvasContext('qrcode'); + // 设置uQRCode实例的canvas上下文 + qr.canvasContext = ctx; + // 调用绘制方法将二维码图案绘制到canvas上 + qr.drawCanvas(); + // url.value = `https://api.pwmqr.com/qrcode/create?url=${goodInfo.value.oid}`; isShowCode.value = true; t_id.value = setInterval(() => { getOrderDetail(); @@ -540,8 +564,14 @@ page { } .qrcode { - width: 300px; - height: 300px; + width: 370px; + height: 370px; + padding: 10px; + + // canvas { + // width: calc(100% - 20px); + // height: calc(100% - 20px); + // } } .nut-button {