关于生成二维码及生成二维码参数的传入,配置文件的定义、调用,computed属性的计算,

1,二维码的生成(其中一个生成方法),由服务器提供一个url, 后端提供一个url,两个url拼接到一个img标签内,如图:javascript

    

<el-row>
                <el-col :span="11">
                    <el-form-item label="租床二维码:">
                        <a :href="cabinetErCode" target="_blank">
                            <img :src="cabinetErCode">//src内的是调用的计算属性computed的,注意这个不是方法因此没有小括号。
                        </a>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="加群二维码:">
                        <a :href="groupQrCode" target="_blank">
                            <img :src="groupQrCode">
                        </a>
                    </el-form-item>
                </el-col>
            </el-row>

    2.script代码html

<script>
export default {
    data() {
        return {
            form: {},
            productionUrl: process.env.VUE_APP_PRODUCTION_SRC,.//process.env是调用配置文件里变量的方法,至关于调用dana里的变量用this同样。这里productionUrl是定义配置文件里变量的。下同
            developmentUrl: process.env.VUE_APP_DEVELOPMENT_SRC,
        }
    },
    props: ["id"],
    created() {
        this.loadMsg()
    },
    watch: {
        'id': {
            handler() {
                this.loadMsg();
            }
        }
    },
    computed: {
        cabinetErCode() {//计算属性里的小括号不须要填参数的
            return this.productionUrl + this.developmentUrl + "?cabinet_no=" + this.form.cabinet_no + "&action=cabinet"//这是计算柜子二维码的整个url其中this.form.cabinet_no是传的参数。
        },
        groupQrCode() {
            return this.productionUrl + this.developmentUrl + "?cabinet_no=" + this.form.cabinet_no + "&action=group"
        }
    },

3.配置文件里:java

NODE_ENV='development'
VUE_APP_CURRENTMODE='development'
VUE_APP_SITE_TITLE='益祝后台管理系统'
VUE_APP_API_URL='http://api.yz.gydsh.com/msweb'
VUE_APP_PRODUCTION_SRC='https://s.weflys.com/qrcode?size=100&url=' //定义的服务器给的url
VUE_APP_DEVELOPMENT_SRC='http://api.yz.gydsh.com/app/cabinet/scan/qr' //定义的后端给的url的前半部分

4,服务器给的url: https://s.weflys.com/qrcode?size=200&url={url} 其中大括号里的url填后端给的url,size=200是生成二维码的大小可修改。web

后端给的url: http://api.yz.gydsh.com/app/cabinet/scan/qr?cabinet_no=123&action=cabinet 其中123是参数后端

相关文章
相关标签/搜索