miaoguo_master/pages/share/shareitem.js

import common from '../../utils/util';
import main from '../../utils/main';

const app = getApp();
var innerAudioContext1;

Page({
  data: {
    IPhoneX: "",
    IsPlay: false,
  },
  onReady: function () {
    var that = this;
    innerAudioContext1 = wx.createInnerAudioContext();
    innerAudioContext1.onPlay(() => {
      console.log('开始播放');
    });

    innerAudioContext1.onEnded(() => {
      console.log('停止播放');
      that.playSound();
    });

    innerAudioContext1.onError((res) => {
      console.log("innerAudioContext1.errMsg:" + res.errMsg);
      console.log("innerAudioContext1.errCode:" + res.errCode);
      main.getBaiduToken();
      that.setData({
        IsPlay: false,
      });
    });
  },
  onLoad: function (options) {
    var that = this;
    var ishistory = 0;
    if (options.IsHistory)
      ishistory = 1;
    that.setData({
      Containnerheight: main.getWindowHeight(),
      IsHistory: ishistory,
      IsBuildReport: false,
      IsBuildReportHistory: false,
    });

    that.init(options.TaskID, options.Day, ishistory);

  },

  onUnload: function () {
    if (innerAudioContext1) {
      innerAudioContext1.stop();
    }
  },
  init: function (taskid, day, isHistory) {
    var that = this;

    var url = 'GetShareItemInfo?IsHistory=' + isHistory + '&UserID=' + app.globalData.userInfo.UserID + "&TaskID=" + taskid;
    main.getData(url, function (data) {
      data.Day = day;
      that.setData({
        Info: data,
      });

      if (that.data.IsHistory) {
        that.setData({
          Avatar: app.globalData.userInfo.AvatarUrl,
          NickName: app.globalData.userInfo.NickName,
          BgColor: main.getShareImageBackColor(),
        });
      }
    });

    if (app.globalData.IsIPhoneX) {
      that.setData({
        IPhoneX: "_IPhoneX",
      });
    }

    //如果没有生成过二维码，则生成
    if (!app.globalData.userInfo.HasACode) {
      var imageQRCode = "BuildMiaoguoQRCode?IsWeb=1&UserID=" + app.globalData.userInfo.UserID;
      main.getData(imageQRCode, function (data) {});
      app.globalData.userInfo.HasACode = 1;
    }
  },
  showImageSource: function (e) {
    var name = e.currentTarget.dataset.image;
    name = name.replace("_b_", "_a_");
    wx.previewImage({
      current: name,
      urls: [name],
    });
  },
  playSound: function () {
    var that = this;
    that.data.IsPlay = !that.data.IsPlay;
    that.setData({
      IsPlay: that.data.IsPlay,
    });
    if (that.data.IsPlay) {
      var str = "古往今来肺腑之言，常用名句收入囊中。\n";
      str += "小朋友，你好。\n";
      str += "今天来给你打气的是【" + that.data.Info.AuthorCn + "】\n";
      str += "他要对你说：\n";
      str += that.data.Info.Content + "\n";

      str += that.data.Info.AuthorCn + "是谁？";
      str += "他是" + that.data.Info.Country + "的" + that.data.Info.Title + "。\n";
      str += "有兴趣的小朋友，可以了解一下他的故事。我们下次接力再见。";

      var url = app.globalData.audioUrlBaidu;
      url = url.replace("[token]", app.globalData.BaiduToken);
      url = url.replace("[word]", str);
      url = url.replace("spd=3", "spd=5");

      url = encodeURI(url);
      wx.showLoading({
        title: '音频下载中',
        mask: true,
      });
      var timeout = setTimeout(function () {
        wx.hideLoading();
      }, 30000);
      //console.log(url);
      wx.downloadFile({
        url: url,
        success(res) {
          wx.hideLoading();
          clearTimeout(timeout);

          innerAudioContext1.src = res.tempFilePath;
          innerAudioContext1.play();
        },
        fail(err) {
          wx.hideLoading();
        }
      });
    } else {
      if (innerAudioContext1)
        innerAudioContext1.stop();
    }
  },
  //生成里程碑分享图片
  buildShareImageMilestone: function () {
    var that = this;

    that.setData({
      IsBuildReport: true,
    });

    var url1 = that.data.Info.MilestoneImage;
    var url3 = app.globalData.userInfo.AvatarUrl;
    var _uid = common.Encrypt(app.globalData.userInfo.UserID);
    if (_uid.indexOf("/") >= 0)
      _uid = common.ReplaceAllString(_uid, "/", "___");
    var url4 = app.globalData.uploadImageUrl + "MiaoguoUser" + _uid + ".png";

    main.DownloadFile(url1, function (tempFilePath1) {
      main.DownloadFile(url3, function (tempFilePath3) {
        main.DownloadFile(url4, function (tempFilePath4) {
          const query = wx.createSelectorQuery();
          query.select('#shareCanvas')
            .fields({
              node: true,
              size: true
            })
            .exec((res) => {
              
                
              const canvas = res[0].node;
              const ctx = canvas.getContext('2d');

              const dpr = wx.getSystemInfoSync().pixelRatio;
              canvas.width = res[0].width * dpr;
              canvas.height = res[0].height * dpr;
              ctx.scale(dpr, dpr);

              var img = canvas.createImage();
              img.src = tempFilePath1;
              img.onload = e => {
                ctx.drawImage(img, 0, 0, 700, 1050);
              };

              setTimeout(function(){

                ctx.fillStyle = "#ffffff";
                ctx.shadowBlur=4;
                ctx.shadowOffsetY=2;
                ctx.shadowColor="rgba(0,0,0,0.3)";
                ctx.fillRect(570, 70, 90, 90);
  
                var img3 = canvas.createImage();
                img3.src = tempFilePath3;
                img3.onload = e => {
                  ctx.drawImage(img3, 575, 75, 80, 80);
                };

                var img4 = canvas.createImage();
                img4.src = tempFilePath4;
                img4.onload = e => {
                  ctx.drawImage(img4, 530, 880, 140, 140);
                };

                ctx.fillStyle = "#f2f2f2";
                ctx.font = "normal 500 24px caption";
                ctx.fillText(that.data.Info.Content1, 56, 650);
                ctx.fillText(that.data.Info.Content2, 56, 683);
                ctx.fillText(that.data.Info.Content3, 56, 716);
                
                ctx.fillStyle = "#4d4d4d";
                ctx.font = "normal 500 16px caption";
                ctx.shadowBlur=0;
                ctx.shadowOffsetY=0;
                for(var i=0;i< that.data.Info.Content.length;i++)
                  ctx.fillText(that.data.Info.Content[i], 50, 917+i*30);
                
                main.BuildImage(700, 1050, canvas, function () {
                  main.getData("ShareMiaoguoTask?UserID=" + app.globalData.userInfo.UserID, function (data) {
                    that.setData({
                      IsBuildReport: false,
                    });
                  });
                });

              },500);
            });
        });
      });
    });
  },
  //生成分享图片
  buildShareImage: function () {
    var that = this;

    that.setData({
      IsBuildReport: true,
    });

    var url1 = that.data.Info.Image.replace("_b_", "_d_");
    var url2 = that.data.Info.WordImage;
    var url3 = app.globalData.userInfo.AvatarUrl;
    var _uid = common.Encrypt(app.globalData.userInfo.UserID);
    if (_uid.indexOf("/") >= 0)
      _uid = common.ReplaceAllString(_uid, "/", "___");
    var url4 = app.globalData.uploadImageUrl + "MiaoguoUser" + _uid + ".png";

    main.DownloadFile(url1, function (tempFilePath1) {
      main.DownloadFile(url2, function (tempFilePath2) {
        main.DownloadFile(url3, function (tempFilePath3) {
          main.DownloadFile(url4, function (tempFilePath4) {
            const query = wx.createSelectorQuery();
            query.select('#shareCanvas')
              .fields({
                node: true,
                size: true
              })
              .exec((res) => {
                const canvas = res[0].node;
                const ctx = canvas.getContext('2d');

                const dpr = wx.getSystemInfoSync().pixelRatio;
                canvas.width = res[0].width * dpr;
                canvas.height = res[0].height * dpr;
                ctx.scale(dpr, dpr);

                var img = canvas.createImage();
                img.src = tempFilePath1;
                img.onload = e => {
                  ctx.drawImage(img, 0, 0, 700, 520);
                };

                var img2 = canvas.createImage();
                img2.src = tempFilePath2;
                img2.onload = e => {
                  ctx.drawImage(img2, 0, 520, 700, 270);
                };

                ctx.fillStyle = "#ffffff";
                ctx.fillRect(0, 790, 700, 260);

                var img3 = canvas.createImage();
                img3.src = tempFilePath3;
                img3.onload = e => {
                  ctx.drawImage(img3, 610, 807, 60, 60);
                  var img5 = canvas.createImage();
                  img5.src = "../../pages/images/promotion_face_circle.png";
                  img5.onload = e => {
                    ctx.drawImage(img5, 610, 807, 60, 60);
                  };
                };

                var img4 = canvas.createImage();
                img4.src = tempFilePath4;
                img4.onload = e => {
                  ctx.drawImage(img4, 530, 880, 140, 140);
                };

                ctx.fillStyle = "#4d4d4d";
                ctx.fillRect(30, 836, 560, 2);

                ctx.font = "normal 600 18px caption";
                ctx.fillText("我的「秒过」勤勉接力", 30, 866);

                ctx.font = "normal 600 18px caption";
                ctx.fillText("坚持练习", 30, 911);

                ctx.font = "normal 600 18px caption";
                ctx.fillText("天", 30, 1016);

                ctx.font = "normal 600 16px caption";
                ctx.fillText("勇敢挑战", 266, 934);

                ctx.font = "normal 600 16px caption";
                ctx.fillText("个知识点", 266, 998);

                ctx.font = "normal 600 16px caption";
                ctx.fillText("专注复习", 370, 934);

                ctx.font = "normal 600 16px caption";
                ctx.fillText("分钟", 370, 998);

                ctx.font = "normal 500 18px Roboto-Black";
                ctx.fillText(that.data.Info.CreateTimeStr1, 30, 823);

                ctx.font = "normal 500 96px Roboto-Black";
                ctx.fillText(that.data.Info.Day, 30, 994);

                ctx.font = "normal 500 36px Roboto-Black";
                ctx.fillText(that.data.Info.CardTaskTotal, 266, 974);

                ctx.font = "normal 500 36px Roboto-Black";
                ctx.fillText(that.data.Info.DurationTotal, 370, 974);

                main.BuildImage(700, 1050, canvas, function () {
                  main.getData("ShareMiaoguoTask?UserID=" + app.globalData.userInfo.UserID, function (data) {
                    that.setData({
                      IsBuildReport: false,
                    });
                  });
                });

              });
          });
        });
      });
    });

  },
  //生成分享图片(历史)
  buildShareImageHistory: function () {
    var that = this;

    that.setData({
      IsBuildReportHistory: true,
    });

    var date = that.data.Info.CreateTimeStr1
    var todayTime = that.data.Info.DurationMinute;
    var dayNumber = that.data.Info.Day;

    var avatarUrl = app.globalData.userInfo.AvatarUrl;
    avatarUrl = avatarUrl.substring(0, avatarUrl.lastIndexOf("/") + 1);
    avatarUrl = avatarUrl + "0";

    main.DownloadFile(avatarUrl, function (tempFilePath) {
      const query = wx.createSelectorQuery();
      query.select('#shareCanvasHistory')
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');

          const dpr = wx.getSystemInfoSync().pixelRatio;
          canvas.width = res[0].width * dpr;
          canvas.height = res[0].height * dpr;
          ctx.scale(dpr, dpr);

          var img = canvas.createImage();
          img.src = tempFilePath;
          img.onerror = err => {
            console.log(err);
          };
          img.onload = e => {
            ctx.drawImage(img, 0, 0, 360, 360);
            var img2 = canvas.createImage();
            img2.src = "../images/universalpic_screenshot_jl_bgimage_360x360.png";
            img2.onload = e => {
              ctx.drawImage(img2, 0, 0, 360, 360);

              ctx.fillStyle = that.data.BgColor;

              ctx.fillRect(360, 0, 240, 360);

              ctx.fillStyle = "#ffffff";
              ctx.font = "normal 500 24px caption";
              ctx.fillText(app.globalData.userInfo.NickName, 30, 306);

              ctx.font = "normal 500 18px caption";
              ctx.fillText(date, 30, 335);

              ctx.font = "normal 500 20px caption";
              ctx.fillText("秒过学习", 390, 40);
              ctx.font = "normal 500 44px caption";
              ctx.fillText("勤勉接力", 390, 88);
              ctx.font = "normal 500 20px caption";
              ctx.fillText("见证成长", 390, 140);

              ctx.font = "normal 500 68px caption";
              if (!todayTime)
                todayTime = 0;

              ctx.fillText(todayTime, 390, 209);

              ctx.font = "normal 500 68px caption";
              var metrics = ctx.measureText(todayTime.toString());
              //console.log(JSON.stringify(metrics));

              var h = 209;
              if (app.globalData.IsIOS)
                h = 206;
              ctx.font = "normal 500 32px caption";
              ctx.fillText("分钟", 393 + Math.round(metrics.width), h);


              ctx.font = "normal 500 20px caption";
              ctx.fillText("迄今已练习", 390, 295);

              ctx.font = "normal 500 32px caption";
              ctx.fillText(dayNumber + "天", 390, 333);

              main.BuildImage(600, 360, canvas, function () {
                that.setData({
                  IsBuildReportHistory: false,
                });
              });
            };
          };
        });
    });
  },

  showHelpImage: function (e) {
    main.ShowHelpImage();
  },

  onShareAppMessage: function () {
    return {
      title: app.globalData.ShareTitle,
      path: app.globalData.SharePath + '?UserID=' + app.globalData.userInfo.UserID,
      imageUrl: app.globalData.ShareImage,
    }
  },
})