wxd / MShopWeApp

// pages/liveStreamDetails/liveStreamDetails.js
var t = require("../../../utils/util.js"),
  ut = t,
  e = require("../../../utils/common.js"),
  a = require("../../../utils/wxParse/wxParse.js"),
  s = getApp(),
  i = s.request,
  rq = i,
  oo = s.globalData,
  o = s.globalData.setting,
  os = o;

const app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    details: {},
    status: '',
    btnText: '',
    showActionSheet: true,
    showPlaybill: true,
    windowWidth: 0,
    windowHeight: 0,
    dpr: 0,
    canvasScale: 1.0,
    nickName: '',
    avatarUrl: '',
    coverImg: '',
    canvasToImgPath: '',
    screenWidth: 0,
    canvasHidden: 1,
    gid: '',
    shareImgPath: ''
  },

  // 点击商品
  clickgoods: function (e) {
    console.log('...........>', e.currentTarget.dataset.url);
    wx.navigateTo({
      url: '../../../' + e.currentTarget.dataset.url
    });
  },

  // 返回首页
  backHome: function () {
    wx.reLaunch({
      url: '../../../pages/index/index/index',
    })
  },

  // 分享操作表
  clickShare: function () {
    this.setData({
      showActionSheet: !this.data.showActionSheet
    })
  },

  // actionSheet - 取消按钮
  hiddenActionSheet: function () {
    this.setData({
      showActionSheet: 'false'
    })
  },

  //生成海报
  createPlaybill: function () {
    // 1.提示 “正在生成海报...”
    
    // 2.生成海报，如果生成完毕,关闭提示
    this.drawPlaybill();
    // 3.展示生成的海报
    this.setData({
      showActionSheet: 'false',
      showPlaybill: !this.data.showPlaybill
    });
    
  },
 
  // 获取设备信息
  getSystemInfo: function() {
    let that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight,
          screenWidth: res.screenWidth,
          dpr: res.pixelRatio
        })
      }
    });
    console.log('宽度',this.data.windowWidth);
    console.log('高度',this.data.windowHeight);
  },

//文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度
drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, unit) {
  var lineWidth = 0;
  var lastSubStrIndex = 0; //每次开始截取的字符串的索引
  var han = 0;
  for (let i = 0; i < str.length; i++) {
    if (han == 2) return;
    //lineWidth += ctx.measureText(str[i]).width;
    lineWidth += ut.measureText(str[i], 21.3 * unit);
    if (lineWidth > canvasWidth) {
      han++;

      if (han == 2) {
        ctx.textAlign = 'justify';
        ctx.fillText(str.substring(lastSubStrIndex, i) + '...', leftWidth, initHeight); //绘制截取部分
      } else {
        ctx.textAlign = 'justify';
        ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight);
      }
      initHeight += 22; //22为字体的高度
      lineWidth = 0;
      lastSubStrIndex = i;
      titleHeight += 20;
    }
    if (i == str.length - 1) { //绘制剩余部分
      ctx.textAlign = 'justify';
      ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
    }
  }
},

   // 生成海报
  drawPlaybill: function () {
    wx.showLoading({
      title: '正在生成海报...'
    });
    
    // 数据准备
    const title = this.data.details.name;
    // const headImg = app.globalData.userInfo['head_pic'];
    const that = this;

    // console.log('----------------v', headImg);

    var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
      os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo";
    
    // 以iPhone6为例，375/750 = 0.5
    // let scale = this.data.windowWidth / 375;
    let scale = this.data.screenWidth / 750 * 1.35


    // 适配屏get幕
    // let scale = this.data.windowWidth / 375.0;
    // this.setData({totalHeight: 667 * scale});

    // 获取Canvas
    let ctx = wx.createCanvasContext('myCanvas');

    // 放大 因为不放大的话，生成的分享图会模糊。暂时先注释
    // ctx.scale(this.data.canvasScale, this.data.canvasScale)
    
    

  //   var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
  //     os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo";
  //  + "?sceneValue=1012" + "&pageValue=packageA/pages/liveStreamDetails/liveStreamDetails"
  //  console.log('path3---->', path3);


    // 绘制主背景白色
    ctx.setFillStyle('#ffffff');
    ctx.fillRect(0, 0, 480, 738);

    // 绘制头像
    ctx.save();
    ctx.beginPath();
    ctx.arc(58, 63, 28, 0, 2*Math.PI);
    ctx.clip();
    // console.log('1__________________>',app.globalData.userInfo['head_pic']);
    ctx.drawImage(this.data.avatarUrl, 30, 35, 56, 56);
    ctx.restore();

    // 绘制昵称
    ctx.setFontSize(14);
    ctx.setFillStyle('#ADADAD');
    ctx.fillText(this.data.nickName, 106, 68);

    // 绘制主图
    ctx.drawImage(this.data.coverImg, 0, 104, 480, 382);
    // ctx.draw(true);

    // 绘制文字
    ctx.setFontSize(24);
    ctx.setFillStyle('#1E1E1E');
    this.drawText(ctx, title, 51, 563, 300, 300, 2);

    // 绘制小程序码
    ctx.drawImage(this.data.ewm, 310, 525, 132, 132);
    // ctx.draw(true);

    //绘制文字：长按识别
    ctx.setFontSize(20);
    ctx.setFillStyle('#1E1E1E');
    ctx.fillText('长按识别小程序', 309, 675);

    ctx.draw(true, function() {
      setTimeout(function() {
        console.log("我进来了~~~~~");
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 750,
          height: 1217,
          destWidth: 750,
          destHeight: 1217,
          canvasId: 'myCanvas',
          fileType: 'jpg',
          success: function(res) {
            wx.hideLoading();
            that.setData({
              canvasToImgPath: res.tempFilePath
            });
            // that.saveImageToPhotosAlbum(res.tempFilePath);
            console.log('截图陈宫：', that.data.canvasToImgPath);
            // wx.previewImage({
            //   //将图片预览出来
            //   urls: [that.data.canvasToImgPath]
            // });
          }
        })
      }, 1000)
    });



  },
 

  //点击观看直播
  clickBtn: function () {
    let roomId = this.data.details.roomid;
    // let customPearams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 }));
    wx.navigateTo({
      url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`
    })
  },

 // 保存图片到手机
  onSaveToPhone() {
    var self = this;
    // 获取用户的当前设置，返回值中有小程序已经向用户请求过的权限
    this.getSetting().then((res) => {
      // 判断用户是否授权了保存到相册的权限，如果没有发起授权
      if (!res.authSetting['scope.writePhotosAlbum']) {
        this.authorize().then(() => {
          // 同意授权后保存下载文件
          this.saveImageToPhotosAlbum(self.data.canvasToImgPath)
        })
      } else {
        // 如果已经授权，保存下载文件
        this.saveImageToPhotosAlbum(self.data.canvasToImgPath)
      }
    })
  },

  //打开设置，引导用户授权
  onOpenSetting() {
    wx.openSetting({
      success:(res) => {
        // console.log(res.authSetting)
      }
    })
  },

  // 获取用户已经授予了哪些权限
  getSetting() {
    return new Promise((resolve, reject) => {
      wx.getSetting({
        success: res => {
          resolve(res)
        }
      })
    })
  },

  // 发起首次授权请求
  authorize() {
    // isFirst 用来记录是否为首次发起授权，
    // 如果首次授权拒绝后，isFirst赋值为1
    let isFirst = wx.getStorageSync('isFirst') || 0;
    return new Promise((resolve, reject) => {
      wx.authorize({
        scope: 'scope.writePhotosAlbum',
        // 同意授权
        success: () => {
          resolve();
        },
        // 拒绝授权,这里是用户拒绝授权后的回调
        fail: res => { 
          if(isFirst === 0) {
            wx.setStorageSync('isFirst', 1);
            wx.showToast({
              title: '保存失败',
              icon: 'none',
              duration: 1000
            })
          } else {
            this.showModal();
          }
          console.log('拒绝授权');
          reject();
        }
      })
    })
  },

  //保存下载文件
  savedownloadFile(img) {
    this.downLoadFile(img).then((res) => {
      return this.saveImageToPhotosAlbum(res.tempFilePath)
    }).then(() => {
      // resolve()
    })
  },

  //单文件下载(下载文件资源到本地)，客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径。
  downLoadFile(img) {
    var self = this;
    return new Promise((resolve, reject) => {
      wx.showLoading({
        title: '保存中...', 
        mask: true,
      });
      wx.downloadFile({
        url: img,
        success: (res) => {
          resolve(res);
        }
      })
    })
  },

  // 保存图片到系统相册
  saveImageToPhotosAlbum(saveUrl) {
    var self = this;
    return new Promise((resolve, reject) => {
      wx.saveImageToPhotosAlbum({
        filePath: saveUrl,
        success: (res) => {
          wx.showToast({
            title: '保存成功',
            duration: 1000,
          });
          self.setData({
            showPlaybill: 'true'
          });
          resolve();
        },
        fail: () => {
          wx.showToast({
            title: '保存失败',
            duration: 1000,
          });
        }
      })
    })
  },


  // 弹出模态框提示用户是否要去设置页授权
  showModal() {
    wx.showModal({
      title: '检测到您没有打开保存到相册的权限，是否前往设置打开？',
      success: (res) => {
        if (res.confirm) {
          console.log('用户点击确定')
          this.onOpenSetting() // 打开设置页面          
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    this.getSystemInfo();

    getApp().request.promiseGet("/api/weshop/wx/livelist/get",{
      data:{ id: options.id }
    }).then(res=>{
        if(res.data.code==0){
          var obj = res.data.data;
          var goods = JSON.parse(obj.goods);
          obj.goods = goods;
          that.setData({
            details: obj
          })

          
          // 请求主图
          that.getImageInfo(that.data.details['cover_img']).then(res => {
            that.setData({
              coverImg: res.path
            });
            console.log('主图加载成功~')
          });

          // 请求头像
          that.getImageInfo(app.globalData.userInfo['head_pic']).then(res => {
            that.setData({
              avatarUrl: res.path
            });
            console.log('头像加载成功~')
          });

          // 请求二维码
          var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
      os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo";
          that.getImageInfo(path3).then(res => {
            that.setData({
              ewm: res.path
            });
            console.log('二维码加载成功~')
          });

        }
    })
    
    switch(options.live) {
      case 'toBegin': {
        this.setData({
          btnText: '订阅'
        })
        break;
      }
      case 'ing': {
        this.setData({
          btnText: '进入直播间'
        })
        break;
      }
      default: {
        this.setData({
          btnText: '回放直播'
        })
        break;
      }
    }

    this.setData({
      nickName: app.globalData.userInfo.nickname
    })

    // var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
    //   os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo";
    // wx.getImageInfo({
    //   src: path3,
    //   success: function(res) {
        // ctx.drawImage(res.path, 152*scale, 262*scale, 66*scale, 66*scale);
        // ctx.draw(true);
      //   that.setData({
      //     ewm: res.path
      //   })
      // }
    // })
  },

  // 获取图片信息
  getImageInfo(src) {
    return new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: src,
        success: (res) => {
          resolve(res);
        }
      })
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    this.setData({
      showActionSheet: 'false'
    })
    var self = this;
    return {
      title: this.data.details.name,
      success: function(res) {
        console.log('res---->', res);
      },
      complete: function(res) {
        console.log('comple', res)
      }
    }
  }
})