选择版面及生成二维码海报

1.选择版面页面

//选择版面页面
<div class="circle">
  <span class="choose-type">选择版面</span>
    <ul class="circle-ul">
      <li v-for=" (item, index) in imgList" :key="index">
        <div @click="change(item)" :class="{changeBorder: item.id==-a}" value="change!">
          <img :src="item.coverImg" style="width: 41vw height: 49vwborder-radius: 10px;" alt>
          <div class="topic-shade">
            <div clasg="shade"> </div>
          </div>
          <span clasg="img-title">{{item.imgtitle}}</span>
        </div>
      </li>
    </ul>
  </div>

change (val){
      if (this.a === val.id){
        this.a = !this.a
        this.userData.type = '' 
      }else{
        this.a = val.id
        if (this.userData.type !== val.id) {
          this.userData.type = val.id
          this.userData.title = val.title
          this.userData.coverImg = val.coverImg
          this.userData.url = val.url
        }
      }
    }

<style lang="less">
.circle {
  position: relative;
  width: 100%;
  .choose-type{
    margin-left: 15px;
  }
}
.circle-ul{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 14px 6vw;
}
.circle-ul li{
  list-style: none;
  margin-bottom: 3vw;
}
.circle-ul li:nth-child(2n) {
  margin-left: 5vw;
}
.topic-shade {
    display: none;
}
.changeBorder{
  position: relative;
  cursor: pointer;
  .topic-shade{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    top: 2rem;
    right: 8px;
    bottom: 0;
    .shade{
      margin-bottom: 4px;
      width: 7px;
      height: 14px;
      border-color:#009933;
      border-style: solid;
      border-width: 0 3px 3px 0;
      transform: rotate(45deg) ;
    }
  }
}
.img-title{
  font-size: 14px;
  display: block;
  width: 41vw;
}
</style>

2.生成二维码

<div cLass="success-wrapper">
  <div class= "container-success" ref="box" id="poster" v-if="!imgUrl">
    <img :src="userData.coverImg" cLass="img1">
    <div id="capId">
      <div class="qrcode" id="arcode" ref="qrcodeUrl"></div>
    </div>
  </div>
  <img v-if="imgUrl" isrc="imgUrl" class="img1" alt="">
</div>

//npm插件
import qr from 'qrcodejs2'
import html2canvas from 'html2canvas'

mounted() {
    this.createQrCode()
    this.$nextTick(()=>{
      this.createPic()
    })
  },

createQrCode(){
      this.userData = JSON.parse(sessionStorage.getItem ('userData'))
      let url=this.userData.forwardUrl
      var qrcode = new qr(this.$refs.qrcodeurl,{
        text: url,
        width: 80,
        height: 80,
        colorDark: '#000',
        colorLight: '#fff',
        correctLevel: qr.CorrectLevel.L
      })
    },
      createPic(){
        let that = this
        html2canvas(this.$refs.box)
        .then (canvas => {
          that.imgUrl = canvas.toDataURL()
          })
        .catch(e=>{})
      }

.success-wrapper {
  width: 100Vw;
  height: 100vh;
  background-size: 100%;
  overflow: hidden;
}
.container-success {
  color:#777;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.img1{
  width: 100Vw;
  height: 100vh;
  background-size: 100%;
}
.qrcode {
  position: absolute;
  bottom: 5vw;
  right: 6Vw;
}

结果图