zhuishuyun_ios_wap_front/src/view/help-pay-qrcode.vue

<template>
  <div class="x-qrcode">
    <img src="../assets/qr-back.png"
         alt=""
         class="qr-back"
         @click="$router.back()">
    <div class="box"
         v-show="qrImg">
      <img src="../assets/qr-title.jpg"
           alt=""
           class="title">
    </div>
    <div class="qr-wrapper">
      <img :src="qrImg"
           alt="">
    </div>
    <div class="qr-wrapper2">
      <img src="/static/img/2018101901.jpg"
           class="bg"
           alt="">
      <div class="user">
        <img :src="info.head_img"
             class="head">
        <p class="name">{{info.nickname ? info.nickname : '微信好友' }}：</p>
      </div>
      <div class="qr-img"></div>
    </div>
    <p class="notice"
       v-show="qrImg">代充成功后书币会到账，扣款发生在实际支付人</p>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import QRCode from "qrcodejs2";

import { Pay } from "./namespace.js";
import { getSubstitutePay } from "../api";
export default {
  data() {
    return {
      Pay: Pay.name,
      qrImg: "",
      info: {
        head_img: "",
        nickname: "",
      },
      defaultHead: require("../assets/default.png"),
      qrcode: "",
    };
  },
  async mounted() {
    let { product_id } = this.$route.query;
    await getSubstitutePay(product_id).then((r) => {
      this.info = r;
      new QRCode(document.querySelector(".qr-wrapper2 .qr-img"), {
        text: r.help_pay_page,
        width: 120,
        height: 120,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: 2,
        scale: 2,
      });
    });
    this.$Indicator.open("正在生成中....");
    this.$nextTick(() => {
      html2canvas(document.querySelector(".qr-wrapper2")).then((canvas) => {
        this.$Indicator.close();
        this.$Toast("代付二维码生成成功！");
        this.qrImg = canvas.toDataURL("image/jpeg");
        document.querySelector(".qr-wrapper2").remove();
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.x-qrcode {
  background: #deedff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: scroll;
}

.box {
  text-align: center;
}

.title {
  width: 90%;
  margin: 0.6rem auto;
}

.qr-wrapper,
.qr-wrapper2 {
  position: relative;

  .bg {
    width: 100%;
  }

  .qr-img {
    position: absolute;
    left: 0.2rem;
    bottom: 0.2rem;
    width: 120px;
    height: 120px;
  }
}

.qr-wrapper {
  padding: 0 0.4rem;

  img {
    width: 100%;
  }
}

.qr-wrapper2 {
  position: absolute;
  z-index: -1;
}

.user {
  position: absolute;
  top: 0.4rem;
  left: 0.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .head {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
  }

  .name {
    margin-left: 0.3rem;
    color: #fff;
    font-size: 0.32rem;
    font-weight: bolder;
  }
}

.notice {
  padding: 0.4rem;
  font-size: 0.28rem;

  &::before {
    content: "";
    display: inline-block;
    width: 0.1rem;
    height: 0.1rem;
    background: red;
    border-radius: 50%;
    margin-right: 0.1rem;
    vertical-align: middle;
  }
}

.qr-back {
  position: fixed;
  top: 0.4rem;
  left: 0.4rem;
  width: 0.64rem;
  height: 0.64rem;
}
</style>