invite.vue

<template>
  <div class="invite-code">
    <img :src="imgSrc" alt="" class="imgCode" />
  </div>
</template>
<script>
import { inviteCode } from "@/api/invite";
var userId = "13933770749";
export default {
  data() {
    return {
      imgSrc: ""
    };
  },
  mounted() {
    this.inviteCode();
  },
  methods: {
    inviteCode() {
      const _this = this;
      let loading = _this.$toast.loading({
        forbidClick: true,
        message: "加载中..."
      });
      inviteCode(userId).then(res => {
        if (loading) _this.$toast.clear();
        _this.imgSrc = _this.getUserPhoto(res);
      });
    },
    getUserPhoto(res) {
      let uInt8Array = new Uint8Array(res);
      let len = uInt8Array.length;
      let binaryString = new Array(len);
      while (len--) {
        binaryString[len] = String.fromCharCode(uInt8Array[len]);
      }
      let data = window.btoa(binaryString.join(""));
      let imageType = "image/jpeg";
      let imageUrl = "data:" + imageType + ";base64," + data;
      return imageUrl;
    }
  }
};
</script>
<style scoped lang="scss">
.invite-code {
  width: 100%;
  height: 100vh;
  background: url("../assets/images/invite.jpeg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .imgCode {
    position: absolute;
    width: 60px;
    height: 60px;
    right: 50px;
    bottom: 10px;
  }
  @media only screen and (device-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    .imgCode {
      width: 60px;
      height: 60px;
      bottom: 20px;
    }
  }
}
</style>