zc_saas_admin/src/components/modelView/index.vue

<template>
  <div
    id="left"
    class="left"
    ref="modelView"
    :style="IMGSHOW ? '' : 'border:none'"
  >
    <img
      :style="modelData.background.css"
      v-if="modelData.background.checked"
      :src="$methodsTools.splitImgHost(modelData.background.name)"
      alt=""
      crossorigin="anonymous"
    />
    <!-- 标题 -->
    <vue-draggable-resizable
      @dragstop="onDragstop1"
      @resizestop="onResizeStop1"
      :w="modelData.title.width"
      :h="modelData.title.height"
      :x="modelData.title.left"
      :y="modelData.title.top"
      :parent="true"
      v-if="modelData.title.checked"
    >
      <p :style="modelData.title.css">{{ modelData.title.name }}</p>
    </vue-draggable-resizable>
    <!-- 商品图 -->
    <vue-draggable-resizable
      @dragstop="onDragstop2"
      @resizestop="onResizeStop2"
      :w="modelData.goods.width"
      :h="modelData.goods.height"
      :x="modelData.goods.left"
      :y="modelData.goods.top"
      :parent="true"
      v-if="modelData.goods.checked"
      :style="
        modelData.goods.name ? '' : 'border: 1px dotted rgba(225,225,225,.4)'
      "
    >
      <img
        crossorigin="anonymous"
        v-if="modelData.goods.name"
        :style="modelData.goods.css"
        :src="$methodsTools.splitImgHost(modelData.goods.name)"
        alt=""
      />
    </vue-draggable-resizable>
    <!-- 分销码 -->
    <vue-draggable-resizable
      @dragstop="onDragstop3"
      @resizestop="onResizeStop3"
      :w="modelData.distribution.width"
      :h="modelData.distribution.height"
      :x="modelData.distribution.left"
      :y="modelData.distribution.top"
      :parent="true"
      v-if="modelData.distribution.checked"
      v-show="IMGSHOW"
      style="border: 1px solid skyblue"
      :lock-aspect-ratio="true"
    >
      <!-- <img
        :style="modelData.distribution.css"
        :src="modelData.distribution.name"
        alt=""
      /> -->
    </vue-draggable-resizable>
    <vue-draggable-resizable
      @dragstop="onDragstop7"
      @resizestop="onResizeStop7"
      :w="modelData.distributionText.width"
      :h="modelData.distributionText.height"
      :x="modelData.distributionText.left"
      :y="modelData.distributionText.top"
      :parent="true"
      v-if="modelData.distributionText.checked"
    >
      <p style="white-space: pre-wrap" :style="modelData.distributionText.css">
        {{ modelData.distributionText.name }}
      </p>
    </vue-draggable-resizable>
    <!-- 电子名片码 -->
    <vue-draggable-resizable
      @dragstop="onDragstop4"
      @resizestop="onResizeStop4"
      :w="modelData.cardCode.width"
      :h="modelData.cardCode.height"
      :x="modelData.cardCode.left"
      :y="modelData.cardCode.top"
      :parent="true"
      v-if="modelData.cardCode.checked"
      v-show="IMGSHOW"
      style="border: 1px solid skyblue"
      :lock-aspect-ratio="true"
    >
      <!-- <img
        :style="modelData.cardCode.css"
        :src="modelData.cardCode.name"
        alt=""
      /> -->
    </vue-draggable-resizable>
    <vue-draggable-resizable
      @dragstop="onDragstop8"
      @resizestop="onResizeStop8"
      :w="modelData.cardCodeText.width"
      :h="modelData.cardCodeText.height"
      :x="modelData.cardCodeText.left"
      :y="modelData.cardCodeText.top"
      :parent="true"
      v-if="modelData.cardCodeText.checked"
    >
      <p style="white-space: pre-wrap" :style="modelData.cardCodeText.css">
        {{ modelData.cardCodeText.name }}
      </p>
    </vue-draggable-resizable>
    <!-- 广告语 -->
    <vue-draggable-resizable
      @dragstop="onDragstop5"
      @resizestop="onResizeStop5"
      :w="modelData.advertise.width"
      :h="modelData.advertise.height"
      :x="modelData.advertise.left"
      :y="modelData.advertise.top"
      :parent="true"
      v-if="modelData.advertise.checked"
    >
      <p style="white-space: pre-wrap" :style="modelData.advertise.css">
        {{ modelData.advertise.name }}
      </p>
    </vue-draggable-resizable>
    <!-- 机构 -->
    <vue-draggable-resizable
      @dragstop="onDragstop6"
      @resizestop="onResizeStop6"
      :w="modelData.mechanism.width"
      :h="modelData.mechanism.height"
      :x="modelData.mechanism.left"
      :y="modelData.mechanism.top"
      :parent="true"
      v-if="modelData.mechanism.checked"
    >
      <p :style="modelData.mechanism.css">{{ modelData.mechanism.name }}</p>
    </vue-draggable-resizable>
  </div>
</template>

<script>
import html2Canvas from "html2canvas";
import VueDraggableResizable from "vue-draggable-resizable";
import "vue-draggable-resizable/dist/VueDraggableResizable.css";
export default {
  components: { VueDraggableResizable },
  props: {
    modelData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      IMGSHOW: true, //截图过程先隐藏二维码窗口
    };
  },
  methods: {
    //标签转oss图片路径
    changeFile() {
      return new Promise((resolve, reject) => {
        this.IMGSHOW = false;
        this.$nextTick(() => {
          html2Canvas(this.$refs.modelView, { useCORS: true, allowTaint: true })
            .then((canvas) => {
              const jpeg = canvas.toDataURL("image/jpeg", 1.0);
              this.$upload
                .upload(this.base64ToFile(jpeg), 0)
                .then((res) => {
                  resolve(res);
                })
                .catch(() => {
                  reject();
                });
            })
            .catch(() => {
              reject();
            })
            .finally(() => {
              this.IMGSHOW = true;
            });
        });
      });
    },
    //格式转换
    base64ToFile(urlData) {
      const arr = urlData.split(",");
      const mime = arr[0].match(/:(.*?);/)[1];
      const bytes = atob(arr[1]);
      let n = bytes.length;
      const ia = new Uint8Array(n);
      while (n--) {
        ia[n] = bytes.charCodeAt(n);
      }
      return new File([ia], "jpeg", { type: mime });
    },
    onDragstop1(left, top) {
      this.backData("title", left, top);
    },
    onResizeStop1(left, top, width, height) {
      this.backData("title", left, top, width, height);
    },
    onDragstop2(left, top) {
      this.backData("goods", left, top);
    },
    onResizeStop2(left, top, width, height) {
      this.backData("goods", left, top, width, height);
    },
    onDragstop3(left, top) {
      this.backData("distribution", left, top);
    },
    onResizeStop3(left, top, width, height) {
      this.backData("distribution", left, top, width, height);
    },
    onDragstop4(left, top) {
      this.backData("cardCode", left, top);
    },
    onResizeStop4(left, top, width, height) {
      this.backData("cardCode", left, top, width, height);
    },
    onDragstop5(left, top) {
      this.backData("advertise", left, top);
    },
    onResizeStop5(left, top, width, height) {
      this.backData("advertise", left, top, width, height);
    },
    onDragstop6(left, top) {
      this.backData("mechanism", left, top);
    },
    onResizeStop6(left, top, width, height) {
      this.backData("mechanism", left, top, width, height);
    },
    onDragstop7(left, top) {
      this.backData("distributionText", left, top);
    },
    onResizeStop7(left, top, width, height) {
      this.backData("distributionText", left, top, width, height);
    },
    onDragstop8(left, top) {
      this.backData("cardCodeText", left, top);
    },
    onResizeStop8(left, top, width, height) {
      this.backData("cardCodeText", left, top, width, height);
    },

    backData(name, left, top, width, height) {
      this.$emit("changeModelData", { name, left, top, width, height });
    },
  },
};
</script>

<style lang="scss" scoped>
#left {
  position: relative;
  width: 375px;
  height: 667px;
  border: 1px solid #333;
  margin-right: 20px;
  flex-shrink: 0;
  box-sizing: content-box;
  overflow: hidden;
}
.vdr {
  border-color: transparent;
}
.active {
  border: 1px dashed #000;
}
</style>