zhishifufei_uniapp/pages/special/poster_show.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 { getSpecialPosterInfo } from "@/api/special";
import posterMixin from "@/mixins/poster";
import userInfoMixin from "@/mixins/userInfo";

export default {
  mixins: [posterMixin, userInfoMixin],
  data() {
    return {
      msg: "",
      special_id: "",
      pinkId: "",
      poster_image: "",

      url: "",
      is_help: "",
      special: {},
      loading: false,
      filename: "",
      is_preview: false,
    };
  },
  onLoad(options) {
    const { special_id, pinkId } = this.$util.mergeLaunchParams(options);
    Object.assign(this, {
      special_id,
      pinkId,
    });
    this.getData();
  },

  computed: {
    shareQrcodeData() {
      const { special_id, pinkId } = this;
      return {
        spread_uid: this.userInfo?.uid,
        special_id,
        pinkId,
      };
    },
  },
  methods: {
    async getData() {
      uni.showLoading({ mask: true });

      try {
        const { data } = await getSpecialPosterInfo(
          this.pinkId,
          this.special_id
        );
        Object.assign(this, data);
        this.poster_image = data.special.image;
        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 = 723,
      site_name = "知识付费"
    ) {
      return new Promise((resolve, reject) => {
        let context = uni.createCanvasContext(id, target);

        let money = "￥" + this.special.money,
          i = Math.ceil(this.special.title.length / 18),
          pinkWidth;

        context.fillStyle = "#FFFFFF";
        context.fillRect(0, 0, 600, 723);

        context.fillStyle = "#F7F7F7";
        context.fillRect(0, 553, 600, 170);

        context.drawImage(bgPath, 30, 30, 540, 304);
        context.drawImage(codePath, 64, 576, 126, 126);
        context.save();

        context.font = "bold 26px sans-serif";
        context.fillStyle = "#FF6B00";
        context.fillText("￥", 35, 406);

        context.font = "bold 42px sans-serif";
        context.fillText(this.special.pink_money, 56, 406);

        pinkWidth = Math.ceil(
          context.measureText(this.special.pink_money).width
        );

        context.font = "26px sans-serif";
        context.fillStyle = "#999999";
        context.fillText(money, pinkWidth + 65, 406);

        context.moveTo(pinkWidth + 65, 397);
        context.lineTo(
          Math.ceil(context.measureText(money).width) + pinkWidth + 65,
          397
        );
        context.stroke();

        context.font = "22px sans-serif";
        context.fillText("邀您参与拼团课程", 226, 622);
        context.fillText("长按识别参与拼团", 226, 662);

        context.font = "28px sans-serif";
        context.fillStyle = "#282828";

        for (; i--; ) {
          context.fillText(
            this.special.title.substr(i * 18, 18),
            35,
            i * 41 + 472
          );
        }

        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: 600px;
  height: 723px;
}
</style>