|
...
|
...
|
@@ -241,10 +241,10 @@ Page({ |
|
|
|
count:res.data.count,
|
|
|
|
is_send:res.data.is_send,//能否参加1：不能2：能
|
|
|
|
});
|
|
|
|
this.getLocalImage();
|
|
|
|
self.getCode();//获取二维码
|
|
|
|
// self.getImage();
|
|
|
|
// self.getLocalImage();
|
|
|
|
// self.countDown();
|
|
|
|
|
|
|
|
|
|
|
|
// let newTime = new Date().getTime();//当前时间戳
|
|
|
|
// let end_time = app.nextTime(this.data.end_time, this.data.over_hours);//截止时间
|
|
|
|
// let endTime = new Date(end_time).getTime(); //截止时间戳
|
|
...
|
...
|
@@ -387,6 +387,35 @@ Page({ |
|
|
|
console.log('详情options', options);
|
|
|
|
this.setData({detail_id:+options.id?+options.id:''});
|
|
|
|
},
|
|
|
|
//获取活动二维码
|
|
|
|
getCode() {
|
|
|
|
const self = this;
|
|
|
|
let url = '/portal/Index/qrCode';
|
|
|
|
let params = {
|
|
|
|
id: self.data.detail_id,
|
|
|
|
token:wx.getStorageSync('token'),
|
|
|
|
type:2,//1拼活动，2拼餐
|
|
|
|
};
|
|
|
|
app.post(url, params, {}).then((res) => {
|
|
|
|
console.log('获取活动二维码', res);
|
|
|
|
if (+res.code === 1) {
|
|
|
|
self.setData({qr_code:res.data},() => {
|
|
|
|
// console.log('二维码',self.data.qr_code);
|
|
|
|
wx.getImageInfo({
|
|
|
|
src: 'http://' + self.data.qr_code,
|
|
|
|
success(res) {
|
|
|
|
// console.log('二维码本地路径',res);
|
|
|
|
self.setData({local_qr_code:res.path});
|
|
|
|
self.getLocalImage();
|
|
|
|
},
|
|
|
|
fail() {
|
|
|
|
console.log('失败');
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
//点击分享
|
|
|
|
share() {
|
|
|
|
this.setData({show_canvas: true}, () => {
|
|
...
|
...
|
@@ -405,64 +434,117 @@ Page({ |
|
|
|
saveToPhone() {
|
|
|
|
this.getPower();
|
|
|
|
},
|
|
|
|
//图片链接转成本地路径
|
|
|
|
//详情图链接转成本地路径
|
|
|
|
getLocalImage() {
|
|
|
|
const self = this;
|
|
|
|
wx.getImageInfo({
|
|
|
|
src: self.data.detail.banner[0],
|
|
|
|
success(res) {
|
|
|
|
console.log('图片链接转成本地路径',res);
|
|
|
|
self.setData({local_img:res.path})
|
|
|
|
self.drawCard()
|
|
|
|
console.log(res.width)
|
|
|
|
console.log(res.height)
|
|
|
|
// console.log('详情图本地路径',res);
|
|
|
|
self.setData({local_img:res.path});
|
|
|
|
self.drawCard();
|
|
|
|
// console.log(res.width)
|
|
|
|
// console.log(res.height)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
// 画圆角 ctx、x起点、y起点、w宽度、y高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
|
|
|
|
roundRect(ctx, x, y, w, h, r, fillColor, strokeColor) {
|
|
|
|
const self = this;
|
|
|
|
// 开始绘制
|
|
|
|
ctx.beginPath()
|
|
|
|
|
|
|
|
// 绘制左上角圆弧 Math.PI = 180度
|
|
|
|
// 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
|
|
|
|
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
|
|
|
|
|
|
|
|
// 绘制border-top
|
|
|
|
// 移动起点位置 x终点、y终点
|
|
|
|
ctx.moveTo(x + r, y)
|
|
|
|
// 画一条线 x终点、y终点
|
|
|
|
ctx.lineTo(x + w - r, y)
|
|
|
|
// self.data.ctx.lineTo(x + w, y + r)
|
|
|
|
|
|
|
|
// 绘制右上角圆弧
|
|
|
|
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
|
|
|
|
|
|
|
|
// 绘制border-right
|
|
|
|
ctx.lineTo(x + w, y + h - r)
|
|
|
|
// self.data.ctx.lineTo(x + w - r, y + h)
|
|
|
|
|
|
|
|
// 绘制右下角圆弧
|
|
|
|
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
|
|
|
|
|
|
|
|
// 绘制border-bottom
|
|
|
|
ctx.lineTo(x + r, y + h)
|
|
|
|
// self.data.ctx.lineTo(x, y + h - r)
|
|
|
|
|
|
|
|
// 绘制左下角圆弧
|
|
|
|
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
|
|
|
|
|
|
|
|
// 绘制border-left
|
|
|
|
ctx.lineTo(x, y + r)
|
|
|
|
// self.data.ctx.lineTo(x + r, y)
|
|
|
|
|
|
|
|
if (fillColor) {
|
|
|
|
// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
|
|
|
|
ctx.setFillStyle(fillColor)
|
|
|
|
// 对绘画区域填充
|
|
|
|
ctx.fill()
|
|
|
|
}
|
|
|
|
|
|
|
|
if (strokeColor) {
|
|
|
|
// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
|
|
|
|
ctx.setStrokeStyle(strokeColor)
|
|
|
|
// 画出当前路径的边框
|
|
|
|
ctx.stroke()
|
|
|
|
}
|
|
|
|
// 关闭一个路径
|
|
|
|
// self.data.ctx.closePath()
|
|
|
|
|
|
|
|
// 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore
|
|
|
|
ctx.clip()
|
|
|
|
},
|
|
|
|
drawCard() {
|
|
|
|
console.log('开始画');
|
|
|
|
const self = this;
|
|
|
|
//先创建一个画布
|
|
|
|
const ctx = wx.createCanvasContext("canvas");
|
|
|
|
self.setData({ctx:ctx});
|
|
|
|
self.roundRect(ctx,0,0,300,302,10,'transparent','transparent');//画圆角
|
|
|
|
ctx.arc(150, 75, 50, 0, 2 * Math.PI);//剪切
|
|
|
|
ctx.setFillStyle('#ffffff');
|
|
|
|
ctx.fill();
|
|
|
|
ctx.clip();
|
|
|
|
//填充背景色
|
|
|
|
ctx.fillStyle = '#fff';
|
|
|
|
ctx.fillRect(0, 0, 300, 150);
|
|
|
|
// ctx.fillStyle = '#fff';
|
|
|
|
ctx.fillRect(30, 30, 300, 150);
|
|
|
|
console.log(self.data.local_img);
|
|
|
|
console.log(self.data.qr_code);
|
|
|
|
//将图片转化为画布
|
|
|
|
ctx.drawImage(self.data.local_img, 0, 0, 330, 150);
|
|
|
|
ctx.drawImage(self.data.local_img, 0, 0, 330, 170);//详情图
|
|
|
|
console.log(111);
|
|
|
|
// ctx.drawImage("../../../../images/tou.png", 20, 166, 30, 30);//头像
|
|
|
|
// ctx.drawImage("../../../../images/code.jpg", 220, 209, 60, 60);//头像
|
|
|
|
//用户名字
|
|
|
|
ctx.setFontSize(13);
|
|
|
|
ctx.setFillStyle('#333333');
|
|
|
|
ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
|
|
|
|
//标题
|
|
|
|
ctx.setFontSize(16);
|
|
|
|
ctx.setFillStyle('#000');
|
|
|
|
ctx.textAlign = "left";
|
|
|
|
console.log(111);
|
|
|
|
ctx.fillText(self.data.detail.userName, 69, 187);
|
|
|
|
ctx.fillText(self.data.detail.title, 26, 196.5);
|
|
|
|
ctx.fillText(self.data.detail.title, 25.5, 197);
|
|
|
|
ctx.restore();
|
|
|
|
//签到天数
|
|
|
|
ctx.setFontSize(17);
|
|
|
|
ctx.setFillStyle('#2C82E6');
|
|
|
|
ctx.fillText('连续', 25, 229);
|
|
|
|
ctx.restore();
|
|
|
|
ctx.setFillStyle('#2C82E6');
|
|
|
|
ctx.font = 'bold 22px sans-serif';
|
|
|
|
ctx.fillText(self.data.count, 63, 229);
|
|
|
|
ctx.restore();
|
|
|
|
ctx.setFontSize(17);
|
|
|
|
ctx.setFillStyle('#2C82E6');
|
|
|
|
ctx.font = 'normal 17px sans-serif';
|
|
|
|
ctx.fillText('天签到', 80, 229);
|
|
|
|
ctx.restore();
|
|
|
|
|
|
|
|
const text = self.data.detail.content;
|
|
|
|
// ctx.fillText('此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案', 25, 252,200);
|
|
|
|
// ctx.restore();
|
|
|
|
//地点
|
|
|
|
ctx.setFontSize(13);
|
|
|
|
ctx.setFillStyle('#000000');
|
|
|
|
ctx.fillText('地点：', 25, 229);
|
|
|
|
const text = self.data.detail.address;
|
|
|
|
var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
|
|
|
|
var temp = "";
|
|
|
|
var row = [];
|
|
|
|
ctx.setFontSize(13);
|
|
|
|
ctx.setFillStyle('#333333');
|
|
|
|
ctx.setFillStyle('#000000');
|
|
|
|
for (var a = 0; a < chr.length; a++) {
|
|
|
|
if (ctx.measureText(temp).width < 170) {
|
|
|
|
temp += chr[a];
|
|
...
|
...
|
@@ -475,10 +557,10 @@ Page({ |
|
|
|
}
|
|
|
|
row.push(temp);
|
|
|
|
|
|
|
|
//如果数组长度大于2 则截取前两个
|
|
|
|
if (row.length > 2) {
|
|
|
|
var rowCut = row.slice(0, 2);
|
|
|
|
var rowPart = rowCut[1];
|
|
|
|
//如果数组长度大于1 则截取前1个
|
|
|
|
if (row.length > 1) {
|
|
|
|
var rowCut = row.slice(0, 1);
|
|
|
|
var rowPart = rowCut[0];
|
|
|
|
var test = "";
|
|
|
|
var empty = [];
|
|
|
|
for (var a = 0; a < rowPart.length; a++) {
|
|
...
|
...
|
@@ -490,15 +572,20 @@ Page({ |
|
|
|
}
|
|
|
|
}
|
|
|
|
empty.push(test);
|
|
|
|
var group = empty[0] + "...";//这里只显示两行，超出的用...表示
|
|
|
|
rowCut.splice(1, 1, group);
|
|
|
|
var group = empty[0] + "...";//这里只显示一行，超出的用...表示
|
|
|
|
rowCut.splice(0, 1, group);
|
|
|
|
row = rowCut;
|
|
|
|
}
|
|
|
|
for (var b = 0; b < row.length; b++) {
|
|
|
|
ctx.fillText(row[b], 25, 252 + b * 16, 170);
|
|
|
|
ctx.fillText(row[b], 63, 229 + b * 16, 150);
|
|
|
|
}
|
|
|
|
ctx.restore();
|
|
|
|
|
|
|
|
//时间
|
|
|
|
ctx.setFontSize(13);
|
|
|
|
ctx.setFillStyle('#333333');
|
|
|
|
ctx.fillText('时间：', 25, 249);
|
|
|
|
ctx.fillText(self.data.end_time, 63, 249);
|
|
|
|
ctx.restore();
|
|
|
|
// ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
|
|
|
|
//成功执行，draw方法中进行回调
|
|
|
|
ctx.draw(true, function () {
|
|
...
|
...
|
@@ -610,6 +697,7 @@ Page({ |
|
|
|
},
|
|
|
|
onShareAppMessage: function() {
|
|
|
|
let self = this;
|
|
|
|
self.setData({show_canvas:false,});
|
|
|
|
// 设置菜单中的转发按钮触发转发事件时的转发内容
|
|
|
|
var shareObj = {
|
|
|
|
title: '火柴西路', // 默认是小程序的名称(可以写slogan等)
|
...
|
...
|
|
