// pages/info/pddInfo/index.js import productApi from "../../../utils/https/common"; import util from "../../../utils/util" let app = getApp(); let timer = null; import QRCode from '../../../utils/weapp-qrcode.js' let device = wx.getSystemInfoSync(); const ratio = device.windowWidth / 750; Page({ /** * 页面的初始数据 */ data: { info:null, showRuleFlag:false, kjId:null, isKj:false,//是否是被邀请进来砍价的 本人去除 isFollow:true,//是否已经关注公众号 showShareFlag:false,//是否显示公众号的二维码 userInfo:null, helpList:[] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 获取用户信息 后面的砍价接口和发起活动接口需要用到 let that = this; productApi.user_post("uservice/user/getMyInfo",{}).then(r=>{ this.setData({ userInfo:r.data }) let userid = r.data.id,service="activity.haggle/get_haggle_detail"; productApi.user_post(service+'?id='+options.id+(options.originate_id?('&originate_id='+options.originate_id):''),{ }).then(res=>{ if(!res.data.user_record || !res.data.user_record.id){ res.data.user_record = { bargined_money:0 } } if(res.data.originate && res.data.originate.id && options.originate_id){ res.data.user_record = res.data.originate; } this.setData({ kjId:res.data.user_record.id }) this.setData({ info:res.data }) // 判断是否是自己发起的活动 if(!res.data.user_record.id || res.data.user_record.user_id==userid){ this.setData({ isKj:false }) this.drawImg() } else { this.setData({ isKj:true }) } // 只有发起了的活动才需要倒计时 if(res.data.user_record.id && res.data.user_record.over_time){ // 获取砍价记录 productApi.user_post("activity.haggle/help_list?limit=10&page=1&id="+res.data.user_record.id,{ limit:10, page:1, id:res.data.user_record.id }).then(r=>{ this.setData({ helpList:r.data.data }) }) this.setTime(); timer = setInterval(()=>{ this.setTime() },1000) if(this.data.isKj){ // 发起者状态是砍价完成,提示用户:我已经砍价完成了,你也快来试试吧,点击否停留当前页面,点击是,跳转砍价专区 if(res.data.user_record.flag=='over'){ wx.showModal({ title:"提示", content:"我已经砍价完成了,你也快来试试吧,点击否停留当前页面", success:function(r){ if(r.confirm){ wx.redirectTo({ url: '/pages/list/kj/index' }) } } }) } // 如果状态是砍价失败,提示用户:{发起者昵称}发起的砍价活动已结束,你也快来试试吧,点击否返回商城首页,点击是,跳转砍价专区 else if(res.data.user_record.flag=='fail' || res.data.user_record.flag=='expired'){ wx.showModal({ title:"提示", content:res.data.user_record.user_name+"发起的砍价活动已结束,你也快来试试吧", success:function(r){ if(r.confirm){ wx.redirectTo({ url: '/pages/list/kj/index' }) } else { wx.reLaunch({ url: '/pages/index/index', }) } } }) } } else if(res.data.user_record.flag=='fail' || res.data.user_record.flag=='expired'){ wx.showModal({ title:"提示", content:"您未砍价成功,是否原价购买?", success:function(r){ if(r.confirm){ // 去买 that.gotoDetail({ currentTarget:{ dataset:{ type:"none" } } }) } } }) } } }) }) }, gotoProduct:function(){ productApi._post('product/get_product_detail',{ id:this.data.info.detail.goods_id }).then(res=>{ util.gotoDetail(res.data); }) }, // 如果已经发起活动的话需要倒计时 setTime(){ let info = this.data.info; let overTime = new Date(info.user_record.over_time.replace(/-/g,'/')).getTime(),now = new Date().getTime(); if(overTime<=now){ info.isOver=true; } else { let t = (overTime - now)/1000; let h = Math.floor(t/(60*60)); t = t - h * 60*60; let m = Math.floor(t/60),s=Math.floor(t-m*60); if(h<10) { h="0"+h; } if(m<10) { m="0"+m; } if(s<10) { s="0"+s; } info.h = h; info.m = m; info.s = s; } this.setData({ info:info }) }, // 保存二维码到手机 saveImg:function(){ wx.downloadFile({ url: 'https://resources.jszhwlpt.com/d3c2d106-b893-474f-bf5c-091bd04f247f.jpeg', success:function(res){ wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath }) } }) }, // 隐藏或显示活动规则 showRule:function(){ this.setData({ showRuleFlag:!this.data.showRuleFlag }) }, // 分享 share:function(){ if(!this.data.shareImg){ wx.showToast({ title: '图片生成中,稍后再试', icon:'none' }) return; } this.setData({ showShareFlag:!this.data.showShareFlag }) }, // 保存 save(){ let url = this.data.shareImg,that = this; wx.authorize({ /* 这个就是保存相册的 */ scope: 'scope.writePhotosAlbum', success() { wx.saveImageToPhotosAlbum({ filePath:url, success(res) { wx.showToast({ title: '保存成功', icon:"success" }) that.setData({ showShareFlag:!this.data.showShareFlag }) }, fail(res){ wx.showToast({ title: '保存失败', icon:'none' }) } }) }, complete(res) { console.log(res); /* 这里判断一下如果没有授权重新打开设置选项 */ wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { /* 打开设置的方法 */ // opensit(); wx.showToast({ title: '请打开权限后再试', icon:'none' }) } } }); } }); }, // 绘制海报 drawImg:function(){ var that = this,userinfo = wx.getStorageSync('jstrip_userInfo'); const ctx = wx.createCanvasContext('imageCanvas'); // const device = wx.getSystemInfoSync(); // const ratio = device.screenWidth / 750; // 先获取到图片信息 let promise2 = new Promise(function(resolve,reject){ wx.getImageInfo({ src:that.data.info.detail.headimg, success:function(res){ resolve(res); }, fail:function(res){ reject(res); } }) }) let promise3 = new Promise(function(resolve,reject){ let userid = wx.getStorageSync('jstrip_userid') new QRCode('myQrcode',{ text: 'https://m.cloud.sz-trip.com/BargainFriends?id='+that.data.info.detail.id+'&sharedUserId='+userid+'&channel=-1&originate_id='+that.data.kjId, width: 500, height: 500, padding: 12, // 生成二维码四周自动留边宽度,不传入默认为0 correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度 callback: (res) => { resolve(res); } }) }) //成功得到图片信息后,开始绘图 Promise.all([promise2,promise3]).then(imgs=>{ ctx.save(); ctx.beginPath(); //开始绘制 that.handleBorderRect(ctx,0,0,551 * ratio,407 * ratio,25 * ratio,'#ccc') ctx.clip();//画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因 ctx.drawImage(imgs[0].path, 0, 0,551 * ratio,407 * ratio); ctx.restore(); ctx.save(); that.handleBorderRect2(ctx,0,407 * ratio,551 * ratio,236*ratio,25 * ratio,'#fff') ctx.restore(); // 绘制二维码 ctx.drawImage(imgs[1].path, 373 * ratio, 495 * ratio,137 * ratio, 137 * ratio); // 开始文字绘制 ctx.setFillStyle("#000"); ctx.setFontSize(30 * ratio); //字大小 ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 that.drawText(ctx,that.data.info.detail.title+that.data.info.detail.sku_name, 25*ratio, 450*ratio,480 * ratio,ratio); // 售价 ctx.setFillStyle("#D62828"); ctx.setFontSize(40 * ratio); //字大小 ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 let price = "¥0"; let width = ctx.measureText(price).width; ctx.fillText(price, 25*ratio, 620*ratio); // 副标题 ctx.setFillStyle("#999999"); ctx.setFontSize(28 * ratio); //字大小 ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 let subtitle = '快来帮我砍一刀吧~' ctx.fillText(subtitle, 25*ratio, 540*ratio); // ctx.draw(); // 划线价 ctx.setFillStyle("#999999"); ctx.setFontSize(32 * ratio); //字大小 ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 let market_price = "¥"+(that.data.info.detail.kj_money/100) ctx.fillText(market_price, 40*ratio + width, 620*ratio); let market_price_width = ctx.measureText(market_price).width; // 划线 ctx.beginPath() ctx.setLineWidth(1) ctx.moveTo(40*ratio + width, 608*ratio) ctx.lineTo(45*ratio + width + market_price_width, 608*ratio) ctx.stroke(); // 长按识别二维码 // ctx.setFillStyle("#666"); // ctx.setFontSize(22 * ratio); //字大小 // ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 // ctx.fillText("长按识别二维码", 404*ratio, 710*ratio); // 长按图片转发或保存 // ctx.setFillStyle("#000"); // ctx.setFontSize(24 * ratio); //字大小 // ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 // ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio); ctx.draw(); // 转为图片 setTimeout(()=>{ wx.canvasToTempFilePath({ x: 0, y: 0, canvasId: 'imageCanvas', success: function (res) { that.setData({ shareImg:res.tempFilePath }) }, fail(err){ console.log('agdgjgdajhg',err) } }) },500) return false; }).catch(err=>{ console.log("this err",err) }) }, // 圆角矩形 handleBorderRect(ctx, x, y, w, h, r, color){ ctx.beginPath(); ctx.moveTo(x+w,y+h); ctx.lineTo(x,y+h) // 左上角 ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI); ctx.moveTo(x + r, y); ctx.lineTo(x + w - r, y); ctx.lineTo(x + w, y + r); // 右上角 ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI); ctx.lineTo(x + w, y + h ); ctx.lineTo(x + w - r, y + h); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); }, handleBorderRect2(ctx, x, y, w, h, r, color){ ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x+w,y) // 右下角 ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI); ctx.lineTo(x + r, y + h); ctx.lineTo(x, y + h - r); // 左下角 ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI); ctx.lineTo(x, y); ctx.lineTo(x, y); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); }, // 绘制两行文字 drawText: function(ctx, str, x, y, canvasWidth,ratio) { let row = [],temp="",chr=str.split(""); for (var a = 0; a < chr.length; a++) { if (ctx.measureText(temp).width < canvasWidth) { temp += chr[a]; } else { a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比 row.push(temp); temp = ""; } } row.push(temp); //如果数组长度大于2 则截取前两个 if (row.length > 2) { var rowCut = row.slice(0, 2); var rowPart = rowCut[1]; var test = ""; var empty = []; for (var a = 0; a < rowPart.length; a++) { if (ctx.measureText(test).width < canvasWidth - 30 * ratio) { test += rowPart[a]; } else { break; } } empty.push(test); var group = empty[0] + "..."//这里只显示两行,超出的用...表示 rowCut.splice(1, 1, group); row = rowCut; } for (var b = 0; b < row.length; b++) { ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth); } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { if(this.data.info && this.data.info.user_record && this.data.info.user_record.id){ this.setTime(); timer = setInterval(()=>{ this.setTime() },1000) } }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { clearInterval(timer); timer = null; }, // 详情和下单的第一步 gotoDetail:function(e){ let info = this.data.info.detail || null,type=e?e.currentTarget.dataset.type:null; let that = this; if(!info) return; if(type=='fail'){ wx.showModal({ title:"提示", content:"您未砍价成功,是否原价购买", confirmColor:"#E14135", success:function(res){ if(res.confirm){ that.pushOrderData(null) } } }) } else if(type=='none'){ this.pushOrderData(null) } else { this.pushOrderData(this.data.info.user_record.id) } }, // 真实的获取产品信息去下单 pushOrderData:function(kjId){ app.globalData.kjId = kjId; app.globalData.couponInfo = null; util.goKjOrder(this.data.info.detail).then(product=>{ if(this.data.info.detail.type=='post'){ app.globalData.postProduct = product; wx.navigateTo({ url: '/pages/order/postOrder/index', }) } else if(this.data.info.detail.type=='ticket' || this.data.info.detail.type=='scene'){ app.globalData.product = product[0]; wx.navigateTo({ url: '/pages/order/scene/index', }) } }) }, // 帮好友砍一刀 kanjia:function(){ // if(!this.data.isFollow){ // // 未关注需要先关注公众号 // this.setData({ // showShareFlag:true // }) // return; // } let userInfo = this.data.userInfo,info = this.data.info; productApi.user_post("activity.haggle/help_bargain",{ originate_id:info.user_record.id }).then(res=>{ if(res.code==1){ wx.showToast({ title: '砍价成功', icon:'success' }) this.onLoad({userid:info.user_record.user_id,id:info.detail.id,originate_id:info.user_record.id}) } }) }, // 发起砍价 startKj:function(){ // if(!this.data.isFollow){ // // 未关注需要先关注公众号 // this.setData({ // showShareFlag:true // }) // return; // } let info = this.data.info; let userInfo = this.data.userInfo; productApi.user_post('activity.haggle/bargain_launch',{ act_id:info.detail.act_id, id:info.detail.id }).then(res=>{ if(res.code==1){ wx.showToast({ title: '发起成功', icon:'success' }) this.onLoad({id:info.detail.id}) } }) }, // 喊好友砍一刀 shareHelp:function(){ }, // 我也要参与 join:function(){ this.onLoad({id:this.data.info.detail.id}); }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { let kjId = this.data.kjId,info = this.data.info; let shareObj = { title: kjId?"就差你这一刀了,快来帮帮我~":(info.detail.title+info.detail.sku_name), // 默认是小程序的名称(可以写slogan等) path: kjId?('/pages/kj/info/index?userid='+info.user_record.user_id+'&id='+info.detail.id+'&originate_id='+kjId):('/pages/kj/info/index?&id='+info.detail.id), // 默认是当前页面,必须是以‘/’开头的完整路径 imageUrl: info.detail.headimg, //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 success: function(res){ // 转发成功之后的回调 if(res.errMsg == 'shareAppMessage:ok'){ wx.showToast({ title: '转发成功,马上就要砍成了~', }) } }, fail: function(){ // 转发失败之后的回调 if(res.errMsg == 'shareAppMessage:fail cancel'){ }else if(res.errMsg == 'shareAppMessage:fail'){ // 转发失败,其中 detail message 为详细失败信息 }     }, }; console.log(shareObj) return shareObj; } })