Sanakey
2021-07-09 3fc241d02fb8b671289de3d9d80bf848349c04d4
components/poster-creator/index.ts
@@ -23,7 +23,9 @@
      observer(newVal) {
        console.log('监听detail的newVal',newVal);
        if (JSON.stringify(newVal) != '{}'){
          this.getQrCode()
          this.setData({
            isDetail: true
          })
        }
      }
    },
@@ -42,7 +44,8 @@
    sharePath: '', //生成的分享图
    visible: false,
    qrCodeUrl:'',
    isLive:false //是否直播
    isLive:false, //是否直播
    isDetail:false //是否直播
  },
  lifetimes:{
    async ready(){
@@ -70,7 +73,7 @@
          }
        })
      )
      if (error){
      if (error||result.state!=='success'){
        console.log(error);
        wx.showToast({
          title: '获取二维码失败,请稍后再试',
@@ -91,18 +94,23 @@
          data:{
            QrCodeType:80,
            doccode:this.data.detail.doccode,
            RefOpenId:wx.globalData.FromOpenId
            SellerOpenId:wx.globalData.FromOpenId
          }
        })
      )
      if (error){
      if (error||result.state!=='success'){
        console.log(error);
        return;
        wx.showToast({
          title: '获取二维码失败,请稍后再试',
          icon:'none',
        })
        return false;
      }
      console.log(result);
      this.setData({
        qrCodeUrl:result.QrCode
      })
      return true;
    },
    handleClose() {
      this.setData({
@@ -123,6 +131,9 @@
        this.triggerEvent('initData')
        return
      }
      if (this.data.isDetail){
        if (!await this.getQrCode()) return;
      }
      if (this.data.isLive){
        if (!await this.getLiveRoomQrCode()) return;
      }
@@ -141,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',
@@ -163,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',
@@ -188,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',
@@ -199,9 +408,9 @@
          },
          {
            type: 'text',
            text: `邀请您参与${(isLive?'直播':'活动')}`,
            text: `邀请您参与直播`,
            css: {
              top: '616rpx',
              top: '766rpx',
              left: '375rpx',
              align: 'center',
              fontSize: '28rpx',
@@ -210,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',
@@ -221,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',
@@ -269,6 +465,12 @@
          },
        ]
      };
      if (isLive){
        imgDraw = imgDrawLive;
      }
      if(isDetail) {
        imgDraw = imgDrawPromotions;
      }
      return imgDraw;
    },
    onImgErr() {