hongze_yb_xcx/pages-report/disseminatePage/disseminatePage.vue

<template>
  <view class="poster-img-content">
    <image v-if="enable==1" @click="canvasGet" src="https://hzstatic.hzinsights.com/yb_xcx/download-img.png" class="download-img">
    <image @click="detailGo" src="https://hzstatic.hzinsights.com/static/icon/hzyb/default_avatar.png" class="download-img download-img-two">
    <image v-if="imgBg" mode="widthFix" :src="imgBg"></image>
    <view class="code">
      <image v-if="imgBg" show-menu-by-longpress mode="widthFix" :src="qrcodeImg"></image>
    </view>

    <canvas
      class="canvas-bg"
      canvas-id="canvasDom"
      id="canvasDom"
      bindtouchstart=""
      bindtouchmove=""
      bindtouchend=""
      bindtouchcancel=""
      bindlongtap=""
      binderror=""
      :style="{ width: canvasW + 'px', height: canvasH + 'px' }"
    ></canvas>
  </view>
</template>

<script>
import { bannerGetQrcode } from "@/api/report";
export default {
  data() {
    return {
      imgBg: "",
      title: "",
      canvasH: 0,
      canvasW: 0,
      bannerId: "",
      qrcodeImg: "",
      enable: 0,
    };
  },
  onLoad(op) {
    this.imgBg = decodeURIComponent(op.imgHb);
    this.title = op.title;
    this.bannerId = op.id;
    this.enable = op.enable;
    this.enable == 1 && this.getQrcCode();
    uni.setNavigationBarTitle({
      title: this.title,
    });
  },
  onShareAppMessage() {
    return {
      title: this.title,
      path:
        "/pages-report/disseminatePage/disseminatePage?imgHb=" +
        this.imgBg +
        "&title=" +
        this.title +
        "&id=" +
        this.bannerId +
        "&InviteShareCode=" +
        this.userInfo.user_id +
        "&enable=" +
        item.enable,
    };
  },
  methods: {
    // 背景图的canvas
    renderCanvas() {
      const SystemInfo = uni.getSystemInfoSync();
      wx.getImageInfo({
        src: this.imgBg,
        success: (res) => {
          const temPath = res.path;
          this.canvasW = SystemInfo.windowWidth * 2;
          this.canvasH = res.height / (res.width / this.canvasW);
          this.drawImg(temPath);
        },
        fail(err) {
          reject(err);
        },
      });
    },
    // 二维码的canvas
    drawImg(path) {
      let ctx = uni.createCanvasContext("canvasDom", this);
      ctx.drawImage(path, 0, 0, this.canvasW, this.canvasH);
      wx.getImageInfo({
        src: this.qrcodeImg,
        success: (res) => {
          ctx.drawImage(
            res.path,
            this.canvasW * 0.5 - res.width / 2,
            this.canvasH - 430,
            res.width,
            res.height
          );
          ctx.draw();
        },
        fail(err) {
          reject(err);
        },
      });
    },

    // 上线前删除
    detailGo() {
      const title = encodeURIComponent("迪拜&阿布扎比");

      uni.navigateTo({
        url:
          "/pages-report/signUpPage/signUpPage?RealName=席子文&CompanyName=杭州大式数字科技有限公司&Mobile=15906624664&BannerId=4&Title=" +
          title,
      });

      return;
    },
    // 保存二维码到本地
    canvasGet() {
      uni.canvasToTempFilePath({
        canvasId: "canvasDom",
        success: (res) => {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (data) {
              uni.showToast({
                title: "保存成功",
                duration: 2000,
              });
            },
            fail: function (err) {
              if (
                err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
                err.errMsg === "saveImageToPhotosAlbum:fail auth deny" ||
                err.errMsg ===
                  "saveImageToPhotosAlbum:fail authorize no response"
              ) {
                // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
                wx.showModal({
                  title: "提示",
                  content: "需要您授权保存相册",
                  showCancel: false,
                  success: (modalSuccess) => {
                    wx.openSetting({
                      success(settingdata) {
                        if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                          wx.showModal({
                            title: "提示",
                            content: "获取权限成功,再次点击图片即可保存",
                            showCancel: false,
                          });
                        } else {
                          wx.showModal({
                            title: "提示",
                            content: "获取权限失败，将无法保存到相册哦~",
                            showCancel: false,
                          });
                        }
                      },
                      fail(failData) {
                        // console.log("failData", failData);
                      },
                      complete(finishData) {
                        // console.log("finishData", finishData);
                      },
                    });
                  },
                });
              }
            },
          });
        },
        fail: () => {
          // console.log("下载失败");
        },
      });
    },

    // 获取code 二维码
    async getQrcCode() {
      const res = await bannerGetQrcode({
        UserId: this.userInfo.user_id,
        BannerId: this.bannerId,
        Remark: this.title,
      });
      if (res.code == 200) {
        this.qrcodeImg = res.data;
      }
    },
  },
  onShow() {
    this.enable == 1 && this.renderCanvas();
  },
};
</script>
<style>
page {
  padding: 0;
}
</style>
<style lang="scss" scoped>
.poster-img-content {
  width: 100%;
  overflow: hidden;
  position: relative;
  image {
    width: 100%;
    height: 100%;
  }
  .code {
    position: absolute;
    width: 300rpx;
    height: 300rpx;
    left: 50%;
    bottom: 180rpx;
    transform: translateX(-50%);
  }
  .canvas-bg {
    position: absolute;
    left: 10000rpx;
  }
  .download-img {
    position: fixed;
    display: block;
    width: 100rpx;
    height: 100rpx;
    right: 35rpx;
    bottom: 200rpx;
    z-index: 99;
  }
  .download-img-two {
    bottom: 300rpx;
  }
}
</style>