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: {},
	projectComment:{},
    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,
    productSize:'',//产品规格
    size_list:0,
    color_list:0,
    cname:'',
    sname:'',
    canpay:true,
    checkbox:'',
    noproduct:false,
    check:{},
	readOnly:0,
	lvList:[
　　　　'/images/star_a_l.png',
　　　　'/images/star_a_r.png',
　　　　'/images/star_a_l.png',
　　　　'/images/star_a_r.png',
		'/images/star_a_l.png',
　　　　'/images/star_a_r.png',
		'/images/star_a_l.png',
　　　　'/images/star_a_r.png',
		'/images/star_a_l.png',
　　　　'/images/star_a_r.png'
　　],//星星个数
　　lvListActive1: '/images/star_a_l.png',//选中的
　　lvListActive2:'/images/star_d_l.png',//未选中的
	lvListActive3: '/images/star_a_r.png',//选中的
　　lvListActive4:'/images/star_d_r.png',//未选中的
  },
  onLoad: function (options) {
    this.data.productId = options.id;
	this.setData({
	  readOnly: options.read ? options.read : 0
	})
    this.getBalanceInfo()
  },
  onShow: function () {
    this.getIphoneX()
    this.getProjectDetail()
	this.getProjectComment()
    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) {
    	that.setData({check:res.data})
      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 (options) {
	 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)

      if (val.data.seckill_state == 'seckill') {
        that.starttime()
      }
      
      if(val.data.have_size){
      	that.getProductSize();
      }
    }
    _request.$get(url, params, success)
  },
  getProjectComment() {
    var that = this
    var url = "v1/product/" + that.data.productId +'/commends';
    var params = {}
    var success = function (val) {
		var comdata = val.data.list;
		// console.log('comdata',comdata)
		var showcom = [];
		let index = 0;
		for(let i in comdata){
			if(index<3){
				console.log('comdata[i].score * 2 / 10 - 1',comdata[i].score * 2 / 10 - 1)
				comdata[i]['star'] = that.evaluateLvS(comdata[i].score * 2 / 10 - 1);
				console.log("comdata[i]",comdata[i])
				showcom.push(comdata[i]);
			}
			index++;
		}
		console.log('showcom',showcom)
      that.setData({
        projectComment: showcom
      });
    }
    _request.$get(url, params, success)
  },
  getProductSize(){
  	var that = this
    var url = "v1/product_size/" + that.data.productId;
    var params = {}
    var success = function (val) {
    	let cbox = [];
    	for(let i in val.data){
    		if(i != 'product' && val.data[i]) cbox.push(i);
    	}
    	console.log('cbox',cbox)
      that.setData({
        productSize: val.data,
        checkbox:cbox
      });
    }
    _request.$get(url, params, success)
  },
  getProductDetail () {
    var that = this;
    console.log(that.data.size_list);
    console.log(that.data.color_list);
	console.log(that.data.productId);
    var url = "v1/product_detail/" + that.data.productId + "/" + that.data.size_list + "/" + that.data.color_list;
    var params = {}
    var success = function (val) {
			console.log('val',val)
			if(val.data.product){
				that.setData({
					canpay:true,
					project:val.data.product,
					productId:val.data.product.id,
					noproduct:false
				})
				that.setData({
					canpay:true,
					project:val.data.product,
					productId:val.data.product.id,
					noproduct:false
				})
			}else{
				that.setData({
					canpay:false,
					noproduct:true
				})
			}
    }
    var fail = function(err){
    	
    }
    _request.$get(url, params, success, fail)
  },
  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
    
    //规格
    let cflag = true;
		for(let i in that.data.checkbox){
			if(that.data[that.data.checkbox[i]] == 0) cflag = false;
		}
		if(!cflag){
  		wx.showToast({
        title: '请先选择商品规格~',
        icon: 'none',
        duration: 2000
      })
  		return false;
		}
    
    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;
  	//规格
    let cflag = true;
		for(let i in that.data.checkbox){
			if(that.data[that.data.checkbox[i]] == 0) cflag = false;
		}
		if(!cflag){
  		wx.showToast({
        title: '请先选择商品规格~',
        icon: 'none',
        duration: 2000
      })
  		return false;
		}
  	console.log('that.data.productId',that.data.productId)
    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 () {
	  console.log('do 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) {
		var wxhead = res.data.wx_head;
		if(!wxhead){
		  wx.getUserProfile({
			desc: '用户头像无法获取，请从新授权', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
			success: function(res3) {
			  var url = 'xcx/save_wx_user/info'
				console.log(JSON.stringify(res3.userInfo));
				var params = {
					userinfo: JSON.stringify(res3.userInfo)
				}
				var success = function (res4) {
					console.log('authorize',res4)
					wxhead = res4.data.head;
					console.log(wxhead);
					that.posterLoading = 0;
					that.projectImageLoading();
				}
				_request.$post(url, params, success)
			},
			fail: function(err){
				wx.showToast({
				  title: '用户头像获取失败，生成海报失败',
				  icon: 'none',
				  duration: 2000
				})
				wx.hideLoading();
				return;
			}
		  })
		}else{
			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) {
						var url = 'v1/update/poster/' + that.data.productId
							var params = {
							  type: 'project'
							}
							var success = function (res2) {
							  wx.getImageInfo({
								src: res2.data.qrcode_url,
								success: function (res2) {
								  that.posterImage.qcode = res2
								  that.posterLoading++
								  if (that.posterLoading === 4) {
									that.createCtx()
								  }
								},
								fail: function (res2) {
								  that.qcodeError = true
								  if (that.data.posterPopup) {
									that.setData({
									  posterPopup: false
									})
									wx.showToast({
									  title: '海报生成失败，请稍后重试',
									  icon: 'none',
									  duration: 2000
									})
									wx.hideLoading()
								  }
								}
							  })
							  wx.getImageInfo({
								src: res2.data.wx_head,
								success: function (res2) {
								  that.posterImage.head = res2
								  that.posterLoading++
								  if (that.posterLoading === 4) {
									that.createCtx()
								  }
								}
							  })
							}
							_request.$put(url, params, success)
						
			//        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 () {
  	let that = this;
  	if(this.data.check && this.data.check.wx_user_id && this.data.check.wx_user_id > 0 && this.data.check.user_id > 0){
  		that.projectImageLoading()
  	
  	
	    if (!this.qcodeError) {
	      if (!this.canvasLoading) {
	        wx.showLoading({
	          mask: true,
	          title: ''
	        })
	      }
	      this.setData({
	        posterPopup: true
	      })
	    } else {
	      wx.showToast({
	        title: '海报生成失败，请稍后重试',
	        icon: 'none',
	        duration: 2000
	      })
	    }
  	}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),
    });
  },
  checkSize(event){
  	var type = event.currentTarget.dataset.type;
  	var id = event.currentTarget.dataset.id;
  	var list = event.currentTarget.dataset.list;
  	var tname = event.currentTarget.dataset.tname;
		var that = this;
		var tkey = type=='color_list'?'cname':'sname';
		var reproduct = this.data.productSize;
//		console.log('reproduct',reproduct)
		for(var i in reproduct[type]['attr_values']){
//			console.log('reproduct[type][i].is_select',reproduct[type]['attr_values'][i].is_select)
			reproduct[type]['attr_values'][i].is_select = false;
			if(reproduct[type]['attr_values'][i].id == id) reproduct[type]['attr_values'][i].is_select = true;
		}
//		console.log('reproduct',reproduct)
		
		that.setData({
			productSize :reproduct,
			[type]:id,
			[tkey]:tname
	 })
//		console.log('that.data[type]',that.data[type])
		let cflag = true;
		for(let i in that.data.checkbox){
			if(that.data[that.data.checkbox[i]] == 0) cflag = false;
		}
		if(cflag){
  		that.getProductDetail();
		}

  },
  back:function(){
	  wx.navigateBack({})
  },
  evaluateLvS(star){
	// console.log('star',star);
  	var that = this;
	var lvList = that.data.lvList;
	let lvlist2 = [];
  	lvList.forEach((item,index) => {
  	// console.log('index',index);
  		if(index <= star){
  			if(index % 2 === 0){
  				lvList[index] = that.data.lvListActive1; 
  			}else{
  				lvList[index] = that.data.lvListActive3; 
  			}
  		}else{
  			if(index % 2 === 0){
  				lvList[index] = that.data.lvListActive2; 
  			}else{
  				lvList[index] = that.data.lvListActive4; 
  			}
  　　　 }
		lvlist2.push(lvList[index]);
  　})
	return lvlist2;
  }
})