|
|
|
@ -7,500 +7,515 @@ import util from '../../../utils/util' |
|
|
|
let app = getApp() |
|
|
|
Page({ |
|
|
|
|
|
|
|
/** |
|
|
|
* 页面的初始数据 |
|
|
|
*/ |
|
|
|
data: { |
|
|
|
fixed: false, |
|
|
|
type: 1, |
|
|
|
top: 0, |
|
|
|
info: null, |
|
|
|
comment: [], |
|
|
|
commentTotal: 0, |
|
|
|
retailId: "", |
|
|
|
retailSkuId: "", |
|
|
|
shareImg: null, |
|
|
|
showShareFlag: false |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 页面的初始数据 |
|
|
|
*/ |
|
|
|
data: { |
|
|
|
fixed: false, |
|
|
|
type: 1, |
|
|
|
top: 0, |
|
|
|
info: null, |
|
|
|
comment: [], |
|
|
|
commentTotal: 0, |
|
|
|
retailId: "", |
|
|
|
retailSkuId: "", |
|
|
|
shareImg: null, |
|
|
|
showShareFlag: false, |
|
|
|
showQrCode: false, |
|
|
|
wxqrcode: null |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面加载 |
|
|
|
*/ |
|
|
|
onLoad: function (options) { |
|
|
|
let rect = wx.getMenuButtonBoundingClientRect(); |
|
|
|
let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight; |
|
|
|
this.setData({ |
|
|
|
top: height, |
|
|
|
id: options.id |
|
|
|
}) |
|
|
|
if (options.retailId) { |
|
|
|
this.setData({ |
|
|
|
retailId: options.retailId |
|
|
|
}) |
|
|
|
} |
|
|
|
let api = commonApi._post; |
|
|
|
if (wx.getStorageSync("jstrip_token")) { |
|
|
|
api = commonApi.user_post; |
|
|
|
} |
|
|
|
api("product/get_product_detail", { |
|
|
|
id: options.id |
|
|
|
}).then(res => { |
|
|
|
res.data.display_tags = (res.data.display_tags ? res.data.display_tags.split(",") : []).splice(0, 2); |
|
|
|
|
|
|
|
if (options.skuid) { |
|
|
|
let sku = res.data.sku.find(item => item.id == options.skuid); |
|
|
|
res.data.sku = [sku]; |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面加载 |
|
|
|
*/ |
|
|
|
onLoad: function (options) { |
|
|
|
let rect = wx.getMenuButtonBoundingClientRect(); |
|
|
|
let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight; |
|
|
|
this.setData({ |
|
|
|
retailSkuId: options.skuid |
|
|
|
}) |
|
|
|
} |
|
|
|
res.data.flag = res.data.sku.find(item=>item.flag=='on')?res.data.flag:0 |
|
|
|
|
|
|
|
this.setData({ |
|
|
|
info: res.data |
|
|
|
}) |
|
|
|
this.BroswerRecord() |
|
|
|
}) |
|
|
|
commonApi._post("product/product_comment_list", { |
|
|
|
product_id: options.id, |
|
|
|
offset: 0, |
|
|
|
limit: 3 |
|
|
|
}).then(res => { |
|
|
|
res.data.list.map(item => { |
|
|
|
item.rate = Number(item.rate) |
|
|
|
}) |
|
|
|
this.setData({ |
|
|
|
commentTotal: res.data.total, |
|
|
|
comment: res.data.list |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
BroswerRecord: function () { |
|
|
|
setTimeout(() => { |
|
|
|
if (app.globalData.uuid) { |
|
|
|
commonApi._post('browse/browse_record', { |
|
|
|
type: "goods", |
|
|
|
title: this.data.info.title, |
|
|
|
drive: "mini", |
|
|
|
source_id: this.data.info.id, |
|
|
|
url: "/pages/info/cardInfo/index?id=" + this.data.info.id, |
|
|
|
uuid: app.globalData.uuid |
|
|
|
}).then(res => { |
|
|
|
top: height, |
|
|
|
id: options.id |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
this.BroswerRecord(); |
|
|
|
} |
|
|
|
}, 500) |
|
|
|
}, |
|
|
|
changeMenu: function (e) { |
|
|
|
let index = e.currentTarget.dataset.index, that = this; |
|
|
|
const query = wx.createSelectorQuery(); //创建节点查询器
|
|
|
|
query.select("#box" + index).boundingClientRect() //选择toViewid获取位置信息
|
|
|
|
query.selectViewport().scrollOffset() //获取页面查询位置的
|
|
|
|
query.exec(function (res) { |
|
|
|
let scrollTop = res[0].top + res[1].scrollTop - 110 * ratio - that.data.top; |
|
|
|
wx.pageScrollTo({ |
|
|
|
scrollTop: scrollTop + 4, |
|
|
|
duration: 0 |
|
|
|
}) |
|
|
|
that.setData({ |
|
|
|
type: index |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
onPageScroll: function (e) { |
|
|
|
let that = this, height = this.data.top; |
|
|
|
let topHeight = height; |
|
|
|
wx.createSelectorQuery().select('#menus').boundingClientRect(function (rect) { |
|
|
|
console.log(rect.top, topHeight) |
|
|
|
if (rect.top <= topHeight) { |
|
|
|
// 此时应该把menus固定在顶部
|
|
|
|
that.setData({ |
|
|
|
fixed: true |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
that.setData({ |
|
|
|
fixed: false |
|
|
|
}) |
|
|
|
} |
|
|
|
// 滚动时判断滚动到哪个部分了
|
|
|
|
const query = wx.createSelectorQuery(); //创建节点查询器
|
|
|
|
query.select("#box1").boundingClientRect() //选择toViewid获取位置信息
|
|
|
|
query.select("#box2").boundingClientRect() //选择toViewid获取位置信息
|
|
|
|
query.select("#box3").boundingClientRect() //选择toViewid获取位置信息
|
|
|
|
query.select("#box4").boundingClientRect() //选择toViewid获取位置信息
|
|
|
|
let minHeight = that.data.fixed ? (110 * ratio + height) : topHeight; |
|
|
|
query.exec(function (res) { |
|
|
|
if (res[3].top < minHeight) { |
|
|
|
that.setData({ |
|
|
|
type: 4 |
|
|
|
}) |
|
|
|
} |
|
|
|
else if (res[2].top < minHeight) { |
|
|
|
that.setData({ |
|
|
|
type: 3 |
|
|
|
}) |
|
|
|
} |
|
|
|
else if (res[1].top < minHeight) { |
|
|
|
that.setData({ |
|
|
|
type: 2 |
|
|
|
}) |
|
|
|
if (options.retailId) { |
|
|
|
this.setData({ |
|
|
|
retailId: options.retailId |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
that.setData({ |
|
|
|
type: 1 |
|
|
|
}) |
|
|
|
let api = commonApi._post; |
|
|
|
if (wx.getStorageSync("jstrip_token")) { |
|
|
|
api = commonApi.user_post; |
|
|
|
} |
|
|
|
}) |
|
|
|
}).exec() |
|
|
|
api("product/get_product_detail", { |
|
|
|
id: options.id |
|
|
|
}).then(res => { |
|
|
|
res.data.display_tags = (res.data.display_tags ? res.data.display_tags.split(",") : []).splice(0, 2); |
|
|
|
|
|
|
|
}, |
|
|
|
order: function () { |
|
|
|
app.globalData.couponInfo = null; |
|
|
|
app.globalData.product = { |
|
|
|
product: this.data.info |
|
|
|
} |
|
|
|
app.globalData.retailId = this.data.retailId; |
|
|
|
util.pagePoint({ |
|
|
|
event:'product_order', |
|
|
|
param:{ |
|
|
|
id:this.data.info.id, |
|
|
|
type:this.data.info.type |
|
|
|
} |
|
|
|
},1) |
|
|
|
wx.setStorageSync('login_from', 'product_order_login') |
|
|
|
wx.setStorageSync('order_from', 'product_order_submit') |
|
|
|
wx.navigateTo({ |
|
|
|
url: '/pages/order/road/index?id=' + this.data.info.id + (this.data.retailSkuId ? ('&skuid=' + this.data.retailSkuId) : '') |
|
|
|
}) |
|
|
|
}, |
|
|
|
pagePoint:function(e){ |
|
|
|
util.pagePoint(e) |
|
|
|
}, |
|
|
|
// 分享
|
|
|
|
share: function () { |
|
|
|
if (!wx.getStorageSync("jstrip_token")) { |
|
|
|
util.pagePoint({ |
|
|
|
event:'product_share_login', |
|
|
|
param:{ |
|
|
|
id:that.data.info.id, |
|
|
|
type:that.data.info.type |
|
|
|
} |
|
|
|
},1) |
|
|
|
commonApi.user_post("user/getMyInfo", {}).then(res => { |
|
|
|
if (options.skuid) { |
|
|
|
let sku = res.data.sku.find(item => item.id == options.skuid); |
|
|
|
res.data.sku = [sku]; |
|
|
|
this.setData({ |
|
|
|
retailSkuId: options.skuid |
|
|
|
}) |
|
|
|
} |
|
|
|
res.data.flag = res.data.sku.find(item => item.flag == 'on') ? res.data.flag : 0 |
|
|
|
|
|
|
|
}) |
|
|
|
return; |
|
|
|
} |
|
|
|
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" |
|
|
|
this.setData({ |
|
|
|
info: res.data |
|
|
|
}) |
|
|
|
this.BroswerRecord() |
|
|
|
}) |
|
|
|
commonApi._post("product/product_comment_list", { |
|
|
|
product_id: options.id, |
|
|
|
offset: 0, |
|
|
|
limit: 3 |
|
|
|
}).then(res => { |
|
|
|
res.data.list.map(item => { |
|
|
|
item.rate = Number(item.rate) |
|
|
|
}) |
|
|
|
this.setData({ |
|
|
|
commentTotal: res.data.total, |
|
|
|
comment: res.data.list |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
BroswerRecord: function () { |
|
|
|
setTimeout(() => { |
|
|
|
if (app.globalData.uuid) { |
|
|
|
commonApi._post('browse/browse_record', { |
|
|
|
type: "goods", |
|
|
|
title: this.data.info.title, |
|
|
|
drive: "mini", |
|
|
|
source_id: this.data.info.id, |
|
|
|
url: "/pages/info/cardInfo/index?id=" + this.data.info.id, |
|
|
|
uuid: app.globalData.uuid |
|
|
|
}).then(res => {}) |
|
|
|
} else { |
|
|
|
this.BroswerRecord(); |
|
|
|
} |
|
|
|
}, 500) |
|
|
|
}, |
|
|
|
changeMenu: function (e) { |
|
|
|
let index = e.currentTarget.dataset.index, |
|
|
|
that = this; |
|
|
|
const query = wx.createSelectorQuery(); //创建节点查询器
|
|
|
|
query.select("#box" + index).boundingClientRect() //选择toViewid获取位置信息
|
|
|
|
query.selectViewport().scrollOffset() //获取页面查询位置的
|
|
|
|
query.exec(function (res) { |
|
|
|
let scrollTop = res[0].top + res[1].scrollTop - 110 * ratio - that.data.top; |
|
|
|
wx.pageScrollTo({ |
|
|
|
scrollTop: scrollTop + 4, |
|
|
|
duration: 0 |
|
|
|
}) |
|
|
|
that.setData({ |
|
|
|
showShareFlag: !that.data.showShareFlag |
|
|
|
type: index |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
onPageScroll: function (e) { |
|
|
|
let that = this, |
|
|
|
height = this.data.top; |
|
|
|
let topHeight = height; |
|
|
|
wx.createSelectorQuery().select('#menus').boundingClientRect(function (rect) { |
|
|
|
console.log(rect.top, topHeight) |
|
|
|
if (rect.top <= topHeight) { |
|
|
|
// 此时应该把menus固定在顶部
|
|
|
|
that.setData({ |
|
|
|
fixed: true |
|
|
|
}) |
|
|
|
} else { |
|
|
|
that.setData({ |
|
|
|
fixed: false |
|
|
|
}) |
|
|
|
} |
|
|
|
// 滚动时判断滚动到哪个部分了
|
|
|
|
const query = wx.createSelectorQuery(); //创建节点查询器
|
|
|
|
query.select("#box1").boundingClientRect() //选择toViewid获取位置信息
|
|
|
|
query.select("#box2").boundingClientRect() //选择toViewid获取位置信息
|
|
|
|
query.select("#box3").boundingClientRect() //选择toViewid获取位置信息
|
|
|
|
query.select("#box4").boundingClientRect() //选择toViewid获取位置信息
|
|
|
|
let minHeight = that.data.fixed ? (110 * ratio + height) : topHeight; |
|
|
|
query.exec(function (res) { |
|
|
|
if (res[3].top < minHeight) { |
|
|
|
that.setData({ |
|
|
|
type: 4 |
|
|
|
}) |
|
|
|
} else if (res[2].top < minHeight) { |
|
|
|
that.setData({ |
|
|
|
type: 3 |
|
|
|
}) |
|
|
|
} else if (res[1].top < minHeight) { |
|
|
|
that.setData({ |
|
|
|
type: 2 |
|
|
|
}) |
|
|
|
} else { |
|
|
|
that.setData({ |
|
|
|
type: 1 |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}).exec() |
|
|
|
|
|
|
|
}, |
|
|
|
order: function () { |
|
|
|
commonApi.user_post('wx/get_user_keep', { |
|
|
|
jumpurl: '/pages/info/roadInfo/index?id=' + this.data.id, |
|
|
|
title: this.data.info.title, |
|
|
|
type: 'mini' |
|
|
|
}).then(res => { |
|
|
|
if (res.data.subscribe == 0) { |
|
|
|
this.setData({ |
|
|
|
wxqrcode: res.data.qrcode, |
|
|
|
showQrCode: true |
|
|
|
}) |
|
|
|
} else { |
|
|
|
app.globalData.couponInfo = null; |
|
|
|
app.globalData.product = { |
|
|
|
product: this.data.info |
|
|
|
} |
|
|
|
app.globalData.retailId = this.data.retailId; |
|
|
|
util.pagePoint({ |
|
|
|
event: 'product_order', |
|
|
|
param: { |
|
|
|
id: this.data.info.id, |
|
|
|
type: this.data.info.type |
|
|
|
} |
|
|
|
}, 1) |
|
|
|
wx.setStorageSync('login_from', 'product_order_login') |
|
|
|
wx.setStorageSync('order_from', 'product_order_submit') |
|
|
|
wx.navigateTo({ |
|
|
|
url: '/pages/order/road/index?id=' + this.data.info.id + (this.data.retailSkuId ? ('&skuid=' + this.data.retailSkuId) : '') |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
pagePoint: function (e) { |
|
|
|
util.pagePoint(e) |
|
|
|
}, |
|
|
|
// 分享
|
|
|
|
share: function () { |
|
|
|
if (!wx.getStorageSync("jstrip_token")) { |
|
|
|
util.pagePoint({ |
|
|
|
event:'product_share_save', |
|
|
|
param:{ |
|
|
|
id:that.data.info.id, |
|
|
|
type:that.data.info.type |
|
|
|
} |
|
|
|
},1) |
|
|
|
}, |
|
|
|
fail(res) { |
|
|
|
event: 'product_share_login', |
|
|
|
param: { |
|
|
|
id: that.data.info.id, |
|
|
|
type: that.data.info.type |
|
|
|
} |
|
|
|
}, 1) |
|
|
|
commonApi.user_post("user/getMyInfo", {}).then(res => { |
|
|
|
|
|
|
|
}) |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!this.data.shareImg) { |
|
|
|
wx.showToast({ |
|
|
|
title: '保存失败', |
|
|
|
icon: 'none' |
|
|
|
title: '图片生成中，稍后再试', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
} |
|
|
|
return; |
|
|
|
} |
|
|
|
this.setData({ |
|
|
|
showShareFlag: !this.data.showShareFlag |
|
|
|
}) |
|
|
|
}, |
|
|
|
complete(res) { |
|
|
|
console.log(res); |
|
|
|
/* 这里判断一下如果没有授权重新打开设置选项 */ |
|
|
|
wx.getSetting({ |
|
|
|
success(res) { |
|
|
|
if (!res.authSetting['scope.writePhotosAlbum']) { |
|
|
|
/* 打开设置的方法 */ |
|
|
|
// opensit();
|
|
|
|
wx.showToast({ |
|
|
|
title: '请打开权限后再试', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 保存
|
|
|
|
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: !that.data.showShareFlag |
|
|
|
}) |
|
|
|
util.pagePoint({ |
|
|
|
event: 'product_share_save', |
|
|
|
param: { |
|
|
|
id: that.data.info.id, |
|
|
|
type: that.data.info.type |
|
|
|
} |
|
|
|
}, 1) |
|
|
|
}, |
|
|
|
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'); |
|
|
|
if (!userinfo) { |
|
|
|
// 去登录
|
|
|
|
return false; |
|
|
|
} |
|
|
|
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/LineDetail?id=' + that.data.info.id + '&sharedUserId=' + userid + '&channel=-1', |
|
|
|
width: 500, |
|
|
|
height: 500, |
|
|
|
padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
|
|
|
|
correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
|
|
|
|
callback: (res) => { |
|
|
|
resolve(res); |
|
|
|
}, |
|
|
|
// 绘制海报
|
|
|
|
drawImg: function () { |
|
|
|
var that = this, |
|
|
|
userinfo = wx.getStorageSync('jstrip_userInfo'); |
|
|
|
if (!userinfo) { |
|
|
|
// 去登录
|
|
|
|
return false; |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
//成功得到图片信息后，开始绘图
|
|
|
|
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.title, 25 * ratio, 450 * ratio, 480 * ratio, ratio); |
|
|
|
// 售价
|
|
|
|
ctx.setFillStyle("#D62828"); |
|
|
|
ctx.setFontSize(40 * ratio); //字大小
|
|
|
|
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
|
|
|
|
let price = that.data.info.price ? ("￥" + (that.data.info.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.display_tags[0]; |
|
|
|
if (subtitle.length > 10) { |
|
|
|
subtitle = subtitle.substr(0, 10) + '...' |
|
|
|
} |
|
|
|
ctx.fillText(subtitle, 25 * ratio, 540 * ratio); |
|
|
|
// ctx.draw();
|
|
|
|
// 划线价
|
|
|
|
// ctx.setFillStyle("#999999");
|
|
|
|
// ctx.setFontSize(32 * ratio); //字大小
|
|
|
|
// ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
|
|
|
|
// let market_price = "￥" + (Number(that.data.info.market_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 |
|
|
|
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/LineDetail?id=' + that.data.info.id + '&sharedUserId=' + userid + '&channel=-1', |
|
|
|
width: 500, |
|
|
|
height: 500, |
|
|
|
padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
|
|
|
|
correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
|
|
|
|
callback: (res) => { |
|
|
|
resolve(res); |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
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-- 是为了防止字符丢失，效果图中有对比
|
|
|
|
//成功得到图片信息后，开始绘图
|
|
|
|
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.title, 25 * ratio, 450 * ratio, 480 * ratio, ratio); |
|
|
|
// 售价
|
|
|
|
ctx.setFillStyle("#D62828"); |
|
|
|
ctx.setFontSize(40 * ratio); //字大小
|
|
|
|
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
|
|
|
|
let price = that.data.info.price ? ("￥" + (that.data.info.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.display_tags[0]; |
|
|
|
if (subtitle.length > 10) { |
|
|
|
subtitle = subtitle.substr(0, 10) + '...' |
|
|
|
} |
|
|
|
ctx.fillText(subtitle, 25 * ratio, 540 * ratio); |
|
|
|
// ctx.draw();
|
|
|
|
// 划线价
|
|
|
|
// ctx.setFillStyle("#999999");
|
|
|
|
// ctx.setFontSize(32 * ratio); //字大小
|
|
|
|
// ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
|
|
|
|
// let market_price = "￥" + (Number(that.data.info.market_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); |
|
|
|
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]; |
|
|
|
//如果数组长度大于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; |
|
|
|
} |
|
|
|
else { |
|
|
|
break; |
|
|
|
for (var b = 0; b < row.length; b++) { |
|
|
|
ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth); |
|
|
|
} |
|
|
|
} |
|
|
|
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 () { |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面初次渲染完成 |
|
|
|
*/ |
|
|
|
onReady: function () { |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面显示 |
|
|
|
*/ |
|
|
|
onShow: function () { |
|
|
|
if (!wx.getStorageSync('jstrip_token')) { |
|
|
|
return; |
|
|
|
} |
|
|
|
if (this.data.info && this.data.info.id) { |
|
|
|
this.drawImg() |
|
|
|
} |
|
|
|
else { |
|
|
|
setTimeout(() => { |
|
|
|
this.onShow() |
|
|
|
}, 200) |
|
|
|
} |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面显示 |
|
|
|
*/ |
|
|
|
onShow: function () { |
|
|
|
if (!wx.getStorageSync('jstrip_token')) { |
|
|
|
return; |
|
|
|
} |
|
|
|
if (this.data.info && this.data.info.id) { |
|
|
|
this.drawImg() |
|
|
|
} else { |
|
|
|
setTimeout(() => { |
|
|
|
this.onShow() |
|
|
|
}, 200) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面隐藏 |
|
|
|
*/ |
|
|
|
onHide: function () { |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面隐藏 |
|
|
|
*/ |
|
|
|
onHide: function () { |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面卸载 |
|
|
|
*/ |
|
|
|
onUnload: function () { |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面卸载 |
|
|
|
*/ |
|
|
|
onUnload: function () { |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 页面相关事件处理函数--监听用户下拉动作 |
|
|
|
*/ |
|
|
|
onPullDownRefresh: function () { |
|
|
|
/** |
|
|
|
* 页面相关事件处理函数--监听用户下拉动作 |
|
|
|
*/ |
|
|
|
onPullDownRefresh: function () { |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 页面上拉触底事件的处理函数 |
|
|
|
*/ |
|
|
|
onReachBottom: function () { |
|
|
|
/** |
|
|
|
* 页面上拉触底事件的处理函数 |
|
|
|
*/ |
|
|
|
onReachBottom: function () { |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 用户点击右上角分享 |
|
|
|
*/ |
|
|
|
onShareAppMessage: function () { |
|
|
|
/** |
|
|
|
* 用户点击右上角分享 |
|
|
|
*/ |
|
|
|
onShareAppMessage: function () { |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}) |
nige
3 years ago