默认提交

@@ -28,6 +28,7 @@ module.exports = {
    */
   areaQuery: 'https://api.k.wxpai.cn/bizproxy/kdapi/area', // post 区域查询
 
-  uploadFile: '/kdapi/file/upload' //上传图片通用接口
+  wxacodeGet: "/mzcfsapi/qrcode/createV2", // 通用上传  ?path=/pages/index/index?pa=1
+  uploadFile: '/kdapi/file/upload', //上传图片通用接口
 
 }

+const main = {
+    /**
+     * 渲染块
+     * @param {Object} params
+     */
+    drawBlock({ text, width = 0, height, x, y, paddingLeft = 0, paddingRight = 0, borderWidth, backgroundColor, borderColor, borderRadius = 0, opacity = 1 }) {
+        // 判断是否块内有文字
+        let blockWidth = 0; // 块的宽度
+        let textX = 0;
+        let textY = 0;
+        if (typeof text !== 'undefined') {
+            // 如果有文字并且块的宽度小于文字宽度，块的宽度为 文字的宽度 + 内边距
+            const textWidth = this._getTextWidth(typeof text.text === 'string' ? text : text.text);
+            blockWidth = textWidth > width ? textWidth : width;
+            blockWidth += paddingLeft + paddingLeft;
+
+            const { textAlign = 'left', text: textCon } = text;
+            textY = height / 2 + y; // 文字的y轴坐标在块中线
+            if (textAlign === 'left') {
+                // 如果是右对齐，那x轴在块的最左边
+                textX = x + paddingLeft;
+            } else if (textAlign === 'center') {
+                textX = blockWidth / 2 + x;
+            } else {
+                textX = x + blockWidth - paddingRight;
+            }
+        } else {
+            blockWidth = width;
+        }
+
+        if (backgroundColor) {
+            // 画面
+            this.ctx.save();
+            this.ctx.setGlobalAlpha(opacity);
+            this.ctx.setFillStyle(backgroundColor);
+            if (borderRadius > 0) {
+                // 画圆角矩形
+                this._drawRadiusRect(x, y, blockWidth, height, borderRadius);
+                this.ctx.fill();
+            } else {
+                this.ctx.fillRect(this.toPx(x), this.toPx(y), this.toPx(blockWidth), this.toPx(height));
+            }
+            this.ctx.restore();
+        }
+        if (borderWidth) {
+            // 画线
+            this.ctx.save();
+            this.ctx.setGlobalAlpha(opacity);
+            this.ctx.setStrokeStyle(borderColor);
+            this.ctx.setLineWidth(this.toPx(borderWidth));
+            if (borderRadius > 0) {
+                // 画圆角矩形边框
+                this._drawRadiusRect(x, y, blockWidth, height, borderRadius);
+                this.ctx.stroke();
+            } else {
+                this.ctx.strokeRect(this.toPx(x), this.toPx(y), this.toPx(blockWidth), this.toPx(height));
+            }
+            this.ctx.restore();
+        }
+
+        if (text) {
+            this.drawText(Object.assign(text, { x: textX, y: textY }))
+        }
+    },
+
+    /**
+     * 渲染文字
+     * @param {Object} params
+     */
+    drawText(params) {
+        const { x, y, fontSize, color, baseLine, textAlign, text, opacity = 1, width, lineNum, lineHeight } = params;
+        if (Object.prototype.toString.call(text) === '[object Array]') {
+            let preText = { x, y, baseLine };
+            text.forEach(item => {
+                preText.x += item.marginLeft || 0;
+                const textWidth = this._drawSingleText(Object.assign(item, {
+                    ...preText,
+                }));
+                preText.x += textWidth + (item.marginRight || 0); // 下一段字的x轴为上一段字x + 上一段字宽度
+            })
+        } else {
+            this._drawSingleText(params);
+        }
+    },
+
+    /**
+     * 渲染图片
+     */
+    drawImage(data) {
+        const { imgPath, x, y, w, h, sx, sy, sw, sh, borderRadius = 0, borderWidth = 0, borderColor } = data;
+        this.ctx.save();
+        if (borderRadius > 0) {
+            this._drawRadiusRect(x, y, w, h, borderRadius);
+            this.ctx.strokeStyle = 'rgba(255,255,255,0)';
+            this.ctx.stroke();
+            this.ctx.clip();
+            this.ctx.drawImage(imgPath, this.toPx(sx), this.toPx(sy), this.toPx(sw), this.toPx(sh), this.toPx(x), this.toPx(y), this.toPx(w), this.toPx(h));
+            if (borderWidth > 0) {
+                this.ctx.setStrokeStyle(borderColor);
+                this.ctx.setLineWidth(this.toPx(borderWidth));
+                this.ctx.stroke();
+            }
+        } else {
+            this.ctx.drawImage(imgPath, this.toPx(sx), this.toPx(sy), this.toPx(sw), this.toPx(sh), this.toPx(x), this.toPx(y), this.toPx(w), this.toPx(h));
+        }
+        this.ctx.restore();
+    },
+    /**
+     * 渲染线
+     * @param {*} param0
+     */
+    drawLine({ startX, startY, endX, endY, color, width }) {
+        this.ctx.save();
+        this.ctx.beginPath();
+        this.ctx.setStrokeStyle(color);
+        this.ctx.setLineWidth(this.toPx(width));
+        this.ctx.moveTo(this.toPx(startX), this.toPx(startY));
+        this.ctx.lineTo(this.toPx(endX), this.toPx(endY));
+        this.ctx.stroke();
+        this.ctx.closePath();
+        this.ctx.restore();
+    },
+    downloadResource(images = []) {
+        const drawList = [];
+        this.drawArr = [];
+        images.forEach((image, index) => drawList.push(this._downloadImageAndInfo(image, index)));
+        return Promise.all(drawList);
+    },
+    initCanvas(w, h, debug) {
+        return new Promise((resolve) => {
+            this.setData({
+                pxWidth: this.toPx(w),
+                pxHeight: this.toPx(h),
+                debug,
+            }, resolve);
+        });
+    }
+}
+const handle = {
+    /**
+     * 画圆角矩形
+     */
+    _drawRadiusRect(x, y, w, h, r) {
+        const br = r / 2;
+        this.ctx.beginPath();
+        this.ctx.moveTo(this.toPx(x + br), this.toPx(y));    // 移动到左上角的点
+        this.ctx.lineTo(this.toPx(x + w - br), this.toPx(y));
+        this.ctx.arc(this.toPx(x + w - br), this.toPx(y + br), this.toPx(br), 2 * Math.PI * (3 / 4), 2 * Math.PI * (4 / 4))
+        this.ctx.lineTo(this.toPx(x + w), this.toPx(y + h - br));
+        this.ctx.arc(this.toPx(x + w - br), this.toPx(y + h - br), this.toPx(br), 0, 2 * Math.PI * (1 / 4))
+        this.ctx.lineTo(this.toPx(x + br), this.toPx(y + h));
+        this.ctx.arc(this.toPx(x + br), this.toPx(y + h - br), this.toPx(br), 2 * Math.PI * (1 / 4), 2 * Math.PI * (2 / 4))
+        this.ctx.lineTo(this.toPx(x), this.toPx(y + br));
+        this.ctx.arc(this.toPx(x + br), this.toPx(y + br), this.toPx(br), 2 * Math.PI * (2 / 4), 2 * Math.PI * (3 / 4))
+    },
+    /**
+     * 计算文本长度
+     * @param {Array|Object}} text 数组 或者 对象
+     */
+    _getTextWidth(text) {
+        let texts = [];
+        if (Object.prototype.toString.call(text) === '[object Object]') {
+            texts.push(text);
+        } else {
+            texts = text;
+        }
+        let width = 0;
+        texts.forEach(({ fontSize, text, marginLeft = 0, marginRight = 0 }) => {
+            this.ctx.setFontSize(this.toPx(fontSize));
+            width += this.ctx.measureText(text).width + marginLeft + marginRight;
+        })
+
+        return this.toRpx(width);
+    },
+    /**
+     * 渲染一段文字
+     */
+    _drawSingleText({ x, y, fontSize, color, baseLine, textAlign = 'left', text, opacity = 1, textDecoration = 'none',
+      width, lineNum = 1, lineHeight = 0, fontWeight = 'normal', fontStyle = 'normal', fontFamily = "sans-serif"}) {
+        this.ctx.save();
+        this.ctx.beginPath();
+        this.ctx.font = fontStyle + " " + fontWeight + " " + this.toPx(fontSize, true) + "px " + fontFamily
+        this.ctx.setGlobalAlpha(opacity);
+        // this.ctx.setFontSize(this.toPx(fontSize));
+        this.ctx.setFillStyle(color);
+        this.ctx.setTextBaseline(baseLine);
+        this.ctx.setTextAlign(textAlign);
+        let textWidth = this.toRpx(this.ctx.measureText(text).width);
+        const textArr = [];
+         if (textWidth > width) {
+          // 文本宽度 大于 渲染宽度
+          let fillText = '';
+          let line = 1;
+          for (let i = 0; i <= text.length - 1 ; i++) {  // 将文字转为数组，一行文字一个元素
+            fillText = fillText + text[i];
+            if (this.toRpx(this.ctx.measureText(fillText).width) >= width) {
+              if (line === lineNum) {
+                if (i !== text.length - 1) {
+                  fillText = fillText.substring(0, fillText.length - 1) + '...';
+                }
+              }
+              if(line <= lineNum) {
+                textArr.push(fillText);
+              }
+              fillText = '';
+              line++;
+            } else {
+              if(line <= lineNum) {
+                if(i === text.length -1){
+                   textArr.push(fillText);
+                }
+              }
+            }
+          }
+          textWidth = width;
+        } else {
+          textArr.push(text);
+        }
+
+        textArr.forEach((item, index) => {
+            this.ctx.fillText(item, this.toPx(x), this.toPx(y + (lineHeight || fontSize) * index));
+        })
+
+        this.ctx.restore();
+
+        // textDecoration
+        if (textDecoration !== 'none') {
+            let lineY = y;
+            if (textDecoration === 'line-through') {
+                // 目前只支持贯穿线
+                lineY = y;
+            }
+            this.ctx.save();
+            this.ctx.moveTo(this.toPx(x), this.toPx(lineY));
+            this.ctx.lineTo(this.toPx(x) + this.toPx(textWidth), this.toPx(lineY));
+            this.ctx.setStrokeStyle(color);
+            this.ctx.stroke();
+            this.ctx.restore();
+        }
+
+        return textWidth;
+    },
+}
+const helper = {
+    /**
+      * 下载图片并获取图片信息
+      */
+    _downloadImageAndInfo(image, index) {
+        return new Promise((resolve, reject) => {
+            const { x, y, url, zIndex } = image;
+            const imageUrl = url;
+            // 下载图片
+            this._downImage(imageUrl, index)
+                // 获取图片信息
+                .then(imgPath => this._getImageInfo(imgPath, index))
+                .then(({ imgPath, imgInfo }) => {
+                    // 根据画布的宽高计算出图片绘制的大小，这里会保证图片绘制不变形
+                    let sx;
+                    let sy;
+                    const borderRadius = image.borderRadius || 0;
+                    const setWidth = image.width;
+                    const setHeight = image.height;
+                    const width = this.toRpx(imgInfo.width);
+                    const height = this.toRpx(imgInfo.height);
+
+                    if (width / height <= setWidth / setHeight) {
+                        sx = 0;
+                        sy = (height - ((width / setWidth) * setHeight)) / 2;
+                    } else {
+                        sy = 0;
+                        sx = (width - ((height / setHeight) * setWidth)) / 2;
+                    }
+                    this.drawArr.push({
+                        type: 'image',
+                        borderRadius,
+                        borderWidth: image.borderWidth,
+                        borderColor: image.borderColor,
+                        zIndex: typeof zIndex !== 'undefined' ? zIndex : index,
+                        imgPath,
+                        sx,
+                        sy,
+                        sw: (width - (sx * 2)),
+                        sh: (height - (sy * 2)),
+                        x,
+                        y,
+                        w: setWidth,
+                        h: setHeight,
+                    });
+                    resolve();
+                })
+                .catch(err => reject(err));
+        });
+    },
+    /**
+     * 下载图片资源
+     * @param {*} imageUrl
+     */
+    _downImage(imageUrl) {
+        return new Promise((resolve, reject) => {
+            if (/^http/.test(imageUrl) && !new RegExp(wx.env.USER_DATA_PATH).test(imageUrl)) {
+                wx.downloadFile({
+                    url: this._mapHttpToHttps(imageUrl),
+                    success: (res) => {
+                        if (res.statusCode === 200) {
+                            resolve(res.tempFilePath);
+                        } else {
+                            reject(res.errMsg);
+                        }
+                    },
+                    fail(err) {
+                        reject(err);
+                    },
+                });
+            } else {
+                // 支持本地地址
+                resolve(imageUrl);
+            }
+        });
+    },
+    /**
+     * 获取图片信息
+     * @param {*} imgPath
+     * @param {*} index
+     */
+    _getImageInfo(imgPath, index) {
+        return new Promise((resolve, reject) => {
+            wx.getImageInfo({
+                src: imgPath,
+                success(res) {
+                    resolve({ imgPath, imgInfo: res, index });
+                },
+                fail(err) {
+                    reject(err);
+                },
+            });
+        });
+    },
+    toPx(rpx, int) {
+      if (int) {
+        return parseInt(rpx * this.factor);
+      }
+      return rpx * this.factor;
+    },
+    toRpx(px, int) {
+      if (int) {
+        return parseInt(px / this.factor);
+      }
+      return px / this.factor;
+    },
+    /**
+     * 将http转为https
+     * @param {String}} rawUrl 图片资源url
+     */
+    _mapHttpToHttps(rawUrl) {
+        if (rawUrl.indexOf(':') < 0) {
+            return rawUrl;
+        }
+        const urlComponent = rawUrl.split(':');
+        if (urlComponent.length === 2) {
+            if (urlComponent[0] === 'http') {
+                urlComponent[0] = 'https';
+                return `${urlComponent[0]}:${urlComponent[1]}`;
+            }
+        }
+        return rawUrl;
+    },
+}
+Component({
+    properties: {
+    },
+    created() {
+        const sysInfo = wx.getSystemInfoSync();
+        const screenWidth = sysInfo.screenWidth;
+        this.factor = screenWidth / 750;
+    },
+    methods: Object.assign({
+        /**
+         * 计算画布的高度
+         * @param {*} config
+         */
+        getHeight(config) {
+            const getTextHeight = (text) => {
+                let fontHeight = text.lineHeight || text.fontSize;
+                let height = 0;
+                if (text.baseLine === 'top') {
+                    height = fontHeight;
+                } else if (text.baseLine === 'middle') {
+                    height = fontHeight / 2;
+                } else {
+                    height = 0;
+                }
+                return height;
+            }
+            const heightArr = [];
+            (config.blocks || []).forEach((item) => {
+                heightArr.push(item.y + item.height);
+            });
+            (config.texts  || []).forEach((item) => {
+                let height;
+                if (Object.prototype.toString.call(item.text) === '[object Array]') {
+                    item.text.forEach((i) => {
+                        height = getTextHeight({...i, baseLine: item.baseLine});
+                        heightArr.push(item.y + height);
+                    });
+                } else {
+                    height = getTextHeight(item);
+                    heightArr.push(item.y + height);
+                }
+            });
+            (config.images || []).forEach((item) => {
+                heightArr.push(item.y + item.height);
+            });
+            (config.lines || []).forEach((item) => {
+                heightArr.push(item.startY);
+                heightArr.push(item.endY);
+            });
+            const sortRes = heightArr.sort((a, b) => b - a);
+            let canvasHeight = 0;
+            if (sortRes.length > 0) {
+                canvasHeight = sortRes[0];
+            }
+            if (config.height < canvasHeight || !config.height) {
+                return canvasHeight;
+            } else {
+                return config.height;
+            }
+        },
+        create(config) {
+            this.ctx = wx.createCanvasContext('canvasid', this);
+
+            const height = this.getHeight(config);
+            this.initCanvas(config.width, height, config.debug)
+                .then(() => {
+                    // 设置画布底色
+                    if (config.backgroundColor) {
+                        this.ctx.save();
+                        this.ctx.setFillStyle(config.backgroundColor);
+                        this.ctx.fillRect(0, 0, this.toPx(config.width), this.toPx(height));
+                        this.ctx.restore();
+                    }
+                    const { texts = [], images = [], blocks = [], lines = [] } = config;
+                    const queue = this.drawArr
+                        .concat(texts.map((item) => {
+                            item.type = 'text';
+                            item.zIndex = item.zIndex || 0;
+                            return item;
+                        }))
+                        .concat(blocks.map((item) => {
+                            item.type = 'block';
+                            item.zIndex = item.zIndex || 0;
+                            return item;
+                        }))
+                        .concat(lines.map((item) => {
+                            item.type = 'line';
+                            item.zIndex = item.zIndex || 0;
+                            return item;
+                        }));
+                    // 按照顺序排序
+                    queue.sort((a, b) => a.zIndex - b.zIndex);
+
+                    queue.forEach((item) => {
+                        if (item.type === 'image') {
+                            this.drawImage(item)
+                        } else if (item.type === 'text') {
+                            this.drawText(item)
+                        } else if (item.type === 'block') {
+                            this.drawBlock(item)
+                        } else if (item.type === 'line') {
+                            this.drawLine(item)
+                        }
+                    });
+
+                    const res = wx.getSystemInfoSync();
+                    const platform = res.platform;
+                    let time = 0;
+                    if (platform === 'android') {
+                        // 在安卓平台，经测试发现如果海报过于复杂在转换时需要做延时，要不然样式会错乱
+                        time = 300;
+                    }
+                    this.ctx.draw(false, () => {
+                        setTimeout(() => {
+                            wx.canvasToTempFilePath({
+                                canvasId: 'canvasid',
+                                success: (res) => {
+                                    this.triggerEvent('success', res.tempFilePath);
+                                },
+                                fail: (err) => {
+                                    this.triggerEvent('fail', err);
+                                },
+                            }, this);
+                        }, time);
+                    });
+                })
+                .catch((err) => {
+                    wx.showToast({ icon: 'none', title: err.errMsg || '生成失败' });
+                    console.error(err);
+                });
+        },
+    }, main, handle, helper),
+});
+

+{
+    "component": true
+}
\ No newline at end of file

+<!--index.wxml-->
+<view class="container">
+  <canvas canvas-id='canvasid' class="canvas {{debug ? 'debug' : 'pro'}}" style='width: {{pxWidth}}px; height: {{pxHeight}}px;'></canvas>
+</view>

+.canvas {
+    width: 750rpx;
+    height: 750rpx;
+}
+.canvas.pro {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform: translate3d(-9999rpx, 0, 0);
+}
+.canvas.debug {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border: 1rpx solid #ccc;
+}
\ No newline at end of file

+Component({
+    properties: {
+        config: {
+            type: Object,
+            value: {},
+        },
+        preload: {  // 是否预下载图片资源
+            type: Boolean,
+            value: false,
+        },
+        hideLoading: {  // 是否隐藏loading
+            type: Boolean,
+            value: false,
+        }
+    },
+    ready() {
+        if (this.data.preload) {
+            const poster = this.selectComponent('#poster');
+            this.downloadStatus = 'doing';
+            poster.downloadResource(this.data.config.images).then(() => {
+                this.downloadStatus = 'success';
+                this.trigger('downloadSuccess');
+            }).catch((e) => {
+                this.downloadStatus = 'fail';
+                this.trigger('downloadFail', e);
+            });
+        }
+    },
+    methods: {
+        trigger(event, data) {
+            if (this.listener && typeof this.listener[event] === 'function') {
+                this.listener[event](data);
+            }
+        },
+        once(event, fun) {
+            if (typeof this.listener === 'undefined') {
+                this.listener = {};
+            }
+            this.listener[event] = fun;
+        },
+        downloadResource(reset) {
+            return new Promise((resolve, reject) => {
+                if (reset) {
+                    this.downloadStatus = null;
+                }
+                const poster = this.selectComponent('#poster');
+                if (this.downloadStatus && this.downloadStatus !== 'fail') {
+                    if (this.downloadStatus === 'success') {
+                        resolve();
+                    } else {
+                        this.once('downloadSuccess', () => resolve());
+                        this.once('downloadFail', (e) => reject(e));
+                    }
+                } else {
+                    poster.downloadResource(this.data.config.images)
+                        .then(() => {
+                            this.downloadStatus = 'success';
+                            resolve();
+                        })
+                        .catch((e) => reject(e));
+                }  
+            })
+        },
+        onCreate(reset = false) {
+            !this.data.hideLoading && wx.showLoading({ mask: true, title: '生成中' });
+            return this.downloadResource(typeof reset === 'boolean' && reset).then(() => {
+                !this.data.hideLoading && wx.hideLoading();
+                const poster = this.selectComponent('#poster');
+                poster.create(this.data.config);
+            })
+            .catch((err) => {
+                !this.data.hideLoading && wx.hideLoading();
+                wx.showToast({ icon: 'none', title: err.errMsg || '生成失败' });
+                console.error(err);
+                this.triggerEvent('fail', err);
+            })
+        },
+        onCreateSuccess(e) {
+            const { detail } = e;
+            this.triggerEvent('success', detail);
+        },
+        onCreateFail(err) {
+            console.error(err);
+            this.triggerEvent('fail', err);
+        }
+    }
+})
\ No newline at end of file

+{
+    "component": true,
+    "usingComponents": {
+        "we-canvas": "../index/index"
+    }
+}
\ No newline at end of file

+<view bindtap='onCreate'>
+    <slot/>
+</view>
+<we-canvas id="poster" bind:success="onCreateSuccess" bind:fail="onCreateFail"/>
\ No newline at end of file

+const defaultOptions = {
+    selector: '#poster'
+};
+
+function Poster(options = {}) {
+    options = {
+        ...defaultOptions,
+        ...options,
+    };
+
+    const pages = getCurrentPages();
+    const ctx = pages[pages.length - 1];
+
+    const poster = ctx.selectComponent(options.selector);
+    delete options.selector;
+
+    return poster;
+};
+
+Poster.create = (reset = false) => {
+    const poster  = Poster();
+    if (!poster) {
+        console.error('请设置组件的id="poster"!!!');
+    } else {
+        return Poster().onCreate(reset);
+    }
+}
+
+export default Poster;
\ No newline at end of file

@@ -4,6 +4,7 @@ import {
 } from '../../utils/util';
 
 import Dialog from '../../ui/vant-weapp/dialog/dialog';
+import Poster from '../../miniprogram_dist/poster/poster';
 
 const back = wx.getBackgroundAudioManager();
 
@@ -41,7 +42,9 @@ Page({
     isPlayingBgm: false,
     isMore: false,
 
-    // shortcutPics:["red-package2","more-bless"]
+    imageUrl: "", // 海报图
+    posterVisible: false,
+    wxCodeUrl: "", // 微信小程序码
   },
   onShareAppMessage(res) {
     let shareType = ""
@@ -128,7 +131,6 @@ Page({
    */
   initData() {},
   playBgm() {
-    return;
     let _this = this;
     let {
       detailData
@@ -192,11 +194,273 @@ Page({
     }
   },
 
-  /** 
+  onHidePosterHandler() {
+    this.setData({
+      posterVisible: false
+    })
+  },
+
+  /**
+   * 图片查看
+   */
+  onPreviewImageHandler(evt) {
+    let current = this.data.imageUrl;
+    let urls = [current];
+    wx.previewImage({
+      current: current,
+      urls: urls
+    })
+  },
+
+  /**
+   * 保存图片到本地
+   */
+  saveImageToPhotosAlbum() {
+    let _this = this;
+    wx.saveImageToPhotosAlbum({
+      filePath: _this.data.imageUrl,
+      success(res) {
+        wx.showToast({
+          title: '保存成功',
+          icon: 'success'
+        });
+      },
+      fail(err) {
+        wx.getSetting({
+          success: (res) => {
+            if (!res.authSetting['scope.writePhotosAlbum']) {
+              // 未授权
+              wx.showModal({
+                title: '提示',
+                content: '小程序请求访问相册权限',
+                confirmText: '前往授权',
+                success(res) {
+                  if (res.confirm) {
+                    wx.openSetting({
+                      success(res) {}
+                    })
+                  } else if (res.cancel) {}
+                }
+              })
+            }
+          }
+        })
+      }
+    })
+  },
+
+  // 配置小程序码
+  getWxCode() {
+    let {
+      detailData
+    } = this.data;
+    let memberCode = app.store.getItem("memberCode");
+    let wxCodePath = `pages/blessing/blessing?c=${detailData.blessCode}&m=${memberCode}`;
+
+    return new Promise((resolve, reject) => {
+      // 先获取小程序码
+      app.get({
+        mode: "common",
+        url: app.api.wxacodeGet,
+        data: {
+          path: encodeURIComponent(wxCodePath)
+        }
+      }).then((result) => {
+        this.setData({
+          wxCodeUrl: result
+        })
+        resolve(result);
+      })
+    });
+
+  },
+
+  /**
    * 分享图片祝福
    * 生成海报
    */
-  onPosterHandler(){
+  onPosterHandler() {
+    console.log("onPosterHandler");
+
+    // 先获取小程序码
+    this.getWxCode().then((result) => {
+      let posterData = this.getPosterConfig();
+      this.onCreatePoster(posterData);
+    });
+  },
+
+  onPosterSuccess(e) {
+    wx.hideLoading();
+    const {
+      detail
+    } = e;
+    console.log("detail:", detail)
+    this.setData({
+      imageUrl: detail,
+      posterVisible: true,
+    })
+  },
+
+  onPosterFail(err) {
+    wx.hideLoading();
+    console.error(err);
+  },
+
+  /**
+   * 异步生成海报
+   */
+  onCreatePoster(posterConfig) {
+    console.log("posterConfig:", posterConfig);
+    this.setData({
+      posterConfig: posterConfig
+    }, () => {
+      Poster.create(true); // 入参：true为抹掉重新生成
+    });
+  },
+
+  // 获取海报数据
+  getPosterConfig() {
+    let {
+      detailData,
+      ownerMember,
+      memberList,
+      wxCodeUrl
+    } = this.data;
+    let avatarWid = 120;
+    let nickname = ownerMember.memberName;
+    let avatar = ownerMember.memberHead;
+    let desc = "";
+    if (detailData.type == 1) {
+      // 组队
+      if (detailData.count > 0) {
+        desc = `携${detailData.familyName}${detailData.count}人`
+      } else {
+        desc = `携${detailData.familyName}`
+      }
+    } else {
+      // 单人
+      desc = `向各位亲朋好友`
+    }
+    let blocks = []
+    let images = [
+      // 背景图
+      {
+        x: 0,
+        y: 0,
+        width: 750,
+        height: 1334,
+        url: "../../image/poster/poster_c1.png",
+      },
+      // 头像
+      {
+        x: 184,
+        y: 186,
+        width: avatarWid,
+        height: avatarWid,
+        borderRadius: avatarWid,
+        zIndex: 22,
+        url: avatar,
+      },
+      // 小程序码
+      {
+        width: 100,
+        height: 100,
+        x: 586,
+        y: 1198,
+        url: wxCodeUrl,
+        zIndex: 31
+      }
+    ];
+    let lines = [];
+    let texts = [
+      // 房主昵称
+      {
+        x: 53,
+        y: 460,
+        fontSize: 60,
+        color: "#fee085",
+        textAlign: "left",
+        zIndex: 11,
+        text: nickname,
+      },
+      // 文案
+      {
+        x: 53,
+        y: 540,
+        fontSize: 60,
+        color: "#fee085",
+        textAlign: "left",
+        zIndex: 11,
+        text: desc,
+      }
+    ];
+
+    // 组队补充
+    if (detailData.type == 1) {
+      // 头像昵称取出3人
+      let member1 = memberList[0] || null;
+      let member2 = memberList[1] || null;
+      let member3 = memberList[2] || null;
+
+      let memberDrawList = [];
+      if (member1) memberDrawList.push(member1);
+      if (member2) memberDrawList.push(member2);
+      if (member3) memberDrawList.push(member3);
+      let endX = 630;
+      let wid = 160;
+      let startY = 800;
+      memberDrawList.forEach((element, idx) => {
+        // blocks.push({
+        //   x: endX - (idx * wid) - ((wid - 92)),
+        //   y: startY,
+        //   width: 92,
+        //   height: 92,
+        //   borderRadius: 92,
+        //   zIndex: 90,
+        //   borderColor: "#fee085",
+        // })
+        images.push({
+          x: endX - (idx * wid) - ((wid - 92) / 2) - 4,
+          y: startY + 2,
+          width: 92,
+          height: 92,
+          borderRadius: 92,
+          zIndex: 101,
+          url: avatar,
+        })
+        texts.push({
+          x: endX - (idx * wid),
+          y: startY + 136,
+          width: wid,
+          fontSize: 24,
+          color: "#fee085",
+          textAlign: "center",
+          zIndex: 101,
+          text: element.memberName,
+        })
+      });
+
+      texts.push({
+        x: 686,
+        y: startY + 200,
+        fontSize: 48,
+        color: "#fee085",
+        textAlign: "right",
+        zIndex: 11,
+        text: `长按查看全部${detailData.count}人 >>`,
+      })
+    }
+
+    let posterData = {
+      width: 750,
+      height: 1334,
+      debug: false,
+      blocks: blocks,
+      images: images,
+      lines: lines,
+      texts: texts,
+    }
+    return posterData;
   },
 
   // 显示更新用户信息

-{}
+{
+  "usingComponents": {
+    "poster": "/miniprogram_dist/poster/index"
+  }
+}

@@ -5,6 +5,10 @@
   font-size: 36rpx;
 }
 
+.van-popup {
+  background-color: transparent !important;
+}
+
 // 用户头像
 .portrait {
   position: relative;
@@ -65,6 +69,24 @@
   text-align: center;
 }
 
+.poster {
+  width: 540px;
+}
+
+.save-btn {
+  margin: 24px auto;
+  @include btc(290px, 76px);
+  color: #fee085;
+  font-size: 36px;
+  border-radius: 8px;
+  box-shadow: 5.9px 5.5px 18px 0 rgba(26, 36, 91, 0.73);
+  background-image: linear-gradient(to top, #b41d36, #bb2634);
+
+  color: #940023;
+  box-shadow: 5.9px 5.5px 18px 0 rgba(26, 36, 91, 0.73);
+  background-image: linear-gradient(to top, #f4b44d, #e8b976, #ffebb5);
+}
+
 .page {
   padding-bottom: 200px;
 
@@ -321,7 +343,7 @@
       position: fixed;
       bottom: 0;
       width: 100%;
-      z-index: 101;
+      z-index: 21;
 
       .bottom-bg {
         width: 750px;
@@ -362,7 +384,7 @@
   position: fixed;
   right: 24px;
   top: 24px;
-  z-index: 201;
+  z-index: 31;
 }
 
 
@@ -403,3 +425,7 @@
     -webkit-transform: rotate(360deg);
   }
 }
+
+#poster {
+  position: absolute;
+}

+<poster id="poster" hide-loading="{{true}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
 <view class="page">
   <view class="app__bgc bgc" style="background-color: {{detailData.background}};"></view>
   <!-- <view class="app__bg bg " style="background: url('{{detailData.backgroundImage}}')"></view> -->
@@ -67,7 +68,7 @@
         <!-- 尾部头像 -->
         <view class="portrait">
           <image class="portrait-inner" mode="scaleToFill" src="{{ownerMember.memberHead}}" />
-          <image class="portrait-border" mode="scaleToFill" src="{{detailData.headFrame}}" />
+          <image class="portrait-border ani-rotation" mode="scaleToFill" src="{{detailData.headFrame}}" />
         </view>
         <view class="name">
           <view class="tt t1">{{ownerMember.memberName}}</view>
@@ -185,4 +186,11 @@
     <view class="t1">邀请你一起加入组队送祝福!</view>
   </view>
 </van-dialog>
-<shortcut2  types="{{[]}}" pics="{{['red-package2','more-bless']}}"></shortcut2>
+<van-popup show="{{ authorizeVisible }}">
+  <authorize-comp bind:evtcomp="evtcomp"></authorize-comp>
+</van-popup>
+<van-popup bind:click-overlay="onHidePosterHandler" show="{{ posterVisible }}">
+  <image bindtap="onPreviewImageHandler" class="poster" mode="widthFix" src="{{imageUrl}}" />
+  <view bindtap="saveImageToPhotosAlbum" class="save-btn">一键保存</view>
+</van-popup>
+<shortcut2 types="{{[]}}" pics="{{['red-package2','more-bless']}}"></shortcut2>