fohow_xcx/packageUser/pages/user/invite/material/material.js

var _request = require('../../../../../utils/request.js')
var util = require('../../../../../utils/accounting.min.js')
var ctx
Page({
  posterImage: {},
  posterLoad: 0,
  cType: '',
  cIndex: -1,
  page: 1,
  per_page: 4,
  more: true,
  data: {
    list: [],
    userInfo: {},
    textList: [],
    posterImage: null,
    posterPopup: false,
    textLoading: false,
    imgsLoading: false,
    posterLoading: false,
    popup: false,
    loadingPopup: false
  },
  onLoad: function (options) {
    this.getList()
    this.getInfo()
    this.readyImage()
  },
  dpi: function (val) {
    return val
  },
  getList: function () {
    var that = this
    var url = 'v1/share/material/list'
    var params = {
      page: this.page,
      per_page: this.per_page
    }
    var success = function (res) {
      var result = that.data.list.concat(res.data.list || [])
      that.setData({
        list: result
      })
      that.more = res.data.list_count > that.data.list.length
    }
    _request.$get(url, params, success)
  },
  onReachBottom: function () {
    if (this.more) {
      this.page++
      this.getList()
    }
  },
  getInfo: function () {
    var that = this
    wx.getUserInfo({
      success: function (res) {
        var userInfo = res.userInfo
        that.setData({
          userInfo: userInfo
        })
      }
    })
  },
  changeText: function (val) {
    let num = val.currentTarget.dataset.val
    let i = "textList[" + num + "]"
    if (this.data.textList[num]) {
      this.setData({
        [i]: false
      })
    } else {
      this.setData({
        [i]: true
      })
    }
  },
  getImage: function (val) {
    let index = val.currentTarget.dataset.index
    let i = val.currentTarget.dataset.i
    let list = this.data.list[i].image_list
    wx.previewImage({
      current: list[index],
      urls: list
    })
  },
  readyImage: function () {
    let that = this
    wx.getImageInfo({
      src: 'https://cfohow.hiwavo.com/xcx/poster6.jpg',
      success: function (res) {
        that.posterImage.product = res
      }
    })
    wx.getImageInfo({
      src: 'https://cfohow.hiwavo.com/xcx/poster5.jpg',
      success: function (res) {
        that.posterImage.project = res
      }
    })
  },
  copeText: function (index) {
    var that = this
    wx.setClipboardData({
      data: that.data.list[index].material_text,
      success (res) {
        that.setData({
          textLoading: true
        })
      }
    })
  },
  sharePoster: function (val) {
    let index = val.currentTarget.dataset.index
    let type = val.currentTarget.dataset.type
    this.chooseType(index, type)
  },
  allShare: function (val) {
    this.clearLoading()
    let index = val.currentTarget.dataset.index
    let type = val.currentTarget.dataset.type
    this.chooseType(index, type)
    this.copeText(index)
  },
  chooseType: function (index, type) {
    this.cType = type
    if (index === this.cIndex && this.posterImage) {
      if (type === 'one') {
        this.setData({
          posterPopup: true
        })
      } else if (type === 'all') {
        this.createImage()
        this.setData({
          loadingPopup: true
        })
      }
    } else {
      this.posterImage.qcode = null
      this.posterImage.img = null
      this.cIndex = index
      if (this.data.list[index].m_type === 'product') {
        this.getProductQcode(index, type)
      } else if (this.data.list[index].m_type === 'project') {
        this.getProjectQcode(index, type)
      }
      if (type === 'one') {

      } else if (type === 'all') {
        this.setData({
          loadingPopup: true
        })
      }
    }
  },
  getProductQcode: function (index, type) {
    var that = this
    var url = 'v1/poster/' + that.data.list[index].product_info.id
    var params = {
      type: 'project'
    }
    var success =  function (res) {
      wx.getImageInfo({
        src: res.data.qrcode_url,
        success: function (res) {
          that.posterImage.qcode = res
          if (that.posterImage.qcode && that.posterImage.head && that.posterImage.img) {
            that.createProductCtx(index, type)
          }
        }
      })
      if (!that.posterImage.head) {
        wx.getImageInfo({
          src: res.data.wx_head,
          success: function (res) {
            that.posterImage.head = res
            if (that.posterImage.qcode && that.posterImage.head && that.posterImage.img) {
              that.createProductCtx(index, type)
            }
          }
        })
      }
      wx.getImageInfo({
        src: that.data.list[index].product_info.pics[0].img,
        success: function (res) {
          that.posterImage.img = res
          if (that.posterImage.qcode && that.posterImage.head && that.posterImage.img) {
            that.createProductCtx(index,type)
          }
        }
      })
    }
    _request.$get(url, params, success)
  },
  getProjectQcode: function (index, type) {
    var that = this
    var url = 'v1/poster/' + that.data.list[index].project_info.id
    var params = {
      type: 'poster'
    }
    var success =  function (res) {
      wx.getImageInfo({
        src: res.data.qrcode_url,
        success: function (res) {
          that.posterImage.qcode = res
          if (that.posterImage.qcode && that.posterImage.head && that.posterImage.img) {
            that.createProjectCtx(index, type)
          }
        }
      })
      if (!that.posterImage.head) {
        wx.getImageInfo({
          src: res.data.wx_head,
          success: function (res) {
            that.posterImage.head = res
            if (that.posterImage.qcode && that.posterImage.head && that.posterImage.img) {
              that.createProjectCtx(index, type)
            }
          }
        })
      }
      wx.getImageInfo({
        src: that.data.list[index].project_info.introduce_pics[0].img,
        success: function (res) {
          that.posterImage.img = res
          if (that.posterImage.qcode && that.posterImage.head && that.posterImage.img) {
            that.createProjectCtx(index, type)
          }
        }
      })
    }
    _request.$get(url, params, success)
  },
  createProductCtx (index, type) {
    let that = this
    ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(this.posterImage.product.path, 0, 0, this.dpi(this.posterImage.product.width), this.dpi(this.posterImage.product.height))
    ctx.drawImage(this.posterImage.qcode.path, this.dpi(501), this.dpi(1140), this.dpi(180), this.dpi(180))
    ctx.save()
      ctx.translate(this.dpi(44),this.dpi(46))
      ctx.save()
      ctx.arc(this.dpi(60), this.dpi(59), this.dpi(40), 0, Math.PI * 2, false)
      ctx.lineWidth = 1
      ctx.strokeStyle = '#d4d4d4'
      ctx.stroke()
      ctx.clip()
      ctx.drawImage(this.posterImage.head.path, this.dpi(21), this.dpi(20), this.dpi(78), this.dpi(78))
      ctx.restore()
      ctx.save()
      ctx.textBaseline = 'middle'
      ctx.font = this.dpi(24) + 'px Arial'
      ctx.fillStyle = '#eab86a'
      ctx.fillText('源处全球源产地的优质产品！', this.dpi(136), this.dpi(59))
      ctx.restore()
      ctx.drawImage(this.posterImage.img.path, this.dpi(20), this.dpi(140), this.dpi(622), this.dpi(622))
      ctx.beginPath()
      ctx.moveTo(this.dpi(0), this.dpi(119))
      ctx.lineTo(this.dpi(662), this.dpi(119))
      ctx.lineWidth = 1
      ctx.strokeStyle = '#eab86a'
      ctx.stroke()
      ctx.closePath()
      ctx.save()
      ctx.translate(this.dpi(20),this.dpi(784))
      ctx.textBaseline = 'middle'
      ctx.font = this.dpi(28) + 'px Arial'
      ctx.fillStyle = '#bbbbbb'
      ctx.fillText('购买单价', this.dpi(46), this.dpi(50))
      ctx.fillStyle = '#eab86a'
      ctx.setTextAlign('right')
      ctx.font = 'bold ' + this.dpi(54) + 'px Arial'
      ctx.fillText(util.formatMoney(this.data.list[index].product_info.price / 100, '￥', 2), this.dpi(584), this.dpi(50))
      ctx.setTextAlign('left')
      ctx.font = this.dpi(32) + 'px Arial'
      ctx.fillStyle = '#2b2b2b'
      this.textAutoLine(this.data.list[index].product_info.name, this.dpi(30), this.dpi(150), this.dpi(40))
      ctx.restore()
    ctx.restore()
    ctx.draw(true, function callback () {
      that.createImage(type)
    })
  },
  createProjectCtx (index, type) {
    var that = this
    let projects = this.data.list[index].project_info
    let percent = (projects.current_funding / projects.min_funding * 100).toFixed(2)
    ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(this.posterImage.project.path, 0, 0, this.dpi(this.posterImage.project.width), this.dpi(this.posterImage.project.height))
    ctx.drawImage(this.posterImage.qcode.path, this.dpi(501), this.dpi(1140), this.dpi(180), this.dpi(180))
    ctx.save()
      ctx.translate(this.dpi(44),this.dpi(129))
      ctx.save()
      ctx.arc(this.dpi(60), this.dpi(59), this.dpi(40), 0, Math.PI * 2, false)
      ctx.lineWidth = 1
      ctx.strokeStyle = '#d4d4d4'
      ctx.stroke()
      ctx.clip()
      ctx.drawImage(this.posterImage.head.path, this.dpi(21), this.dpi(20), this.dpi(78), this.dpi(78))
      ctx.restore()
      ctx.save()
      ctx.textBaseline = 'middle'
      ctx.font = this.dpi(24) + 'px Arial'
      ctx.fillStyle = '#eab86a'
      ctx.fillText('源处全球源产地的优质产品！', this.dpi(136), this.dpi(59))
      ctx.restore()
      ctx.drawImage(this.posterImage.img.path, this.dpi(0), this.dpi(120), this.dpi(662), this.dpi(353))
      ctx.save()
      ctx.translate(this.dpi(434), this.dpi(485))
      ctx.textAlign="center"
      ctx.fillStyle = '#eab86a'
      ctx.font = 'bold ' + this.dpi(24) + 'px Arial'
      ctx.fillText(percent + '%', this.dpi(90), this.dpi(100))
      ctx.fillStyle = '#ffab34'
      ctx.font = this.dpi(24) + 'px Arial'
      ctx.fillText('完成度', this.dpi(90), this.dpi(195))
      this.drawArc(percent)
      ctx.restore()
      ctx.beginPath()
      ctx.moveTo(this.dpi(0), this.dpi(119))
      ctx.lineTo(this.dpi(662), this.dpi(119))
      ctx.lineWidth = 1
      ctx.strokeStyle = '#eab86a'
      ctx.stroke()
      ctx.closePath()
      ctx.textBaseline = 'middle'
      ctx.font = this.dpi(28) + 'px Arial'
      ctx.fillStyle = '#bbbbbb'
      ctx.fillText('团购单价', this.dpi(64), this.dpi(540))
      ctx.fillStyle = '#eab86a'
      ctx.font = 'bold ' + this.dpi(48) + 'px Arial'
      ctx.fillText('￥', this.dpi(63), this.dpi(624))
      ctx.font = 'bold ' + this.dpi(72) + 'px Arial'
      ctx.fillText(util.formatMoney(projects.min_project_way_price / 100, '', 2), this.dpi(110), this.dpi(624))
      ctx.translate(this.dpi(20),this.dpi(705))
      this.roundRect(this.dpi(0), this.dpi(0), this.dpi(622), this.dpi(140), this.dpi(6), '#f3f3f3')
      ctx.font = this.dpi(32) + 'px Arial'
      ctx.fillStyle = '#2b2b2b'
      this.textAutoLine(projects.title, this.dpi(40), this.dpi(50), this.dpi(40))
    ctx.restore()
    ctx.draw(true, function callback () {
      that.createImage(type)
    }) 
  },
  roundRect (x, y, w, h, r, color) {
    ctx.beginPath()
    ctx.moveTo(x+r, y)
    ctx.arcTo(x+w, y, x+w, y+h, r)
    ctx.arcTo(x+w, y+h, x, y+h, r)
    ctx.arcTo(x, y+h, x, y, r)
    ctx.arcTo(x, y, x+w, y, r)
    ctx.closePath()
    ctx.fillStyle = color
    ctx.fill()
  },
  textAutoLine (str, initX, initY, lineHeight) {
    let lineWidth = 0
    let textWidth = this.dpi(580)
    let lastSubStrIndex= 0
    for (let i = 0; i < str.length; i++) {
      lineWidth += ctx.measureText(str[i]).width
      if (lineWidth > textWidth - initX) {
        ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
        initY += lineHeight
        lineWidth = 0
        lastSubStrIndex = i
      }
      if (i === str.length - 1) {
        ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY)
      }
    }
  },
  drawArc (percent) {
    var rad = Math.PI * 2 / 100
    var arc = this.dpi(90)
    var lineHeight = this.dpi(30)
    var radius = arc - lineHeight
    ctx.save()
    ctx.beginPath()
    ctx.lineWidth = lineHeight
    ctx.lineCap = 'round'
    ctx.strokeStyle = '#eeeeee'
    ctx.arc(arc, arc, radius, 0, Math.PI * 2, false)
    ctx.stroke()
    ctx.closePath()
    ctx.restore()
    ctx.save()
    ctx.strokeStyle = '#ff7655'
    ctx.lineWidth = lineHeight
    ctx.beginPath()
    ctx.arc(arc, arc, radius , -Math.PI/2, -Math.PI/2 + percent * rad, false)
    ctx.stroke()
    ctx.closePath()
    ctx.restore()
  },
  createImage () {
    var that = this
    wx.canvasToTempFilePath({
      destWidth: 750,
      destHeight: 1334,
      canvasId: 'myCanvas',
      fileType: 'jpg',
      success: function (res) {
        that.setData({
          posterImage: res.tempFilePath
        })
        if (that.cType === 'one') {
          that.setData({
            posterPopup: true
          })
          wx.hideLoading()
        } else if (that.cType === 'all') {
          that.downloadAll(res.tempFilePath)
        }
      }
    })
  },
  saveImage () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.posterImage,
      success (res) {
        wx.showToast({
          title: '已保存相册',
          icon: 'success',
          duration: 2000
        })
      },
      fail (res) {
        wx.getSetting({
          success (res) {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              that.setData({
                popup: true
              })
            }
          }
        })
      }
    })
  },
  downloadAll (res) {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: res,
      success (res) {
        that.setData({
          posterLoading: true
        })
        that.downloadImgs()
      },
      fail (res) {
        wx.getSetting({
          success (res) {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              that.setData({
                popup: true
              })
            }
          }
        })
      }
    })
  },
  downloadImgs () {
    var that = this
    let num = 0
    let imgList = this.data.list[this.cIndex].image_list
    console.log('imgList',imgList);
    let save = []
    for (let i in imgList) {
      wx.getImageInfo({
        src: imgList[i],
        success: function (res) {
          num++
          save[i] = res.path
          if (num === imgList.length) {
            that.saveImages(save)
          }
        }
      })
    } 
  },
  saveImages (save) {
    var that = this
    let num = 0
    for (let i in save) {
      wx.saveImageToPhotosAlbum({
        filePath: save[i],
        success: function (res) {
          num++
          if (num === save.length) {
            that.setData({
              imgsLoading: true,
              loadingPopup: false
            })
            wx.showToast({
              title: '一键保存成功',
              icon: 'success',
              duration: 2000
            })
            that.Statistics()
          }
        }
      })
    }
  },
  Statistics () {
    console.log(this.cIndex)
    let item = this.data.list[this.cIndex]
    let cc = 'share_material_' + item.m_type
    let ri = item.id
    let rp = item.type_id
    var that = this
    var url = 'v1/click/info'
    console.log(cc)
    console.log(ri)
    console.log(rp)
    var params = {
      cc: cc,
      ri: ri,
      rp: rp
    }
    var success = function (res) {
    }
    _request.$post(url, params, success)
  },
  posterClose () {
    this.setData({
      posterPopup: false
    })
  },
  setting () {
    this.setData({
      popup: false
    })
    this.clearLoading()
    this.createImage()
  },
  clearLoading () {
    this.setData({
      textLoading: false,
      imgsLoading: false,
      posterLoading: false
    })
  },
  stopPageScroll () {
    return
  },
  toProduct (val) {
    let id = val.currentTarget.dataset.id
    wx.navigateTo({
      url: '/pages/projects/project-detail/project-detail?id=' + id
    })
  },
  toProject (val) {
    let id = val.currentTarget.dataset.id
    wx.navigateTo({
      url: '/pages/helpfarm/helpfarm-detail/helpfarm-detail?id=' + id
    })
  },
  onShareAppMessage: function (val) {
    return _request.share({
      sc: 'xcx_user_material'
    })
  }
})