vue-insagent-pc/src/views/Sys/Recruiting.vue

<template>
    <!--闪电增员界面-->
    <el-dialog title="闪电增员" width="500px" :visible.sync="backupVisible" :close-on-click-modal="true" :modal=false>
        <div class="flex f-c a-c">
            <img src="../../../static/face_sao.png" alt="" style="width: 200px;">
            <div style="padding:5px;margin: 20px 0;">
                <div id="qrcode" ref="qrcode"></div>
            </div>
            <span style="width: 200px;color: red;">新成员只需要扫描您的二维码，即可马上注册加入啦！</span>
        </div>
    </el-dialog>
</template>
<script>
import QRCode from "qrcodejs2";
import Cookies from "js-cookie"
export default {
    name: "qrCode",
    data() {
        return {
            qrcode: null,
            backupVisible: false,
        }
    },
    created() {
    },
    
    methods: {
        // 设置可见性
        setBackupVisible: function (backupVisible) {
            var userId = Cookies.get("user");
            this.$api.user.recruitinQqueryType().then((res) => {
            if(res.code==200){
                let url=''
                if(res.data=='2'){
                    url = this.global.h5BaseUrl + "/#/pages/register/orderissuer?id=" + userId;
                }
                else{
                    url = this.global.h5BaseUrl + "/#/pages/register/register?id=" + userId;
                }
                this.backupVisible = backupVisible
                this.$nextTick(() => {
                    this.creatQrCode(url);
                });
                }
            else{
            this.$message.error(res.msg)
            }
        })
           
        },
        creatQrCode(text) {
            if (this.qrcode) {
                this.qrcode.clear();
                this.qrcode.makeCode(text);
            } else {
                this.qrcode = new QRCode("qrcode", {
                    text: text,
                    width: 180,
                    height: 180,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H,
                });
            }
        },


    }
}
</script>
<style scoped lang="scss">
#qrCode {
    display: inline-block;
    margin: 0 auto;
    position: relative;
    top: 15%;

    img {
        width: 200px;
        height: 200px;
        background-color: #fff;
        padding: 6px;
    }
}
</style>