页面实现扫描二维码的功能实现——qrcodejs2插件的使用

页面实现扫描二维码的功能实现——qrcodejs2插件的使用

图例

结构

<el-main>
<div :class="{sta:pink}">   //默认不显示
    <div class="stair">
        <el-popover placement="left" width="240" trigger="click" :visible-arrow="false">
            <div slot="reference" class="change-f" @mouseenter="enterF()" @mouseleave="leaveF()">
                <span class="sta-set">
                    <!-- <div class="qrcode" ref="qrCodeUrl"></div> -->

                    <!-- 图标 楼梯导航名称 -->
                    <span v-if="reda">
                        <img class="sta-img" src="../../assets/images/rep_h.png" alt />
                    </span>
                    <span v-if="!reda">
                        <img class="sta-img" src="../../assets/images/rep_l.png" alt />
                    </span>
                    <span class="sta-name">二维码展示</span>
                </span>
            </div>
            <img
                 style="width: 100%; height: 100px;position: relative;"
                 src="../../assets/images/rep.png"
                 alt
                 />
            <div
                 style="width:80px;height:80px;position:absolute;right:18px;top:12px"
                 class="qrcode"
                 ref="qrCodeUrl"
                 ></div>
        </el-popover>
    </div>
</div>
 <!-- 二级路由对应组件渲染位置  style="min-height:825px" -->
<div class="content">
    <!--  @input="fn" -->
    <router-view @input="fn"></router-view>
</div>
</el-main>

数据

data(){
    return{
      // qrcode:
      //   'http://10.88.234.63:8080/report?id=4F2153a21A4459C42303B203DADA683c2Ea035eDD22b69f2737cCFD8D49BEa5A',
      // qrcode: 's123',
      xxx: '',
      number: '',
      urk: '',
      pink: true,
      code: false,
      reda: true,
    }
}

  mounted() {
    if (this.$route.path == '/report' && this.$route.query.class_id == 11) {
      // debugger
      this.pink = false
      this.xxx = this.$route.fullPath
      this.yyy = this.$route.query.id
      this.zzz = this.yyy.substring(0, 16)
      this.$refs.qrCodeUrl.innerHTML = ''
      this.creatQrCode()
      // this.creatQrCode()
      // this.$emit('input', this.msg)
    } else {
      this.pink = true
    }
    // let routes = this.$router.options.routes(
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}`
    // )
    window.addEventListener('scroll', this.scrollToTop)
  },

  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },
      
      
   watch: {
    $route: 'routerChange',
  },

安包

npm install --save qrcodejs2

所在页面引入

import QRCode from 'qrcodejs2'

方法

  // beforeRouteLeave(to, from, next) {
  //   console.log('123')
  // },

methods: {
    fn(dak) {
      this.number = dak
    },
    routerChange: function (to, from) {
      // console.log(this.$route.query.id.length)
      // && this.number == 11
      if (to.path == '/report' && to.query.class_id == 11) {
        this.pink = false
        this.xxx = to.fullPath  //获取路由网址信息
        this.yyy = this.$route.query.id
        this.zzz = this.yyy.substring(0, 16)  //网址id截取16位
        let URl = this.xxx
        this.$refs.qrCodeUrl.innerHTML = ''
        this.creatQrCode()
      } else {
        this.pink = true
      }
    },

    // 二维码
    creatQrCode() {
      // console.log(this.$route.fullPath, '4rfefrer')
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        // text: 'http://10.88.234.63:8082/#/' + '?id=' + this.yyy,
        text: 'https://workaaastation.tkvssaamc.com.cn/legal/#/?id=' + this.zzz,  //显示的网址信息
          //二维码的宽高
        width: 80,
        height: 80,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
      })
    },
    
    // fullPaths() {
    //   // console.log('dsfs')
    //   if (this.$route.fullPath == '/report') {
    //     this.pink = false
    //   } else {
    //     this.pink = true
    //   }
    // },

     // 鼠标移入移出
    enterF() {
      this.reda = false
      this.color = '#0084ff'
    },
    leaveF() {
      this.reda = true
    },

  }

样式

.sta {
    // visibility: hidden;
    // display: block;
    display: none;
}

.stair {
    // visibility: hidden;
    // display: block;
    // display: none;
    position: fixed;
    // float: right;
    // bottom: 0px;
    top: 161px;
    right: 12px;
    // width: 50px;
    // height: 122px;
    width: 40px;
    height: 100px;
    background: #ffffff;
    // cursor: pointer; /*鼠标悬停变小手*/
    // opacity: 0.5;
    z-index: 1000000;

    .change-f {
        // cursor: pointer;
        // height: 122px;
        height: 100px;
        margin-bottom: 10px;
        // border: 1px solid #ddd;
        // margin-top: 10px;
        background: #ffffff;
        display: flex;
        flex-direction: row; /* 子元素横向排列 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        .sta-set {
            .sta-img {
                width: 22px;
                height: 22px;
                margin: 4px 3px;
            }
            .sta-ewm {
                width: 22px;
                height: 22px;
                margin: 4px 3px;
            }
            .sta-name {
                display: block;
                width: 28px;
                height: 40px;
                font-size: 14px;
                color: #555555;
                text-align: center;
            }
        }
    }
    .change-f:hover {
        .sta-name {
            color: #0084ff;
        }
    }
}

进入要显示二维码的上级页面—给其传参

点击题目进入

<div v-else>
    <span class="xs" @click="openRegulation(item.children[v])">{{item.children[v].title}}</span>
    <span class="spc-ad">{{item.children[v].public_date}}</span>
</div>

方法

//指定跳转地址
openRegulation(item) {
    this.$router.push({
        path: '/report',
        // query: { id: item.id },
        query: { id: item.id, class_id: item.class_id },
    })
},

需要二维码页面

data(){
    return{
          see: true,
      detailList: {},
      msg: false,
      msq: true,
      num: true,
      numu: false,
      // urk: urkk,
    }
}

方法

  created() {
    this.getDetail()
  },
  methods: {
    // 获取监管月报
    async getDetail() {
      try {
        // 限制数目  , { size: 1 }
        let res = await this.$http.get('regulation/detail', {
          id: this.$route.query.id,
        })
        // this.$emit('input', this.msq)

        if (res.code != 200) {
          this.$router.push('/404')
        } else {
          this.detailList = res.result
          // let urkk = 'http://10.88.234.63:8080/report?id=' + res.result.id
          // console.log(urkk)
          // console.log(res.result.class_id)
          if (res.result.class_id == 11) {
            // this.$emit('input', this.msg)
            this.see = true
            this.$emit('input', this.num)
          } else {
            this.see = false
            // this.$emit('input', this.msg)
            this.$emit('input', this.numu)
            // console.log(this.numu)
          }
          // _________________________________________________________________________
          // if (this.$route.path == '/report') {
          //   // this.pink = false
          //   this.$emit('input', this.msg)
          // }
          // if (res.result.class_id !== 11) {
          //   this.$emit('input', this.msq)
          // }
          // this.$emit('input', this.msq)
        }
        //const { result } = res
        //this.detailList = result
      } catch (err) {
        throw new Error(err)
      }
    },
  },