海报：完善拼团分享海报

sheep/components/s-share-modal/canvas-poster/poster/groupon.js

@@ -1,114 +1,123 @@
 import sheep from '@/sheep';
 import { formatImageUrlProtocol } from './index';
+import third from '@/sheep/api/migration/third';
 
-const groupon = (poster) => {
+const groupon = async (poster) => {
   const width = poster.width;
   const userInfo = sheep.$store('user').userInfo;
-
-  return {
-    background: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.groupon_bg)),
-    list: [
-      {
-        name: 'nickname',
-        type: 'text',
-        val: userInfo.nickname,
-        x: width * 0.22,
-        y: width * 0.06,
-        paintbrushProps: {
-          fillStyle: '#333',
-          font: {
-            fontSize: 16,
-            fontFamily: 'sans-serif',
-          },
-        },
+  const wxa_qrcode = (await third.wechat.getWxacode(poster.shareInfo.path, poster.shareInfo.query)).data;
+  return [
+    {
+      type: 'image',
+      src: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.groupon_bg)),
+      css: {
+        width,
+        position: 'fixed',
+        'object-fit': 'contain',
+        top: '0',
+        left: '0',
+        zIndex: -1,
+      },
+    },
+    {
+      type: 'text',
+      text: userInfo.nickname,
+      css: {
+        color: '#333',
+        fontSize: 16,
+        fontFamily: 'sans-serif',
+        position: 'fixed',
+        top: width * 0.06,
+        left: width * 0.22,
       },
-      {
-        name: 'avatar',
-        type: 'image',
-        val: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
-        x: width * 0.04,
-        y: width * 0.04,
+    },
+    {
+      type: 'image',
+      src: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
+      css: {
+        position: 'fixed',
+        left: width * 0.04,
+        top: width * 0.04,
         width: width * 0.14,
         height: width * 0.14,
-        d: width * 0.14,
       },
-      {
-        name: 'goodsImage',
-        type: 'image',
-        val: formatImageUrlProtocol(poster.shareInfo.poster.image),
-        x: width * 0.03,
-        y: width * 0.21,
+    },
+    {
+      type: 'image',
+      src: formatImageUrlProtocol(poster.shareInfo.poster.image),
+      css: {
+        position: 'fixed',
+        left: width * 0.03,
+        top: width * 0.21,
         width: width * 0.94,
         height: width * 0.94,
-        r: 10,
+        borderRadius: 10,
       },
-      {
-        name: 'goodsTitle',
-        type: 'text',
-        val: poster.shareInfo.poster.title,
-        x: width * 0.04,
-        y: width * 1.18,
+    },
+    {
+      type: 'text',
+      text: poster.shareInfo.poster.title,
+      css: {
+        color: '#333',
+        fontSize: 14,
+        position: 'fixed',
+        top: width * 1.18,
+        left: width * 0.04,
         maxWidth: width * 0.91,
-        line: 2,
         lineHeight: 5,
-        paintbrushProps: {
-          fillStyle: '#333',
-          font: {
-            fontSize: 14,
-          },
-        },
       },
-      {
-        name: 'goodsPrice',
-        type: 'text',
-        val: '￥' + poster.shareInfo.poster.price,
-        x: width * 0.04,
-        y: width * 1.3,
-        paintbrushProps: {
-          fillStyle: '#ff0000',
-          font: {
-            fontSize: 20,
-            fontFamily: 'OPPOSANS',
-          },
-        },
+    },
+    {
+      type: 'text',
+      text: '￥' + poster.shareInfo.poster.price,
+      css: {
+        color: '#ff0000',
+        fontSize: 20,
+        fontFamily: 'OPPOSANS',
+        position: 'fixed',
+        top: width * 1.3,
+        left: width * 0.04,
       },
-      {
-        name: 'grouponNum',
-        type: 'text',
-        val: '2人团',
-        x: width * 0.3,
-        y: width * 1.32,
-        paintbrushProps: {
-          fillStyle: '#ff0000',
-          font: {
-            fontSize: 10,
-            fontFamily: 'OPPOSANS',
-          },
-        },
+    },
+    {
+      type: 'text',
+      text: '2人团',
+      css: {
+        color: '#ff0000',
+        fontSize: 30,
+        fontFamily: 'OPPOSANS',
+        position: 'fixed',
+        left: width * 0.3,
+        top: width * 1.32,
       },
-      // #ifndef MP-WEIXIN
-      {
-        name: 'qrcode',
-        type: 'qrcode',
-        val: poster.shareInfo.link,
-        x: width * 0.75,
-        y: width * 1.3,
-        size: width * 0.2,
+    },
+    // #ifndef MP-WEIXIN
+    {
+      type: 'qrcode',
+      text: poster.shareInfo.link,
+      css: {
+        position: 'fixed',
+        left: width * 0.75,
+        top: width * 1.3,
+        width: width * 0.2,
+        height: width * 0.2,
       },
-      // #endif
-      // #ifdef MP-WEIXIN
-      {
-        name: 'wxacode',
-        type: 'image',
-        val: sheep.$api.third.wechat.getWxacode(poster.shareInfo.path),
-        x: width * 0.75,
-        y: width * 1.3,
+    },
+    // #endif
+    // #ifdef MP-WEIXIN
+    {
+      type: 'image',
+      src: wxa_qrcode,
+      css: {
+        position: 'fixed',
+        left: width * 0.75,
+        top: width * 1.3,
         width: width * 0.2,
         height: width * 0.2,
       },
-      // #endif
-    ],
-  };
+    },
+    // #endif
+  ];
 };
 
 export default groupon;