cv-draw-posters 绘制海报 ¶

<template>
  <view>
    <view class="components-title">
      <view class="components-title-t">cv-draw-posters</view>
      <view class="components-title-d">绘制海报</view>
    </view>
    <cv-draw-posters :postersData="postersData" @success="onSuccessCreatePosters" @error="onPostersError" />

    <!-- 仅为生成二维码使用 -->
    <cv-draw-qrcode
      style="height: 0; overflow: hidden"
      :val="code"
      :onval="true"
      icon="/static/logo.png"
      loadMake
      @result="onResult"
    />
    <view style="text-align: center">
      <image
        :src="posterImg.path"
        v-bind:style="'width:' + postersData.width / 3 + 'px;' + 'height:' + postersData.height / 3 + 'px;'"
      />
    </view>
    <cv-form-base ref="refFormBase" style="padding: 0 10px" labelWidth="100">
      <cv-form-item label="邀请码">
        <cv-input-text v-model="code" />
      </cv-form-item>
      <cv-form-item label="二维码大小">
        <cv-input-text v-model="qrcode.width" />
      </cv-form-item>
      <cv-form-item label="二维码左边距">
        <cv-input-text v-model="qrcode.left" />
      </cv-form-item>
      <cv-form-item label="二维码上边距">
        <cv-input-text v-model="qrcode.top" />
      </cv-form-item>
    </cv-form-base>
    <cv-btn-base @click="initPostersConfig">生成</cv-btn-base>
  </view>
</template>
<script>
export default {
  data() {
    return {
      postersData: {},
      posterImg: {},
      code: 'LSKDGHKJH',
      qrcode: { width: 280, top: 965, left: 275 }
    };
  },
  onLoad() {},
  methods: {
    initPostersConfig() {
      const config = {
        clear: true,
        width: 830,
        height: 1435,
        background: '#ffffff',
        views: [
          {
            type: 'image',
            width: 830,
            height: 1435,
            top: 0,
            left: 0,
            // 封面图，测试的时候填上
            url: '/static/images/posters-background.png'
          },
          {
            type: 'text',
            width: 400,
            height: 50,
            left: 345,
            top: 1348,
            fontSize: 24,
            lineHeight: 40,
            bolder: true,
            breakWord: true,
            content: this.code,
            color: '#000000',
            MaxLineNumber: 2
          },
          {
            type: 'image',
            width: parseInt(this.qrcode.width),
            height: parseInt(this.qrcode.width),
            top: parseInt(this.qrcode.top),
            left: parseInt(this.qrcode.left),
            // 二维码图片路径，测试的时候填上
            url: this.qrcode.url || '/static/goods_list/face.jpg'
          }
        ]
      };
      this.$set(this, 'postersData', config);
      console.log({ ...this.postersData });
    },
    onSuccessCreatePosters(res) {
      console.log(res);
      this.$set(this, 'posterImg', res);
    },
    onPostersError(res) {
      console.log(res);
    },
    onResult(e) {
      this.qrcode.url = e;
      this.initPostersConfig();
    }
  }
};
</script>