oil-station/gasStation-uni/uni_modules/wmf-code/components/w-barcode/w-barcode.vue

<template>
	<view @longtap.stop="longtap">
		<canvas 
			:width="info.orient == 'vertical' ? info.destHeight : info.destWidth " 
			:height="info.orient == 'vertical' ? info.destWidth : info.destHeight" 
			:canvas-id="item.id" 
			:id="item.id" 
			:style="{width:info.orient == 'vertical' ? info.height : info.width,height: info.orient == 'vertical' ? info.width : info.height}" 
			v-for="item in info.listCode" 
			:key="item.id"
			@error="handleError"></canvas>
	</view>
</template>
 <!-- #ifdef  VUE3 -->
<script setup name="WBarcode">
	import { 
		reactive,
		watch,
		onMounted,
		nextTick,
		getCurrentInstance,
		defineExpose
	} from 'vue';
	import { 
		BarCode, 
		GetImg,
		GetPixelRatio,
		GetPx ,
	} from '../../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 HSize = opt.text ? opt.text.size || 40 +  opt.text.padding || 20 : 0;
	let info = reactive({
		id: getUUid(),
		destWidth: GetPixelRatio() * GetPx(opt.width) + 'px',
		destHeight: GetPixelRatio() * GetPx(opt.height + HSize) + 'px',
		width: GetPx(opt.width) + 'px',
		height: GetPx(opt.height + HSize) + 'px',
		orient: opt.orient || 'horizontal',
		listCode: []
	})
	onMounted(()=>{
		SpecialTreatment(opt);
		nextTick(()=>{
			generateCode(opt)
		})
	});
	watch(()=>props.options,(val)=>{
		SpecialTreatment(val);
		const HSize = val.text ? val.text.size || 40 +  val.text.padding || 20 : 0;
		info.destWidth= GetPixelRatio() * GetPx(val.width) + 'px',
		info.destHeight= GetPixelRatio() * GetPx(val.height + HSize) + 'px',
		info.orient = val.orient || 'horizontal',
		info.width= GetPx(val.width) + 'px',
		info.height= GetPx(val.height + HSize) + 'px',
		setTimeout(()=>{
			generateCode(val)
		},100)
	},{ deep: true })
	const generateCode = (val)=> {
		try{
			const parameter = {...val,orient: info.orient,source: platform(),id: info.id,ctx: that};
			BarCode(parameter,(res)=>{
		  		emits('generate',res)
		  	})
		}catch(err){console.warn(err)}
	}
	const GetCodeImg = async ()=> {
		try{
		  	return await GetImg({id: info.id,source: platform(),width: opt.orient == 'vertical' ? opt.height : opt.width,height: opt.orient == 'vertical' ? opt.width : opt.height,ctx: that});
		}catch(e){console.warn(e)}
	};
	const SpecialTreatment = (val) => {//渲染多个canvas特殊处理
		let obj = deepClone(val);
		obj.id = info.id;
		info.listCode = [obj];
	};
	// 长按事件
	const longtap = (e)=>{
		emits('press',e)
	}
	// canvas创建错误 触发
	const handleError = (e)=>{
		emits('error',e.detail)
	}
	defineExpose({
	    GetCodeImg
	})

</script>
<!-- #endif -->

<!-- #ifndef VUE3 -->
<script>
	import { BarCode, GetImg,GetPixelRatio,GetPx } from '../../js_sdk/index.js';
	import { getUUid, deepClone,platform } from '../../common/helper.js'
	export default {
		name: 'WBarcode',
		props:{
			options:{
				type: Object,
				required: true,
				default: () =>{
					return {
						
					}
				}
			}
		},
		data () {
			return {
				info:{
					destHeight: 0,
					destWidth: 0,
					width: 0,
					height: 0,
					listCode: [],
					orient: 'horizontal'
				},
				id: getUUid()
			}
		},
		mounted() {
			const HSize = this.options.text ? ((this.options.text.size || 40) + ( this.options.text.padding || 20)) : 0;
			this.info.height = GetPx(this.options.height + HSize) + 'px';
			this.info.orient = this.options.orient || 'horizontal';
			this.info.width = GetPx(this.options.width) + 'px';
			this.info.destHeight = GetPx(this.options.height + HSize) * GetPixelRatio() + 'px';
			this.info.destWidth = GetPx(this.options.width) * GetPixelRatio() + 'px';
			this.SpecialTreatment(this.options)
			this.$nextTick(()=>{
				this.generateCode();
			})
		},
		watch: {
			options:{
				deep: true,
				handler (val) {
					const HSize = val.text ? val.text.size || 40 +  val.text.padding || 20 : 0;
					this.info.height = GetPx(val.height + HSize) + 'px';
					this.info.width = GetPx(val.width) + 'px';
					this.info.destHeight = GetPx(val.height + HSize) * GetPixelRatio() + 'px';
					this.info.destWidth = GetPx(val.width) * GetPixelRatio() + 'px';
					this.info.orient = val.orient || 'horizontal'
					this.SpecialTreatment(val)
					setTimeout(()=>{// h5平台动态改变canvas大小
						this.generateCode();
					},100)
				}
			}
		},
		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,orient: this.info.orient,source: platform(),id: this.id,ctx: this};
					console.log(parameter)
					BarCode(parameter,(res)=>{
						this.$emit('generate',res)
					})
				}catch(err){console.log(err)}
			},
			async GetCodeImg (){
				try{
					const pars = {
						id: this.id,
						source: platform(),
						width: this.options.orient == 'vertical' ? this.info.height : this.info.width,
						height: this.options.orient == 'vertical' ? this.info.width : this.info.height,
						ctx: this,
					}
					return  await GetImg(pars);
				}catch(e){console.warn(e)}
			}
		}
	}
</script>
<!-- #endif -->