Sanakey
2021-07-09 3fc241d02fb8b671289de3d9d80bf848349c04d4
components/poster-creator/index.ts
@@ -44,7 +44,8 @@
    sharePath: '', //生成的分享图
    visible: false,
    qrCodeUrl:'',
    isLive:false //是否直播
    isLive:false, //是否直播
    isDetail:false //是否直播
  },
  lifetimes:{
    async ready(){
@@ -151,11 +152,209 @@
        imgDraw: this.getImgDraw()
      })
    },
     getImgDraw() {
      let {detail,liveRoom,sellerList,qrCodeUrl} = this.data;
      let isLive = this.data.isLive;
      let isDetail = this.data.isDetail;
      let promotionsType:any = {
        710802: '秒杀价', //秒杀
        710803: '报名价', //报名
        710804: '团购价', //团购
      }
      console.log(detail,liveRoom,sellerList,qrCodeUrl,isLive);
      let imgDraw = {
      let imgDraw = {};
      let imgDrawPromotions = {
        "width": "750rpx",
        "height": "1196rpx",
        "background": "#fff",
        "views": [
          {
            "type": "image",
            "url": "/assets/images/promotions-poster-bg.jpg",
            "css": {
              "width": "750rpx",
              "height": "1196rpx",
              "top": "0px",
              "left": "0px"
            }
          },
          {
            "type": "image",
            "url": sellerList[0].sellerWeiXinAvatarUrl||'/assets/images/default-avatar.png',
            "css": {
              "width": "100rpx",
              "height": "100rpx",
              "top": "22rpx",
              "left": "36rpx",
              "borderRadius": "100rpx"
            }
          },
          {
            "type": "text",
            "text": sellerList[0].sellerName||'昵称',
            "css": {
              "color": "#fff",
              "top": "34rpx",
              "left": "160rpx",
              "fontSize": "32rpx",
              "fontWeight": "bold",
              "textAlign": "left"
            }
          },
          {
            "type": "text",
            "text": "邀请您参与活动",
            "css": {
              "color": "#fff",
              "top": "80rpx",
              "left": "160rpx",
              "fontSize": "28rpx",
              "textAlign": "left"
            }
          },
          {
            "type": "image",
            "url": detail.coverImageUrl[0]||'',
            "css": {
              "width": "600rpx",
              "height": "600rpx",
              "top": "182rpx",
              "left": "76rpx",
              "borderRadius": "10rpx",
            }
          },
          {
            "type": "text",
            "text": "¥",
            "css": {
              "color": "#f23232",
              "top": "820rpx",
              "left": "76rpx",
              "fontSize": "28rpx",
              "textAlign": "left"
            }
          },
          {
            "type": "text",
            "text": detail.salesPrice||0,
            "css": {
              "color": "#f23232",
              "top": "808rpx",
              "left": "108rpx",
              "fontSize": "44rpx",
              "fontWeight": "bold",
              "textAlign": "left"
            }
          },
          {
            "type": "text",
            "text": promotionsType[detail.formId]||'',
            "css": {
              "color": "#f23232",
              "background": "rgb(249, 230, 231)",
              "width": "110rpx",
              "height": "35rpx",
              "top": "820rpx",
              "left": `${130 + (detail.salesPrice.toString().length*25)}rpx`,
              "borderRadius": "20rpx",
              "padding": "5rpx",
              "fontSize": "28rpx",
              "lineHeight": "35rpx",
              "textAlign": "center"
            }
          },
          {
            "type": "text",
            "text": detail.formId==710803?'':'价格',
            "css": {
              "color": "#999",
              "top": "884rpx",
              "left": "84rpx",
              "fontSize": "28rpx",
              "textAlign": "left"
            }
          },
          {
            "type": "text",
            "text": detail.formId==710803?'':`¥${detail.originalPrice||0}`,
            "css": {
              "color": "#999",
              "top": "885rpx",
              "left": "150rpx",
              "fontSize": "24rpx",
              "textDecoration": "line-through",
              "textAlign": "left"
            }
          },
          {
            "type": "text",
            "text": "限时优惠",
            "css": {
              "color": "#f23232",
              "width": "135rpx",
              "height": "40rpx",
              "top": detail.formId==710803?'885rpx':"946rpx",
              "left": "88rpx",
              "padding": "6rpx",
              "borderRadius": "5rpx",
              "borderWidth": "2rpx",
              "borderColor": "#fde4e7",
              "fontSize": "28rpx",
              "lineHeight": "40rpx",
              "textAlign": "center"
            }
          },
          {
            "type": "text",
            "text": `已售 ${detail.orderTimes||0}`,
            "css": {
              "color": "#999",
              "width": "200rpx",
              "top": "820rpx",
              "left": "476rpx",
              "fontSize": "28rpx",
              "textAlign": "right"
            }
          },
          {
            "type": "text",
            "text": `【${wx.globalData.settings.name}】${detail.title}`||'活动标题',
            "css": {
              "color": "#333",
              "width": "360rpx",
              "top": detail.formId==710803?'980rpx':"1020rpx",
              "left": "76rpx",
              "fontSize": "36rpx",
              "maxLines": "2",
              "lineHeight":'50rpx',
              "textAlign": "left"
            }
          },
          {
            "type": "image",
            "url": qrCodeUrl,
            "css": {
              "width": "200rpx",
              "height": "100px",
              "top": "888rpx",
              "left": "476rpx",
            }
          },
          {
            "type": "text",
            "text": "长按扫码识别参与~",
            "css": {
              "color": "#666",
              "top": "1105rpx",
              "left": "476rpx",
              "fontSize": "24rpx",
              "textAlign": "left"
            }
          }
        ]
      };
      let imgDrawLive = {
        width: '750rpx',
        height: '1334rpx',
        background: '#f5f5f5',
@@ -173,21 +372,21 @@
          },
          {
            type: 'image',
            url: isLive?liveRoom.ShareImgUnidUrl:detail.coverImageUrl[0],
            url: liveRoom.ShareImgUnidUrl,
            css: {
              top: '10rpx',
              left: '10rpx',
              right: '10rpx',
              width: '730rpx',
              height: '480rpx',
              height: '630rpx',
              borderRadius: '16rpx'
            },
          },
          {
            type: 'image',
            url: (isLive?liveRoom.AnchorImgUnidUrl:sellerList[0].sellerHeadimgurl) || '/assets/images/default-avatar.png',
            url: liveRoom.AnchorImgUnidUrl || '/assets/images/default-avatar.png',
            css: {
              top: '444rpx',
              top: '594rpx',
              left: '328rpx',
              width: '96rpx',
              height: '96rpx',
@@ -198,9 +397,9 @@
          },
          {
            type: 'text',
            text: (isLive?liveRoom.AnchorName: sellerList[0].sellerName) || '昵称',
            text: liveRoom.AnchorName || '昵称',
            css: {
              top: '572rpx',
              top: '722rpx',
              fontSize: '28rpx',
              left: '375rpx',
              align: 'center',
@@ -209,9 +408,9 @@
          },
          {
            type: 'text',
            text: `邀请您参与${(isLive?'直播':'活动')}`,
            text: `邀请您参与直播`,
            css: {
              top: '616rpx',
              top: '766rpx',
              left: '375rpx',
              align: 'center',
              fontSize: '28rpx',
@@ -220,9 +419,9 @@
          },
          {
            type: 'text',
            text: `${(isLive?liveRoom.RoomName:detail.title) || '活动标题'} `,
            text: `${(liveRoom.RoomName) || '活动标题'} `,
            css: {
              top: '684rpx',
              top: '820rpx',
              left: '375rpx',
              maxLines: 1,
              align: 'center',
@@ -231,22 +430,9 @@
              color: '#3c3c3c'
            }
          },
          // {
          //   type: 'text',
          //   text: `活动价 ¥`,
          //   css: {
          //     top: '780rpx',
          //     left: '250rpx',
          //     maxLines: 1,
          //     align: 'center',
          //     fontWeight: 'bold',
          //     fontSize: '28rpx',
          //     color: '#f23232'
          //   }
          // },
          {
            type: 'text',
            text: `${(isLive?'':'¥'+detail.salesPrice) || ''}`,
            text: ``,
            css: {
              top: '765rpx',
              left: '375rpx',
@@ -279,6 +465,12 @@
          },
        ]
      };
      if (isLive){
        imgDraw = imgDrawLive;
      }
      if(isDetail) {
        imgDraw = imgDrawPromotions;
      }
      return imgDraw;
    },
    onImgErr() {