2021-09-12VUE依据URL动态加载远程的图片(二维码)

src 是http服务器的图片地址,可以直接在浏览器打开显示的图片。

image.png

直接修改属性即可

image.png
  


  var app = new Vue({
        el: '#app',
        data: {
            activeIndex: false,
            randomNum: 0,
            scanImageUrl: 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQFx8DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyUzFDSXhPV0Jjb20xa3MzN3h4MWkAAgScCD5hAwSAOgkA'

        },
        computed: {
            workLife() {
                var date = new Date;
                var y = date.getFullYear()
                return y - 2019;
            }
        },
        methods: {
            clickFun() {
                this.activeIndex = !this.activeIndex;
            },
            clickScan() {
                this.activeIndex = !this.activeIndex;
                this.getScanCodeImage();

            },
            getScanCodeImage() {
                // 远程加载二维码
                this.randomNum = this.num()
                axios.get('wechat/login/getQrcode?sceneId=' + this.randomNum)
                    .then(function (response) {
                        console.log(response);
                        console.log(response.data);
                        console.log(response.data.data);
                        this.scanImageUrl = response.data.data;
                        $('#codeImage').attr('src', this.scanImageUrl);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            getScanResult() {
                console.log("获取结果")
                axios.get('wechat/login/status?sceneId=' + this.randomNum)
                    .then(function (response) {
                        var data = response.data;
                        console.log(response);
                        console.log(response.data);
                        console.log(response.data.data);

                        if (data.code === 200) {
                            // 注册成功
                            //存储token
                            var user = JSON.stringify(data.data)
                            sessionStorage.setItem('user', user)
                            var userStr = sessionStorage.getItem('user')
                            console.log("user" + userStr)
                            var userJson = JSON.parse(userStr)

                            console.log("token" + userJson.token)
                            window.location.href = "/"

                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            num() {
                var mm = Math.random();
                var six = "";
                if (mm > 0.1) {
                    six = Math.round(mm * 1000000);
                } else {
                    mm += 0.1;
                    six = Math.round(mm * 1000000);
                }
                return six;
            },
        },
        mounted() {
            let that = this;
            that.getScanCodeImage();
            this.timer = setInterval(this.getScanResult, 1500);
        }
    })

你可能感兴趣的:(2021-09-12VUE依据URL动态加载远程的图片(二维码))