xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/SharePoster/PosterDom/index.js

@@ -0,0 +1,1898 @@
+import  objToPoster from '../createPoster/index'
+import { posterInfo } from '../libs/positionMap';
+import { TYPES,POSTER_CLS, } from '../libs/constant';
+import { sensorLog }  from "live-mp-tools";
+const computedBehavior = require('miniprogram-computed').behavior;
+const POSTER_WIDTH = 750;
+const POSTER_HEIGHT = 1344;
+
+let ID = 0
+
+Component({
+    behaviors: [computedBehavior],
+    /**
+     * 组件的属性列表
+     */
+    /**
+   * 组件的属性列表
+   */
+    properties: {
+        isSinglePoster: {
+            type: Boolean,
+            value: false
+        },
+        motiveInfo: {
+            type: Array,
+            value: () => {
+                return [];
+            }
+        },
+        posterItem: {
+            type: Object,
+            value: () => {},
+        },
+        promotionInfo:{
+            type: Object,
+            value: () => {
+                return {};
+            }
+        },
+        showPopup:{
+            type: Boolean,
+            value: false 
+        },
+        sensorReportParams: {
+            type: Object,
+            value: () => {}
+        },
+        roomInfo: {
+            type: Object,
+            value: () => {} 
+        }
+    },
+    observers: {
+        posterItem(newData) {
+            if(Object.getOwnPropertyNames(newData).length){
+                this.setData({
+                    isVisible :true,
+                    posterItemData:newData,
+                    posterStyle:newData.default_poster_mark
+                })
+            }
+            if(Object.getOwnPropertyNames(newData).length && Object.getOwnPropertyNames(this.properties.promotionInfo).length && this.properties.promotionInfo.resource_info.qr_code.includes("myqcloud")){
+                if(this.properties.showPopup){
+                    this.generatePoster(15);  
+                }
+            }
+        },
+        promotionInfo(newData){
+            if(Object.getOwnPropertyNames(newData).length && newData.resource_info.qr_code.includes("myqcloud") && Object.getOwnPropertyNames(this.properties.posterItem).length){
+                if(this.properties.showPopup){
+                    this.generatePoster(15);  
+                }
+            }
+        },
+    },
+    lifetimes: {
+        attached(){
+            var app = getApp()
+            app.globalData[`poster${ID++}`] = this
+        },
+        ready(){
+            this.cleanUpWxFileSystemMemory(2);
+        }
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        imgSrc:'',
+        imageUrl:'',
+        isVisible:true,
+        posterMapInfo: posterInfo,
+        motiveInfoData:{"text":"世上没有任何伟业的成就能够离得开激情。","auther":"黑格尔"},
+        shareAddInfo:{},
+        posterObj:{},
+        isSwitchBtnShow:false,
+        posterItemData:{},
+        posterStyle:"",
+        defaultAvatarUrl: 'https://wechatavator-1252524126.cos.ap-shanghai.myqcloud.com/dasda.jpg',
+        longPressCount: 0
+    },
+    computed:{
+        posterData(data) {
+            let temInfo = data.posterItemData;
+            let defaultPoster = data.posterMapInfo[data.posterItemData.default_poster_mark];
+            temInfo = {...data.posterItemData, ...defaultPoster};
+            console.log(temInfo,'teninfo');
+            return temInfo;
+        },
+        // 根据不同商品类型展示不同邀请文案
+        shareHint(data) {
+            let resType = data.promotionInfo && data.promotionInfo.resource_info && data.promotionInfo.resource_info.resource_type;
+            let shareTxt = '';
+            if (data.posterData.is_default === 1) {
+                switch (resType) {
+                case 2:
+                    shareTxt = '邀请你一起收听';
+                    break;
+                case 4:
+                    shareTxt = '邀请你一起观看';
+                    break;
+                case 20:
+                    shareTxt = '邀请你一起阅读';
+                    break;
+                case 21:
+                    shareTxt = '邀请你一起购买';
+                    break;
+                case 31:
+                case 29:
+                case 25:
+                case 35:
+                    shareTxt = '邀请你一起参加';
+                    break;
+                default:
+                    shareTxt = '邀请你一起学习';
+                    break;
+                }
+            }
+
+            return shareTxt;
+        },
+        userInfo(data) {
+            return data.promotionInfo.user_info || { wx_avatar: '', wx_nickname: '' };
+        },
+        // posterStyle(data) {
+        //     return data.posterData && data.posterData.default_poster_mark || "";
+        // },
+        showGoods(data) {
+            let showGood = data.posterData.is_show_goods;
+            if (data.posterStyle !== POSTER_CLS.USER_CUSTOM) {
+                showGood = data.posterData.goods_position;
+            }
+            return showGood;
+        },
+        showGoodsImg(data) {
+            let showImg = true;
+            if (data.posterData.is_default === 1) {
+                showImg = data.posterData.show_goods_img;
+            }
+            return showImg;
+        },
+        showFinger(data) {
+            return data.posterData.qr_code_type === 1 && data.posterData.is_default === 0;
+        },
+        resource_info(data) {
+            return data.promotionInfo && data.promotionInfo.resource_info;
+        },
+        isShowPrice(data) {
+            let showPrcie = true;
+            let payment_type = data.resource_info && data.resource_info.payment_type || 2; //仅关联不展示价格
+            if (data.posterStyle !== POSTER_CLS.USER_CUSTOM) {
+                showPrcie = data.posterData.has_price_info;
+            } else {
+                showPrcie = data.posterData.is_show_price && payment_type != 3;
+            }
+            return showPrcie;
+        },
+        activityLable(data) {
+            return data.resource_info && data.resource_info.activity_label || '';
+        },
+        zbStartAt(data) {
+            return data.resource_info && data.resource_info.zb_start_at && data.resource_info.zb_start_at.split(' ');
+        },
+        resourceLinePrice(data) {
+            return data.resource_info && data.resource_info.line_price ? String((data.resource_info.line_price / 100).toFixed(2)) : '';
+        }
+      },
+  
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        longPress() {
+            try{
+                let params = {
+                    page_id: 'e_alive#mini#first#alive_room',
+                    l_program: '鹅直播',
+                    page_name: '直播间页面',
+                    page_path: '鹅直播#小程序#首页#直播间页面',
+                    app_id: this.properties.roomInfo.appId,
+                    page_button: "长按保存海报",
+                    c_user_id: this.properties.roomInfo.userId,
+                    union_id:this.properties.roomInfo.unionId,
+                    resource_id: this.properties.roomInfo.aliveId,
+                    current_role:this.properties.sensorReportParams.current_role,
+                    type:this.properties.sensorReportParams.type,
+                    cmm1:this.properties.sensorReportParams.alive_type,
+                    cmm2:this.properties.sensorReportParams.version_type,
+                    comm2:this.properties.sensorReportParams.pay_type,
+                    cmm3:'鹅直播增长'
+                }
+                sensorLog.sensors.track('click_butt', params);         
+                console.log("当前长按了 保存图片" +  Number(++this.data.longPressCount) +"次",params);
+            }catch(e) {
+                console.log("埋点", e)
+            }
+        },
+        getPosterData() {
+            let temInfo = this.data.posterItemData;
+            let defaultPoster = this.data.posterMapInfo[this.data.posterItemData.default_poster_mark];
+            temInfo = {...this.data.posterItemData, ...defaultPoster};
+            return temInfo;
+        },
+        // 价格的 单位、整数、小数部分字体大小不同，需分别绘制再拼接
+        // x，y 表示起始位置
+        getResourcePrice(x, y, color,poster) {
+            const { price } = this.data.resource_info;
+            if (price === 0) {
+                return [
+                    {
+                        label: 'free',
+                        type: "font",
+                        x,
+                        y,
+                        value: '免费',
+                        size: 40,
+                        color
+                    }
+                ];
+            }
+            const [priceInt, priceFloat] = String((price / 100).toFixed(2)).split('.');
+            const unitProps = {
+                label: 'priceUnit',
+                type: "font",
+                x,
+                y,
+                value: '¥',
+                size: 40,
+                fontWeight: 'normal',
+                color
+            };
+            const MARGIN_RIGHT = 8;
+            const priceIntProps = {
+                label: 'priceInt',
+                type: "font",
+                x: x + poster.getTextRect(unitProps).width + MARGIN_RIGHT,
+                y: y - 10,
+                value: priceInt,
+                size: 60,
+                fontWeight: 'normal',
+                color
+            };
+            const priceFloatProps = {
+                label: 'priceFloat',
+                type: "font",
+                x:
+                    x +
+                    poster.getTextRect(priceIntProps).width +
+                    poster.getTextRect(unitProps).width +
+                    MARGIN_RIGHT,
+                y,
+                value: `.${priceFloat}`,
+                size: 40,
+                fontWeight: 'normal',
+                color
+            };
+            return [unitProps, priceIntProps, priceFloatProps];
+        },
+        // 实际渲染的价格包含三个部分：整数、小数点、小数点后两位
+        getResourcePriceRect(poster) {
+            const [unitProps, priceIntProps, priceFloatProps] = this.getResourcePrice(0, 0, 'black',poster);
+            const unitTextRect = poster.getTextRect(unitProps);
+            const priceIntTextRect = poster.getTextRect(priceIntProps);
+            const priceFloatTextRect = poster.getTextRect(priceFloatProps);
+            return {
+                width: unitTextRect.width + priceIntTextRect.width + priceFloatTextRect.width,
+                height: Math.max(unitTextRect.height, priceIntTextRect.height, priceFloatTextRect.height)
+            };
+        },
+        generatePoster(random){
+            const that = this
+            this.triggerEvent('drawPosterBegin');
+            new objToPoster(POSTER_WIDTH,POSTER_HEIGHT,1,this).initCanvas(this,1).then(res=>{
+                this.posterObj =  this.getPosterConfig(res);
+                return this.posterObj && res.convertToImg(this.posterObj)
+            }).then(response=>{
+                if(response){
+                    this.cleanUpWxFileSystemMemory(43);
+                    this.getWxFilesListAndWriteFile(response,random);
+                }
+            })
+        },
+        getImageSrc(response) {
+            console.log('getImageSrc: ', response)
+            this.setData({
+                imgSrc: response,
+                imageUrl: response,
+                isVisible: false
+            },()=>{
+
+                console.log('imageUrl', this.data.imageUrl)
+            })
+        },
+        getWxFilesListAndWriteFile(response,random){
+            let that = this;
+            const fs = wx.getFileSystemManager();
+            fs.readdir({
+                dirPath: wx.env.USER_DATA_PATH,
+                success(res) {
+                    //res.files为存入的列表路径
+                    let filesList = res.files;
+                    let isOtherPosterExist = false;
+                    let isStudyPosterExist = false;
+                    if(filesList.length>2){
+                        isStudyPosterExist = that.data.posterStyle === POSTER_CLS.STUDY && filesList.some(item=>{
+                            let num = +(item.replace(/[^0-9]/ig,""))
+                            return num === random && item.includes(that.data.posterStyle)
+                        })
+                        isOtherPosterExist = that.data.posterStyle !== POSTER_CLS.STUDY && filesList.some(item=>{
+                            return item.includes(that.data.posterStyle)
+                        })
+                        if(!(isStudyPosterExist || isOtherPosterExist)){
+                            that.wxWriteFile(response,random)
+                        }else{
+                            if(isStudyPosterExist){
+                                that.setData({
+                                    imageUrl:wx.env.USER_DATA_PATH + '/'+ that.data.posterStyle + random +'.png'
+                                })
+                            }else if(isOtherPosterExist){
+                                that.setData({
+                                    imageUrl:wx.env.USER_DATA_PATH + '/'+ that.data.posterData.id +'.png'
+                                })
+                            }
+                            let isShow = that.data.posterData && that.data.posterData.default_poster_mark === POSTER_CLS.STUDY;
+                            that.setData({
+                                isSwitchBtnShow: isShow,
+                                isVisible: false
+                            })
+                            that.triggerEvent('drawPosterFulfilled', that.imageUrl);
+                        }
+                    }else{
+                        that.wxWriteFile(response,random)
+                    }
+                }
+            })
+        },
+        cleanUpWxFileSystemMemory(n){
+            const fs = wx.getFileSystemManager();
+            fs.readdir({
+                dirPath: wx.env.USER_DATA_PATH,
+                success(res) {
+                    //res.files为存入的列表路径
+                    let indexVal = res.files.length;
+                    //由于微信本地存储超过10M时，写入文件失败，10M大概是43张海报的内存，所以大于42时，清除垃圾文件，再写入
+                    if(indexVal>n){
+                        res.files.forEach((el) => {
+                            let name = (wx.env.USER_DATA_PATH+el).replace(/usr/g, "usr/");
+                            fs.unlink({
+                                filePath:name,
+                                fail(e) {
+                                    console.log('文件删除失败：', e)
+                                },
+                                success(succ){
+                                    console.log('文件删除成功：', succ);
+                                }
+                            })
+                        })
+                    } 
+                }
+            })
+        },
+        wxWriteFile(response,random){
+            const fs = wx.getFileSystemManager();
+            //随机定义路径名称
+            let codeimg =this.data.posterStyle === POSTER_CLS.STUDY ? wx.env.USER_DATA_PATH + '/' + this.data.posterStyle + random + '.png': wx.env.USER_DATA_PATH + '/' + this.data.posterData.id + '.png';
+            //将base64图片写入
+            fs.writeFile({
+                filePath: codeimg,
+                data: response.slice(22),
+                encoding: 'base64',
+                success: (res) => {
+                    //写入成功了的话，新的图片路径就能用了
+                    console.log(res)
+                    console.log("codeimg: ",codeimg)
+                    // this.imgSrc=codeimg;
+                    this.setData({
+                        imageUrl:codeimg
+                    })
+                    let isShow = this.data.posterData && this.data.posterData.default_poster_mark === POSTER_CLS.STUDY;
+                    this.setData({
+                        isSwitchBtnShow:isShow
+                    })
+                    this.triggerEvent('drawPosterFulfilled', this.data.imageUrl);
+                },
+                fail:(error)=>{
+                    console.log(error);
+                }
+            })
+        },
+        getPosterConfig(poster){
+            const drawPosterFnMaps = {
+                [POSTER_CLS.USER_CUSTOM]: this.drawUserCustomPoster,
+                [POSTER_CLS.STUDY]: this.drawStudyPoster,
+                [POSTER_CLS.PRICE_ONE]: this.drawPriceOnePoster,
+                [POSTER_CLS.INTERACT_ONE]: this.drawInteractOnePoster,
+                [POSTER_CLS.INTERACT_TWO]: this.drawInteractTwoPoster,
+                [POSTER_CLS.PRICE_TWO]: this.drawPriceTwoPoster,
+                [POSTER_CLS.INTERACT_THREE]: this.drawInteractThreePoster,
+                [POSTER_CLS.ENTITY]: this.drawEntityPoster,
+                [POSTER_CLS.ALIVE]: this.drawAlivePoster,
+                [POSTER_CLS.ALIVE_GENERAL]: this.drawAliveGeneralPoster,
+                [POSTER_CLS.ALIVE_SPECIFIC]: this.drawAliveSpecificPoster
+            };
+            console.log(this.data.posterStyle,'this.data.posterStyle')
+            if(!this.data.posterStyle){
+                return
+            }
+            const drawFn = drawPosterFnMaps[this.data.posterStyle].bind(this);
+            if (!drawFn) {
+                console.warn('未知的海报类型', this.data.posterStyle);
+                return;
+            }
+            let posterConfigObj = drawFn(poster);
+            return posterConfigObj;
+        },
+        // 绘制自定义海报
+        // 自定义海报的 头像、昵称、二维码，是否展示、位置、宽高都是取的接口数据。
+        // 其中 二维码类型需要单独区分 并计算位置和宽高
+        // 条件渲染约定的值比较混乱
+        drawUserCustomPoster(poster) {
+            const isShowAvatar = [1, 2].includes(this.data.posterData.is_show_avatar); // 1和2 展示
+            const isShowNickname = [1, 2].includes(this.data.posterData.is_show_nickname); // 1和2 展示
+            const isShowGoods = this.data.posterData.is_show_goods === 1;
+            const isShowPrice = this.data.posterData.is_show_price === 1;
+            const isHideQrcode = this.data.posterData.qr_code_type === 2; // 0和1 展示
+            const isShowFingerprints = this.data.posterData.is_show_fingerprints === 1; // 0和2 不展示
+
+           
+            const LINE_PRICE_MARGIN_RIGHT = 80;
+            const linePriceProps = {
+                label: 'resourceLinePrice',
+                type: TYPES.TEXT,
+                value: this.data.resourceLinePrice,
+                size: 32,
+                fontWeight: 'bold',
+                color: '#777',
+                textStyle: 'stroke'
+            };
+
+            // 部分公共数据提取出来，包含：背景图、价格、划线价、资源图、标题
+            const commonWidgets = [
+                {
+                    label: 'posterBg',
+                    type: TYPES.BG_IMG,
+                    src: this.data.posterData.poster_url,
+                    x:0,
+                    y:0,
+                    width:POSTER_WIDTH,
+                    height:POSTER_HEIGHT
+                },
+                isShowGoods && isShowPrice &&
+                    this.data.resourceLinePrice && {
+                    ...linePriceProps,
+                    x: POSTER_WIDTH - poster.getTextRect(linePriceProps).width - LINE_PRICE_MARGIN_RIGHT,
+                    y: 830
+                },
+                ...(isShowGoods && isShowPrice ? this.getResourcePrice(88, 830, '#FE8946',poster) : []),
+                isShowGoods && {
+                    label: 'goodsName',
+                    type: TYPES.TEXT,
+                    x: 88,
+                    y: !isShowPrice ? 826 : 890,
+                    value: this.data.resource_info.title,
+                    size: 32,
+                    fontWeight: 'normal',
+                    color: 'black',
+                    maxWidth: 550,
+                    textOverflow: 'ellipsis'
+                },
+                isShowGoods && {
+                    label: 'goodsImg',
+                    type: TYPES.IMG,
+                    imgRoundType:'halfRoundRect',
+                    src: this.data.resource_info && this.data.resource_info.img_url,
+                    x: POSTER_WIDTH / 2 - 640 / 2,
+                    y: 310,
+                    width: 640,
+                    height: 640 * 0.75,
+                },
+                isShowGoods && {
+                    label: 'resourceAdditionalBackground',
+                    type: TYPES.SHAPE,
+                    width: 640,
+                    height: !isShowPrice ? 100 : 180,
+                    x: POSTER_WIDTH / 2 - 640 / 2,
+                    y: 790,
+                    r:20,
+                    color: 'white',
+                    shape:'bottomRoundRect',
+                }
+            ];
+
+            // 新老数据逻辑上分开渲染，方便后续维护
+            const isNewDataSource = Boolean(
+                this.data.posterData.qrcode_size && this.data.posterData.avatar_size && this.data.posterData.nickname_size
+            );
+
+            console.log('isNewDataSource: ', isNewDataSource);
+            if (isNewDataSource) {
+                // 昵称最长不超出海报边界
+                // 省略号...约等于一个字的宽度
+                const NICKNAME_MARGIN_RIGHT = this.data.posterData.nickname_size.size;
+                let nicknameMaxWidth = 400;
+                if (this.data.posterData.is_show_avatar === 1) {
+                    const centralPoint = this.data.posterData.avatar_position.x + this.data.posterData.avatar_size.w / 2;
+                    nicknameMaxWidth = 2 * Math.min(POSTER_WIDTH - centralPoint, centralPoint) - NICKNAME_MARGIN_RIGHT*2;
+                }
+                if (this.data.posterData.is_show_avatar === 2) {
+                    nicknameMaxWidth = POSTER_WIDTH - this.data.posterData.nickname_position.x - NICKNAME_MARGIN_RIGHT;
+                }
+                const nicknameProps = {
+                    label: 'nickname',
+                    type: TYPES.TEXT,
+                    value: this.data.userInfo.wx_nickname,
+                    size: this.data.posterData.nickname_size.size,
+                    fontWeight: 'normal',
+                    color: this.data.posterData.nickname_color === 1 ? 'black' : 'white', // 0 | 1 | 2
+                    maxWidth:  nicknameMaxWidth,
+                    textOverflow: 'ellipsis'
+                };
+                const nicknameRect = poster.getTextRect(nicknameProps);
+                let nicknameX = this.data.posterData.nickname_position.x;
+                // is_show_avatar === 1 时，昵称相对于头像 居中展示
+                if (this.data.posterData.is_show_avatar === 1) {
+                    nicknameX =
+                        this.data.posterData.avatar_position.x + this.data.posterData.avatar_size.w / 2 - nicknameRect.width / 2;
+                }
+                return [
+                    ...commonWidgets,
+                    isShowNickname && {
+                        ...nicknameProps,
+                        x: nicknameX,
+                        y: this.data.posterData.nickname_position.y,
+                    },
+                    isShowAvatar && {
+                        label: 'avatar',
+                        type: TYPES.IMG,
+                        src: this.data.userInfo.wx_avatar,
+                        x: this.data.posterData.avatar_position.x,
+                        y: this.data.posterData.avatar_position.y,
+                        width: this.data.posterData.avatar_size.w,
+                        height: this.data.posterData.avatar_size.h,
+                        border:this.data.posterData.avatar_size.w
+                    },
+                    // 二维码和指纹宽高 需单独计算
+                    // 已知：二维码 和 指纹宽高一致，且能拿到整体宽高 qrcode_size.x qrcode_size.y
+                    // 间隙需动态调整
+                    isHideQrcode || {
+                        label: 'qrcode',
+                        type: TYPES.IMG,
+                        imgRoundType : 'fullRoundRect',
+                        src: this.data.resource_info && this.data.resource_info.qr_code,
+                        x: this.data.posterData && this.data.posterData.qrcode_position && this.data.posterData.qrcode_position.x,
+                        y: this.data.posterData && this.data.posterData.qrcode_position && this.data.posterData.qrcode_position.y,
+                        width: this.data.posterData.qrcode_size.h,
+                        height: this.data.posterData.qrcode_size.h,
+                    },
+                    isShowFingerprints && {
+                        label: 'fingerprint',
+                        type: TYPES.IMG,
+                        // 新数据 fingerprint_position 废弃不用
+                        x:
+                            this.data.posterData.qrcode_position.x +
+                            this.data.posterData.qrcode_size.w -
+                            this.data.posterData.qrcode_size.h,
+                        // 注意：顶部和二维码对齐，这里是之前已有的逻辑（由于fingerprint_position和qrcode_position数据y不一致，直接采用二维码的y值定位）
+                        y: this.data.posterData.qrcode_position.y,
+                        width: this.data.posterData.qrcode_size.h,
+                        height: this.data.posterData.qrcode_size.h,
+                        src: 'http://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/859093d21aee5d46f4a58d3842f81d0d.png'
+                    }
+                ];
+            } else {
+                // 注意：以下代码为兼容海报旧数据（已废弃）的特殊逻辑。
+                // 由于旧数据及其不准确，之前是前端对错误的数据进行兜底特殊处理，几乎无法维护。
+                // 以下逻辑完全照搬旧代码，非必要勿动。
+                const NICKNAME_MARGIN_RIGHT = 36;
+                const nicknameProps = {
+                    label: 'nickname',
+                    type: TYPES.TEXT,
+                    x: this.data.posterData.nickname_position.x,
+                    y: this.data.posterData.nickname_position.y,
+                    value: this.data.userInfo.wx_nickname,
+                    size: 32,
+                    fontWeight: 'normal',
+                    color: this.data.posterData.nickname_color === 1 ? 'black' : 'white', // 0 | 1 | 2
+                    textOverflow: 'ellipsis'
+                };
+                const nicknameRect = poster.getTextRect(nicknameProps);
+                let nicknameX = this.data.posterData.nickname_position.x;
+                let nicknameY = this.data.posterData.nickname_position.y;
+                let align = this.data.posterData.nickname_position.align || 'left';
+                if (align === 'center') {
+                    nicknameX = nicknameX - nicknameRect.width / 2;
+                }
+                // 由于b端自定义海报时，昵称距离海报边框有距离，所以如果left小于/等于18，则left取值为18
+                nicknameX = Math.max(18, nicknameX);
+                nicknameY = nicknameY - nicknameRect.height / 4;
+                return [
+                    ...commonWidgets,
+                    isShowNickname && {
+                        ...nicknameProps,
+                        x: nicknameX,
+                        y: nicknameY,
+                        maxWidth: POSTER_WIDTH - nicknameX - NICKNAME_MARGIN_RIGHT
+                    },
+                    isShowAvatar && {
+                        label: 'avatar',
+                        type: TYPES.IMG,
+                        x: this.data.posterData.avatar_position.x,
+                        y: this.data.posterData.avatar_position.y-10,
+                        width: 90,
+                        height: 90,
+                        src: this.data.userInfo.wx_avatar,
+                        border:90
+                    },
+                    isHideQrcode || {
+                        label: 'qrcode',
+                        type: TYPES.IMG,
+                        imgRoundType : 'fullRoundRect',
+                        x: this.data.posterData && this.data.posterData.qrcode_position && this.data.posterData.qrcode_position.x,
+                        y: this.data.posterData && this.data.posterData.qrcode_position && this.data.posterData.qrcode_position.y,
+                        width: 150,
+                        height: 150,
+                        src: this.data.resource_info && this.data.resource_info.qr_code,
+                    },
+                    isShowFingerprints && {
+                        label: 'fingerprint',
+                        type: TYPES.IMG,
+                        x: this.data.posterData.fingerprint_position.x,
+                        y: this.data.posterData.fingerprint_position.y,
+                        width: 140,
+                        height: 140,
+                        src: 'http://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/859093d21aee5d46f4a58d3842f81d0d.png'
+                    }
+                ];
+            }
+        },
+        //实物商品只有一张海报的场景
+        drawEntityPoster(poster) {
+            const LABEL_PADDING = 16;
+            const LINE_PRICE_MARGIN_LEFT = 120;
+            const shopNameProps = {
+                label: 'shopName',
+                type: TYPES.TEXT,
+                y: 196,
+                value: this.data.posterData.shop_name,
+                size: 30,
+                fontWeight: 'normal',
+                color: 'white',
+                maxWidth: 500
+            };
+            const shopNameRect = poster.getTextRect(shopNameProps);
+            const linePriceProps = {
+                label: 'resourceLinePrice',
+                type: TYPES.TEXT,
+                value: this.data.resourceLinePrice,
+                size: 32,
+                fontWeight: 'bold',
+                color: '#777',
+                textStyle: 'stroke'
+            };
+            return [{
+                label: 'posterBg',
+                type: TYPES.BG_IMG,
+                src: this.data.posterData.poster_url,
+                x:0,
+                y:0,
+                width:POSTER_WIDTH,
+                height:POSTER_HEIGHT
+            },
+            {
+                label: 'avatar',
+                type: TYPES.IMG,
+                x: 48,
+                y: 32,
+                width: 100,
+                height: 100,
+                src: this.data.userInfo.wx_avatar,
+                border: 50
+            },
+            {
+                label: 'nickname',
+                type: TYPES.TEXT,
+                x: 170,
+                y: 48,
+                value: this.data.userInfo.wx_nickname,
+                size: 36,
+                fontWeight: 'bold',
+                color: 'black',
+                maxWidth: 500,
+                textOverflow: 'ellipsis'
+            },
+            {
+                label: 'sharePrompt',
+                type: TYPES.TEXT,
+                x: 170,
+                y: 96,
+                value: this.data.shareHint,
+                size: 28,
+                color: '#444'
+            },
+            {
+                label: 'goodsImg',
+                type: TYPES.IMG,
+                imgRoundType : 'fullRoundRect',
+                src: this.data.resource_info.img_url,
+                x: POSTER_WIDTH / 2 - 620 / 2,
+                y: 180,
+                width: 620,
+                height: 620  
+            },
+            {
+                label: 'goodsName',
+                type: TYPES.TEXT,
+                x: 80,
+                y: 950,
+                value: this.data.resource_info.title,
+                size: 32,
+                fontWeight: 'normal',
+                color: 'black',
+                maxWidth: 600,
+                textOverflow: 'wrap',
+                lineHeight:48
+            },
+            {
+                label: 'shopNameLabel',
+                type: TYPES.SHAPE,
+                x: POSTER_WIDTH - shopNameRect.width - 82 - LABEL_PADDING*2,
+                y: shopNameProps.y - LABEL_PADDING/2-4,
+                r: 4,
+                width: shopNameRect.width + 2 * LABEL_PADDING,
+                height: shopNameProps.size + LABEL_PADDING/2,
+                shape:'diagonalRoundRect',
+                color: '#FD822B'
+            },
+            {
+                ...shopNameProps,
+                x: POSTER_WIDTH - shopNameRect.width - 80
+            },
+            this.data.resourceLinePrice && {
+                ...linePriceProps,
+                x: this.getResourcePriceRect(poster).width + LINE_PRICE_MARGIN_LEFT,
+                y: 884
+
+            },
+            ...this.getResourcePrice(80, 880, '#FD822B',poster),
+            {
+                label: 'qrcode',
+                type: TYPES.IMG,
+                src: this.data.resource_info.qr_code,
+                x: 80,
+                y: 1080,
+                width: 160,
+                height: 160,
+            }
+            ];
+        },
+        // drawStudyPoster(poster) {
+        //     const motiveTextProps = {
+        //         label: 'motiveText',
+        //         type: TYPES.TEXT,
+        //         x: 80,
+        //         y: 510,
+        //         value: this.data.motiveInfoData.text,
+        //         size: 32,
+        //         color: 'black',
+        //         lineHeight: 48,
+        //         maxWidth: 590,
+        //         textOverflow: 'wrap' // wrap ellipsis
+        //     };
+        //     const motiveTextAuthorProps = {
+        //         label: 'motiveTextAuthor',
+        //         type: TYPES.TEXT,
+        //         value: `—— ${this.data.motiveInfoData.auther}`,
+        //         size: 32,
+        //         color: 'black',
+        //         maxWidth: 600
+        //     };
+        //     const motiveTextAuthorRect = poster.getTextRect(motiveTextAuthorProps);
+        //     const motiveTextRect = poster.getTextRect(motiveTextProps);
+        //     return [{
+        //         label: 'posterBg',
+        //         type: TYPES.BG_IMG,
+        //         src: this.data.posterData.poster_url,
+        //         x:0,
+        //         y:0,
+        //         width:POSTER_WIDTH,
+        //         height:POSTER_HEIGHT
+        //     },
+        //     {
+        //         label: 'avatar',
+        //         type: TYPES.IMG,
+        //         x: 122,
+        //         y: 256,
+        //         width: 160,
+        //         height: 160,
+        //         src: this.data.userInfo.wx_avatar,
+        //         border: 80
+        //     },
+        //     {
+        //         label: 'nickname',
+        //         type: TYPES.TEXT,
+        //         x: 320,
+        //         y: 280,
+        //         value: this.data.userInfo.wx_nickname,
+        //         size: 44,
+        //         fontWeight: 'bold',
+        //         color: 'black',
+        //         maxWidth: 280,
+        //         textOverflow: 'ellipsis'
+        //     },
+        //     {
+        //         label: 'sharePrompt',
+        //         type: TYPES.TEXT,
+        //         x: 320,
+        //         y: 340,
+        //         value: this.data.shareHint,
+        //         size: 40,
+        //         color: 'black'
+        //     },
+        //     motiveTextProps,
+        //     {
+        //         label: 'resourceTitle',
+        //         type: TYPES.TEXT,
+        //         x: 80,
+        //         y: 800,
+        //         value: this.data.resource_info.title,
+        //         size: 36,
+        //         fontWeight: 'normal',
+        //         color: 'black',
+        //         maxWidth: 590,
+        //         textOverflow: 'ellipsis'
+        //     },
+        //     // {
+        //     //     label: 'qrcode',
+        //     //     type: TYPES.IMG,
+        //     //     x: POSTER_WIDTH / 2 - 168 / 2,
+        //     //     y: 928,
+        //     //     width: 168,
+        //     //     height: 168,
+        //     //     src: this.data.resource_info.qr_code
+        //     // },
+        //     {
+        //         label: 'scanPrompt',
+        //         type: TYPES.TEXT,
+        //         x: 0,
+        //         y: 1110,
+        //         value: '长按扫码查看详情',
+        //         size: 24,
+        //         fontWeight: 'bold',
+        //         color: 'black',
+        //         textAlign: "center"
+        //     },
+        //     {
+        //         label: 'shopName',
+        //         type: TYPES.TEXT,
+        //         y: 898,
+        //         value: this.data.posterData.shop_name,
+        //         size: 32,
+        //         fontWeight: 'bold',
+        //         color: 'black',
+        //         maxWidth: 590,
+        //         textAlign: "center"
+        //     },
+        //     {
+        //         ...motiveTextAuthorProps,
+        //         x: POSTER_WIDTH - motiveTextAuthorRect.width - 80,
+        //         y: 500 + motiveTextRect.height
+        //     }
+        //     ];
+        // },
+        drawPriceOnePoster(poster) {
+            const shopNameProps = {
+                label: 'shopName',
+                type: TYPES.TEXT,
+                y: 346,
+                value: this.data.posterData.shop_name,
+                size: 32,
+                fontWeight: 'bold',
+                color: 'white',
+                maxWidth: 500
+            };
+            const shopNameRect = poster.getTextRect(shopNameProps);
+            const LABEL_PADDING = 4;
+            const LINE_PRICE_MARGIN_RIGHT = 56;
+            const linePriceProps = {
+                label: 'resourceLinePrice',
+                type: TYPES.TEXT,
+                value: this.data.resourceLinePrice,
+                size: 32,
+                fontWeight: 'bold',
+                color: '#777',
+                textStyle: 'stroke'
+            };
+            let posterConfigArr =  [
+                {
+                    label: 'posterBg',
+                    type: TYPES.BG_IMG,
+                    src: this.data.posterData.poster_url,
+                    x:0,
+                    y:0,
+                    width:POSTER_WIDTH,
+                    height:POSTER_HEIGHT
+                },
+                {
+                    label: 'avatar',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 160 / 2,
+                    y: 25,
+                    width: 160,
+                    height: 160,
+                    src: this.data.userInfo.wx_avatar,
+                    border: 80
+                },
+                {
+                    label: 'nickname',
+                    type: TYPES.TEXT,
+                    y: 200,
+                    value: this.data.userInfo.wx_nickname,
+                    size: 44,
+                    fontWeight: 'bold',
+                    color: 'white',
+                    maxWidth: 600,
+                    textOverflow: 'ellipsis',
+                    textAlign: "center"
+                },
+                {
+                    label: 'sharePrompt',
+                    type: TYPES.TEXT,
+                    y: 260,
+                    value: this.data.shareHint,
+                    size:40,
+                    color: 'white',
+                    textAlign:"center"
+                },
+                {
+                    label: 'resourceAdditionalBackground',
+                    type: TYPES.IMG,
+                    x: 34,
+                    y: 804,
+                    width: 684,
+                    height: 184,
+                    src: this.data.posterData.goods_add_bg
+                },
+                {
+                    label: 'resourcePic',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 640 / 2,
+                    y: 324,
+                    width: 640,
+                    height: 640 * 0.75,
+                    src: this.data.resource_info.img_url,
+                    imgRoundType:'halfRoundRect'
+                },
+                {
+                    label: 'resourceTitle',
+                    type: TYPES.TEXT,
+                    x: 66,
+                    y: 840,
+                    value: this.data.resource_info.title,
+                    size: 32,
+                    fontWeight: 'bold',
+                    color: 'black',
+                    maxWidth: 600,
+                    textOverflow: 'ellipsis'
+                },
+                this.data.resourceLinePrice && {
+                    ...linePriceProps,
+                    x: POSTER_WIDTH - poster.getTextRect(linePriceProps).width - LINE_PRICE_MARGIN_RIGHT,
+                    y: 900
+                },
+                ...this.getResourcePrice(66, 900, '#fd0300',poster),
+                {
+                    label: 'qrcode',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 144 / 2,
+                    y: 1026,
+                    width: 144,
+                    height: 144,
+                    src: this.data.resource_info.qr_code
+                },
+                {
+                    label: 'shopNameLabel',
+                    type: TYPES.SHAPE,
+                    x: POSTER_WIDTH - shopNameRect.width - 77 - LABEL_PADDING,
+                    y: shopNameProps.y - LABEL_PADDING,
+                    r: 8,
+                    width: shopNameRect.width + 2 * LABEL_PADDING,
+                    height: 40,
+                    shape: 'diagonalRoundRect',
+                    color: '#FA6A4A'
+                },
+                {
+                    ...shopNameProps,
+                    x: POSTER_WIDTH - shopNameRect.width - 77
+                }
+            ];
+            if (this.data.resource_info.activityLabel) {
+                const activityTitleProps = {
+                    label: 'activityTitle',
+                    type: TYPES.TEXT,
+                    x: 240,
+                    y: 890,
+                    value: this.data.resource_info.activityLabel,
+                    fontSize: 32,
+                    fontWeight: 'bold',
+                    color: 'white',
+                    maxWidth: 500,
+                    textOverflow: 'ellipsis'
+                };
+                const activityTitleRect = poster.getTextRect(activityTitleProps);
+                
+                posterConfigArr.concat([activityTitleProps,{
+                    label: 'activityLabel',
+                    type: TYPES.SHAPE,
+                    x: 240 - LABEL_PADDING,
+                    y: activityTitleProps.y - LABEL_PADDING,
+                    r: 12,
+                    width: activityTitleRect.width + 2 * LABEL_PADDING,
+                    height: 40,
+                    shape: 'fullRoundRect',
+                    color: '#FA6A48'
+                }]);
+            }
+            return posterConfigArr;
+        },
+        drawInteractOnePoster(poster) {
+            const shopNameProps = {
+                label: 'shopName',
+                type: TYPES.TEXT,
+                y: 414,
+                value: this.data.posterData.shop_name,
+                size: 32,
+                fontWeight: 'bold',
+                color: 'white',
+                maxWidth: 500
+            };
+            const shopNameRect = poster.getTextRect(shopNameProps);
+            const LABEL_PADDING = 4;
+            return [
+                {
+                    label: 'posterBg',
+                    type: TYPES.BG_IMG,
+                    src: this.data.posterData.poster_url,
+                    x:0,
+                    y:0,
+                    width:POSTER_WIDTH,
+                    height:POSTER_HEIGHT
+                },
+                {
+                    label: 'avatar',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 160 / 2,
+                    y: 35,
+                    width: 160,
+                    height: 160,
+                    src: this.data.userInfo.wx_avatar,
+                    border: 80
+                },
+                {
+                    label: 'nickname',
+                    type: TYPES.TEXT,
+                    y: 220,
+                    value: this.data.userInfo.wx_nickname,
+                    size: 44,
+                    fontWeight: 'bold',
+                    color: 'white',
+                    maxWidth: 600,
+                    textOverflow: 'ellipsis',
+                    textAlign: "center"
+                },
+                {
+                    label: 'sharePrompt',
+                    type: TYPES.TEXT,
+                    y: 280,
+                    value: this.data.shareHint,
+                    size: 40,
+                    color: 'white',
+                    textAlign: "center"
+                },
+                {
+                    label: 'resourceTitle',
+                    type: TYPES.TEXT,
+                    x: 66,
+                    y: 908,
+                    value: this.data.resource_info.title,
+                    size: 32,
+                    fontWeight: 'normal',
+                    color: 'black',
+                    maxWidth: 620,
+                    textAlign: "center",
+                    textOverflow: 'wrap',
+                    lineHeight: 48
+                },
+                {
+                    label: 'resourcePic',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 640 / 2,
+                    y: 392,
+                    width: 640,
+                    height: 640 * 0.75,
+                    src:  this.data.resource_info.img_url,
+                    imgRoundType:'fullRoundRect',
+                },
+                {
+                    label: 'qrcode',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 180 / 2,
+                    y: 1016,
+                    width: 180,
+                    height: 180,
+                    src: this.data.resource_info.qr_code
+                },
+                {
+                    label: 'scanPrompt',
+                    type: TYPES.TEXT,
+                    x: POSTER_WIDTH / 2 - 144 / 2,
+                    y: 1208,
+                    value: '长按扫码查看详情',
+                    size: 22,
+                    fontWeight: 'normal',
+                    color: 'black',
+                    textAlign: "center"
+                },
+                {
+                    label: 'shopNameLabel',
+                    type: TYPES.SHAPE,
+                    x: POSTER_WIDTH - shopNameRect.width - 74 - LABEL_PADDING,
+                    y: shopNameProps.y - LABEL_PADDING,
+                    r: 8,
+                    width: shopNameRect.width + 2 * LABEL_PADDING,
+                    height: 40,
+                    shape: 'diagonalRoundRect',
+                    color: '#308EF9'
+                },
+                {
+                    ...shopNameProps,
+                    x: POSTER_WIDTH - shopNameRect.width - 74
+                }
+            ];
+        },
+        drawInteractTwoPoster(poster) {
+            return [
+                {
+                    label: 'posterBg',
+                    type: TYPES.BG_IMG,
+                    src: this.data.posterData.poster_url,
+                    x:0,
+                    y:0,
+                    width:POSTER_WIDTH,
+                    height:POSTER_HEIGHT
+                },
+                {
+                    label: 'avatar',
+                    type: TYPES.IMG,
+                    x: 60,
+                    y: 40,
+                    width: 160,
+                    height: 160,
+                    src: this.data.userInfo.wx_avatar,
+                    border: 80
+                },
+                {
+                    label: 'nickname',
+                    type: TYPES.TEXT,
+                    x: 80,
+                    y: 240,
+                    value: this.data.userInfo.wx_nickname,
+                    size: 44,
+                    fontWeight: 'bold',
+                    color: 'white',
+                    maxWidth: 600,
+                    textOverflow: 'ellipsis'
+                },
+                {
+                    label: 'sharePrompt',
+                    type: TYPES.TEXT,
+                    x: 80,
+                    y: 300,
+                    value: this.data.shareHint,
+                    size: 40,
+                    color: 'white'
+                },
+                {
+                    label: 'resourceTitle',
+                    type: TYPES.TEXT,
+                    x: 80,
+                    y: 860,
+                    value: this.data.resource_info.title,
+                    size: 32,
+                    fontWeight: 'normal',
+                    color: 'white',
+                    maxWidth: 600,
+                    textOverflow: 'wrap',
+                    lineHeight:48
+                },
+                {
+                    label: 'resourcePic',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 640 / 2,
+                    y: 350,
+                    width: 640,
+                    height: 640 * 0.75,
+                    src: this.data.resource_info.img_url,
+                    imgRoundType:'halfRoundRect',
+                },
+                {
+                    label: 'resourceAdditionalBackground',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 640 / 2,
+                    y: 830,
+                    width: 640,
+                    height: 180,
+                    src: this.data.posterData.goods_add_bg,
+                },
+                {
+                    label: 'shopName',
+                    type: TYPES.TEXT,
+                    x: 56,
+                    y: 1100,
+                    value: this.data.posterData.shop_name,
+                    size: 32,
+                    fontWeight: 'bold',
+                    color: 'white',
+                    maxWidth: 440
+                },
+                {   
+                    label:"whiteLine",
+                    type:TYPES.SHAPE,
+                    width:84,
+                    height:6,
+                    x:56,
+                    y:1155,
+                    r:3,
+                    color:'white',
+                    shape:'fullRoundRect'
+                },
+                {
+                    label: 'scanPrompt',
+                    type: TYPES.TEXT,
+                    x: 56,
+                    y: 1190,
+                    value: '长按扫码查看详情',
+                    size: 32,
+                    fontWeight: 'bold',
+                    color: 'white'
+                },
+                {
+                    label: 'qrcode',
+                    type: TYPES.IMG,
+                    x: 540,
+                    y: 1070,
+                    width: 160,
+                    height: 160,
+                    src: this.data.resource_info.qr_code
+                }
+            ];
+        },
+        drawPriceTwoPoster(poster) {
+            const LINE_PRICE_MARGIN_RIGHT = 56;
+            const linePriceProps = {
+                label: 'resourceLinePrice',
+                type: TYPES.TEXT,
+                value: this.data.resourceLinePrice,
+                size: 32,
+                fontWeight: 'bold',
+                color: '#777',
+                textStyle: 'stroke'
+            };
+            return[
+                {
+                    label: 'posterBg',
+                    type: TYPES.BG_IMG,
+                    src: this.data.posterData.poster_url,
+                    x:0,
+                    y:0,
+                    width:POSTER_WIDTH,
+                    height:POSTER_HEIGHT
+                },
+                {
+                    label: 'avatar',
+                    type: TYPES.IMG,
+                    x: 60,
+                    y: 40,
+                    width: 160,
+                    height: 160,
+                    src: this.data.userInfo.wx_avatar,
+                    border: 80
+                },
+                {
+                    label: 'nickname',
+                    type: TYPES.TEXT,
+                    x: 80,
+                    y: 240,
+                    value: this.data.userInfo.wx_nickname,
+                    size: 44,
+                    fontWeight: 'bold',
+                    color: 'white',
+                    maxWidth: 600,
+                    textOverflow: 'ellipsis'
+                },
+                {
+                    label: 'sharePrompt',
+                    type: TYPES.TEXT,
+                    x: 80,
+                    y: 300,
+                    value: this.data.shareHint,
+                    size: 40,
+                    color: 'white'
+                },
+                {
+                    label: 'resourceTitle',
+                    type: TYPES.TEXT,
+                    x: 80,
+                    y: 860,
+                    value: this.data.resource_info.title,
+                    size: 32,
+                    fontWeight: 'normal',
+                    color: 'white',
+                    maxWidth: 550,
+                    textOverflow: 'ellipsis'
+                },
+                {
+                    label: 'resourcePic',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 640 / 2,
+                    y: 350,
+                    width: 640,
+                    height: 640 * 0.75,
+                    src: this.data.resource_info.img_url,
+                    imgRoundType:'halfRoundRect',
+                },
+                {
+                    label: 'resourceAdditionalBackground',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 640 / 2,
+                    y: 830,
+                    width: 640,
+                    height: 88,
+                    src: this.data.posterData.goods_add_bg,
+                },
+                this.data.resourceLinePrice && {
+                    ...linePriceProps,
+                    x: POSTER_WIDTH - poster.getTextRect(linePriceProps).width - LINE_PRICE_MARGIN_RIGHT,
+                    y: 980
+                },
+                ...this.getResourcePrice(60, 980, '#FA5988',poster),
+                {
+                    label: 'shopName',
+                    type: TYPES.TEXT,
+                    x: 56,
+                    y: 1132,
+                    value: this.data.posterData.shop_name,
+                    size: 32,
+                    fontWeight: 'bold',
+                    color: 'black',
+                    maxWidth: 440
+                },
+                {
+                    label: 'qrcode',
+                    type: TYPES.IMG,
+                    x: 540,
+                    y: 1100,
+                    width: 160,
+                    height: 160,
+                    src: this.data.resource_info.qr_code
+                }
+            ];
+        },
+        drawInteractThreePoster(poster) {
+            return [
+                {
+                    label: 'posterBg',
+                    type: TYPES.BG_IMG,
+                    src: this.data.posterData.poster_url,
+                    x:0,
+                    y:0,
+                    width:POSTER_WIDTH,
+                    height:POSTER_HEIGHT
+                },
+                {
+                    label: 'avatar',
+                    type: TYPES.IMG,
+                    x: 54,
+                    y: 120,
+                    width: 160,
+                    height: 160,
+                    src: this.data.userInfo.wx_avatar
+                },
+                {
+                    label: 'avatarBorder',
+                    type: TYPES.IMG,
+                    x: 54,
+                    y: 120,
+                    width: 160,
+                    height: 160,
+                    src: 'http://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/eafb3f4d43f8101dd2eaff99a149c021.png'
+                },
+                {
+                    label: 'nickname',
+                    type: TYPES.TEXT,
+                    x: 60,
+                    y: 320,
+                    value: this.data.userInfo.wx_nickname,
+                    size: 44,
+                    fontWeight: 'bold',
+                    color: '#FCCD9B',
+                    maxWidth: 600,
+                    textOverflow: 'ellipsis'
+                },
+                {
+                    label: 'sharePrompt',
+                    type: TYPES.TEXT,
+                    x: 60,
+                    y: 380,
+                    value: this.data.shareHint,
+                    size: 40,
+                    color: '#FCCD9B'
+                },
+                {
+                    label: 'resourceTitle',
+                    type: TYPES.TEXT,
+                    y: 520,
+                    value: this.data.resource_info.title,
+                    size: 32,
+                    fontWeight: 'normal',
+                    color: 'black',
+                    maxWidth: 550,
+                    textOverflow: 'wrap',
+                    textAlign: "center",
+                    lineHeight:48
+                },
+                {
+                    label: 'shopName',
+                    type: TYPES.TEXT,
+                    y: 800,
+                    value: this.data.posterData.shop_name,
+                    size: 32,
+                    fontWeight: 'bold',
+                    color: 'black',
+                    maxWidth: 500,
+                    textAlign: "center"
+                },
+                {
+                    label: 'qrcode',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 240 / 2,
+                    y: 850,
+                    width: 240,
+                    height: 240,
+                    src: this.data.resource_info.qr_code
+                }
+            ];
+        },
+        drawAlivePoster(poster) {
+            const shopNameProps = {
+                label: 'shopName',
+                type: TYPES.TEXT,
+                y: 760,
+                value: `来自「${this.data.posterData.shop_name}」`,
+                size: 24,
+                fontWeight: 'bold',
+                color: '#1560F4',
+                maxWidth: 340
+            };
+            return [
+                {
+                    label: 'posterBg',
+                    type: TYPES.BG_IMG,
+                    src: this.data.posterData.poster_url,
+                    x:0,
+                    y:0,
+                    width:POSTER_WIDTH,
+                    height:POSTER_HEIGHT
+                },
+                {
+                    label: 'avatar',
+                    type: TYPES.IMG,
+                    x: 40,
+                    y: 40,
+                    width: 140,
+                    height: 140,
+                    src: this.data.userInfo.wx_avatar,
+                    border: 70
+                },
+                {
+                    label: 'nickname',
+                    type: TYPES.TEXT,
+                    x: 210,
+                    y: 70,
+                    value: this.data.userInfo.wx_nickname,
+                    size: 48,
+                    fontWeight: 'bold',
+                    color: 'black',
+                    maxWidth: 470,
+                    textOverflow: 'ellipsis'
+                },
+                {
+                    label: 'sharePrompt',
+                    type: TYPES.TEXT,
+                    x: 210,
+                    y: 130,
+                    value: this.data.shareHint,
+                    size: 36,
+                    color: 'black'
+                },
+                {
+                    label: 'resourcePic',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 700 / 2,
+                    y: 200,
+                    width: 700,
+                    height: 700 * 0.75,
+                    src: this.data.resource_info.img_url,
+                    imgRoundType:'fullRoundRect',
+                },
+                {
+                    label: 'resourceTitle',
+                    type: TYPES.TEXT,
+                    x: 40,
+                    y: 840,
+                    value: this.data.resource_info.title,
+                    size: 40,
+                    fontWeight: 'bold',
+                    color: 'black',
+                    maxWidth: 664,
+                    textOverflow: 'wrap',
+                    lineHeight: 48
+                },
+                {
+                    ...shopNameProps,
+                    x: POSTER_WIDTH - poster.getTextRect(shopNameProps).width - 20
+                },
+                {
+                    label: 'aliveStartTime',
+                    type: TYPES.TEXT,
+                    x: 88,
+                    y: 1148,
+                    value: this.data.resource_info.zb_start_at,
+                    size: 30,
+                    fontWeight: 'bold',
+                    color: '#3B4C6E'
+                },
+                {
+                    label: 'scanPrompt',
+                    type: TYPES.TEXT,
+                    x: 512,
+                    y: 1240,
+                    value: '长按扫码查看详情',
+                    size: 24,
+                    fontWeight: 'bold',
+                    color: 'black'
+                },
+                {
+                    label: 'qrcode',
+                    type: TYPES.IMG,
+                    x: 510,
+                    y: 1020,
+                    width: 200,
+                    height: 200,
+                    imgRoundType:'fullRoundRect',
+                    src: this.data.resource_info.qr_code
+                }
+            ];
+        },
+        drawAliveGeneralPoster(poster) {
+            console.log(this,'this??????????');
+            const nicknameProps = {
+                label: 'nickname',
+                type: TYPES.TEXT,
+                x: 140,
+                y: 712,
+                value: this.data.userInfo.wx_nickname,
+                size: 32,
+                fontWeight: 'normal',
+                color: '#777',
+                maxWidth: 300,
+                textOverflow: 'ellipsis'
+            };
+            return [
+                {
+                    label: 'posterBg',
+                    type: TYPES.BG_IMG,
+                    src: this.data.posterData.poster_url,
+                    x:0,
+                    y:0,
+                    width:POSTER_WIDTH,
+                    height:POSTER_HEIGHT
+                },
+                {
+                    label: 'avatar',
+                    type: TYPES.IMG,
+                    x: 40,
+                    y: 680,
+                    width: 80,
+                    height: 80,
+                    src: this.data.userInfo.wx_avatar,
+                    border: 40
+                },
+                nicknameProps,
+                {
+                    label: 'sharePrompt',
+                    type: TYPES.TEXT,
+                    x: 160 + poster.getTextRect(nicknameProps).width,
+                    y: 712,
+                    value: this.data.shareHint,
+                    size: 32,
+                    color: '#777'
+                },
+                {
+                    label: 'resourcePic',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 750 / 2,
+                    y: 0,
+                    width: 750,
+                    height: 750 * 0.75,
+                    src: this.data.resource_info.img_url,
+                    imgRoundType: 'top'
+                },
+                {
+                    label: 'resourceTitle',
+                    type: TYPES.TEXT,
+                    x: 40,
+                    y: 860,
+                    value: this.data.resource_info.title,
+                    size: 36,
+                    fontWeight: 'bold',
+                    color: 'black',
+                    maxWidth: 680,
+                    textOverflow: 'wrap',
+                    lineHeight: 48
+                },
+                {
+                    label: 'shopName',
+                    type: TYPES.TEXT,
+                    x: 40,
+                    y: 1000,
+                    value: `- ${this.data.posterData.shop_name}`,
+                    size: 30,
+                    fontWeight: 'normal',
+                    color: '#777',
+                    maxWidth: 500
+                },
+                {
+                    label: 'scanPrompt',
+                    type: TYPES.TEXT,
+                    y: 1230,
+                    value: '长按扫码查看详情',
+                    size: 20,
+                    fontWeight: 'normal',
+                    color: '#777',
+                    textAlign: "center"
+                },
+                {
+                    label: 'qrcode',
+                    type: TYPES.IMG,
+                    x: 750 / 2 - 140 / 2,
+                    y: 1070,
+                    width: 140,
+                    height: 140,
+                    imgRoundType:'fullRoundRect',
+                    src: this.data.resource_info.qr_code
+                }
+            ];
+        },
+        drawAliveSpecificPoster() {
+            return [
+                {
+                    label: 'posterBg',
+                    type: TYPES.BG_IMG,
+                    src: this.data.posterData.poster_url,
+                    x:0,
+                    y:0,
+                    width:POSTER_WIDTH,
+                    height:POSTER_HEIGHT
+                },
+                {
+                    label: 'avatar',
+                    type: TYPES.IMG,
+                    x: 40,
+                    y: 730,
+                    width: 80,
+                    height: 80,
+                    src: this.data.userInfo.wx_avatar,
+                    border: 40
+                },
+                {
+                    label: 'nickname',
+                    type: TYPES.TEXT,
+                    x: 140,
+                    y: 748,
+                    value: this.data.userInfo.wx_nickname,
+                    size: 28,
+                    fontWeight: 'bold',
+                    color: '#3B4C6E',
+                    maxWidth: 400,
+                    textOverflow: 'ellipsis'
+                },
+                {
+                    label: 'sharePrompt',
+                    type: TYPES.TEXT,
+                    x: 140,
+                    y: 782,
+                    value: this.data.shareHint,
+                    size: 24,
+                    color: '#3B4C6E'
+                },
+                {
+                    label: 'resourcePic',
+                    type: TYPES.IMG,
+                    x: POSTER_WIDTH / 2 - 720 / 2,
+                    y: 134,
+                    width: 720,
+                    height: 720 * 0.75,
+                    src: this.data.resource_info.img_url,
+                    imgRoundType:'fullRoundRect',
+                },
+                {
+                    label: 'aliveStartTime',
+                    type: TYPES.TEXT,
+                    x: 56,
+                    y: 1048,
+                    value: this.data.resource_info.zb_start_at,
+                    size: 28,
+                    fontWeight: 'bold',
+                    color: '#3B4C6E'
+                },
+                {
+                    label: 'scanPrompt',
+                    type: TYPES.TEXT,
+                    x: 510,
+                    y: 1160,
+                    value: '长按扫码查看详情',
+                    size: 24,
+                    fontWeight: 'bold',
+                    color: '#3B4C6E'
+                },
+                {
+                    label: 'qrcode',
+                    type: TYPES.IMG,
+                    x: 500,
+                    y: 930,
+                    width: 220,
+                    height: 220,
+                    roundRectType: 'full',
+                    borderRadius: 12,
+                    src: this.data.resource_info.qr_code
+                }
+            ];
+        },
+        drawStudyPoster(poster) {
+            const motiveTextProps = {
+                label: 'motiveText',
+                type: TYPES.TEXT,
+                x: 80,
+                y: 510,
+                value: this.data.motiveInfoData.text,
+                size: 32,
+                color: 'black',
+                lineHeight: 48,
+                maxWidth: 590,
+                textOverflow: 'wrap' // wrap ellipsis
+            };
+            const motiveTextAuthorProps = {
+                label: 'motiveTextAuthor',
+                type: TYPES.TEXT,
+                value: `—— ${this.data.motiveInfoData.auther}`,
+                size: 32,
+                color: 'black',
+                maxWidth: 600
+            };
+            const motiveTextAuthorRect = poster.getTextRect(motiveTextAuthorProps);
+            const motiveTextRect = poster.getTextRect(motiveTextProps);
+            return [{
+                label: 'posterBg',
+                type: TYPES.BG_IMG,
+                src: this.data.posterData.poster_url,
+                x:0,
+                y:0,
+                width:POSTER_WIDTH,
+                height:POSTER_HEIGHT
+            },
+            {
+                label: 'avatar',
+                type: TYPES.IMG,
+                x: 122,
+                y: 256,
+                width: 160,
+                height: 160,
+                src: this.data.userInfo.wx_avatar,
+                border: 80
+            },
+            {
+                label: 'nickname',
+                type: TYPES.TEXT,
+                x: 320,
+                y: 280,
+                value: this.data.userInfo.wx_nickname,
+                size: 44,
+                fontWeight: 'bold',
+                color: 'black',
+                maxWidth: 280,
+                textOverflow: 'ellipsis'
+            },
+            {
+                label: 'sharePrompt',
+                type: TYPES.TEXT,
+                x: 320,
+                y: 340,
+                value: this.data.shareHint,
+                size: 40,
+                color: 'black'
+            },
+            motiveTextProps,
+            {
+                label: 'resourceTitle',
+                type: TYPES.TEXT,
+                x: 80,
+                y: 800,
+                value: this.data.resource_info.title,
+                size: 36,
+                fontWeight: 'normal',
+                color: 'black',
+                maxWidth: 590,
+                textOverflow: 'ellipsis'
+            },
+            {
+                label: 'qrcode',
+                type: TYPES.IMG,
+                x: POSTER_WIDTH / 2 - 168 / 2,
+                y: 928,
+                width: 168,
+                height: 168,
+                src: this.data.resource_info.qr_code
+            },
+            {
+                label: 'scanPrompt',
+                type: TYPES.TEXT,
+                x: 0,
+                y: 1110,
+                value: '长按扫码查看详情',
+                size: 24,
+                fontWeight: 'bold',
+                color: 'black',
+                textAlign: "center"
+            },
+            {
+                label: 'shopName',
+                type: TYPES.TEXT,
+                y: 898,
+                value: this.data.posterData.shop_name,
+                size: 32,
+                fontWeight: 'bold',
+                color: 'black',
+                maxWidth: 590,
+                textAlign: "center"
+            },
+            {
+                ...motiveTextAuthorProps,
+                x: POSTER_WIDTH - motiveTextAuthorRect.width - 80,
+                y: 500 + motiveTextRect.height
+            }
+            ];
+        },
+        // 换一条励志语
+        changeRecTxt() {
+            let temInfo = this.data.motiveInfo || [];
+            let random = Math.floor(Math.random() * temInfo.length);
+            this.data.motiveInfoData = temInfo[random] || {};
+            this.data.motiveInfoData.id = `study_${random}`;
+            this.setData({
+                isVisible : true
+            })
+            this.generatePoster(random);
+        },
+    }
+  })