zhishifufei_uniapp/pages/topic/certificate_detail.vue

<template>
  
  <BaseContainer>
    <NavBar title="证书详情" />
    <image
      @longpress="handleLonePress"
      class="poster-img"
      mode="widthFix"
      :src="filename"
    />
    <view
      v-if="filename"
      style="font-size: 24rpx; text-align: center; color: #cecece"
      >长按图片，保存至手机</view
    >

    <view style="height: 100vh" />

    <TkiQrcode
      loadMake
      v-if="isQrcodeCanvasVisable"
      ref="qrcode"
      :showLoading="false"
      :val="qrcodeText"
      @result="handleQrcodeCreateSuccess"
    />
    <canvas
      canvas-id="poster"
      v-if="isPosterCanvasVisable"
      class="poster-canvas"
    />
  </BaseContainer>
</template>
  
<script>
import { getCertificateInfo } from "@/api/topic";
import posterMixin from "@/mixins/poster";
import dayjs from "dayjs";
import userInfoMixin from "@/mixins/userInfo";

export default {
  mixins: [posterMixin, userInfoMixin],
  data() {
    return {
      obtain: "",
      id: "",

      nickname: "",
      certificate: null,
      pre_qrcode: "",
      is_certificate:1,
      filename: "",
      is_preview: false,
    };
  },
  computed: {
    // shareQrcodeData() {
    //   return {
    //     spread_uid: this.userInfo?.uid,
    //     id: this.id,
    //     obtain: this.obtain,
    //   };
    // },
  },
  onLoad(options) {
    const { obtain, id } = this.$util.mergeLaunchParams(options);
    Object.assign(this, {
      obtain,
      id,
    });
    this.getData();
  },
  methods: {
    async getData() {
      uni.showLoading({ mask: true });

      try {
        const { data } = await getCertificateInfo({
          id: this.id,
          obtain: this.obtain,
        });
        this.certificate = data;
        this.nickname = data.nickname;
        this.poster_image = this.certificate.certificate.background;
        this.pre_qrcode = this.certificate.certificate.qr_code;
        uni.hideLoading();
        this.createSharePoster();
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
    handleLonePress() {
      // #ifndef H5
      uni.saveImageToPhotosAlbum({
        filePath: this.filename,
        success: () => {
          this.$util.showMsg("保存成功!");
        },
      });
      // #endif
    },
    renderProductPoster(
      target,
      id,
      bgPath,
      codePath,
      WIDTH = 600,
      HEIGHT = 850,
      site_name = "知识付费"
    ) {
      return  new Promise(async (resolve, reject) => {
        let context = uni.createCanvasContext(id, target);

        context.drawImage(bgPath, 0, 0);
        context.drawImage(codePath, 220, 557, 160, 160);

        context.fillStyle = "rgba(255, 255, 255, 0.8)";
        context.fillRect(220, 724, 160, 36);

        context.font = "bold 34px sans-serif";
        context.textAlign = "center";
        context.fillStyle = "#29466D";
        context.fillText(this.nickname, 300, 296);

        context.font = "24px sans-serif";
        context.fillText(
          "颁发时间：" +
            dayjs(this.certificate.add_time * 1000).format("YYYY.MM.DD"),
          300,
          490
        );

        context.font = "20px sans-serif";
        context.fillStyle = "#666666";
        context.fillText("长按二维码查看", 300, 748);

        context.font = "28px sans-serif";
        context.textAlign = "start";
        context.fillStyle = "#333333";

        let lineWidth = 0;
        let substringFrom = 0;
        let offsetTop = 364;
        for (let i = 0; i < this.certificate.certificate.explain.length; i++) {
          lineWidth += context.measureText(
            this.certificate.certificate.explain[i]
          ).width;
          if (lineWidth > 434) {
            context.fillText(
              this.certificate.certificate.explain.substring(substringFrom, i),
              83,
              offsetTop
            );
            lineWidth = 0;
            substringFrom = i;
            offsetTop += 50;
          }
          if (i == this.certificate.certificate.explain.length - 1) {
            context.fillText(
              this.certificate.certificate.explain.substring(substringFrom, i),
              83,
              offsetTop
            );
          }
        }

        context.draw(true, () => {
          uni.canvasToTempFilePath(
            {
              canvasId: id,
              fileType: "png",
              destWidth: WIDTH,
              destHeight: HEIGHT,
              success: (res) => {
                resolve(res.tempFilePath);
                context = null;
              },
              fail: (err) => {
                reject(err.errMsg);
                context = null;
              },
            },
            target
          );
        });
      });
    },
  },
};
</script>
  
<style>
page {
  background-color: rgba(0, 0, 0, 0.35);
}
</style>
  
  <style scoped lang="scss">
.poster-img {
  width: 600rpx;
  margin: 192rpx auto 50rpx;
  display: block;
}
.poster-canvas {
  width: 1200rpx;
  height:1700rpx;
}
</style>