合伙人-商品海报背景图改成从后端获取

htmldev/loan/src/views/partner/all/components/main.vue

@@ -212,7 +212,6 @@ export default {
   height: 48px;
   border-radius: 50%;
   overflow: hidden;
-  background: pink;
 
   img {
     display: block;

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

@@ -73,7 +73,7 @@ export default {
       arrFetchStatus: ['正在加载，请稍后～', '上拉加载更多', '没有更多了', '出错啦'],
       booFetchData: false,
       numPositionY: 0,
-      posterBg: require('./image/poster_loan.png'),
+      posterBg: '',
       codeParams: {
         link: '',
         x: 126,
@@ -157,7 +157,8 @@ export default {
       })
     },
     funJumpDetail (item) {
-      const { id } = item
+      const { id, productShareUrl } = item
+      this.posterBg = productShareUrl
       this.$set(this.codeParams, 'link', `${location.origin}/loan/explain/${id}?partnerId=${this.partnerId}`)
       this.$nextTick(() => {
         this.$refs.myPoster.createQRCode()

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

@@ -11,178 +11,178 @@
 </template>
 
 <script>
-  import { Popup, Notify, Toast } from 'vant'
-  import QRCode from 'qrcodejs2'
+import { Popup, Notify, Toast } from 'vant'
+import QRCode from 'qrcodejs2'
 
-  export default {
-    name: 'poster',
-    components: {
-      Popup
+export default {
+  name: 'poster',
+  components: {
+    Popup
+  },
+  props: {
+    posterBg: {
+      type: String,
+      default: ''
     },
-    props: {
-      posterBg: {
-        type: String,
-        default: ''
-      },
-      codeParams: {
-        type: Object,
-        default: function () {
-          return {
-            partnerImgUrl: '',
-            partnerName: '',
-            link: '',
-            x: 112,
-            y: 1046,
-            width: 202,
-            height: 202
-          }
+    codeParams: {
+      type: Object,
+      default: function () {
+        return {
+          partnerImgUrl: '',
+          partnerName: '',
+          link: '',
+          x: 112,
+          y: 1046,
+          width: 202,
+          height: 202
         }
       }
-    },
-    data () {
-      return {
-        showPoster: false,
-        strPostSrc: '',
-        qrcode: null
+    }
+  },
+  data () {
+    return {
+      showPoster: false,
+      strPostSrc: '',
+      qrcode: null
+    }
+  },
+  methods: {
+    createQRCode () {
+      const { link } = this.codeParams
+      Toast.loading({
+        message: '海报生成中...',
+        forbidClick: true,
+        duration: 0
+      })
+      if (!this.qrcode) {
+        this.qrcode = new QRCode('qr-code', {
+          width: 212,
+          height: 212,
+          text: link,
+          colorDark: '#000',
+          colorLight: '#fff'
+        })
+      } else {
+        this.qrcode.clear()
+        this.qrcode.makeCode(link)
       }
+      const timer = setTimeout(() => {
+        clearTimeout(timer)
+        this.createPoster()
+      }, 500)
     },
-    methods: {
-      createQRCode () {
-        const { link } = this.codeParams
-        Toast.loading({
-          message: '海报生成中...',
-          forbidClick: true,
-          duration: 0
-        })
-        if (!this.qrcode) {
-          this.qrcode = new QRCode('qr-code', {
-            width: 212,
-            height: 212,
-            text: link,
-            colorDark: '#000',
-            colorLight: '#fff'
-          })
-        } else {
-          this.qrcode.clear()
-          this.qrcode.makeCode(link)
-        }
-        const timer = setTimeout(() => {
-          clearTimeout(timer)
-          this.createPoster()
-        }, 500)
-      },
-      setImg (params) {
-        const { isDrewCircle } = params
-        const img = new Image()
-        img.crossOrigin = 'anonymous'
-        img.onload = function () {
-          if (isDrewCircle) {
-            params.ctx.beginPath()
-            params.ctx.arc(params.x + params.width / 2, params.y + params.width / 2, params.width / 2, 0, Math.PI * 2, false)
-            params.ctx.clip()
-          }
-          params.ctx.drawImage(img, params.x, params.y, params.width, params.height)
-          params.cb()
+    setImg (params) {
+      const { isDrewCircle } = params
+      const img = new Image()
+      img.crossOrigin = 'anonymous'
+      img.onload = function () {
+        if (isDrewCircle) {
+          params.ctx.beginPath()
+          params.ctx.arc(params.x + params.width / 2, params.y + params.width / 2, params.width / 2, 0, Math.PI * 2, false)
+          params.ctx.clip()
         }
-        img.src = params.src
-      },
-      createPoster () {
-        const vm = this
-        const { posterBg } = this
-        const { partnerImgUrl, partnerName, x, y, width, height } = 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
-        // 绘制背景
-        vm.setImg({
-          ctx,
-          src: posterBg,
-          x: 0,
-          y: 0,
-          width: 750,
-          height: 1446,
-          cb () {
-            if (partnerImgUrl) {
-              ctx.font = '400 28px/40px STYuanti-Regular'
-              ctx.fillStyle = '#C9AD8D'
-              ctx.fillText('推广人：', 236, 1128)
-              ctx.save()
-              vm.setImg({
-                ctx,
-                src: partnerImgUrl,
-                x: 346,
-                y: 1100,
-                width: 40,
-                height: 40,
-                isDrewCircle: true,
-                cb () {
-                  ctx.restore()
-                  ctx.font = '600 28px/40px STYuanti-Regular'
-                  ctx.fillStyle = '#C9AD8D'
-                  ctx.fillText(partnerName, 398, 1130)
-                  // 绘制二维码
-                  vm.setImg({
-                    ctx,
-                    src: code.src,
-                    x: x,
-                    y: y,
-                    width: width,
-                    height: height,
-                    cb () {
-                      vm.strPostSrc = canvas.toDataURL('image/png', 1)
-                      vm.showPoster = true
-                      Toast.clear()
-                      Notify({ type: 'primary', message: '长按图片保存到相册', duration: 3000 })
-                    }
-                  })
-                }
-              })
-            } else {
-              // 绘制二维码
-              vm.setImg({
-                ctx,
-                src: code.src,
-                x: x,
-                y: y,
-                width: width,
-                height: height,
-                cb () {
-                  vm.strPostSrc = canvas.toDataURL('image/png', 1)
-                  vm.showPoster = true
-                  Toast.clear()
-                  Notify({ type: 'primary', message: '长按图片保存到相册', duration: 3000 })
-                }
-              })
-            }
+        params.ctx.drawImage(img, params.x, params.y, params.width, params.height)
+        params.cb()
+      }
+      img.src = params.src
+    },
+    createPoster () {
+      const vm = this
+      const { posterBg } = this
+      const { partnerImgUrl, partnerName, x, y, width, height } = 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
+      // 绘制背景
+      vm.setImg({
+        ctx,
+        src: posterBg,
+        x: 0,
+        y: 0,
+        width: 750,
+        height: 1446,
+        cb () {
+          if (partnerImgUrl) {
+            ctx.font = '400 28px/40px STYuanti-Regular'
+            ctx.fillStyle = '#C9AD8D'
+            ctx.fillText('推广人：', 236, 1128)
+            ctx.save()
+            vm.setImg({
+              ctx,
+              src: partnerImgUrl,
+              x: 346,
+              y: 1100,
+              width: 40,
+              height: 40,
+              isDrewCircle: true,
+              cb () {
+                ctx.restore()
+                ctx.font = '600 28px/40px STYuanti-Regular'
+                ctx.fillStyle = '#C9AD8D'
+                ctx.fillText(partnerName, 398, 1130)
+                // 绘制二维码
+                vm.setImg({
+                  ctx,
+                  src: code.src,
+                  x: x,
+                  y: y,
+                  width: width,
+                  height: height,
+                  cb () {
+                    vm.strPostSrc = canvas.toDataURL('image/png', 1)
+                    vm.showPoster = true
+                    Toast.clear()
+                    Notify({ type: 'primary', message: '长按图片保存到相册', duration: 3000 })
+                  }
+                })
+              }
+            })
+          } else {
+            // 绘制二维码
+            vm.setImg({
+              ctx,
+              src: code.src,
+              x: x,
+              y: y,
+              width: width,
+              height: height,
+              cb () {
+                vm.strPostSrc = canvas.toDataURL('image/png', 1)
+                vm.showPoster = true
+                Toast.clear()
+                Notify({ type: 'primary', message: '长按图片保存到相册', duration: 3000 })
+              }
+            })
           }
-        })
-      },
-      // 图片预览
-      funPreviewImage () {
-        const vm = this
-        if (!vm.strPostSrc) {
-          return
         }
-        window.wx.previewImage({
-          current: vm.strPostSrc,
-          urls: [vm.strPostSrc]
-        })
+      })
+    },
+    // 图片预览
+    funPreviewImage () {
+      const vm = this
+      if (!vm.strPostSrc) {
+        return
       }
+      window.wx.previewImage({
+        current: vm.strPostSrc,
+        urls: [vm.strPostSrc]
+      })
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .hide {
-    display: none;
-  }
+.hide {
+  display: none;
+}
 
-  .poster {
-    display: block;
-    width: 100%;
-  }
+.poster {
+  display: block;
+  width: 100%;
+}
 </style>