mashangyoujiu/Public/Retail/js/customer-style.js

/**
 * 自定义价牌打印的展示样式
 */

// 注册一个全局自定义指令---条形码
Vue.directive('barcode', function (el, binding) {
    let data = binding.value;
    if (data.value) {
        let options = {
            width: data.lineWidth,//设置条之间的宽度
            height: data.height,//高度
            displayValue: data.showText == 1 ? true : false,//是否在条形码下方显示文字
            text: data.value,//覆盖显示的文本
            textMargin: 0,//设置条形码和文本之间的间距
            fontSize: data.textSize && data.textSize > 12 ? data.textSize : 12,//设置文本的大小
            lineColor: data.lineColor,//设置条和文本的颜色
            background: data.backgroundColor,//背景颜色
            margin: 0,//设置条形码周围的空白边距
            format: "EAN13",//选择要使用的条形码类型
            flat: true,
        };
        try {
            JsBarcode(el, data.value, options);
        } catch (e) {
            options.format = 'CODE128';
            JsBarcode(el, data.value, options);
        }
    }
});

// 注册一个全局自定义指令---二维码
Vue.directive('qrcode', function (el, binding) {
    el.innerHTML = "";
    let data = binding.value;
    // console.log(data);
    if (data.value) {
        new QRCode(el, {
            text: data.value,
            width: data.height,
            height: data.height,
            colorDark: data.colorDark,
            colorLight: data.colorLight,
            correctLevel: QRCode.CorrectLevel.H
        });
    }
});

//注册组件---公共样式展示
Vue.component('component-style', {
    props: ['customerData', 'active', 'name', 'index'],
    template: `<component :is="component"
                         :active="active"
                         :index="index"
                         :customer-data="customerData"
                         @move-start="startEdit1"
                          v-if="component" />`,
    data() {
        return {
            component: null,
            styleData: [],
        }
    },
    mounted() {
        this.component = null;
        this.component = `customer-style-${this.name}`;
    },
    methods: {
        startEdit1(e) {
            this.$emit('move-start', e, this.index);
        },
    }
});

//注册组件---矩形框
Vue.component('customer-style-view', {
    template: `<div :style="boxStyle" @mousedown.stop="mouseStart($event)"></div>`,
    props: ['customerData', 'active', 'index'],
    computed: {
        boxStyle() {
            let css = [
                `width:${this.customerData.width}px`,
                `height:${this.customerData.height}px`,
                `left:${this.customerData.left}px`,
                `top:${this.customerData.top}px`,
                `background-color:${this.customerData.backgroundColor}`,
                `box-sizing:border-box`,
                `position: absolute`,
            ];
            if (this.active) {
                css.push(`border:1px solid #409EFF`);
            }
            return css.join(';');
        },
    },
    methods: {
        mouseStart(e) {
            this.$emit('move-start', e, this.index);
        },
    }
});

//注册组件---文本
Vue.component('customer-style-text', {
    template: `<div :style="boxStyle" @mousedown.stop="mouseStart($event)">{{customerData.value}}</div>`,
    props: ['customerData', 'active', 'index'],
    computed: {
        boxStyle() {
            let css = [
                `width:${this.customerData.width}px`,
                `height:${this.customerData.height}px`,
                `line-height:${this.customerData.lineHeight}px`,
                `font-size:${this.customerData.fontSize}px`,
                `left:${this.customerData.left}px`,
                `top:${this.customerData.top}px`,
                `color:${this.customerData.color}`,
                `box-sizing:border-box`,
                `position: absolute`,
            ];
            if (this.customerData.whiteSpace) {
                //换行
                css.push(`white-space:pre-wrap;word-wrap:break-word;word-break:break-all`);
            } else {
                //不换行
                css.push(`white-space: nowrap;overflow:hidden;text-overflow:ellipsis`);
            }
            if (this.active) {
                css.push(`border:1px solid #409EFF`);
            }
            return css.join(';');
        },
    },
    methods: {
        mouseStart(e) {
            this.$emit('move-start', e, this.index);
        },
    },
});

//注册组件---条形码
Vue.component('customer-style-barcode', {
    template: `<div :style="boxStyle" @mousedown.stop="mouseStart($event)">
                        <img v-if="customerData.value" ref="img" v-barcode="customerData">
                    <div style="width: 100%;height: 100%;position: absolute;top:0;left:0"></div>
               </div>`,
    props: ['customerData', 'active', 'index'],
    computed: {
        boxStyle() {
            let css = [
                `left:${this.customerData.left}px`,
                `top:${this.customerData.top}px`,
                `box-sizing:border-box`,
                `position: absolute`,
                `font-size: 0`,
                // `transform: scale(0.7)`,
            ];
            if (this.active) {
                css.push(`border:1px solid #409EFF`);
            }
            return css.join(';');
        },
    },
    methods: {
        mouseStart(e) {
            this.$emit('move-start', e, this.index);
        },
    },
});

//注册组件---二维码
Vue.component('customer-style-qrcode', {
    template: `<div :style="boxStyle" @mousedown.stop="mouseStart($event)" v-qrcode="customerData"></div>`,
    props: ['customerData', 'active', 'index'],
    computed: {
        boxStyle() {
            let css = [
                `width:${this.customerData.width}px`,
                `height:${this.customerData.height}px`,
                `left:${this.customerData.left}px`,
                `top:${this.customerData.top}px`,
                `box-sizing:border-box`,
                `position: absolute`,
            ];
            if (this.active) {
                css.push(`border:1px solid #409EFF`);
            }
            return css.join(';');
        },
    },
    methods: {
        mouseStart(e) {
            this.$emit('move-start', e, this.index);
        },
    },
});

//注册组件---图片
Vue.component('customer-style-image', {
    template: `<div :style="boxStyle" @mousedown="mouseStart($event)">
                        <img v-if="customerData.image" style="width: 100%;height: 100%" :src="customerData.image" alt="图片">
                        <div style="width: 100%;height: 100%;position: absolute;top:0;left:0"></div>
                    </div>`,
    props: ['customerData', 'active', 'index'],
    computed: {
        boxStyle() {
            let css = [
                `width:${this.customerData.width}px`,
                `height:${this.customerData.height}px`,
                `left:${this.customerData.left}px`,
                `top:${this.customerData.top}px`,
                `border-radius:${this.customerData.borderRadius}%`,
                `box-sizing:border-box`,
                `overflow:hidden`,
                `position: absolute`,
            ];
            if (this.active) {
                css.push(`border:1px solid #409EFF`);
            }
            return css.join(';');
        },
    },
    methods: {
        mouseStart(e) {
            this.$emit('move-start', e, this.index);
        },
        getMiniQrCode() {
            // console.log('getMiniQrCode');
            $.ajax({
                url: '/index.php/Retail/PriceTag/getMiniQrCode',
                type: 'post',
                data: {
                    goods_id: this.customerData.value,//测试参数
                },
                success: (res) => {
                    if (res.status == 1) {
                        this.customerData.image = res.data.file_path;
                    } else {
                        this.$alert(res.msg ? res.msg : '请求发生错误，请稍后重试', '错误提示', {
                            confirmButtonText: '确定',
                            callback: action => {

                            }
                        });
                    }
                },
                error: (res) => {
                    console.log(res);
                    this.$alert('请求发生错误，请稍后重试', '错误提示', {
                        confirmButtonText: '确定',
                        callback: action => {

                        }
                    });
                }
            })
        },
    },
    created() {
        if (this.customerData.valueType == 2 && this.customerData.imageType == 2 && this.customerData.value) {
            this.getMiniQrCode();
        }
    },
});