// pages/info/groupInfo/index.js import commonApi from "../../../utils/https/common"; let timer = null,app = getApp(),timer2=null; import util from "../../../utils/util" import QRCode from '../../../utils/weapp-qrcode.js' let device = wx.getSystemInfoSync(); const ratio = device.screenWidth / 750; Page({ /** * 页面的初始数据 */ data: { info:null, list:[], hot:[], id:null, isFollow:true, showRuleFlag:false, showShareFlag:false, isOn:false, myIngList:{} }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ id:options.id }) // 获取推荐列表 commonApi.user_post('activity.groups/get_recommend?id='+options.id,{ id:options.id }).then(res=>{ this.setData({ hot:res.data.data }) }) commonApi.user_post('activity.groups/detail?id='+options.id+'&team_id='+options.team_id,{ id:options.id, team_id:options.team_id }).then(res=>{ this.setData({ info:res.data.detail }) commonApi.user_post('activity.groups/is_join?id='+options.id,{ id:options.id, }).then(r=>{ if(r.data.length>0 && r.data[0].status==1){ // 已经参与这个团购 this.setData({ isOn:true, myIngList:res.data.self_team }) this.setTime(); this.drawImg() } else { this.setData({ isOn:false }) commonApi.user_post("activity.groups/get_teams?limit=100&id="+options.id,{ id:options.id, limit:10 }).then(res=>{ this.setData({ list:res.data.data }) this.setListTime(); }) } }) }) }, // 我的团购结束倒计时 setTime:function(){ let myIngList = this.data.myIngList; if(myIngList.isOver || !myIngList.team_list || !myIngList.team_list[0]){ if(timer2){ clearTimeout(timer2); timer2 = null; } return; } let time = myIngList.team_list[0].over_time,overTime = new Date(time.replace(/-/g,'/')).getTime(),now = new Date().getTime(); if(overTime<=now){ myIngList.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; } myIngList.h=h; myIngList.m=m; myIngList.s=s; } this.setData({ myIngList:myIngList }) timer2 = setTimeout(()=>{ this.setTime() },1000) }, // 去详情 gotoInfo(){ util.gotoDetail({ type:this.data.info.type, id:this.data.info.goods_id, scene_id:this.data.info.scene_id }) }, // 列表倒计时 setListTime:function(){ let list = this.data.list,now = new Date(); list.map(item=>{ let t = item.over_time; t = new Date(t.replace(/-/g,'/')).getTime() - now; if(t<=0) { item.isEnd = true; } else { let h = Math.floor(t / 3600000),m = Math.floor((t - h * 3600000)/60000),s = Math.floor((t - h * 3600000 - m * 60000)/1000); item.h = h<10?('0'+h):h; item.m = m<10?('0'+m):m; item.s = s<10?('0'+s):s; } }) this.setData({ list:list }) if(timer){ clearTimeout(timer); } timer = setTimeout(()=>{ this.setListTime() },1000) }, // 修改当前详情页id gotoDetail:function(e){ clearTimeout(timer); timer = null; wx.redirectTo({ url: '/pages/group/info/index?id='+e.currentTarget.dataset.id }) }, // 发起团购 startGroup:function(){ util.goKjOrder(this.data.info).then(product=>{ product.map(item=>{ item.productNum = this.data.info.purchase_quantity; item.sku.event_price = this.data.info.event_price; item.maxNum = this.data.info.purchase_quantity; }) app.globalData.gp_id = this.data.info.id; console.log(this.data.info) if(this.data.info.type=='post'){ app.globalData.postProduct = product; wx.navigateTo({ url: '/pages/order/postOrder/index', }) } else if(this.data.info.type=='ticket' || this.data.info.type=='scene'){ app.globalData.product = product[0]; wx.navigateTo({ url: '/pages/order/scene/index', }) } else if(this.data.info.type=="venue"){ app.globalData.product = product[0]; wx.navigateTo({ url: '/pages/order/scene/index?type=museum', }) } }) }, // 加入拼团 join:function(e){ let item = e.currentTarget.dataset.item; util.goKjOrder(this.data.info).then(product=>{ product.map(item=>{ item.productNum = this.data.info.purchase_quantity; item.sku.event_price = this.data.info.event_price; item.maxNum = this.data.info.purchase_quantity; }) app.globalData.gp_id = this.data.info.id; app.globalData.team_id = item.team_id; if(this.data.info.type=='post'){ app.globalData.postProduct = product; wx.navigateTo({ url: '/pages/order/postOrder/index', }) } else if(this.data.info.type=='ticket' || this.data.info.type=='scene'){ app.globalData.product = product[0]; wx.navigateTo({ url: '/pages/order/scene/index', }) } }) }, // 原价购买 goBuy:function(){ this.goOrder(null,1); }, // 去下单 goOrder:function(groupId){ commonApi._get('productfront/getProductInfo',{ productId:this.data.info.productDetail.productId }).then(res=>{ if(!res.data){ wx.showToast({ title:"该产品不存在或已下架", icon:'none' }) return; } let skuIndex = res.data.skuInfo.findIndex(item=>item.id==this.data.info.productDetail.skuId); if(skuIndex==-1) { wx.showToast({ title:"该产品规格不存在", icon:'none' }) return; } let sku = res.data.skuInfo[skuIndex]; app.globalData.shoppingCart=[{ baseInfo:res.data.baseInfo, modelInfo:sku.modelInfo, skuInfo:sku, productNum:1, purchaseQuantity:this.data.info.productDetail.purchaseQuantity }]; app.globalData.groupId = groupId; app.globalData.discounts = 0; wx.navigateTo({ url: '../../order/index', }) }) }, // 显示或者隐藏规则 showRule:function(){ this.setData({ showRuleFlag:!this.data.showRuleFlag }) }, // 前往列表页 如果是从列表来的直接返回 防止嵌套 backList:function(){ let page = getCurrentPages(); if(page.length>=2 && page[page.length-2].route.indexOf('pages/group/index')!=-1){ wx.navigateBack() } else { wx.navigateTo({ url: '/pages/group/index' }) } }, // 分享 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(){ if(!this.data.myIngList || !this.data.myIngList.team_list || !this.data.myIngList.team_list[0]){ return; } 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.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/GroupDetailFriends?id='+that.data.info.id+'&sharedUserId='+userid+'&channel=-1&team_id='+that.data.myIngList.team_list[0].team_id, 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); console.log(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.title+that.data.info.sku_name, 25*ratio, 450*ratio,480 * ratio,ratio); // 售价 ctx.setFillStyle("#D62828"); ctx.setFontSize(40 * ratio); //字大小 ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 let price = "¥"+(that.data.info.event_price/100); 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 = that.data.info.gp_num+'人团'; 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.price/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.list.length>0){ this.setListTime() } if(this.data.info && this.data.info.isGroupPurchasing==1){ this.setTime() } }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { if(timer){ clearTimeout(timer) timer = null; } if(timer2){ clearTimeout(timer2); timer2 = null; } }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function (e) { }, /** * 用户点击右上角分享 */ onShareAppMessage: function (e) { if(e.from=='button' || this.data.isOn){ return { title: "我正在发起团购,快来参加吧", // 默认是小程序的名称(可以写slogan等) path: "/pages/group/info/index?id="+this.data.info.id+'&team_id='+this.data.myIngList.team_list[0].team_id, // 默认是当前页面,必须是以‘/’开头的完整路径 imageUrl: this.data.info.headimg, //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 } } else { return { title: this.data.info.title+this.data.info.sku_name+"正在团购中~", // 默认是小程序的名称(可以写slogan等) path: "/pages/group/info/index?id="+this.data.info.id, // 默认是当前页面,必须是以‘/’开头的完整路径 imageUrl: this.data.info.headimg, //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 } } } })