shop-applet/components/tki-barcode/tki-barcode.vue

<template xlang="wxml" minapp="mpvue">
	<view class="tki-barcode">
		<!-- #ifndef MP-ALIPAY -->
		<canvas class="tki-barcode-canvas" :canvas-id="cid" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}" />
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<canvas v-if="val === '' || defaultOpations.text === val" :id="cid" :width="canvasWidth" :height="canvasHeight" class="tki-barcode-canvas" />
		<!-- #endif -->
		<image v-show="show" :src="result" :style="{width:canvasWidth+'px',height:canvasHeight+'px', maxWidth: '100%'}" />
	</view>
</template>

<script>
// const barcode = require('./barcode.js');
import barCode from "./barcode.js"
const opations = {
	// format: "CODE128",//选择要使用的条形码类型 微信支持的条码类型有 code128\code39\ena13\ean8\upc\itf14\
	width: 4,//设置条之间的宽度
	height: 120,//高度
	displayValue: true,//是否在条形码下方显示文字
	// text: "1234567890",//覆盖显示的文本
	textAlign: "center",//设置文本的水平对齐方式
	textPosition: "bottom",//设置文本的垂直位置
	textMargin: 0,//设置条形码和文本之间的间距
	fontSize: 24,//设置文本的大小
	fontColor: "#000000",//设置文本的颜色
	lineColor: "#000000",//设置条形码的颜色
	background: "#FFFFFF",//设置条形码的背景色
	margin: 0,//设置条形码周围的空白边距
	marginTop: undefined,//设置条形码周围的上边距
	marginBottom: undefined,//设置条形码周围的下边距
	marginLeft: undefined,//设置条形码周围的左边距
	marginRight: undefined,//设置条形码周围的右边距
}
export default {
	name: "tkiBarcode",
	props: {
		show: {
			type: Boolean,
			default: true
		},
		cid: {
			type: String,
			default: 'tki-barcode-canvas'
		},
		unit: {
			type: String,
			default: 'upx'
		},
		val: {
			type: String,
			default: ''
		},
		format: {
			type: String,
			default: 'CODE128'
		},
		opations: {
			type: Object,
			default: function () {
				return {}
			}
		},
		onval: {
			type: Boolean,
			default: false
		},
		loadMake: {
			type: Boolean,
			default: true
		},
	},
	data() {
		return {
			result: '',
			canvasWidth: 0,
			canvasHeight: 0,
			defaultOpations: Object.assign({}, opations)
		}
	},
	onUnload: function () {
	},
	methods: {
		_makeCode() {
			let that = this
			// 合并参数
			Object.assign(this.defaultOpations, this.opations)
			if (that.unit == "upx") {
				/* if (that.defaultOpations.width) {
					that.defaultOpations.width = uni.upx2px(that.defaultOpations.width)
				} */
				if (that.defaultOpations.height) {
					that.defaultOpations.height = uni.upx2px(that.defaultOpations.height)
				}
				if (that.defaultOpations.fontSize) {
					that.defaultOpations.fontSize = uni.upx2px(that.defaultOpations.fontSize)
				}
			}
			if (that._empty(that.defaultOpations.text)) {
				that.defaultOpations.text = that.val
			}
			if (that._empty(that.defaultOpations.format)) {
				that.defaultOpations.format = that.format
			}
			// console.log(JSON.stringify(that.defaultOpations))
			this.$nextTick(() => {
				setTimeout(() => {
					new barCode(that, that.cid, that.defaultOpations,
						function (res) { // 生成条形码款高回调
							that.canvasWidth = res.width
							that.canvasHeight = res.height
						},
						function (res) { // 生成条形码的回调
							// 返回值
							that._result(res)
							// 重置默认参数
							that.defaultOpations = opations
						},
					);
				}, 100)
			})
		},
		_clearCode() {
			this._result('')
		},
		_saveCode() {
			let that = this;
			if (this.result != "") {
				uni.saveImageToPhotosAlbum({
					filePath: that.result,
					success: function () {
						uni.showToast({
							title: '条形码保存成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			}
		},
		_result(res) {
			this.result = res;
			this.$emit('result', res)
		},
		_empty(v) {
			let tp = typeof v,
				rt = false;
			if (tp == "number" && String(v) == "") {
				rt = true
			} else if (tp == "undefined") {
				rt = true
			} else if (tp == "object") {
				if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
			} else if (tp == "string") {
				if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
			} else if (tp == "function") {
				rt = false
			}
			return rt
		}
	},
	watch: {
		val(n, o) {
			this.defaultOpations.text = n
			if (this.onval) {
				if (n != o && !this._empty(n)) {
					this._makeCode()
				}
			}
		},
		opations: {
			handler(n,o){
				if (this.onval) {
					if (!this._empty(n)) {
						this._makeCode()
					}
				}
			},
			deep: true
		}
	},
	mounted () {
		if (this.loadMake) {
			if (!this._empty(this.val)) {
				this._makeCode()
			}
		}
	},
}
</script>
<style>
.tki-barcode {
	position: relative;
}
.tki-barcode-canvas {
	position: fixed!important;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}
</style>