145 lines
3.3 KiB
Vue
145 lines
3.3 KiB
Vue
<template>
|
||
<view
|
||
:style="`${tools._style([customStyle])}; width:${containerSize}px; height: ${containerSize}px; background-color: ${bgColor};`"
|
||
:class="`${classPrefix} ${borderless ? prefix + '-' + 'borderless' : ''} ${tClass}`"
|
||
>
|
||
<QrcodeCanvas
|
||
ref="qrcodeCanvas"
|
||
:t-class="tClassCanvas"
|
||
:size="size"
|
||
:value="value"
|
||
:level="level"
|
||
:color="color"
|
||
:bg-color="bgColor"
|
||
:icon="icon"
|
||
:icon-size="iconSize"
|
||
@drawError="handleDrawError"
|
||
@drawCompleted="handleDrawCompleted"
|
||
/>
|
||
|
||
<view
|
||
v-if="showMask && canvasReady"
|
||
:class="`${prefix}-mask`"
|
||
>
|
||
<QrcodeStatus
|
||
:status="status"
|
||
:status-render="statusRender"
|
||
@refresh="handleRefresh"
|
||
>
|
||
<template #statusRender>
|
||
<slot name="statusRender" />
|
||
</template>
|
||
</QrcodeStatus>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import QrcodeCanvas from './components/qrcode-canvas/qrcode-canvas.vue';
|
||
import QrcodeStatus from './components/qrcode-status/qrcode-status.vue';
|
||
import { prefix } from '../common/config';
|
||
import props from './props';
|
||
import { uniComponent } from '../common/src/index';
|
||
import tools from '../common/utils.wxs';
|
||
|
||
const name = `${prefix}-qrcode`;
|
||
|
||
export default uniComponent({
|
||
name,
|
||
options: {
|
||
styleIsolation: 'shared',
|
||
},
|
||
externalClasses: [
|
||
`${prefix}-class`,
|
||
`${prefix}-class-canvas`,
|
||
],
|
||
components: {
|
||
QrcodeCanvas,
|
||
QrcodeStatus,
|
||
},
|
||
props: {
|
||
...props,
|
||
},
|
||
data() {
|
||
return {
|
||
prefix,
|
||
tools,
|
||
showMask: false,
|
||
classPrefix: name,
|
||
canvasReady: false,
|
||
canvasNode: null,
|
||
};
|
||
},
|
||
computed: {
|
||
// 容器尺寸 = Canvas 尺寸 + padding * 2
|
||
// padding 为 12px，所以容器需要额外 24px
|
||
containerSize() {
|
||
return this.size + 24;
|
||
},
|
||
},
|
||
watch: {
|
||
status: {
|
||
handler(newVal) {
|
||
this.showMask = newVal !== 'active';
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
mounted() {
|
||
this.initCanvas();
|
||
},
|
||
methods: {
|
||
async initCanvas() {
|
||
// 获取 canvas 实例
|
||
const canvasComp = this.$refs.qrcodeCanvas;
|
||
if (canvasComp) {
|
||
const canvas = await canvasComp.getCanvasNode();
|
||
this.canvasNode = canvas;
|
||
}
|
||
},
|
||
|
||
// 用于外部调用，重新绘制二维码
|
||
init() {
|
||
const canvasComp = this.$refs.qrcodeCanvas;
|
||
if (canvasComp) {
|
||
canvasComp.initCanvas();
|
||
}
|
||
},
|
||
|
||
handleDrawCompleted() {
|
||
this.canvasReady = true;
|
||
},
|
||
handleDrawError(err) {
|
||
console.error('二维码绘制失败', err);
|
||
},
|
||
handleRefresh() {
|
||
this.$emit('refresh');
|
||
},
|
||
// 二维码下载方法
|
||
async handleDownload() {
|
||
if (!this.canvasNode) {
|
||
console.error('未找到 canvas 节点');
|
||
return;
|
||
}
|
||
|
||
// 注意：此方法在非小程序环境需要适配
|
||
if (typeof wx !== 'undefined' && uni.canvasToTempFilePath) {
|
||
uni.canvasToTempFilePath({
|
||
canvas: this.canvasNode,
|
||
success: (res) => {
|
||
uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath });
|
||
},
|
||
fail: (err) => {
|
||
console.error('canvasToTempFilePath failed', err);
|
||
},
|
||
});
|
||
}
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import './qrcode.css';
|
||
</style>
|