jiuyiUniapp/shop/components/StorePoster.vue

<template>
  <view v-if="posterImageStatus" class="poster-first">
    <div class="posterCanvasWarp">
      <canvas class="posterCanvas" canvas-id="myCanvas"></canvas>
    </div>

    <view class="poster-pop" v-show="canvasStatus">
      <img src="/static/images/poster-close.png" class="close" @click="posterImageClose" mode="widthFix" />
      <image :src="posterImage" alt="tp" class="poster-image" show-menu-by-longpress mode="widthFix" />
      <view class="keep">长按图片可以保存到手机</view>
    </view>
    <view class="mask"></view>
  </view>
</template>

<script>

  import {
    PosterCanvas
  } from "@/utils/share.js";

  export default {
    name: "StorePoster",
    props: {
      posterImageStatus: Boolean,
      posterData: Object,
      goodId: String
    },
    data: function () {
      return {
        canvasStatus: false,
        posterImage: ""
      };
    },
    watch: {
      posterImageStatus: function () {
        var that = this;
        if (that.posterImageStatus === true) {
          that.$nextTick(function () {
            that.savePosterPath();
          });
        }
      }
    },
    mounted: function () {},
    methods: {
      posterImageClose: function () {
        this.posterImageStatus = false;
        this.canvasStatus = false;
        this.$emit("setPosterImageStatus");
      },
      savePosterPath: function () {
        const that = this;

        uni.showLoading({
          title: "海报生成中",
          mask: true
        });
        getProductPoster(this.goodId, {
            from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType
          })
          .then(res => {
            this.canvasStatus = true;
            this.posterImage = res.data;
          })
          .finally(() => {
            uni.hideLoading();
          });

      }
    }
  };
</script>

<style scoped lang="scss" lang="scss">
  .poster-first {
    overscroll-behavior: contain;
  }

  .poster-pop {
    width: 4.5 * 100rpx;
    height: 8 * 100rpx;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    top: 50%;
    margin-top: -4.6 * 100rpx;
  }

  .poster-pop .canvas {
    background-color: #ffffff;
    height: 8 * 100rpx;
  }

  .poster-pop .poster-image {
    width: 100%;
    height: auto;
  }

  .poster-pop .canvas .image {
    width: 4.5 * 100rpx;
    height: 4.5 * 100rpx;
    display: block;
  }

  .poster-pop .canvas .text {
    text-align: center;
    color: #000000;
    margin-top: 0.32 * 100rpx;
  }

  .poster-pop .canvas .text.black {
    height: 0.68 * 100rpx;
  }

  .poster-pop .canvas .text.rad {
    color: #ff0000;
  }

  .poster-pop .canvas .code {
    height: 1.4 * 100rpx;
    display: flex;
  }

  .poster-pop .canvas .code .code-img {
    width: 33%;
    padding: 0.06 * 100rpx;
  }

  .poster-pop .canvas .code .code-img image {
    width: 100%;
  }

  .poster-pop .canvas .code .code-text {
    width: 60%;
    font-size: 0.12 * 100rpx;
    line-height: 1.64 * 100rpx;
  }

  .poster-pop .close {
    width: 0.46 * 100rpx;
    height: 0.75 * 100rpx;
    position: fixed;
    right: 0;
    top: -0.73 * 100rpx;
    display: block;
  }

  .poster-pop .save-poster {
    background-color: #df2d0a;
    font-size: 0.22 * 100rpx;
    color: #fff;
    text-align: center;
    height: 0.76 * 100rpx;
    line-height: 0.76 * 100rpx;
    width: 100%;
    margin-top: -0.04 * 100rpx;
  }

  .poster-pop .keep {
    color: #fff;
    text-align: center;
    font-size: 0.25 * 100rpx;
    margin-top: 0.1 * 100rpx;
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9;
  }
</style>