km-card-layout-component-miniprogram 0.1.25 → 0.1.26

package/example/pages/home/index.js

@@ -608,4 +608,14 @@ Page({
       })
     }
   },
+
+  async onShareClick() {
+    const component = this.selectComponent("#card-layout");
+    if (component) {
+      const shareFilePath = await component.handleDrawShareCanvas();
+      this.setData({
+        shareFilePath,
+      });
+    }
+  },
 });

package/example/pages/home/index.wxml

@@ -4,5 +4,7 @@
     <view class="subtitle">CardLayoutInput + { user } data</view>
   </view>
   <card-layout id="card-layout" layout="{{layouts}}" data="{{cardData}}" bind:tap="onClick" />
+  <button type="primary" bindtap="onShareClick">Draw Share Canvas</button>
   <image style="" src="{{filePath}}" mode="aspectFit" />
+  <image style="" src="{{shareFilePath}}" mode="aspectFit" />
 </view>

package/miniprogram_dist/components/card-layout/index.js

@@ -109,6 +109,7 @@ Component({
         cards: [],
         rootData: {},
         firstCard: [],
+        shareImage: "",
     },
     observers: {
         layout() {
@@ -150,6 +151,24 @@ Component({
                 wx.showToast({ title: "保存失败", icon: "error" });
             }
         },
+        async handleDrawShareCanvas() {
+            var _a, _b, _c;
+            const layoutPath = await this.handleDrawCanvas();
+            if (!layoutPath)
+                return;
+            const shareCanvas = this.selectComponent(`#share-canvas`);
+            if (!shareCanvas || typeof shareCanvas.drawShare !== "function")
+                return;
+            const shareStyleId = (_c = (_b = (_a = this.data.data) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.shareStyle) === null || _c === void 0 ? void 0 : _c.coverStyleId;
+            const filePath = await shareCanvas.drawShare({
+                layoutPath,
+                shareStyleId,
+            });
+            if (filePath) {
+                this.setData({ shareImage: filePath });
+            }
+            return filePath;
+        },
         async loadFont() {
             await wx.loadFontFace({
                 global: true,

package/miniprogram_dist/components/card-layout/index.json

@@ -6,6 +6,7 @@
     "icon-element": "./elements/icon-element/index",
     "custom-element": "./elements/custom-element/index",
     "layout-panel-element": "./elements/layout-panel-element/index",
-    "wxml2canvas": "../../vendor/wxml2canvas-2d/index"
+    "wxml2canvas": "../../vendor/wxml2canvas-2d/index",
+    "share-canvas": "./share-canvas/index"
   }
 }

package/miniprogram_dist/components/card-layout/index.wxml

@@ -15,6 +15,7 @@
 <template is="layout-template" data="{{ renderCards: cards, rootData: rootData }}"></template>
 <!-- 暂时只绘制第一张卡片 -->
 <wxml2canvas id="layout-canvas" container-class="layout-container" item-class="canvas-item"></wxml2canvas>
+<share-canvas id="share-canvas"></share-canvas>
 <template name="render-element">
   <block wx:if="{{el.type === 'image'}}">
     <image-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />

package/miniprogram_dist/components/card-layout/share-canvas/index.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const share_style_1 = require("./share-style");
+const resolveShareStyle = (shareStyleId) => {
+    const styleId = Number(shareStyleId);
+    if (Number.isFinite(styleId) && styleId > 0) {
+        const match = share_style_1.ShareStyle.find((item) => item.id === styleId);
+        if (match)
+            return match;
+    }
+    return share_style_1.ShareStyle[0];
+};
+const resolveShareBackground = (style) => (style === null || style === void 0 ? void 0 : style.bigImg) || (style === null || style === void 0 ? void 0 : style.path) || (style === null || style === void 0 ? void 0 : style.smallImg) || "";
+Component({
+    data: {
+        shareBgImage: "",
+        shareImage: "",
+        shareOffsetX: 0,
+        shareOffsetY: 0,
+    },
+    methods: {
+        setDataSync(data) {
+            return new Promise((resolve) => {
+                this.setData(data, resolve);
+            });
+        },
+        async drawShare(options) {
+            try {
+                const { layoutPath, shareStyleId } = options || {};
+                if (!layoutPath)
+                    return;
+                const resolvedStyle = resolveShareStyle(shareStyleId);
+                const shareBgImage = resolveShareBackground(resolvedStyle);
+                if (!shareBgImage)
+                    return;
+                const shareOffsetX = (resolvedStyle === null || resolvedStyle === void 0 ? void 0 : resolvedStyle.x) ? resolvedStyle.x * 2 : 0;
+                const shareOffsetY = (resolvedStyle === null || resolvedStyle === void 0 ? void 0 : resolvedStyle.y) ? resolvedStyle.y * 2 : 0;
+                await this.setDataSync({
+                    shareBgImage,
+                    shareOffsetX,
+                    shareOffsetY,
+                    shareImage: layoutPath,
+                });
+                const canvas = this.selectComponent(`#share-canvas`);
+                if (!canvas)
+                    return;
+                await canvas.draw(this);
+                const filePath = await canvas.toTempFilePath();
+                return filePath;
+            }
+            catch (_a) {
+                wx.showToast({ title: "保存失败", icon: "error" });
+            }
+        },
+    },
+});

package/miniprogram_dist/components/card-layout/share-canvas/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "wxml2canvas": "../../../vendor/wxml2canvas-2d/index"
+  }
+}

package/miniprogram_dist/components/card-layout/share-canvas/index.wxml

@@ -0,0 +1,11 @@
+
+<view class="share-container share-hidden">
+  <image class="share-bg share-item" src="{{shareBgImage}}" />
+  <image
+    class="share-card share-item"
+    src="{{shareImage}}"
+    mode="scaleToFill"
+    style="margin-left: {{shareOffsetX}}rpx; margin-top: {{shareOffsetY}}rpx;"
+  />
+</view>
+<wxml2canvas id="share-canvas" container-class="share-container" item-class="share-item"></wxml2canvas>

package/miniprogram_dist/components/card-layout/share-canvas/index.wxss

@@ -0,0 +1,27 @@
+.share-container {
+  position: relative;
+  box-sizing: border-box;
+  width: 422rpx;
+  height: 338rpx;
+}
+
+.share-hidden {
+  position: fixed;
+  left: -10000rpx;
+  top: -10000rpx;
+  opacity: 0;
+}
+
+.share-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 422rpx;
+  height: 338rpx;
+}
+
+.share-card {
+  width: 402rpx;
+  height: 247rpx;
+  border-radius: 16rpx;
+}

package/miniprogram_dist/components/card-layout/share-canvas/share-style.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareStyle = void 0;
+exports.ShareStyle = [
+    {
+        id: 1,
+        bigImg: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_1.png",
+        smallImg: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_small_1.png",
+        path: "images/cardstyleV3/background_cover_1.png",
+        x: 6,
+        y: 12,
+    },
+    {
+        id: 2,
+        bigImg: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_2.png",
+        smallImg: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_small_2.png",
+        path: "images/cardstyleV3/background_cover_2.png",
+        x: 6,
+        y: 35,
+    },
+    {
+        id: 3,
+        bigImg: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_3.png",
+        smallImg: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_small_3.png",
+        path: "images/cardstyleV3/background_cover_3.png",
+        x: 6,
+        y: 12,
+    },
+    {
+        id: 4,
+        bigImg: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_4.png",
+        smallImg: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_small_4.png",
+        path: "images/cardstyleV3/background_cover_4.png",
+        x: 6,
+        y: 24,
+    },
+];

package/miniprogram_dist/components/card-layout/share-style.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareStyle = void 0;
+var share_style_1 = require("./share-canvas/share-style");
+Object.defineProperty(exports, "ShareStyle", { enumerable: true, get: function () { return share_style_1.ShareStyle; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "km-card-layout-component-miniprogram",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "",
   "main": "miniprogram_dist/index.js",
   "miniprogram": "miniprogram_dist",

package/src/components/card-layout/index.json

@@ -6,6 +6,7 @@
     "icon-element": "./elements/icon-element/index",
     "custom-element": "./elements/custom-element/index",
     "layout-panel-element": "./elements/layout-panel-element/index",
-    "wxml2canvas": "../../vendor/wxml2canvas-2d/index"
+    "wxml2canvas": "../../vendor/wxml2canvas-2d/index",
+    "share-canvas": "./share-canvas/index"
   }
 }

package/src/components/card-layout/index.ts

@@ -133,7 +133,7 @@ Component({
     data: {
       type: Object,
       value: {
-        user: {},
+        user: {} as AnyObject,
       },
     },
   },
@@ -141,6 +141,7 @@ Component({
     cards: [] as RenderCard[],
     rootData: {} as Record<string, any>,
     firstCard: [] as RenderCard[],
+    shareImage: "",
   },
   observers: {
     layout() {
@@ -183,6 +184,24 @@ Component({
       }
     },
 
+    async handleDrawShareCanvas() {
+      const layoutPath = await this.handleDrawCanvas();
+      if (!layoutPath) return;
+
+      const shareCanvas = this.selectComponent(`#share-canvas`) as any;
+      if (!shareCanvas || typeof shareCanvas.drawShare !== "function") return;
+
+      const shareStyleId = this.data.data?.user?.shareStyle?.coverStyleId ;
+      const filePath = await shareCanvas.drawShare({
+        layoutPath,
+        shareStyleId,
+      });
+      if (filePath) {
+        this.setData({ shareImage: filePath });
+      }
+      return filePath;
+    },
+
     async loadFont() {
       await wx.loadFontFace({
         global: true,

package/src/components/card-layout/index.wxml

@@ -15,6 +15,7 @@
 <template is="layout-template" data="{{ renderCards: cards, rootData: rootData }}"></template>
 <!-- 暂时只绘制第一张卡片 -->
 <wxml2canvas id="layout-canvas" container-class="layout-container" item-class="canvas-item"></wxml2canvas>
+<share-canvas id="share-canvas"></share-canvas>
 <template name="render-element">
   <block wx:if="{{el.type === 'image'}}">
     <image-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />

package/src/components/card-layout/share-canvas/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "wxml2canvas": "../../../vendor/wxml2canvas-2d/index"
+  }
+}

package/src/components/card-layout/share-canvas/index.ts

@@ -0,0 +1,59 @@
+import { ShareStyle } from "./share-style";
+
+type ShareStyleItem = (typeof ShareStyle)[number];
+
+const resolveShareStyle = (shareStyleId?: number | string): ShareStyleItem => {
+  const styleId = Number(shareStyleId);
+  if (Number.isFinite(styleId) && styleId > 0) {
+    const match = ShareStyle.find((item) => item.id === styleId);
+    if (match) return match;
+  }
+  return ShareStyle[0];
+};
+
+const resolveShareBackground = (style?: ShareStyleItem) =>
+  style?.bigImg || style?.path || style?.smallImg || "";
+
+Component({
+  data: {
+    shareBgImage: "",
+    shareImage: "",
+    shareOffsetX: 0,
+    shareOffsetY: 0,
+  },
+  methods: {
+    setDataSync(data: Record<string, any>) {
+      return new Promise<void>((resolve) => {
+        this.setData(data, resolve);
+      });
+    },
+
+    async drawShare(options: { layoutPath: string; shareStyleId?: number | string }) {
+      try {
+        const { layoutPath, shareStyleId } = options || {};
+        if (!layoutPath) return;
+
+        const resolvedStyle = resolveShareStyle(shareStyleId);
+        const shareBgImage = resolveShareBackground(resolvedStyle);
+        if (!shareBgImage) return;
+
+        const shareOffsetX = resolvedStyle?.x ? resolvedStyle.x * 2 : 0;
+        const shareOffsetY = resolvedStyle?.y ? resolvedStyle.y * 2 : 0;
+        await this.setDataSync({
+          shareBgImage,
+          shareOffsetX,
+          shareOffsetY,
+          shareImage: layoutPath,
+        });
+
+        const canvas = this.selectComponent(`#share-canvas`);
+        if (!canvas) return;
+        await canvas.draw(this);
+        const filePath = await canvas.toTempFilePath();
+        return filePath;
+      } catch {
+        wx.showToast({ title: "保存失败", icon: "error" });
+      }
+    },
+  },
+});

package/src/components/card-layout/share-canvas/index.wxml

@@ -0,0 +1,11 @@
+
+<view class="share-container share-hidden">
+  <image class="share-bg share-item" src="{{shareBgImage}}" />
+  <image
+    class="share-card share-item"
+    src="{{shareImage}}"
+    mode="scaleToFill"
+    style="margin-left: {{shareOffsetX}}rpx; margin-top: {{shareOffsetY}}rpx;"
+  />
+</view>
+<wxml2canvas id="share-canvas" container-class="share-container" item-class="share-item"></wxml2canvas>

package/src/components/card-layout/share-canvas/index.wxss

@@ -0,0 +1,27 @@
+.share-container {
+  position: relative;
+  box-sizing: border-box;
+  width: 422rpx;
+  height: 338rpx;
+}
+
+.share-hidden {
+  position: fixed;
+  left: -10000rpx;
+  top: -10000rpx;
+  opacity: 0;
+}
+
+.share-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 422rpx;
+  height: 338rpx;
+}
+
+.share-card {
+  width: 402rpx;
+  height: 247rpx;
+  border-radius: 16rpx;
+}

package/src/components/card-layout/share-canvas/share-style.ts

@@ -0,0 +1,42 @@
+export const ShareStyle = [
+  {
+    id: 1,
+    bigImg:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_1.png",
+    smallImg:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_small_1.png",
+    path: "images/cardstyleV3/background_cover_1.png",
+    x: 6,
+    y: 12,
+  },
+  {
+    id: 2,
+    bigImg:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_2.png",
+    smallImg:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_small_2.png",
+    path: "images/cardstyleV3/background_cover_2.png",
+    x: 6,
+    y: 35,
+  },
+  {
+    id: 3,
+    bigImg:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_3.png",
+    smallImg:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_small_3.png",
+    path: "images/cardstyleV3/background_cover_3.png",
+    x: 6,
+    y: 12,
+  },
+  {
+    id: 4,
+    bigImg:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_4.png",
+    smallImg:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/background_cover_small_4.png",
+    path: "images/cardstyleV3/background_cover_4.png",
+    x: 6,
+    y: 24,
+  },
+];

package/src/components/card-layout/share-style.ts

@@ -0,0 +1 @@
+export { ShareStyle } from "./share-canvas/share-style";