|
|
// pages/activity/detail/detail.js
|
|
|
const app = getApp();
|
|
|
var t = null;
|
|
|
|
|
|
Page({
|
|
|
|
|
|
/**
|
|
|
* 页面的初始数据
|
|
|
*/
|
|
|
data: {
|
|
|
current_swiper: 0,
|
|
|
slide: [],
|
|
|
peopleList: [],
|
|
|
num: 1,
|
|
|
actEndTimeList: [],
|
|
|
is_zan: false,
|
|
|
display:false,
|
|
|
content:'',
|
|
|
is_ask:false,
|
|
|
is_reply:false,
|
|
|
placeholder:'输入您的留言',
|
|
|
is_showRelease_modal:false,
|
|
|
is_join:false,
|
|
|
img_heights: [], //图片宽度
|
|
|
img_width: 750, //默认
|
|
|
show_canvas: false,
|
|
|
can_save:false,
|
|
|
},
|
|
|
//获取图片真实宽度
|
|
|
imageLoad: function (e) {
|
|
|
var img_width = e.detail.width,
|
|
|
img_height = e.detail.height,
|
|
|
//宽高比
|
|
|
ratio = img_width / img_height;
|
|
|
// console.log(img_width, img_height);
|
|
|
//计算的高度值
|
|
|
var viewHeight = 750 / ratio;
|
|
|
var img_height = viewHeight;
|
|
|
var img_heights = this.data.img_heights;
|
|
|
//把每一张图片的对应的高度记录到数组里
|
|
|
img_heights[e.target.dataset.id] = img_height;
|
|
|
this.setData({
|
|
|
img_heights: img_heights
|
|
|
})
|
|
|
},
|
|
|
//查看我的订单
|
|
|
goMyOrder() {
|
|
|
this.setData({is_showRelease_modal:false,});
|
|
|
wx.navigateTo({url:'/pages/order/order-detail/order-detail?id=' + this.data.order_id})
|
|
|
},
|
|
|
//完成按钮
|
|
|
goBack() {
|
|
|
wx.redirectTo({url:'/pages/index/index'})
|
|
|
},
|
|
|
disableScroll() {
|
|
|
},
|
|
|
handleBackground() {
|
|
|
this.setData({is_showRelease_modal:false,})
|
|
|
},
|
|
|
// 问一问
|
|
|
ask(e) {
|
|
|
// console.log('前问一问-display', this.data.display);
|
|
|
this.setData({
|
|
|
display: !this.data.display,
|
|
|
is_ask:true,is_reply:false,
|
|
|
content:'' ,
|
|
|
placeholder:'输入您的留言',
|
|
|
});
|
|
|
// console.log('后问一问-display', this.data.display);
|
|
|
// wx.navigateTo({
|
|
|
// url: '/pages/comment/comment?activity_id=' + this.data.detail_id
|
|
|
// + '&common_id=' + 0
|
|
|
// })
|
|
|
// console.log('问',e.detail.value);
|
|
|
// this.setData({focus:true})
|
|
|
},
|
|
|
//输入评论内容
|
|
|
inputComment(e) {
|
|
|
this.setData({ content: e.detail.value });
|
|
|
},
|
|
|
//发送评论/回复
|
|
|
clickComment(e) {
|
|
|
// console.log('评论', e);
|
|
|
this.setData({ display: false });
|
|
|
if(this.data.content === '' ) {
|
|
|
wx.showToast({title:'请输入内容',icon:'none'})
|
|
|
}else {
|
|
|
let url = '/portal/Active/common';
|
|
|
let params = {
|
|
|
token:wx.getStorageSync('token'),
|
|
|
activeId:this.data.detail_id,
|
|
|
commonId: this.data.is_ask?0:this.data.commet_id,
|
|
|
content:this.data.content,
|
|
|
formId:e.detail.formId,
|
|
|
};
|
|
|
app.post(url,params,{}).then((res)=>{
|
|
|
// console.log('提交评论',res);
|
|
|
if(+res.code === 1) {
|
|
|
wx.showToast({title:this.data.is_ask?'留言成功':'回复成功',icon:'none',});
|
|
|
this.getDetail();
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
//评论input失去焦点
|
|
|
blur() {
|
|
|
this.setData({ display: false });
|
|
|
},
|
|
|
//点击键盘上的完成
|
|
|
confirm() {
|
|
|
this.setData({ display: false });
|
|
|
this.clickComment();
|
|
|
},
|
|
|
//回复
|
|
|
reply(e) {
|
|
|
// console.log('回复', e);
|
|
|
const id = e.currentTarget.dataset.id;
|
|
|
this.setData({
|
|
|
display: !this.data.display,
|
|
|
is_ask:false,is_reply:true,
|
|
|
commet_id:id,content:'' ,
|
|
|
placeholder:'输入您的回复',
|
|
|
});
|
|
|
// wx.navigateTo({
|
|
|
// url: '/pages/comment/comment?is_reply=' + true
|
|
|
// + '&activity_id=' + this.data.detail_id + '&common_id=' + id
|
|
|
// })
|
|
|
},
|
|
|
//收藏/取消收藏
|
|
|
collect() {
|
|
|
// console.log('收藏');
|
|
|
let self = this;
|
|
|
let url = '/portal/Active/collection';
|
|
|
let url_del = '/portal/Active/delCollection';
|
|
|
let header = {
|
|
|
"XX-Token": wx.getStorageSync('token')
|
|
|
};
|
|
|
let params = {
|
|
|
token: wx.getStorageSync('token'),
|
|
|
activeId: self.data.detail_id,
|
|
|
};
|
|
|
if (self.data.is_collect) {
|
|
|
app.post(url_del, params, header).then((res) => {
|
|
|
// console.log('取消收藏', res);
|
|
|
if (+res.code === 1) {
|
|
|
wx.showToast({title: res.message, icon: 'none'});
|
|
|
self.setData({
|
|
|
is_collect: 0
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
app.post(url, params, header).then((res) => {
|
|
|
// console.log('收藏', res);
|
|
|
if (+res.code === 1) {
|
|
|
wx.showToast({title: res.message, icon: 'none'});
|
|
|
self.setData({
|
|
|
is_collect: 1
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
},
|
|
|
//点赞
|
|
|
clickZan(e) {
|
|
|
let self = this;
|
|
|
const id = e.currentTarget.dataset.id;
|
|
|
const index = e.currentTarget.dataset.index;
|
|
|
let url = '/portal/Active/perfect';
|
|
|
let header = {
|
|
|
"XX-Token": wx.getStorageSync('token')
|
|
|
};
|
|
|
let params = {
|
|
|
token: wx.getStorageSync('token'),
|
|
|
commonId: id,
|
|
|
};
|
|
|
app.post(url, params, {}).then((res) => {
|
|
|
// console.log('点赞', res);
|
|
|
if (+res.code === 1) { //
|
|
|
wx.showToast({title: res.message, icon: 'none'});
|
|
|
self.setData({
|
|
|
[`commentList[${index}].is_prefect`]: true,
|
|
|
[`commentList[${index}].prefect`]: res.message == '该评论已赞'?+self.data.commentList[index].prefect:+self.data.commentList[index].prefect + 1,
|
|
|
});
|
|
|
// console.log('paise_user', paise_user);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
swiperChange(e) {
|
|
|
// console.log(e);
|
|
|
this.setData({current_swiper: e.detail.current})
|
|
|
},
|
|
|
onPageScroll(e) {
|
|
|
// console.log('页面滚动', e);
|
|
|
if (e.scrollTop > 140) {
|
|
|
this.setData({hidden_top: true})
|
|
|
} else if (e.scrollTop <= 140) {
|
|
|
this.setData({hidden_top: false})
|
|
|
}
|
|
|
},
|
|
|
// 增加数量
|
|
|
addCount(e) {
|
|
|
// let k = e.currentTarget.dataset.idx;
|
|
|
// let t = e.currentTarget.dataset.children_idx;
|
|
|
// let cartslist = this.data.cartslist;
|
|
|
// let num = cartslist[k].children[t].num;
|
|
|
// let product_id = cartslist[k].children[t].product_id;
|
|
|
let num = this.data.num;
|
|
|
num++;
|
|
|
this.setData({
|
|
|
num: num
|
|
|
});
|
|
|
},
|
|
|
// 减少数量
|
|
|
minusCount(e) {
|
|
|
let num = this.data.num;
|
|
|
if (num <= 1) {
|
|
|
return false;
|
|
|
}
|
|
|
num--;
|
|
|
this.setData({
|
|
|
num: num
|
|
|
});
|
|
|
},
|
|
|
//获取详情
|
|
|
getDetail() {
|
|
|
const self = this;
|
|
|
// console.log('city', self.data.city);
|
|
|
let url = '/portal/Active/activeDetail';
|
|
|
let params = {
|
|
|
activeId: self.data.detail_id,
|
|
|
token: wx.getStorageSync('token'),
|
|
|
};
|
|
|
let header = {
|
|
|
"token": wx.getStorageSync('token')
|
|
|
};
|
|
|
app.post(url, params, {}).then((res) => {
|
|
|
// console.log('获取详情', res, app.initTime(res.data.active.surplus));
|
|
|
if (+res.code === 1) {
|
|
|
self.setData({
|
|
|
detail: res.data.active,
|
|
|
'detail.time': app.initTime(res.data.active.surplus),
|
|
|
end_time: res.data.active.time,
|
|
|
over_hours: res.data.active.over_time,//几小时截止
|
|
|
join_people: res.data.son,
|
|
|
commentList: res.data.common,
|
|
|
is_collect: res.data.is_collect,
|
|
|
count: res.data.count, // 留言板
|
|
|
is_send:res.data.is_send,//能否参加1:不能2:能
|
|
|
});
|
|
|
self.getCode();//获取二维码(此二维码不能进入活动详情,已改为小程序码)
|
|
|
// (0全部,2待拼成,3人数不足未拼成,4已拼成,5已取消,6已完成,7已评价,8已拼成(活动未结束),9删除
|
|
|
const status = res.data.active.status;
|
|
|
if (status === 2 || status === 6 || status === 7 || status === 8) {
|
|
|
// console.log('调用倒计时');
|
|
|
self.countDown();
|
|
|
} else {
|
|
|
// console.log('不调用倒计时');
|
|
|
let countDownArr = [];
|
|
|
let obj = null;
|
|
|
obj = {
|
|
|
day: '00',
|
|
|
hou: '00',
|
|
|
min: '00',
|
|
|
sec: '00'
|
|
|
};
|
|
|
countDownArr.push(obj);
|
|
|
this.setData({
|
|
|
'detail.time': countDownArr,
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
// wx.hideLoading()
|
|
|
})
|
|
|
|
|
|
},
|
|
|
timeFormat(param) { //小于10的格式化函数
|
|
|
return param < 10 ? '0' + param : param;
|
|
|
},
|
|
|
time() {
|
|
|
const self = this;
|
|
|
self.data.detail.surplus--;
|
|
|
//定時器,每秒重新計算
|
|
|
// setTimeout(function () {
|
|
|
// self.time();
|
|
|
// },1000)
|
|
|
},
|
|
|
countDown() { //倒计时函数
|
|
|
t = setTimeout(this.countDown, 1000);
|
|
|
let countDownArr = [];
|
|
|
let obj = null;
|
|
|
if (this.data.detail.surplus > 0) { //未结束
|
|
|
this.time();
|
|
|
// console.log('surplus', this.data.detail.surplus);
|
|
|
// t = setTimeout(this.countDown, 1000);
|
|
|
const time = app.initTime(this.data.detail.surplus);
|
|
|
// console.log('time', time);
|
|
|
obj = {
|
|
|
day: time[0].day,
|
|
|
hou: time[0].hou,
|
|
|
min: time[0].min,
|
|
|
sec: time[0].sec
|
|
|
};
|
|
|
t;
|
|
|
} else {
|
|
|
obj = {
|
|
|
day: '00',
|
|
|
hou: '00',
|
|
|
min: '00',
|
|
|
sec: '00'
|
|
|
};
|
|
|
clearTimeout(t);
|
|
|
this.end();
|
|
|
}
|
|
|
countDownArr.push(obj);
|
|
|
// 渲染,然后每隔一秒执行一次倒计时函数
|
|
|
this.setData({
|
|
|
// countDownList: countDownArr,
|
|
|
'detail.time': countDownArr,
|
|
|
});
|
|
|
// console.log('time',this.data.detail.time);
|
|
|
},
|
|
|
//倒计时结束
|
|
|
end() {
|
|
|
const self = this;
|
|
|
let url = '/portal/Active/activity';
|
|
|
let params = {
|
|
|
activeId: self.data.detail_id,
|
|
|
};
|
|
|
let header = {
|
|
|
"token": wx.getStorageSync('token')
|
|
|
};
|
|
|
app.post(url, params, {}).then((res) => {
|
|
|
// console.log('倒计时结束', res);
|
|
|
if (+res.code === 1) {
|
|
|
// wx.showToast({title:'拼活动结束',icon:'success'})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//导航
|
|
|
getNavigate() {
|
|
|
const self = this;
|
|
|
const arr = self.data.detail.latng.split(',');
|
|
|
// console.log('arr', arr, arr[0], arr[1]);
|
|
|
wx.openLocation({//使用微信内置地图查看位置。
|
|
|
latitude: +arr[1],//要去的纬度-地址
|
|
|
longitude: +arr[0],//要去的经度-地址
|
|
|
// lat:39.086437,
|
|
|
// lng:117.122583,
|
|
|
name: self.data.detail.address,
|
|
|
address: self.data.detail.address
|
|
|
})
|
|
|
},
|
|
|
//确认拼活动
|
|
|
confirmJoin(e) {
|
|
|
const self = this;
|
|
|
// console.log('已参与人数',self.data.join_people.length);
|
|
|
// if(+self.data.is_send === 2){ //可参与
|
|
|
// if(self.data.join_people.length + self.data.num > self.data.detail.max) {
|
|
|
// wx.showToast({title:'参加人数已超过剩余名额',icon:'none'})
|
|
|
// }else if(self.data.join_people.length + self.data.num == self.data.detail.max){
|
|
|
// wx.showToast({title:'名额已满',icon:'none'})
|
|
|
// } else {
|
|
|
|
|
|
let url = '/portal/Active/join';
|
|
|
let params = {
|
|
|
token: wx.getStorageSync('token'),
|
|
|
number: self.data.num,
|
|
|
activeId: self.data.detail_id,
|
|
|
formId: e.detail.formId,
|
|
|
};
|
|
|
let header = {
|
|
|
"token": wx.getStorageSync('token')
|
|
|
};
|
|
|
app.post(url, params, {}).then((res) => {
|
|
|
// console.log('确认拼活动', res);
|
|
|
if (+res.code === 1) {
|
|
|
// wx.showToast({title: '拼活动成功', icon: 'success'});
|
|
|
self.setData({is_showRelease_modal:true,order_id:+res.data.orderId,is_join:true});
|
|
|
self.getDetail();
|
|
|
}else if(+res.code === 0) { //参与失败按钮还是确认拼活动
|
|
|
self.setData({is_join:false});
|
|
|
}
|
|
|
})
|
|
|
// }
|
|
|
// }
|
|
|
},
|
|
|
//获取活动二维码
|
|
|
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}, () => {
|
|
|
this.drawCard();
|
|
|
})
|
|
|
},
|
|
|
hideCanvasMask() {
|
|
|
// this.setData({show_canvas: true});
|
|
|
},
|
|
|
//关闭分享卡片
|
|
|
closeCanvas() {
|
|
|
this.setData({show_canvas: false});
|
|
|
// wx.navigateBack({delta:1})
|
|
|
},
|
|
|
//保存图片到手机相册
|
|
|
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)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 画圆角 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');//画圆角
|
|
|
// self.roundRect(ctx,0,0,350,402,10,'#000','#000');//画圆角
|
|
|
// ctx.arc(150, 75, 50, 0, 2 * Math.PI);//剪切
|
|
|
// ctx.setFillStyle('#ffffff');
|
|
|
// ctx.fill();
|
|
|
// ctx.clip();
|
|
|
//填充背景色
|
|
|
ctx.fillStyle = '#fff';
|
|
|
ctx.fillRect(0, 0, 280, 400);
|
|
|
// console.log(self.data.local_img);
|
|
|
// console.log(self.data.qr_code);
|
|
|
//将图片转化为画布
|
|
|
ctx.drawImage(self.data.local_img, 0, 0, 280, 280);//详情图
|
|
|
// console.log(111);
|
|
|
// ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
|
|
|
ctx.drawImage('../../../images/qr_code.jpg', 180, 320, 60, 60);//小程序码
|
|
|
//标题
|
|
|
ctx.setFontSize(12);
|
|
|
ctx.setFillStyle('#000');
|
|
|
ctx.textAlign = "left";
|
|
|
// console.log(111);
|
|
|
ctx.fillText(self.data.detail.title, 16, 306.5);
|
|
|
ctx.fillText(self.data.detail.title, 15.5, 307);
|
|
|
ctx.restore();
|
|
|
//地点
|
|
|
ctx.setFontSize(9);
|
|
|
ctx.setFillStyle('#000000');
|
|
|
ctx.fillText('地点:', 16, 325);
|
|
|
const text = self.data.detail.name;
|
|
|
var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
|
|
|
var temp = "";
|
|
|
var row = [];
|
|
|
ctx.setFontSize(9);
|
|
|
ctx.setFillStyle('#000000');
|
|
|
for (var a = 0; a < chr.length; a++) {
|
|
|
if (ctx.measureText(temp).width < 100) {
|
|
|
temp += chr[a];
|
|
|
}
|
|
|
else {
|
|
|
a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比
|
|
|
row.push(temp);
|
|
|
temp = "";
|
|
|
}
|
|
|
}
|
|
|
row.push(temp);
|
|
|
|
|
|
//如果数组长度大于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++) {
|
|
|
if (ctx.measureText(test).width < 100) {
|
|
|
test += rowPart[a];
|
|
|
}
|
|
|
else {
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
empty.push(test);
|
|
|
var group = empty[0] + "...";//这里只显示一行,超出的用...表示
|
|
|
rowCut.splice(0, 1, group);
|
|
|
row = rowCut;
|
|
|
}
|
|
|
for (var b = 0; b < row.length; b++) {
|
|
|
ctx.fillText(row[b], 40, 325 + b * 16, 150);
|
|
|
}
|
|
|
ctx.restore();
|
|
|
//时间
|
|
|
ctx.setFontSize(9);
|
|
|
ctx.setFillStyle('#333333');
|
|
|
ctx.fillText('时间:', 16, 340);
|
|
|
ctx.fillText(self.data.end_time, 40, 340);
|
|
|
ctx.restore();
|
|
|
// ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
|
|
|
//成功执行,draw方法中进行回调
|
|
|
ctx.draw(true, function () {
|
|
|
// wx.hideLoading();
|
|
|
console.log("draw callback success");
|
|
|
self.setData({can_save: true,show_canvas: true});
|
|
|
// console.log(self.data.can_save);
|
|
|
})
|
|
|
},
|
|
|
//获取保存到相册的权限
|
|
|
getPower() {
|
|
|
const that = this;
|
|
|
//保存临时图片
|
|
|
wx.getSetting({
|
|
|
success(res) {
|
|
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
|
wx.authorize({
|
|
|
scope: 'scope.writePhotosAlbum',
|
|
|
success() { //这里是用户同意授权后的回调
|
|
|
that.savePic();
|
|
|
},
|
|
|
fail() { //这里是用户拒绝授权后的回调
|
|
|
wx.showModal({
|
|
|
title: '提示',
|
|
|
content: '若不打开授权,则无法将图片保存在相册中!',
|
|
|
showCancel: true,
|
|
|
cancelText: '暂不授权',
|
|
|
cancelColor: '#000000',
|
|
|
confirmText: '去授权',
|
|
|
confirmColor: '#3CC51F',
|
|
|
success: function (res) {
|
|
|
if (res.confirm) {
|
|
|
wx.openSetting({
|
|
|
//调起客户端小程序设置界面,返回用户设置的操作结果。
|
|
|
success: function (ret) {
|
|
|
if (ret.authSetting["scope.writePhotosAlbum"] == true) {
|
|
|
wx.showToast({
|
|
|
title: '授权成功',
|
|
|
icon: 'none',
|
|
|
duration: 1000
|
|
|
});
|
|
|
//再次授权,保存到相册
|
|
|
that.savePic();
|
|
|
} else {
|
|
|
wx.showToast({
|
|
|
title: '授权失败',
|
|
|
icon: 'none',
|
|
|
duration: 1000
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
wx.showToast({
|
|
|
title: '授权失败',
|
|
|
icon: 'none',
|
|
|
duration: 1000
|
|
|
})
|
|
|
// console.log('用户点击取消')
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
} else { //用户已经授权过了
|
|
|
console.log('用户已经授权过了')
|
|
|
that.savePic();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
},
|
|
|
savePic() {
|
|
|
// console.log('是否能保存',this.data.can_save);
|
|
|
if(this.data.can_save) {
|
|
|
wx.canvasToTempFilePath({
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
width: 280,
|
|
|
height: 400,
|
|
|
destWidth: 840,//是width的3倍
|
|
|
destHeight: 1280,//是高的3.2倍
|
|
|
canvasId: 'canvas',
|
|
|
fileType: 'jpg',
|
|
|
quality:1,
|
|
|
success: function (res) {
|
|
|
// console.log("get tempfilepath(success) is:", res.tempFilePath);
|
|
|
//将图片保存在系统相册中(应先获取权限,)
|
|
|
wx.saveImageToPhotosAlbum({
|
|
|
filePath: res.tempFilePath,
|
|
|
success(res) {
|
|
|
wx.showToast({title:'保存成功',icon:'none'});
|
|
|
console.log("save photo is success")
|
|
|
},
|
|
|
fail: function () {
|
|
|
wx.showToast({title:'保存失败',icon:'none'});
|
|
|
console.log("save photo is fail")
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
fail: function () {
|
|
|
console.log('get tempfilepath is fail')
|
|
|
}
|
|
|
})
|
|
|
}else {
|
|
|
wx.showLoading({title:'加载中',icon:'loading',duration:1000})
|
|
|
}
|
|
|
|
|
|
},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/
|
|
|
onLoad: function (options) {
|
|
|
// console.log('详情options', options);
|
|
|
this.setData({detail_id: +options.id ? +options.id : ''});
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
*/
|
|
|
onReady: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
*/
|
|
|
onShow: function () {
|
|
|
this.getDetail();
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
*/
|
|
|
onHide: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
*/
|
|
|
onUnload: function () {
|
|
|
clearTimeout(t)
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
*/
|
|
|
onPullDownRefresh: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
*/
|
|
|
onReachBottom: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 用户点击右上角分享
|
|
|
*/
|
|
|
onShareAppMessage: function (res) {
|
|
|
// console.log('转发res',res);
|
|
|
let self = this;
|
|
|
if(res.from === 'button') {
|
|
|
return {
|
|
|
title: self.data.detail.title, // 默认是小程序的名称(可以写slogan等)
|
|
|
path: '/pages/activity/detail/detail?id=' + self.data.detail_id, // 默认是当前页面,必须是以‘/’开头的完整路径
|
|
|
imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
|
|
success: function (res) {
|
|
|
if (res.errMsg == 'shareAppMessage:ok') {
|
|
|
console.log('转发成功之后');
|
|
|
}
|
|
|
},
|
|
|
fail: function () {
|
|
|
// 转发失败之后的回调
|
|
|
if (res.errMsg == 'shareAppMessage:fail cancel') {
|
|
|
// 用户取消转发
|
|
|
} else if (res.errMsg == 'shareAppMessage:fail') {
|
|
|
// 转发失败,其中 detail message 为详细失败信息
|
|
|
}
|
|
|
},
|
|
|
complete: function () {
|
|
|
// 转发结束之后的回调(转发成不成功都会执行)
|
|
|
console.log('转发结束之后');
|
|
|
}
|
|
|
}
|
|
|
}else {
|
|
|
return {
|
|
|
title: self.data.detail.title, // 默认是小程序的名称(可以写slogan等)
|
|
|
path: '/pages/activity/detail/detail?id=' + self.data.detail_id, // 默认是当前页面,必须是以‘/’开头的完整路径
|
|
|
imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
|
|
success: function (res) {
|
|
|
if (res.errMsg == 'shareAppMessage:ok') {
|
|
|
console.log('转发成功之后');
|
|
|
}
|
|
|
},
|
|
|
fail: function () {
|
|
|
// 转发失败之后的回调
|
|
|
if (res.errMsg == 'shareAppMessage:fail cancel') {
|
|
|
// 用户取消转发
|
|
|
} else if (res.errMsg == 'shareAppMessage:fail') {
|
|
|
// 转发失败,其中 detail message 为详细失败信息
|
|
|
}
|
|
|
},
|
|
|
complete: function () {
|
|
|
// 转发结束之后的回调(转发成不成功都会执行)
|
|
|
console.log('转发结束之后');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// pages/activity/detail/detail.js
|
|
|
const app = getApp();
|
|
|
var t = null;
|
|
|
|
|
|
Page({
|
|
|
|
|
|
/**
|
|
|
* 页面的初始数据
|
|
|
*/
|
|
|
data: {
|
|
|
current_swiper: 0,
|
|
|
slide: [],
|
|
|
peopleList: [],
|
|
|
num: 1,
|
|
|
actEndTimeList: [],
|
|
|
is_zan: false,
|
|
|
display:false,
|
|
|
content:'',
|
|
|
is_ask:false,
|
|
|
is_reply:false,
|
|
|
placeholder:'输入您的留言',
|
|
|
is_showRelease_modal:false,
|
|
|
is_join:false,
|
|
|
img_heights: [], //图片宽度
|
|
|
img_width: 750, //默认
|
|
|
show_canvas: false,
|
|
|
can_save:false,
|
|
|
},
|
|
|
//获取图片真实宽度
|
|
|
imageLoad: function (e) {
|
|
|
var img_width = e.detail.width,
|
|
|
img_height = e.detail.height,
|
|
|
//宽高比
|
|
|
ratio = img_width / img_height;
|
|
|
// console.log(img_width, img_height);
|
|
|
//计算的高度值
|
|
|
var viewHeight = 750 / ratio;
|
|
|
var img_height = viewHeight;
|
|
|
var img_heights = this.data.img_heights;
|
|
|
//把每一张图片的对应的高度记录到数组里
|
|
|
img_heights[e.target.dataset.id] = img_height;
|
|
|
this.setData({
|
|
|
img_heights: img_heights
|
|
|
})
|
|
|
},
|
|
|
//查看我的订单
|
|
|
goMyOrder() {
|
|
|
this.setData({is_showRelease_modal:false,});
|
|
|
wx.navigateTo({url:'/pages/order/order-detail/order-detail?id=' + this.data.order_id})
|
|
|
},
|
|
|
//完成按钮
|
|
|
goBack() {
|
|
|
wx.redirectTo({url:'/pages/index/index'})
|
|
|
},
|
|
|
disableScroll() {
|
|
|
},
|
|
|
handleBackground() {
|
|
|
this.setData({is_showRelease_modal:false,})
|
|
|
},
|
|
|
// 问一问
|
|
|
ask(e) {
|
|
|
// console.log('前问一问-display', this.data.display);
|
|
|
this.setData({
|
|
|
display: !this.data.display,
|
|
|
is_ask:true,is_reply:false,
|
|
|
content:'' ,
|
|
|
placeholder:'输入您的留言',
|
|
|
});
|
|
|
// console.log('后问一问-display', this.data.display);
|
|
|
// wx.navigateTo({
|
|
|
// url: '/pages/comment/comment?activity_id=' + this.data.detail_id
|
|
|
// + '&common_id=' + 0
|
|
|
// })
|
|
|
// console.log('问',e.detail.value);
|
|
|
// this.setData({focus:true})
|
|
|
},
|
|
|
//输入评论内容
|
|
|
inputComment(e) {
|
|
|
this.setData({ content: e.detail.value });
|
|
|
},
|
|
|
//发送评论/回复
|
|
|
clickComment(e) {
|
|
|
// console.log('评论', e);
|
|
|
this.setData({ display: false });
|
|
|
if(this.data.content === '' ) {
|
|
|
wx.showToast({title:'请输入内容',icon:'none'})
|
|
|
}else {
|
|
|
let url = '/portal/Active/common';
|
|
|
let params = {
|
|
|
token:wx.getStorageSync('token'),
|
|
|
activeId:this.data.detail_id,
|
|
|
commonId: this.data.is_ask?0:this.data.commet_id,
|
|
|
content:this.data.content,
|
|
|
formId:e.detail.formId,
|
|
|
};
|
|
|
app.post(url,params,{}).then((res)=>{
|
|
|
// console.log('提交评论',res);
|
|
|
if(+res.code === 1) {
|
|
|
wx.showToast({title:this.data.is_ask?'留言成功':'回复成功',icon:'none',});
|
|
|
this.getDetail();
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
//评论input失去焦点
|
|
|
blur() {
|
|
|
this.setData({ display: false });
|
|
|
},
|
|
|
//点击键盘上的完成
|
|
|
confirm() {
|
|
|
this.setData({ display: false });
|
|
|
this.clickComment();
|
|
|
},
|
|
|
//回复
|
|
|
reply(e) {
|
|
|
// console.log('回复', e);
|
|
|
const id = e.currentTarget.dataset.id;
|
|
|
this.setData({
|
|
|
display: !this.data.display,
|
|
|
is_ask:false,is_reply:true,
|
|
|
commet_id:id,content:'' ,
|
|
|
placeholder:'输入您的回复',
|
|
|
});
|
|
|
// wx.navigateTo({
|
|
|
// url: '/pages/comment/comment?is_reply=' + true
|
|
|
// + '&activity_id=' + this.data.detail_id + '&common_id=' + id
|
|
|
// })
|
|
|
},
|
|
|
//收藏/取消收藏
|
|
|
collect() {
|
|
|
// console.log('收藏');
|
|
|
let self = this;
|
|
|
let url = '/portal/Active/collection';
|
|
|
let url_del = '/portal/Active/delCollection';
|
|
|
let header = {
|
|
|
"XX-Token": wx.getStorageSync('token')
|
|
|
};
|
|
|
let params = {
|
|
|
token: wx.getStorageSync('token'),
|
|
|
activeId: self.data.detail_id,
|
|
|
};
|
|
|
if (self.data.is_collect) {
|
|
|
app.post(url_del, params, header).then((res) => {
|
|
|
// console.log('取消收藏', res);
|
|
|
if (+res.code === 1) {
|
|
|
wx.showToast({title: res.message, icon: 'none'});
|
|
|
self.setData({
|
|
|
is_collect: 0
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
app.post(url, params, header).then((res) => {
|
|
|
// console.log('收藏', res);
|
|
|
if (+res.code === 1) {
|
|
|
wx.showToast({title: res.message, icon: 'none'});
|
|
|
self.setData({
|
|
|
is_collect: 1
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
},
|
|
|
//点赞
|
|
|
clickZan(e) {
|
|
|
let self = this;
|
|
|
const id = e.currentTarget.dataset.id;
|
|
|
const index = e.currentTarget.dataset.index;
|
|
|
let url = '/portal/Active/perfect';
|
|
|
let header = {
|
|
|
"XX-Token": wx.getStorageSync('token')
|
|
|
};
|
|
|
let params = {
|
|
|
token: wx.getStorageSync('token'),
|
|
|
commonId: id,
|
|
|
};
|
|
|
app.post(url, params, {}).then((res) => {
|
|
|
// console.log('点赞', res);
|
|
|
if (+res.code === 1) { //
|
|
|
wx.showToast({title: res.message, icon: 'none'});
|
|
|
self.setData({
|
|
|
[`commentList[${index}].is_prefect`]: true,
|
|
|
[`commentList[${index}].prefect`]: res.message == '该评论已赞'?+self.data.commentList[index].prefect:+self.data.commentList[index].prefect + 1,
|
|
|
});
|
|
|
// console.log('paise_user', paise_user);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
swiperChange(e) {
|
|
|
// console.log(e);
|
|
|
this.setData({current_swiper: e.detail.current})
|
|
|
},
|
|
|
onPageScroll(e) {
|
|
|
// console.log('页面滚动', e);
|
|
|
if (e.scrollTop > 140) {
|
|
|
this.setData({hidden_top: true})
|
|
|
} else if (e.scrollTop <= 140) {
|
|
|
this.setData({hidden_top: false})
|
|
|
}
|
|
|
},
|
|
|
// 增加数量
|
|
|
addCount(e) {
|
|
|
// let k = e.currentTarget.dataset.idx;
|
|
|
// let t = e.currentTarget.dataset.children_idx;
|
|
|
// let cartslist = this.data.cartslist;
|
|
|
// let num = cartslist[k].children[t].num;
|
|
|
// let product_id = cartslist[k].children[t].product_id;
|
|
|
let num = this.data.num;
|
|
|
num++;
|
|
|
this.setData({
|
|
|
num: num
|
|
|
});
|
|
|
},
|
|
|
// 减少数量
|
|
|
minusCount(e) {
|
|
|
let num = this.data.num;
|
|
|
if (num <= 1) {
|
|
|
return false;
|
|
|
}
|
|
|
num--;
|
|
|
this.setData({
|
|
|
num: num
|
|
|
});
|
|
|
},
|
|
|
//获取详情
|
|
|
getDetail() {
|
|
|
const self = this;
|
|
|
// console.log('city', self.data.city);
|
|
|
let url = '/portal/Active/activeDetail';
|
|
|
let params = {
|
|
|
activeId: self.data.detail_id,
|
|
|
token: wx.getStorageSync('token'),
|
|
|
};
|
|
|
let header = {
|
|
|
"token": wx.getStorageSync('token')
|
|
|
};
|
|
|
app.post(url, params, {}).then((res) => {
|
|
|
// console.log('获取详情', res, app.initTime(res.data.active.surplus));
|
|
|
if (+res.code === 1) {
|
|
|
self.setData({
|
|
|
detail: res.data.active,
|
|
|
'detail.time': app.initTime(res.data.active.surplus),
|
|
|
end_time: res.data.active.time,
|
|
|
over_hours: res.data.active.over_time,//几小时截止
|
|
|
join_people: res.data.son,
|
|
|
commentList: res.data.common,
|
|
|
is_collect: res.data.is_collect,
|
|
|
count: res.data.count, // 留言板
|
|
|
is_send:res.data.is_send,//能否参加1:不能2:能
|
|
|
});
|
|
|
self.getCode();//获取二维码(此二维码不能进入活动详情,已改为小程序码)
|
|
|
// (0全部,2待拼成,3人数不足未拼成,4已拼成,5已取消,6已完成,7已评价,8已拼成(活动未结束),9删除
|
|
|
const status = res.data.active.status;
|
|
|
if (status === 2 || status === 6 || status === 7 || status === 8) {
|
|
|
// console.log('调用倒计时');
|
|
|
self.countDown();
|
|
|
} else {
|
|
|
// console.log('不调用倒计时');
|
|
|
let countDownArr = [];
|
|
|
let obj = null;
|
|
|
obj = {
|
|
|
day: '00',
|
|
|
hou: '00',
|
|
|
min: '00',
|
|
|
sec: '00'
|
|
|
};
|
|
|
countDownArr.push(obj);
|
|
|
this.setData({
|
|
|
'detail.time': countDownArr,
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
// wx.hideLoading()
|
|
|
})
|
|
|
|
|
|
},
|
|
|
timeFormat(param) { //小于10的格式化函数
|
|
|
return param < 10 ? '0' + param : param;
|
|
|
},
|
|
|
time() {
|
|
|
const self = this;
|
|
|
self.data.detail.surplus--;
|
|
|
//定時器,每秒重新計算
|
|
|
// setTimeout(function () {
|
|
|
// self.time();
|
|
|
// },1000)
|
|
|
},
|
|
|
countDown() { //倒计时函数
|
|
|
t = setTimeout(this.countDown, 1000);
|
|
|
let countDownArr = [];
|
|
|
let obj = null;
|
|
|
if (this.data.detail.surplus > 0) { //未结束
|
|
|
this.time();
|
|
|
// console.log('surplus', this.data.detail.surplus);
|
|
|
// t = setTimeout(this.countDown, 1000);
|
|
|
const time = app.initTime(this.data.detail.surplus);
|
|
|
// console.log('time', time);
|
|
|
obj = {
|
|
|
day: time[0].day,
|
|
|
hou: time[0].hou,
|
|
|
min: time[0].min,
|
|
|
sec: time[0].sec
|
|
|
};
|
|
|
t;
|
|
|
} else {
|
|
|
obj = {
|
|
|
day: '00',
|
|
|
hou: '00',
|
|
|
min: '00',
|
|
|
sec: '00'
|
|
|
};
|
|
|
clearTimeout(t);
|
|
|
this.end();
|
|
|
}
|
|
|
countDownArr.push(obj);
|
|
|
// 渲染,然后每隔一秒执行一次倒计时函数
|
|
|
this.setData({
|
|
|
// countDownList: countDownArr,
|
|
|
'detail.time': countDownArr,
|
|
|
});
|
|
|
// console.log('time',this.data.detail.time);
|
|
|
},
|
|
|
//倒计时结束
|
|
|
end() {
|
|
|
const self = this;
|
|
|
let url = '/portal/Active/activity';
|
|
|
let params = {
|
|
|
activeId: self.data.detail_id,
|
|
|
};
|
|
|
let header = {
|
|
|
"token": wx.getStorageSync('token')
|
|
|
};
|
|
|
app.post(url, params, {}).then((res) => {
|
|
|
// console.log('倒计时结束', res);
|
|
|
if (+res.code === 1) {
|
|
|
// wx.showToast({title:'拼活动结束',icon:'success'})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//导航
|
|
|
getNavigate() {
|
|
|
const self = this;
|
|
|
const arr = self.data.detail.latng.split(',');
|
|
|
// console.log('arr', arr, arr[0], arr[1]);
|
|
|
wx.openLocation({//使用微信内置地图查看位置。
|
|
|
latitude: +arr[1],//要去的纬度-地址
|
|
|
longitude: +arr[0],//要去的经度-地址
|
|
|
// lat:39.086437,
|
|
|
// lng:117.122583,
|
|
|
name: self.data.detail.address,
|
|
|
address: self.data.detail.address
|
|
|
})
|
|
|
},
|
|
|
//确认拼活动
|
|
|
confirmJoin(e) {
|
|
|
const self = this;
|
|
|
// console.log('已参与人数',self.data.join_people.length);
|
|
|
// if(+self.data.is_send === 2){ //可参与
|
|
|
// if(self.data.join_people.length + self.data.num > self.data.detail.max) {
|
|
|
// wx.showToast({title:'参加人数已超过剩余名额',icon:'none'})
|
|
|
// }else if(self.data.join_people.length + self.data.num == self.data.detail.max){
|
|
|
// wx.showToast({title:'名额已满',icon:'none'})
|
|
|
// } else {
|
|
|
|
|
|
let url = '/portal/Active/join';
|
|
|
let params = {
|
|
|
token: wx.getStorageSync('token'),
|
|
|
number: self.data.num,
|
|
|
activeId: self.data.detail_id,
|
|
|
formId: e.detail.formId,
|
|
|
};
|
|
|
let header = {
|
|
|
"token": wx.getStorageSync('token')
|
|
|
};
|
|
|
app.post(url, params, {}).then((res) => {
|
|
|
// console.log('确认拼活动', res);
|
|
|
if (+res.code === 1) {
|
|
|
// wx.showToast({title: '拼活动成功', icon: 'success'});
|
|
|
self.setData({is_showRelease_modal:true,order_id:+res.data.orderId,is_join:true});
|
|
|
self.getDetail();
|
|
|
}else if(+res.code === 0) { //参与失败按钮还是确认拼活动
|
|
|
self.setData({is_join:false});
|
|
|
}
|
|
|
})
|
|
|
// }
|
|
|
// }
|
|
|
},
|
|
|
//获取活动二维码
|
|
|
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}, () => {
|
|
|
this.drawCard();
|
|
|
})
|
|
|
},
|
|
|
hideCanvasMask() {
|
|
|
// this.setData({show_canvas: true});
|
|
|
},
|
|
|
//关闭分享卡片
|
|
|
closeCanvas() {
|
|
|
this.setData({show_canvas: false});
|
|
|
// wx.navigateBack({delta:1})
|
|
|
},
|
|
|
//保存图片到手机相册
|
|
|
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)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 画圆角 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');//画圆角
|
|
|
// self.roundRect(ctx,0,0,350,402,10,'#000','#000');//画圆角
|
|
|
// ctx.arc(150, 75, 50, 0, 2 * Math.PI);//剪切
|
|
|
// ctx.setFillStyle('#ffffff');
|
|
|
// ctx.fill();
|
|
|
// ctx.clip();
|
|
|
//填充背景色
|
|
|
ctx.fillStyle = '#fff';
|
|
|
ctx.fillRect(0, 0, 280, 400);
|
|
|
// console.log(self.data.local_img);
|
|
|
// console.log(self.data.qr_code);
|
|
|
//将图片转化为画布
|
|
|
ctx.drawImage(self.data.local_img, 0, 0, 280, 280);//详情图
|
|
|
// console.log(111);
|
|
|
// ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
|
|
|
ctx.drawImage('../../../images/qr_code.jpg', 180, 320, 60, 60);//小程序码
|
|
|
//标题
|
|
|
ctx.setFontSize(12);
|
|
|
ctx.setFillStyle('#000');
|
|
|
ctx.textAlign = "left";
|
|
|
// console.log(111);
|
|
|
ctx.fillText(self.data.detail.title, 16, 306.5);
|
|
|
ctx.fillText(self.data.detail.title, 15.5, 307);
|
|
|
ctx.restore();
|
|
|
//地点
|
|
|
ctx.setFontSize(9);
|
|
|
ctx.setFillStyle('#000000');
|
|
|
ctx.fillText('地点:', 16, 325);
|
|
|
const text = self.data.detail.name;
|
|
|
var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
|
|
|
var temp = "";
|
|
|
var row = [];
|
|
|
ctx.setFontSize(9);
|
|
|
ctx.setFillStyle('#000000');
|
|
|
for (var a = 0; a < chr.length; a++) {
|
|
|
if (ctx.measureText(temp).width < 100) {
|
|
|
temp += chr[a];
|
|
|
}
|
|
|
else {
|
|
|
a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比
|
|
|
row.push(temp);
|
|
|
temp = "";
|
|
|
}
|
|
|
}
|
|
|
row.push(temp);
|
|
|
|
|
|
//如果数组长度大于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++) {
|
|
|
if (ctx.measureText(test).width < 100) {
|
|
|
test += rowPart[a];
|
|
|
}
|
|
|
else {
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
empty.push(test);
|
|
|
var group = empty[0] + "...";//这里只显示一行,超出的用...表示
|
|
|
rowCut.splice(0, 1, group);
|
|
|
row = rowCut;
|
|
|
}
|
|
|
for (var b = 0; b < row.length; b++) {
|
|
|
ctx.fillText(row[b], 40, 325 + b * 16, 150);
|
|
|
}
|
|
|
ctx.restore();
|
|
|
//时间
|
|
|
ctx.setFontSize(9);
|
|
|
ctx.setFillStyle('#333333');
|
|
|
ctx.fillText('时间:', 16, 340);
|
|
|
ctx.fillText(self.data.end_time, 40, 340);
|
|
|
ctx.restore();
|
|
|
// ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
|
|
|
//成功执行,draw方法中进行回调
|
|
|
ctx.draw(true, function () {
|
|
|
// wx.hideLoading();
|
|
|
console.log("draw callback success");
|
|
|
self.setData({can_save: true,show_canvas: true});
|
|
|
// console.log(self.data.can_save);
|
|
|
})
|
|
|
},
|
|
|
//获取保存到相册的权限
|
|
|
getPower() {
|
|
|
const that = this;
|
|
|
//保存临时图片
|
|
|
wx.getSetting({
|
|
|
success(res) {
|
|
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
|
wx.authorize({
|
|
|
scope: 'scope.writePhotosAlbum',
|
|
|
success() { //这里是用户同意授权后的回调
|
|
|
that.savePic();
|
|
|
},
|
|
|
fail() { //这里是用户拒绝授权后的回调
|
|
|
wx.showModal({
|
|
|
title: '提示',
|
|
|
content: '若不打开授权,则无法将图片保存在相册中!',
|
|
|
showCancel: true,
|
|
|
cancelText: '暂不授权',
|
|
|
cancelColor: '#000000',
|
|
|
confirmText: '去授权',
|
|
|
confirmColor: '#3CC51F',
|
|
|
success: function (res) {
|
|
|
if (res.confirm) {
|
|
|
wx.openSetting({
|
|
|
//调起客户端小程序设置界面,返回用户设置的操作结果。
|
|
|
success: function (ret) {
|
|
|
if (ret.authSetting["scope.writePhotosAlbum"] == true) {
|
|
|
wx.showToast({
|
|
|
title: '授权成功',
|
|
|
icon: 'none',
|
|
|
duration: 1000
|
|
|
});
|
|
|
//再次授权,保存到相册
|
|
|
that.savePic();
|
|
|
} else {
|
|
|
wx.showToast({
|
|
|
title: '授权失败',
|
|
|
icon: 'none',
|
|
|
duration: 1000
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
wx.showToast({
|
|
|
title: '授权失败',
|
|
|
icon: 'none',
|
|
|
duration: 1000
|
|
|
})
|
|
|
// console.log('用户点击取消')
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
} else { //用户已经授权过了
|
|
|
console.log('用户已经授权过了')
|
|
|
that.savePic();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
},
|
|
|
savePic() {
|
|
|
// console.log('是否能保存',this.data.can_save);
|
|
|
if(this.data.can_save) {
|
|
|
wx.canvasToTempFilePath({
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
width: 280,
|
|
|
height: 400,
|
|
|
destWidth: 840,//是width的3倍
|
|
|
destHeight: 1280,//是高的3.2倍
|
|
|
canvasId: 'canvas',
|
|
|
fileType: 'jpg',
|
|
|
quality:1,
|
|
|
success: function (res) {
|
|
|
// console.log("get tempfilepath(success) is:", res.tempFilePath);
|
|
|
//将图片保存在系统相册中(应先获取权限,)
|
|
|
wx.saveImageToPhotosAlbum({
|
|
|
filePath: res.tempFilePath,
|
|
|
success(res) {
|
|
|
wx.showToast({title:'保存成功',icon:'none'});
|
|
|
console.log("save photo is success")
|
|
|
},
|
|
|
fail: function () {
|
|
|
wx.showToast({title:'保存失败',icon:'none'});
|
|
|
console.log("save photo is fail")
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
fail: function () {
|
|
|
console.log('get tempfilepath is fail')
|
|
|
}
|
|
|
})
|
|
|
}else {
|
|
|
wx.showLoading({title:'加载中',icon:'loading',duration:1000})
|
|
|
}
|
|
|
|
|
|
},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/
|
|
|
onLoad: function (options) {
|
|
|
// console.log('详情options', options);
|
|
|
this.setData({detail_id: +options.id ? +options.id : ''});
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
*/
|
|
|
onReady: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
*/
|
|
|
onShow: function () {
|
|
|
this.getDetail();
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
*/
|
|
|
onHide: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
*/
|
|
|
onUnload: function () {
|
|
|
clearTimeout(t)
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
*/
|
|
|
onPullDownRefresh: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
*/
|
|
|
onReachBottom: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 用户点击右上角分享
|
|
|
*/
|
|
|
onShareAppMessage: function (res) {
|
|
|
// console.log('转发res',res);
|
|
|
let self = this;
|
|
|
if(res.from === 'button') {
|
|
|
return {
|
|
|
title: self.data.detail.title, // 默认是小程序的名称(可以写slogan等)
|
|
|
path: '/pages/activity/detail/detail?id=' + self.data.detail_id, // 默认是当前页面,必须是以‘/’开头的完整路径
|
|
|
imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
|
|
success: function (res) {
|
|
|
if (res.errMsg == 'shareAppMessage:ok') {
|
|
|
console.log('转发成功之后');
|
|
|
}
|
|
|
},
|
|
|
fail: function () {
|
|
|
// 转发失败之后的回调
|
|
|
if (res.errMsg == 'shareAppMessage:fail cancel') {
|
|
|
// 用户取消转发
|
|
|
} else if (res.errMsg == 'shareAppMessage:fail') {
|
|
|
// 转发失败,其中 detail message 为详细失败信息
|
|
|
}
|
|
|
},
|
|
|
complete: function () {
|
|
|
// 转发结束之后的回调(转发成不成功都会执行)
|
|
|
console.log('转发结束之后');
|
|
|
}
|
|
|
}
|
|
|
}else {
|
|
|
return {
|
|
|
title: self.data.detail.title, // 默认是小程序的名称(可以写slogan等)
|
|
|
path: '/pages/activity/detail/detail?id=' + self.data.detail_id, // 默认是当前页面,必须是以‘/’开头的完整路径
|
|
|
imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
|
|
success: function (res) {
|
|
|
if (res.errMsg == 'shareAppMessage:ok') {
|
|
|
console.log('转发成功之后');
|
|
|
}
|
|
|
},
|
|
|
fail: function () {
|
|
|
// 转发失败之后的回调
|
|
|
if (res.errMsg == 'shareAppMessage:fail cancel') {
|
|
|
// 用户取消转发
|
|
|
} else if (res.errMsg == 'shareAppMessage:fail') {
|
|
|
// 转发失败,其中 detail message 为详细失败信息
|
|
|
}
|
|
|
},
|
|
|
complete: function () {
|
|
|
// 转发结束之后的回调(转发成不成功都会执行)
|
|
|
console.log('转发结束之后');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
}) |
|
|
\ No newline at end of file |
...
|
...
|
|