lcb/components/storePoster/index.js

import _ from '../../commons/js/commons'
import Canvas from '../../commons/js/utils/canvas'
let isGetImgInfo = false
const app = getApp()
Component({
  //组件的属性列表
  properties: {
    isShow: {
      type: Boolean,
      value: false
    },
    qrcode: {
      type: String,
      value: ''
    },
    customImg: {
      type: String,
      value: ''
    },
    model: {
      type:Object,
      value:{}
    },
    storName: {
      type: String,
      value: ''
    },
    storaAddress: {
      type: String,
      value: ''
    },
  },

  //组件的初始数据
  data: {
    imgs: [],
    tempPosterPath: '',
    showOptBtn:false,//操作按钮显示
  },

  attached: function () {
    isGetImgInfo = false
  },

  //数据监听
  observers: {
    'isShow': function (e) {
      if (e) {
        this.setData({
          showOptBtn:false,
        })
        this.createPoster()
      }
    },
    'model': function (e) {
      if (e) {
        console.log(this.data.model)
        this.getImageInfo(this.data.model.posterFt, 0)
        if(this.data.model.type==1){
          this.getImageInfo(this.data.model.posterBg, 3)
        }
      }
    },
    'customImg': function (e) {
      if (e) {
        this.getImageInfo(this.data.customImg, 1)
      }
    },
    'qrcode': function (e) {
      if (e) {
        this.getImageInfo(this.data.qrcode, 2)
      }
    },
  },

  //组件的方法列表
  methods: {

    // 转化网络图片，获取路径
    getImageInfo(src, index) {
      let that = this
      isGetImgInfo = false
      setTimeout(function () {
        wx.getImageInfo({
          src: src,
          success: (res) => {
            let arr = that.data.imgs
            arr[index] = res
            that.setData({
              imgs: arr
            })
            isGetImgInfo = true
          },
          fail: (err) => {
            console.log('error img is: ' + src)
          }
        })
      }, 200)
    },

    //自定义海报
    defaultPoster(CTX){

      if(this.data.customImg){
        let that = this
        let width = 600
        let picheight = (parseFloat(this.data.imgs[1].height)/parseFloat(this.data.imgs[1].width))*(width-this.data.model.marginLR*2)
        this.setData({
          canvasInfo:{
            width: width+'px',
            height: this.data.model.tpHeight+this.data.model.ftHeight+picheight+'px'
          }
        })

        CTX.setFillStyle(this.data.model.bgColor)
        CTX.fillRect(0, 0,width, this.data.model.tpHeight+this.data.model.ftHeight+picheight)

        //底图
        if(that.data.model.type==1){
          CTX.drawImage(that.data.imgs[3].path, 0, 0, that.data.imgs[3].width, that.data.imgs[3].height, 0, 0, width, this.data.model.tpHeight)
        }
        
        //底部图
        if (that.data.imgs[0]) {
          CTX.drawImage(that.data.imgs[0].path, 0, 0, that.data.imgs[0].width, that.data.imgs[0].height, 0, this.data.model.tpHeight+picheight, width, this.data.model.ftHeight)
        }
        
        //上传图
        if (that.data.imgs[1]) {
          CTX.drawImage(that.data.imgs[1].path, 0, 0, that.data.imgs[1].width, that.data.imgs[1].height, this.data.model.marginLR, this.data.model.tpHeight, width-this.data.model.marginLR*2, picheight)
        }
      
        //二维码
        if (that.data.imgs[2]) {
          Canvas.circleImage(CTX,that.data.imgs[2].path,417, this.data.model.tpHeight+picheight+170,70)
        }

        //店铺名
        if (that.data.storName) { 
          Canvas.drawTextOverflow(CTX, that.data.storName, 230, 1, 24, this.data.model.color, 30, 88, this.data.model.tpHeight+picheight+72)
        }

        //地址
        if (that.data.storaAddress) {
          Canvas.drawTextOverflow(CTX, that.data.storaAddress, 200, 1, 18, this.data.model.color, 24, 113, this.data.model.tpHeight+picheight+104)
        }

        setTimeout(function(){
          CTX.save()
          CTX.draw(true, function () {
            wx.hideLoading()
            that.saveCanvas()
          })
        },200)
        
      }
      
    },

    //生成海报
    createPoster() {
      let that = this
      wx.showLoading({
        title: '正在生成',
      })
      
      if(isGetImgInfo){
        this.setData({
          tempPosterPath: ''
        })
        let ctx = wx.createCanvasContext('postercanvas', that)
        if(that.data.posterBg){
          that.customizePoster(ctx)
        }else{
          that.defaultPoster(ctx)
        }
      }
    },

    //临时存储canvas
    saveCanvas() {
      let that = this
      wx.canvasToTempFilePath({
        canvasId: 'postercanvas',
        quality: 1,
        success: (res) => {
          // this.tempFilePath = res.tempFilePath
          that.setData({
            'tempPosterPath': res.tempFilePath
          })

          setTimeout(function () {
            that.setData({
              showOptBtn:true,
            })
          },200)

        },
        fail: (res) => {
          app.printErrorClient('poseterfail',['错误信息：临时存储canvas失败',JSON.stringify(res)])
        }
      }, this)
    },
    
    //保存到相册
    saveToAblum() {
      let that = this
      wx.saveImageToPhotosAlbum({
        filePath: this.data.tempPosterPath,
        success: (res) => {
          _.utils.$toast('保存成功')
        },
        fail: (err) => {
          app.printErrorClient('poseterfail',['错误信息：图片保存失败',JSON.stringify(err)])
          if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
            _.utils.$toast('您已取消保存')
          } else if (err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
            _.utils.$modal('提示', '保存图片失败，您可以点击确定设置获取相册权限后再尝试保存！', '去授权').then(res => {
              if (res) {
                wx.openSetting({}) // 打开小程序设置页面，可以设置权限
              }
            })
          }
        }
      })
    },

    //隐藏海报弹框
    hidePoster() {
      this.setData({
        isShow: false
      })
      wx.hideLoading()
    },

    //预览图片
    preview() {
      wx.previewImage({
        current: this.data.tempPosterPath, // 当前显示图片的http链接
        urls: [this.data.tempPosterPath] // 需要预览的图片http链接列表
      })
    },

    //推送链接
    pushLink(e) {
      if(e.currentTarget.dataset.url){
        _.$router.openUrlScheme(e.currentTarget.dataset.url)
      }
    },

    //复制内容
  copyWord(e){
    if(e.currentTarget.dataset.tx){
      wx.setClipboardData({
        data: e.currentTarget.dataset.tx,
        success (res) {
          _.utils.$toast('复制成功')
        }
      })
    }else{
      _.utils.$toast('目前无文案')
    }
  },

  }
})