fohow_xcx/pages/projects/project-detail/project-detail.js

var width = 0
var height = 0
var ctx
var _request = require('../../../utils/request.js')
var _handle = require('../../../utils/handle.js')
var WxParse = require('../../../utils/wxParse/wxParse.js')
var util = require('../../../utils/accounting.min.js')
var fomldsJSON = ''
Page({
  posterImage: {},
  posterLoading: 0,
  canvasLoading: false,
  qcodeError: false,
  data: {
    productId: 0,
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    project: {},
    showDialog: false,
    showCartDialog: false,
    animationData: {},
    count: 1,
    image: {},
    bindTel: false,
    balance: 0,
    posterPopup: false,
    posterImage: null,
    imgindex: 1,
    popup: false,
    hour: '00',
    min: '00',
    second: '00',
    timer: '',
    leftTime: '0',
    // msecond: '00',
    clock: '',
    todaysend: Date.parse(new Date()) / 1000,
    showpay: true
  },
  onLoad: function (options) {
    this.data.productId = options.id;
    this.getBalanceInfo()
  },
  onShow: function () {
    this.getIphoneX()
    this.getProjectDetail()
    this.check()
  },
  onHide: function () {
    this.getneedshare()
  },
  dpi: function (val) {
    return val
  },
  onSlideChangeEnd: function(e) {
    var that = this;
    that.setData({
      imgindex: e.detail.current + 1
    })
  },
  check () {
    var that = this
    var url = 'v1/user/check'
    var params = {
    }
    var success = function (res) {
      if (res.data.user_id > 0) {
        that.setData({
          bindTel: true
        })
      }
      if (res.data.wx_user_id > 0) {
        that.getneedshare()
      }
    }
    _request.$get(url, params, success)
  },
  onShareAppMessage: function (val) {
    this.shareInfo()
    this.setData({
      showpay: true
    })
    return _request.share({
      title: this.data.project.share_content || this.data.project.name,
      path: '/pages/start/start?url=pages/projects/project-detail/project-detail&id=' + this.data.productId,
      imageUrl: this.data.project.share_img,
      sc: 'xcx_product',
      ri: this.data.productId,
      rp: this.data.productId,
    })
  },
  // imageLoad: function (e) {
  //  var _width = e.detail.width,
  //      _height = e.detail.height,
  //      ratio = _width / _height;
  //  var viewWidth = 750,
  //      viewHeight = 750 / ratio;
  //   var image = this.data.image;
  //   image[e.target.dataset.index]={
  //      width:viewWidth,
  //      height:viewHeight
  //   }
  //   this.setData({
  //     images:image
  //   })
  // },
  shareInfo () {
    var that = this
    var url = "v1/share/info"
    var params = {
      sc: 'xcx_product',
      ri: that.data.productId,
      rp: that.data.productId,
      to: 'group'
    }
    var success = function (val) {
      console.log(val)
    }
    _request.$post(url, params, success)
  },
  detailImg: function (event) {
    var src = event.currentTarget.dataset.src;
    var imgList = event.currentTarget.dataset.list;
    var imgLists = []
    for (var i = 0; i < imgList.length; i++) {
      imgLists.push(imgList[i].img)
    }
    wx.previewImage({
      current: src,
      urls: imgLists
    })
  },
  getProjectDetail () {
    var that = this
    var url = "v1/product/" + that.data.productId;
    var params = {}
    var success = function (val) {
      var p = val.data.detail
      that.setData({
        project: val.data,
        clock: val.data.seckill_end
      });
      WxParse.wxParse('parse', 'html', p, that, 10)
      that.projectImageLoading()
      if (val.data.seckill_state == 'seckill') {
        that.starttime()
      }
    }
    _request.$get(url, params, success)
  },
  add: function () {
    if (this.data.count < this.data.project.left_count) {
      var count = this.data.count + 1
      this.setData({
        count: count
      })
    }
  },
  mius: function () {
    if (this.data.count > 1) {
      var count = this.data.count - 1
      this.setData({
        count: count
      })
    }
  },
  changeCount: function (val) {
    var count = val.detail.value
    if (count <= 0) {
      this.setData({
        count: 1
      })
    } else if (count > this.data.project.left_count) {
      this.setData({
        count: this.data.project.left_count
      })
    } else {
      this.setData({
        count: count
      })
    }
  },
  // 显示弹框
  showModal: function (type) {
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "ease-out"
    })
    this.animation = animation
    animation.translateY(500).step()
    if(type == 1){
    	this.setData({
	      animationData: animation.export(),
	      showDialog: true
	    })
    }else{
    	this.setData({
	      animationData: animation.export(),
	      showCartDialog: true
	    })
    }
    
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
  // 隐藏弹框
  hideModal: function (type = 1) {
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "ease-out"
    })
    this.animation = animation
    animation.translateY(500).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      if(type == 1){
      	this.setData({
	        animationData: animation.export(),
	        showDialog: false
	      })
      }else{
      	this.setData({
	        animationData: animation.export(),
	        showCartDialog: false
	      })
      }
      
    }.bind(this), 200)
  },
  getneedshare () {
    var that = this
    var url = "v1/product/" + that.data.productId + "/share"
    var params = {
    }
    var success = function (val) {
      if (val.data.need_share == 1) {
        that.setData({
          showpay: false
        })
      }
    }
    _request.$get(url, params, success)
  },
  toPay: function (e) {
    _handle.setFormId(e)
    if (this.data.bindTel) {
      var that = this
      that.data.showDialog = !that.data.showDialog
      if (that.data.showDialog) {
        that.showModal(1)
      } else {
        that.hideModal(1)
      }
    } else {
      wx.navigateTo({
        url: '/packageUser/pages/user/bind/bind'
      })
    }
  },
  toCart: function (e) {
    _handle.setFormId(e)
    if (this.data.bindTel) {
      var that = this
      that.data.showCartDialog = !that.data.showCartDialog
      if (that.data.showCartDialog) {
        that.showModal(2)
      } else {
        that.hideModal(2)
      }
    } else {
      wx.navigateTo({
        url: '/packageUser/pages/user/bind/bind'
      })
    }
  },
  pay: function (e) {
    _handle.setFormId(e)
    var that = this
    var url = "v1/product/" + that.data.productId + "/order/" + that.data.count
    var params = {}
    var success = function (res) {
      if (res.data.order_id) {
        wx.navigateTo({
          url: '../../pay/pay?orderId=' + res.data.order_id
        })
        that.hideModal()
        that.setData({
          count: 1
        })
      }
    }
    if (that.data.count <= that.data.project.left_count) {
      _request.$post(url, params, success)
    } else {
      wx.showToast({
        title: '库存不足~',
        icon: 'none',
        duration: 2000
      })
    }
  },
  addCart:function(){
  	var that = this
    var url = "v1/cart/" + that.data.productId + "/" + that.data.count
    var params = {}
    var success = function (res) {
    	if(res.data.result){
    		that.hideModal(2);
    		wx.showToast({
	        title: '添加成功，请到购物车查看~',
	        icon: 'none',
	        duration: 2000
	      })
    	}
//  	if (res.data.order_id) {
//      wx.navigateTo({
//        url: '../../pay/pay?orderId=' + res.data.order_id
//      })
//      that.hideModal()
//      that.setData({
//        count: 1
//      })
//    }
    }
    if (that.data.count <= that.data.project.left_count) {
      _request.$post(url, params, success)
    } else {
      wx.showToast({
        title: '库存不足~',
        icon: 'none',
        duration: 2000
      })
    }
  },
  getIphoneX () {
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        if (res.model.toLowerCase().indexOf('iphone x') > -1) {
          that.setData({
            value: 34
          })
        }
      }
    })
  },
  getBalanceInfo () {
    var that = this
    var url = 'v1/user/balance/info'
    var params = {
    }
    var success = function (res) {
      var result = res.data.total
      that.setData({
        balance: result
      })
    }
    _request.$get(url, params, success)
  },
  projectImageLoading () {
    var that = this
    wx.getImageInfo({
      src: 'https://cfohow.hiwavo.com/xcx/poster6.jpg',
      success: function (res) {
        that.posterImage.bg = res
        that.posterLoading++
        if (that.posterLoading === 4) {
          that.createCtx()
        }
      }
    })
    if (this.data.project.pics.length > 0) {
      wx.getImageInfo({
        src: this.data.project.pics[0].img,
        success: function (res) {
          that.posterImage.project = res
          that.posterLoading++
          if (that.posterLoading === 4) {
            that.createCtx()
          }
        }
      })
    }
    var url = 'v1/poster/' + this.data.productId
    var params = {
      type: 'project'
    }
    var success = function (res) {
      wx.getImageInfo({
        src: res.data.qrcode_url,
        success: function (res) {
          that.posterImage.qcode = res
          that.posterLoading++
          if (that.posterLoading === 4) {
            that.createCtx()
          }
        },
        fail: function (res) {
          that.qcodeError = true
          if (that.data.posterPopup) {
            that.setData({
              posterPopup: false
            })
            wx.showToast({
              title: '海报生成失败，请稍后重试',
              icon: 'none',
              duration: 2000
            })
            wx.hideLoading()
          }
        }
      })
      wx.getImageInfo({
        src: res.data.wx_head,
        success: function (res) {
          that.posterImage.head = res
          that.posterLoading++
          if (that.posterLoading === 4) {
            that.createCtx()
          }
        }
      })
    }
    _request.$get(url, params, success)
  },
  createPoster () {
    if (!this.qcodeError) {
      if (!this.canvasLoading) {
        wx.showLoading({
          mask: true,
          title: ''
        })
      }
      this.setData({
        posterPopup: true
      })
    } else {
      wx.showToast({
        title: '海报生成失败，请稍后重试',
        icon: 'none',
        duration: 2000
      })
    }
  },
  posterClose () {
    this.setData({
      posterPopup: false
    })
  },
  createCtx () {
    var that = this
    ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(this.posterImage.bg.path, 0, 0, this.dpi(this.posterImage.bg.width), this.dpi(this.posterImage.bg.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.project.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.project.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.project.name, this.dpi(30), this.dpi(150), this.dpi(40))
      ctx.restore()
    ctx.restore()
    ctx.draw(true, function callback () {
      that.createImage()
    })
  },
  createImage () {
    var that = this
    wx.canvasToTempFilePath({
      destWidth: 750,
      destHeight: 1334,
      canvasId: 'myCanvas',
      fileType: 'jpg',
      success: function (res) {
        that.setData({
          posterImage: res.tempFilePath
        })
        that.canvasLoading = true
        wx.hideLoading()
      }
    })
  },
  saveImage () {
    var that = this
    wx.showLoading({
      mask: true,
      title: ''
    })
    wx.saveImageToPhotosAlbum({
      filePath: this.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
              })
            }
          }
        })
        wx.hideLoading()
      }
    })
  },
  setting () {
    this.setData({
      popup: false
    })
  },
  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)
      }
    }
  },
  stopPageScroll () {
    return
  },
  starttime () {
    var that = this
    that.setData({
      timer: setInterval(function () {
        // var date = new Date();
        // var now = date.getTime();
        // var endDate =  new Date("2019-01-03 23:14:53");//设置截止时间
        // var end =  that.data.clock * 1000;//设置截止时间
        // var end = endDate.getTime();
        // var leftTime = end - now; //时间差
        var t = Date.parse(new Date())
        t = t / 1000;
        var leftTime = that.data.clock - t
        var d, h, m, s, ms;
        if (leftTime >= 0) {
          // day = parseInt(ctime / 86400)
          h = parseInt(leftTime / 3600)
          m = parseInt(leftTime / 60 ) - parseInt(leftTime / 3600) * 60
          s = parseInt(leftTime) - parseInt(leftTime / 60 ) * 60
          // d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
          // h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
          // m = Math.floor(leftTime / 1000 / 60 % 60);
          // s = Math.floor(leftTime / 1000 % 60);
          // ms = Math.floor(leftTime % 1000);
          // ms = ms < 100 ? "0" + ms : ms
          s = s < 10 ? "0" + s : s
          m = m < 10 ? "0" + m : m
          h = h < 10 ? "0" + h : h
          that.setData({
            hour: h,
            min: m,
            second: s,
            // msecond: ms,
            leftTime: leftTime
          })
        }
        if (leftTime < 0) {
          clearInterval(that.data.timer);
          that.setData({
            leftTime: 0,
            hour: '00',
            min: '00',
            second: '00',
            // msecond: '00'
          })
        }
      },100),
    });
  },
})