lookcommon_course/pages_tool/pages/qrcode/index.vue

<template>
    <view>
        <view class="container-box">
            <view class="img-box">
                <canvas @tap="previewImg" canvasId="mycanvas" v-if="!canvasHidden" style="width: 686rpx; height: 686rpx; background: #f1f1f1"></canvas>
            </view>
            <form @submit="formSubmit">
                <view class="input-row">
                    <label>网址</label>
                    <input maxlength="255" name="url" :placeholder="placeholder" type="text" value="" />
                </view>
                <button class="mybtn" formType="submit">生成二维码</button>
            </form>
        </view>
        <view class="mask" v-if="!maskHidden"></view>
        <view class="canvas-box"></view>
    </view>
</template>

<script>
var a = require('../../utils/qrcode.js');

export default {
    data() {
        return {
            maskHidden: true,
            imagePath: '',
            placeholder: '请输入网址',
            canvasHidden: ''
        };
    },
    onLoad: function (a) {
        var t = this.setCanvasSize();
        var e = 'http://' + this.placeholder;
        this.createQrCode(e, 'mycanvas', t.w, t.h);
    },
    onReady: function () {},
    onShow: function () {},
    onHide: function () {},
    onUnload: function () {},
    methods: {
        setCanvasSize: function () {
            var a = {};
            try {
                var t = uni.getSystemInfoSync();
                var e = t.windowWidth / 1.0932944606413995;
                var n = e;
                a.w = e;
                a.h = n;
            } catch (a) {
                console.log('CatchClause', a);
                console.log('CatchClause', a);
            }
            return a;
        },

        createQrCode: function (t, e, n, i) {
            a.qrApi.draw(t, e, n, i);
            var that = this;
            var s = setTimeout(function () {
                that.canvasToTempImage();
                clearTimeout(s);
            }, 3000);
        },

        canvasToTempImage: function () {
            var that = this;
            uni.canvasToTempFilePath({
                canvasId: 'mycanvas',
                success: function (t) {
                    var e = t.tempFilePath;
                    that.imagePath=e;
                },
                fail: function (a) {}
            });
        },

        previewImg: function (a) {
            var t = this.imagePath;
            uni.previewImage({
                current: t,
                urls: [t]
            });
        },

        formSubmit: function (a) {
            var that = this;
            var e = a.detail.value.url;
            e = '' == e ? 'http://' + that.placeholder : 'http://' + e;
            that.maskHidden=false;
            uni.showToast({
                title: '生成中...',
                icon: 'loading',
                duration: 2000
            });
            var n = setTimeout(function () {
                uni.hideToast();
                var a = that.setCanvasSize();
                that.createQrCode(e, 'mycanvas', a.w, a.h);
                that.maskHidden=true;
                clearTimeout(n);
            }, 2000);
        }
    }
};
</script>
<style>
@import './index.css';
</style>