<template>
  <div class="page">
    <img class="logo" src="/img/poster/logo.png" alt="极度证券">
    <div class="title">港股/美股/A股/黄金</div>
    <div class="title">一站式投资平台</div>
    <div class="title">尊享50倍最高免息配资</div>
    <img class="img" src="/img/poster/img.png" alt="极度证券">
    <div class="box flex">
      <div>邀请码:{{ userInfo.code }}</div>
      <img class="qr" :src="img" alt="极度证券">
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import QRCode from 'qrcode'
export default {
  data () {
    return {
      img: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    link() {
      return location.origin + '/rf/' + this.userInfo.code
    },
  },
  watch: {
    userInfo: {
      handler() {
        this.creatImg()
      },
      deep: true
    }
  },
  created() {
    if (this.userInfo.uid) {
      this.creatImg()
    }
  },
  methods: {
    creatImg() {
      QRCode.toDataURL(this.link,{
        margin: 0,
        width: 83,
        height: 83
      }).then((url) => {
        this.img = url
      }).catch((err) => {
        console.error(err)
      })
    },
  }
}
</script>
<style lang="less" scoped>
.page {
  min-height: 100vh;
  background-image: url('@/assets/img/poster_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 16px 26px 28px;
}
.logo {
  width: 117px;
  display: block;
  margin-bottom: 82px;
}
.title {
  color: #fff;
  font-size: 30px;
  line-height: 39px;
  font-weight: 300;
  text-align: center;
}
.img {
  display: block;
  margin: 50px auto 64px;
  width: 287px;
}
.box {
  background-color: #fff;
  border-radius: 12px;
  padding: 12px 12px 12px 19px;
  justify-content: space-between;
  font-weight: 300;
  color: #030303;
  font-size: 18px;
  .qr {
    width: 83px;
  }
}
</style>