invite.vue

<template>
  <div
    class="invite-code"
    :style="
      `background-image: url(${imgSrc});background-size: 100% 100%;background-repeat: no-repeat;`
    "
  >
    <div class="nav">
      <van-icon
        name="arrow-left"
        size="20"
        class="nav-left"
        color="#ffffff"
        @click="handlerBack"
      />
      <!-- <img :src="imgSrc" alt="" class="imgCode" /> -->
    </div>
    <van-button type @click="onSave">保存</van-button>
  </div>
</template>
<script>
// import { inviteCode } from "@/api/invite";
export default {
  name: "Invite",
  data() {
    return {
      imgSrc: ""
    };
  },
  mounted() {
    setTimeout(() => {
      this.inviteCode();
    }, 200);
  },
  methods: {
    onSave() {
      const url = this.imgSrc;
      this.$bridgeToAppFun.saveImage(url);
    },
    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);
      // });
      this.imgSrc = `${process.env.VUE_APP_BASE_URL}/shop-mall/api/user/registerByQrCode?height=150&userId=${userId}&width=150`;
    },
    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;

  .van-button {
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    width: 160px;
    height: 36px;
    font-size: 18px;
    color: #ffffff;
    background-color: #88c678;
    border: none;
    border-radius: 4px;
  }

  .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>