poster.js 6.3 KB
import Poster from '../../miniprogram_dist/poster/poster';
let app = getApp();
Page({
  data: {
    isOverShare: true,
    imageUrl: "", // 海报图片
    wxShareTitle: "", // 分享标题
    wxCodePath: "", // 微信二维码参数地址,分享链接公用
    wxCodeUrl: "", // 微信二维码图片地址
    wishList: [],
  },
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
    }
    let userInfo = app.globalData.userInfo;
    let billCode = app.globalData.indexInfo.wishBillCode;
    let title = `${userInfo.nickname}正在参加丸美眼霜节心愿单活动,需要你的倾情相助!`;
    let path = `/pages/coop/coop?code=${billCode}&s=share`
    return {
      title,
      path
    }
  },
  onLoad(options) {
    // this.setData({
    //   wishList: wishList
    // })
    app.queryIndex().then((result) => {
      console.log("result:", result);
      wx.showLoading({
        title: '生成中',
      });
      this.initData();
    })
  },
  initData() {
    // 设置 分享链接,分享文案
    let nickname = app.globalData.userInfo && app.globalData.userInfo.nickname || "";
    let billCode = app.globalData.indexInfo.wishBillCode;
    let wxShareTitle = nickname + `正在参加丸美眼霜节心愿单活动,需要你的倾情相助!`;
    let wxCodePath = `/pages/coop/coop?code=${billCode}&s=share`
    this.setData({
      wxCodePath: wxCodePath,
      wxShareTitle: wxShareTitle
    })

    // 获取小程序码
    app.post({
      url: app.api.wxacodeGet,
      data: {
        path: encodeURIComponent(wxCodePath)
      }
    }).then((result) => {
      this.setData({
        wxCodeUrl: result
      })

      // 获取海报数据
      let posterData = this.getPosterConfig();
      // 绘制设置海报
      this.onCreatePoster(posterData);
    })

    // // 获取海报数据
    // let posterData = this.getPosterConfig();
    // // 绘制设置海报
    // this.onCreatePoster(posterData);

  },

  onPosterSuccess(e) {
    console.log("onPosterSuccess");
    wx.hideLoading();
    const {
      detail
    } = e;
    console.log("detail:", detail)
    this.setData({
      imageUrl: detail
    })
  },
  onPosterFail(err) {
    wx.hideLoading();
    console.error(err);
  },

  /**
   * 查看图片
   */
  onPreviewImage() {
    let imageUrl = this.data.imageUrl
    console.log("imageUrl:", imageUrl);
    wx.previewImage({
      current: imageUrl,
      urls: [imageUrl]
    })
  },
  /**
   * 保存图片到本地
   */
  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) {}
                }
              })
            }
          }
        })
      }
    })
  },

  /**
   * 异步生成海报
   */
  onCreatePoster(posterConfig) {
    console.log("posterConfig:", posterConfig);
    this.setData({
      posterConfig: posterConfig
    }, () => {
      Poster.create(true); // 入参:true为抹掉重新生成
    });
  },


  // 获取海报数据
  getPosterConfig() {
    // 合成图片需要的数据
    let {
      userInfo,
      posterWishList,
    } = app.globalData;
    let codeUrl = this.data.wxCodeUrl;
    console.log("posterWishList:", posterWishList);

    let images = [
      // 底图
      {
        width: 700,
        height: 921,
        x: 0,
        y: 0,
        url: '../../image/draw/draw-c1.png',
      },
      // 头像
      {
        width: 102,
        height: 102,
        x: 35,
        y: 779,
        borderRadius: 102,
        url: userInfo.avatar,
      },
      // 小程序码
      {
        width: 118,
        height: 118,
        x: 560,
        y: 780,
        url: codeUrl,
        zIndex: 14
      }
    ];

    let texts = [{
      x: 165,
      y: 810,
      width: 360,
      lineHeight: 32,
      fontSize: 26,
      lineNum: 3,
      baseLine: 'middle',
      // text: `${userInfo.nickname}正在参加丸美眼霜节心愿单活动,需要你的倾情相助!`,
      text: `我正在参加丸美集弹力值领心愿礼,需要你的倾情相助!`,
      color: '#666666',
      zIndex: 111
    }];

    let originPoint = {
      x: 55,
      y: 160,
    }

    // 产品居中修正
    let productLength = posterWishList.length;
    let productSpace = 215;
    if (productLength == 1) {
      originPoint.x = (700 - 165) / 2
    } else if (productLength == 2) {
      productSpace = 250;
      originPoint.x = (700 - (200 * 2)) / 2
    }

    posterWishList.forEach((element, index) => {
      // 产品背景
      let egb = {
        width: 165,
        height: 165,
        x: originPoint.x + (productSpace * index),
        y: originPoint.y,
        url: '../../image/draw/draw-c2.png',
      }

      // 产品图
      let product = {
        width: 165,
        height: 165,
        x: originPoint.x + (productSpace * index),
        y: originPoint.y,
        url: '../../image/prize/prize-' + element.tag + '.png',
      }

      let productDesc = {
        x: originPoint.x + (productSpace * index),
        y: originPoint.y + 165 + 12,
        width: 165,
        fontSize: 24,
        lineHeight: 28,
        lineNum: 3,
        baseLine: 'top',
        text: `${element.prizeName}`,
        color: '#bc3239',
        zIndex: 111
      }

      images.push(egb);
      images.push(product);
      texts.push(productDesc);
    });

    let posterData = {
      width: 700,
      height: 921,
      debug: false,
      blocks: [],
      images: images,
      lines: [],
      texts: texts,
    }
    return posterData;
  },


  // 子组件事件
  evtcomp(evt) {
    let {
      name,
      data
    } = evt.detail;
    switch (name) {

      case "_evt_hide":
        break;

      default:
        break;
    }
  },
})