vue条形码+二维码

<template>
<section style="height: 100vh;"  class="bg">
  <div class="cardtype"><i class="pos fa fa-diamond fa-lg" :style="{color: '#FFFFFF'}"></i> {{VipInfo.VipCardTypeName}}</div>
  <div class="container">
    <!-- 条形码 -->
    <div class="barcode">
      <barcode :value="barcode" :options="barcode_option" tag="svg"></barcode>
      <span class="txt">
        <span>{{barcode1}}</span>&nbsp;&nbsp;
        <span>{{barcode2}}</span>&nbsp;&nbsp;
        <span>{{barcode3}}</span>&nbsp;&nbsp;
        <span>{{barcode4}}</span>
      </span>
    </div>
    <!-- 二维码 -->
    <qrcode class="qrCode" :url="barcode" :wid="180" :hei="180" :imgwid="40" :imghei="40"></qrcode>
  </div>
  <div class="claim">
    <i class="pos fa fa-info-circle fa-lg" :style="{color: '#FFFFFF'}"></i>
    &nbsp;如果付款失败，请点击刷新&nbsp;
    <i class="pos fa fa-refresh fa-lg" :style="{color: '#FFFFFF'}"></i>
  </div> 
</section>
</template>

<script>
import qrcode from 'vue_qrcodes'
export default {
  components: { qrcode },
  data() {
    return {
      VipInfo: '',
      barcode: '888888888888888888',
      barcode1: '',
      barcode2: '',
      barcode3: '',
      barcode4: '',
      barcode_option: {
        // format: 'CODE128',
        displayValue: false,
        background: 'transparent',
        width: '2px',
        height: '80px',
        fontOptions: 'bold',
        fontSize: '32px'
      },
      icon: ''
    }
  },
  mounted() {
    var tmp = window.sessionStorage.getItem('VipInfo')
    if (tmp) {
      this.VipInfo = JSON.parse(tmp)
    }
    // this.barcode = this.$route.params.barcode
    this.barcode1 = this.barcode.substr(0, 4)
    this.barcode2 = this.barcode.substr(4, 4)
    this.barcode3 = this.barcode.substr(8, 4)
    this.barcode4 = this.barcode.substr(12, 6)
  },
  methods: {
  }
}
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(#47C9EB, #367CF7);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.cardtype {
  color: white;
  font-size: .3rem;
  text-align: center;
  line-height: .3rem;
  margin-top: .5rem;
}
.container {
  margin: .5rem .5rem .3rem;
  padding-bottom: .6rem;
  border-radius: .1rem;
  background-color: white;
}
/* 条形码 */
svg {
  width: 96%;
  position: relative;
  display: block;
  top: -0.01rem;
  margin: 0 auto;
}
.barcode {
  position:relative;
  top: .5rem;
}
/* 会员码 */
.txt {
  display: block;
  text-align: center;
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  font-weight: 700;
  font-size: .3rem;
}
/* 二维码 */
.qrCode{
  position: relative;
  margin-top: 1.3rem;
  left: calc(50% - 90px);
}
.claim {
  
  color: white;
  text-align: center;
  font-size: .3rem;
}
.fa-info-circle::before, .fa-refresh::before {
  font: normal normal normal .4rem/1 FontAwesome!important;
}
</style>