uniapp-gp-printer/pages/index/index.vue

<template>
    <view>
        <button type="default" @click="print">打印</button>
        <iip-gp-printer ref="printer"></iip-gp-printer>
        <view class="bottom-btn-group">
            <button class="cu-btn" @click="$u.throttle(pullPaper, 1000)">回拉打印纸</button>
            <button class="cu-btn" @click="$u.throttle(pushPaper, 1000)">前推打印纸</button>
        </view>
    </view>
</template>

<script>
import iipGpPrinter from '@/components/iip/iip-gp-printer/iip-gp-printer.vue';
import { printLabel } from '@/common/js/print/labelPrinter.js';
export default {
    components: {
        iipGpPrinter
    },
    data() {
        return {};
    },
    methods: {
        pullPaper() {
            this.$refs.printer.backFeed(8);
        },
        pushPaper() {
            this.$refs.printer.feed(8);
        },
        async print() {
            let labelContent = {
                deviceCode: '设备',
                shift: '班次',
                materialCode: '编码',
                partNumber: '名称',
                batchNo: '10086',
                prepareDate: '2021.3.19',
                num: '11',
                prepareUserName: '操作人员',
                state: '合格',
                qrcodeContent: '666',
                barcode: '111'
            };
            printLabel(this.$refs.printer, labelContent);
        }
    },
    onBackPress(e) {},
    async onLoad(para) {}
};
</script>

<style lang="scss">
.bottom-btn-group {
    background-color: #fff;
    position: fixed;
    width: 100%;
    z-index: 10;
    bottom: 0;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 0.5px solid #efeeee;
    height: 100rpx;
    .btn {
        display: flex;
        height: 64rpx;
        align-items: center;
        border: #e3e3e4 solid 1px;
        color: #777;
        border-radius: 20px;
        background-color: #fff;
    }
}
</style>