invite.vue

<template>
  <div class="invite-code">
    <div class="nav">
      <van-icon
        name="arrow-left"
        size="20"
        class="nav-left"
        color="#ffffff"
        @click="handlerBack"
      />
      <img :src="imgSrc" alt="" class="imgCode" />
    </div>
  </div>
</template>
<script>
import { inviteCode } from "@/api/invite";
export default {
  name: "Invite",
  data() {
    return {
      imgSrc: ""
    };
  },
  mounted() {
    this.inviteCode();
  },
  methods: {
    handlerBack() {
      try {
        this.$bridgeToAppFun.navigateBack();
      } catch {
        console.log("不能和App交互");
        this.$router.go(-1);
      }
    },
    inviteCode() {
      const _this = this;
      let loading = _this.$toast.loading({
        forbidClick: true,
        message: "加载中..."
      });
      const userId = JSON.parse(localStorage.getItem("user")).userId;
      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/png";
      let imageUrl = "data:" + imageType + ";base64," + data;
      return imageUrl;
    }
  }
};
</script>
<style scoped lang="scss">
.invite-code {
  width: 100%;
  height: 100vh;
  background: url("../assets/images/invite_1.png");
  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;
    }
  }
  @media screen and (min-device-width: 768px) {
    .imgCode {
      bottom: 1%;
    }
  }
}
</style>