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 v-if="imgBg" :show-menu-by-longpress="enable != 1 ? true : false"  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, bannerDownload } from "@/api/report";
import { h5BaseUrl } from "@/utils/config";
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=" +
        encodeURIComponent(this.imgBg) +
        "&title=" +
        this.title +
        "&id=" +
        this.bannerId +
        "&InviteShareCode=" +
        this.userInfo.user_id +
        "&enable=" +
        this.enable,
    };
  },
  methods: {
    // 保存二维码到本地
    async canvasGet() {

      const token = this.$store.state.user.token;
      let userId = this.$store.state.report.inviteShareCode || this.userInfo.user_id;
      let url = `${h5BaseUrl}/hzyb/surveyDetail?token=${token}&userId=${userId}&bannerId=${this.bannerId}&remark=${this.title}#wechat_redirect`;
      const res = await bannerDownload({
        banner_url: url,
        banner_id: +this.bannerId,
        user_id: +userId,
      });
      if (res.code === 200) {
        wx.getImageInfo({
          src: res.data,
          success: (res) => {
            wx.saveImageToPhotosAlbum({
              filePath: res.path,
              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);
                        },
                      });
                    },
                  });
                } else {
                  uni.showToast({
                    title: "保存失败",
                    duration: 2000,
                    icon: "error",
                  });
                }
              },
            });
          },
          fail(err) {
            uni.showToast({
              title: "保存失败",
              duration: 2000,
              icon: "error",
            });
          },
        });
      }
    },

    // 获取code 二维码
    async getQrcCode() {
      const res = await bannerGetQrcode({
        UserId:
          this.$store.state.report.inviteShareCode || this.userInfo.user_id,
        BannerId: this.bannerId,
        Remark: this.title,
      });
      if (res.code == 200) {
        this.qrcodeImg = res.data;
      }
    },
  },
};
</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>