// pages/info/activityInfo/index.js import commonApi from "../../../utils/https/common" let app = getApp() import util from '../../../utils/util' Page({ /** * 页面的初始数据 */ data: { id: null, info: null, retailId: "", shareImg: null, showShareFlag: false }, // 分享 share: function () { if (!wx.getStorageSync("jstrip_token")) { commonApi.user_post("user/getMyInfo", {}).then(res => { }) return; } if (!this.data.shareImg) { wx.showToast({ title: '图片生成中,稍后再试', icon: 'none' }) return; } this.setData({ showShareFlag: !this.data.showShareFlag }) }, gotolocation: function () { let info = this.data.info; if (this.data.info.lat&&this.data.info.lon) { wx.openLocation({ latitude: Number(info.lat), longitude: Number(info.lon) }) } }, pagePoint(e,type) { util.pagePoint(e,type) }, // 保存 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 () { 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.post_url, 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/AppointmentDetail?id=' + that.data.info.id + '&userId=' + userid + '&channel=-1', width: 500, height: 500, padding: 12, // 生成二维码四周自动留边宽度,不传入默认为0 correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度 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); 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 / 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.subtitle; if (that.data.info.subtitle.length > 10) { subtitle = that.data.info.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 = "¥" + (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); //如果数组长度大于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); } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let id = options.id; this.setData({ id: id }) if (options.retailId) { this.setData({ retailId: options.retailId }) } commonApi._post("pbservice/Actcalendar/getActDetail", { id: id }).then(res => { this.setData({ info: res.data }) this.BroswerRecord() }) }, BroswerRecord: function () { setTimeout(() => { if (app.globalData.uuid) { commonApi._post('browse/browse_record', { type: "page", title: this.data.info.name, drive: "mini", source_id: this.data.info.id, url: "/pages/info/activityInfo/index?id=" + this.data.info.id, uuid: app.globalData.uuid }).then(res => { }) } else { this.BroswerRecord(); } }, 500) }, order: function () { let skuid = this.data.info.sku_id; if (!skuid) return; commonApi._post("product/get_sku_detail_by_id", { sku_id: skuid }).then(res => { if (!res.data) { wx.showToast({ title: '本活动不支持预约', icon: 'none' }) return; } app.globalData.couponInfo = null; app.globalData.product = { sku: res.data, product: res.data.product } app.globalData.retailId = this.data.retailId; this.getDefaultTime() }) }, // 获取默认时间 getDefaultTime () { let today = util.formatDate(new Date()), end_date = util.formatDate(new Date(new Date().getTime() + 60 * 24 * 60 * 60 * 1000)); commonApi.user_post("product/product_date_price", { start_date: today, end_date: end_date, sku_id: this.data.info.sku_id }).then(res => { for (let i = 0; i < res.data.length; i++) { if (res.data[i].stock > 0) { this.getTimeStock(res.data[i]) break; } } }) }, getTimeStock: function (dateObj) { commonApi.user_post("product/product_timestock_price", { date: dateObj.date, sku_id: this.data.info.sku_id }).then(res => { for (let i = 0; i < res.data.length; i++) { if (res.data[i].stock_number > 0) { app.globalData.product.date = dateObj app.globalData.product.time = res.data[i] // app.globalData.product.changeFlag = true break } } }).finally(()=>{ wx.navigateTo({ url: '/pages/order/scene/index?type=museum', }) }) }, /** * 生命周期函数--监听页面初次渲染完成 */ 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) // } }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })