CommunityApp/pagesM/comps/canvas/poster.vue

<template>
  <view>
    <view @tap="onCreate">
      <slot/>
    </view>
    <we-canvas ref="poster" @success="onCreateSuccess" @fail="onCreateFail"/>
  </view>
</template>
<script>
import WeCanvas from "./index.vue";
export default {
  components: {
    WeCanvas
  },
  props: {
    config: {
      type: Object,
      default: {}
    },
    preload: {
      // 是否预下载图片资源
      type: Boolean,
      default: false
    },
    hideLoading: {
      // 是否隐藏loading
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    trigger(event, data) {
      if (this.listener && typeof this.listener[event] === "function") {
        this.listener[event](data);
      }
    },
    once(event, fun) {
      if (typeof this.listener === "undefined") {
        this.listener = {};
      }
      this.listener[event] = fun;
    },
    downloadResource(reset) {
      return new Promise((resolve, reject) => {
        if (reset) {
          this.downloadStatus = null;
        }
        const poster = this.$refs.poster

        if (this.downloadStatus && this.downloadStatus !== "fail") {
          if (this.downloadStatus === "success") {
            resolve();
          } else {
            this.once("downloadSuccess", () => resolve());
            this.once("downloadFail", e => reject(e));
          }
        } else {
          poster
            .downloadResource(this.config.images)
            .then(() => {
              this.downloadStatus = "success";
              resolve();
            })
            .catch(e => reject(e));
        }
      });
    },
    onCreate(reset = false) {
      !this.hideLoading && uni.showLoading({ mask: true, title: "生成中" });
      return this.downloadResource(typeof reset === "boolean" && reset)
        .then(() => {
          !this.hideLoading && uni.hideLoading();
          const poster = this.$refs.poster;
          poster.create(this.config);
        })
        .catch(err => {
          !this.hideLoading && uni.hideLoading();
          uni.showToast({ icon: "none", title: err.errMsg || "生成失败" });
          console.error(err);
          this.$emit("fail", err);
        });
    },
    onCreateSuccess(path) {
      this.$emit("success", path);
    },
    onCreateFail(err) {
      console.error(err);
      this.$emit("fail", err);
    },
    
  },
  onReady() {
    if (this.preload) {
      const poster = this.$refs.poster;
      this.downloadStatus = 'doing';
      poster.downloadResource(this.config.images).then(() => {
        this.downloadStatus = 'success';
        this.trigger('downloadSuccess');
      }).catch((e) => {
        this.downloadStatus = 'fail';
        this.trigger('downloadFail', e);
      });
    }
  },
};
</script>

<style lang="scss">
</style>