|
|
|
@ -2,6 +2,9 @@ |
|
|
|
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({ |
|
|
|
|
|
|
|
/** |
|
|
|
@ -14,6 +17,7 @@ Page({ |
|
|
|
id:null, |
|
|
|
isFollow:true, |
|
|
|
showRuleFlag:false, |
|
|
|
showShareFlag:false, |
|
|
|
isOn:false, |
|
|
|
myIngList:{} |
|
|
|
}, |
|
|
|
@ -25,15 +29,34 @@ Page({ |
|
|
|
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, |
|
|
|
hot:res.data.hotProductList |
|
|
|
info:res.data.detail |
|
|
|
}) |
|
|
|
if(res.data.self_team.status==-1){ |
|
|
|
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 |
|
|
|
}) |
|
|
|
@ -47,26 +70,20 @@ Page({ |
|
|
|
this.setListTime(); |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
this.setData({ |
|
|
|
isOn:true, |
|
|
|
myIngList:res.data.self_team |
|
|
|
}) |
|
|
|
this.setTime(); |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 我的团购结束倒计时
|
|
|
|
setTime:function(){ |
|
|
|
let myIngList = this.data.myIngList,time = myIngList.team_list[0].over_time; |
|
|
|
if(myIngList.isOver){ |
|
|
|
let myIngList = this.data.myIngList; |
|
|
|
if(myIngList.isOver || !myIngList.team_list || !myIngList.team_list[0]){ |
|
|
|
if(timer2){ |
|
|
|
clearTimeout(timer2); |
|
|
|
timer2 = null; |
|
|
|
} |
|
|
|
return; |
|
|
|
} |
|
|
|
let overTime = new Date(time.replace(/-/g,'/')).getTime(),now = new Date().getTime(); |
|
|
|
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; |
|
|
|
} |
|
|
|
@ -95,6 +112,14 @@ Page({ |
|
|
|
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(); |
|
|
|
@ -126,7 +151,7 @@ Page({ |
|
|
|
clearTimeout(timer); |
|
|
|
timer = null; |
|
|
|
wx.redirectTo({ |
|
|
|
url: '/pages/info/groupInfo/index?id='+e.currentTarget.dataset.id |
|
|
|
url: '/pages/group/info/index?id='+e.currentTarget.dataset.id |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 发起团购
|
|
|
|
@ -138,6 +163,7 @@ Page({ |
|
|
|
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({ |
|
|
|
@ -150,6 +176,12 @@ Page({ |
|
|
|
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', |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 加入拼团
|
|
|
|
@ -234,6 +266,249 @@ Page({ |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 分享
|
|
|
|
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); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面初次渲染完成 |
|
|
|
@ -294,7 +569,7 @@ Page({ |
|
|
|
* 用户点击右上角分享 |
|
|
|
*/ |
|
|
|
onShareAppMessage: function (e) { |
|
|
|
if(e.from=='button' || this.data.myIngList.status==1){ |
|
|
|
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, // 默认是当前页面，必须是以‘/’开头的完整路径
|
|
|
|
|
Myth
4 years ago