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, showsharetips:false, backTopValue:false, 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',//未选中的 kfqr:'',//客服二维码 showqr:false }, 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() this.info() this.getqcode() }, onHide: function () { this.getneedshare() }, dpi: function (val) { return val }, onSlideChangeEnd: function(e) { var that = this; that.setData({ imgindex: e.detail.current + 1 }) }, info(){ console.log('oninfo'); var that = this var url = 'v1/user/info' var params = {} var success = function (res) { console.log(res) that.setData({ info: res.data, bindTel: res.data.user.tel ? true : false }) if (res.data.wx_user_id > 0) { that.getneedshare() } } _request.$get(url, params, success) }, 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) }, onShareTimeline: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 ? this.data.project.share_img : this.data.project.cover, sc: 'xcx_product', ri: this.data.productId, rp: this.data.productId, },true) }, 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 ? this.data.project.share_img : this.data.project.cover, 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) { //新增,如果can_buy等于true时才继续,否则退回首页 if(!val.data.can_buy){ wx.switchTab({ url:'../../home/home' }) } var p = val.data.detail let cbox = []; for(let i in val.data){ if(i != 'product' && val.data[i]) cbox.push(i); } console.log('cbox',cbox); that.setData({ project: val.data, productSize: val.data, checkbox:cbox, 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) }, wxParseTagATap: function(e){ var href = e.currentTarget.dataset.src; console.log(href); //我们可以在这里进行一些路由处理 if(href){ //跳转的方法根据项目需求的不同自己替换,也可以加参数, e.currentTarget.stop wx.navigateTo({ url: href }) } }, wxParseImgTap:function(e){ return false; }, 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){ //添加购物车后,更新本地数量 var localcl = wx.getStorageSync('localCartList') ? wx.getStorageSync('localCartList') : []; if(localcl.length > 0){ for(let i in localcl){ if(localcl[i]['product_id'] == that.data.productId){ localcl[i]['count'] = localcl[i]['count'] + that.data.count; } } //setlocalcartlist wx.setStorageSync('localCartList',localcl); } console.log('localcl',localcl); 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.info && this.data.info.wx_user.id && this.data.info.wx_user.id > 0 && this.data.info.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 }) setTimeout(function(){ wx.reLaunch({ url: '/pages/user/all/all' }) },1000) } }, 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; }, // 监听滚动条坐标 onPageScroll: function (e) { //console.log(e) var that = this var scrollTop = e.scrollTop var backTopValue = scrollTop > 500 ? true : false that.setData({ backTopValue: backTopValue }) }, toTop:function(){ wx.pageScrollTo({ scrollTop: 0 }) }, sharetips(){ this.setData({ showsharetips:!this.data.showsharetips }) }, getqcode: function () { var that = this var url = 'v1/customer_service/qrcode' var params = {} var success = function (res) { that.setData({ kfqr: res.data }) } _request.$get(url, params, success) }, tiggerQR:function(){ this.setData({ showqr: !this.data.showqr }) }, catchtapQR:function(){ console.log('catchtapQR'); } })