w-qrcode.vue 4.36 KB
Newer Older
qd01's avatar
qd01 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
<template>
	<view @longtap.stop="longtap">
		<canvas 
			:width="info.destWidth" 
			:height="info.destHeight" 
			:canvas-id="item.id" 
			:id="item.id" 
			:style="{width:info.width,height: info.height}" 
			v-for="item in info.listCode" 
			:key="item.id" 
			@error="handleError"></canvas>
	</view>
</template>
 <!-- #ifdef  VUE3 -->
<script setup name="WQrcode">
	import {reactive, watch,onMounted,nextTick,getCurrentInstance ,defineExpose } from 'vue';
	import { QRCode, GetImg,GetPixelRatio,GetPx } from '@/uni_modules/wmf-code/js_sdk/index.js';
	import { getUUid, deepClone,platform } from '../../common/helper.js'
	//定义props
	const props = defineProps({
	    options:{
	    	type: Object,
	    	required: true,
	    	default: () =>{
	    	  	return {}
	    	}
	    }
	});
	const emits = defineEmits(['generate','press','error'])
	const opt = props.options;
	const that = getCurrentInstance();
	const SIZE = GetPx(opt.size);
	let info = reactive({
		destHeight: SIZE * GetPixelRatio() + 'px',
		destWidth: SIZE * GetPixelRatio() + 'px',
		width: SIZE + 'px',
		height: SIZE + 'px',
		listCode:[],
		id: getUUid(),  
	})
	onMounted(()=>{
		SpecialTreatment(opt);
		nextTick(()=>{
			generateCode(opt)
		})
	});
	watch(()=>props.options,(val)=>{
		SpecialTreatment(val);
		const SIZE_Dynamic = GetPx(val.size);
		info.destWidth= GetPixelRatio() * SIZE_Dynamic + 'px',
		info.destHeight= GetPixelRatio() * SIZE_Dynamic + 'px',
		info.width= SIZE_Dynamic + 'px',
		info.height= SIZE_Dynamic + 'px',
			setTimeout(()=>{
				generateCode(val)
		},50)
	},{ deep: true })
	const SpecialTreatment =(val)=> {//渲染多个canvas特殊处理
		let obj = deepClone(val);
		obj.id = info.id;
		info.listCode = [obj]
	};
	const generateCode = (val)=>{
		try{
			const parameter = {...val,source: platform(),id: info.id,ctx: that};
			QRCode(parameter,(res)=>{
			   	emits('generate',res)
			})
		}catch(err){console.warn(err)}
	};
	const GetCodeImg = async ()=> {
		try{
		   	return await GetImg({id: info.id,source: platform(),width: opt.width,height: opt.height,ctx: that});
		}catch(e){console.warn(e)}
	};
	// 长按事件
	const longtap = (e)=>{
		emits('press',e)
	}
	// canvas创建错误 触发
	const handleError = (e)=>{
		emits('error',e.detail)
	}
	defineExpose({
	    GetCodeImg
	})
</script>
<!-- #endif -->

<!-- #ifndef VUE3 -->
<script>
	import { QRCode, GetImg,GetPixelRatio,GetPx } from '@/uni_modules/wmf-code/js_sdk/index.js';
	import { getUUid, deepClone,platform } from '../../common/helper.js'
	export default {
		name: 'WQrcode',
		props:{
			options:{
				type: Object,
				required: true,
				default: () =>{
					return {
						
					}
				}
			}
		},
		data () {
			return {
				info:{
					destHeight: 0,
					destWidth: 0,
					width: 0,
					height: 0,
					listCode:[],
				},
				destHeight: 0,
				destWidth: 0,
				width: 0,
				height: 0,
				listCode:[],
				id: getUUid(),
			}
		},
		mounted() {
			this.info.height = this.info.width = GetPx(this.options.size) + 'px';
			this.info.destHeight = this.info.destWidth = GetPx(this.options.size) * GetPixelRatio() + 'px';
			this.SpecialTreatment(this.options)
			this.$nextTick(()=>{
				this.generateCode();
			})
		},
		watch: {
			options:{
				deep: true,
				handler (val) {
					this.info.height = this.info.width = GetPx(val.size) + 'px';
					this.info.destHeight = this.info.destWidth = GetPx(val.size) * GetPixelRatio() + 'px';
					this.SpecialTreatment(val)
					setTimeout(()=>{// h5平台动态改变canvas大小
						this.generateCode();
					},50)
				}
			}
		},
		methods: {
			longtap (e){// 长按事件
				this.$emit('press',e);
			},
			handleError (e) {//当发生错误时触发 error 事件,字节跳动小程序与飞书小程序不支持
				this.$emit('error',e.detail)
			},
			SpecialTreatment (val) {//微信小程序渲染多个canvas特殊处理
					let obj = deepClone(val);
					obj.id = this.id;
					this.info.listCode = [obj]
			},
			// 生成二维码
			generateCode () {
				try{
					const parameter = {...this.options,source: platform(),id: this.id,ctx: this};
					QRCode(parameter,(res)=>{
						this.$emit('generate',res)
					})
				}catch(err){console.warn(err)}
			},
			// 获取二维码图片
			async GetCodeImg (){
				try{
					return  await GetImg({id: this.id,source: platform(),width: this.options.size,height: this.options.size,ctx: this});
				}catch(e){console.warn(e)}
			}
		}
	}
</script>
<!-- #endif -->