妥妥：海报生成样式

htmldev/loan/src/views/partner/marketing/index.vue

@@ -56,15 +56,19 @@ export default {
   },
   data () {
     return {
-      posterBg: require('./image/poster_partner.png'),
+      posterBg: require('./image/poster_partner_20221104.png'),
       codeParams: {
+        canvasWidth: 668,
+        canvasHeight: 1167,
         partnerImgUrl: '',
         partnerName: '',
         link: '',
-        x: 122,
-        y: 1191,
-        width: 202,
-        height: 192
+        x: 106,
+        y: 930,
+        width: 185,
+        height: 185,
+        partnerLabelY: 885,
+        partnerImgUrlY: 855
       }
     }
   },

htmldev/loan/src/views/partner/poster/index.vue

@@ -1,9 +1,14 @@
 <template>
   <div>
-    <Popup position="bottom"
-           :style="{width: '80%', height: '88.5%', left: '10%', bottom: '3%'}"
-           v-model="showPoster">
-      <img class="poster" :src="strPostSrc" alt="" @click="funPreviewImage">
+    <Popup
+      position="bottom"
+      :style="{width: '80%', height: '88.5%', left: '10%', bottom: '3%', background: 'transparent'}"
+      v-model="showPoster">
+      <img
+        class="poster"
+        :src="strPostSrc"
+        alt=""
+        @click="funPreviewImage">
     </Popup>
     <div class="hide" id="qr-code"></div>
     <canvas class="hide" ref="myCanvas"></canvas>
@@ -89,33 +94,44 @@ export default {
     createPoster () {
       const vm = this
       const { posterBg } = this
-      const { partnerImgUrl, partnerName, x, y, width, height } = this.codeParams
+      const {
+        partnerImgUrl,
+        partnerName,
+        x,
+        y,
+        width,
+        height,
+        canvasWidth,
+        canvasHeight,
+        partnerLabelY,
+        partnerImgUrlY
+      } = this.codeParams
       const canvas = vm.$refs.myCanvas
       const ctx = canvas.getContext('2d')
       const canvas2 = document.getElementById('qr-code').getElementsByTagName('canvas')[0]
       const code = {}
       code.src = canvas2.toDataURL('image/png', 1)
-      canvas.width = 750
-      canvas.height = 1446
+      canvas.width = canvasWidth || 750
+      canvas.height = canvasHeight || 1446
       // 绘制背景
       vm.setImg({
         ctx,
         src: posterBg,
         x: 0,
         y: 0,
-        width: 750,
-        height: 1446,
+        width: canvasWidth || 750,
+        height: canvasHeight || 1446,
         cb () {
           if (partnerImgUrl) {
             ctx.font = '400 28px/40px STYuanti-Regular'
             ctx.fillStyle = '#C9AD8D'
-            ctx.fillText('推广人：', 236, 1128)
+            ctx.fillText('推广人：', 236, partnerLabelY || 1128)
             ctx.save()
             vm.setImg({
               ctx,
               src: partnerImgUrl,
               x: 346,
-              y: 1100,
+              y: partnerImgUrlY || 1100,
               width: 40,
               height: 40,
               isDrewCircle: true,
@@ -123,7 +139,7 @@ export default {
                 ctx.restore()
                 ctx.font = '600 28px/40px STYuanti-Regular'
                 ctx.fillStyle = '#C9AD8D'
-                ctx.fillText(partnerName, 398, 1130)
+                ctx.fillText(partnerName, 398, partnerLabelY || 1130)
                 // 绘制二维码
                 vm.setImg({
                   ctx,