// pages/info/roadInfo/index.js let device = wx.getSystemInfoSync(); const ratio = device.windowWidth / 750; import commonApi from "../../../utils/https/common" import QRCode from '../../../utils/weapp-qrcode.js' 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, showQrCode: false, wxqrcode: null, ZTPoint:'', skuIndex: 0, skuFlag: false, producNum: 1, }, /** * 生命周期函数--监听页面加载 */ 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 }) } if (options.ZTPoint) {this.setData({ZTPoint: options.ZTPoint})} 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]; 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: 5 }).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({ 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 () { // todo 判断组合产品 if (this.data.info.is_compose == 1) { // 打开规格弹窗 this.setData({skuFlag: true}) return } 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,ZTPoint:this.data.ZTPoint}, } 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) : '') +'&ZTPoint='+this.data.ZTPoint, }) } }) }, // 组合产品获取购买的sku getComposeSku () { commonApi.user_post("product/get_sku_compose_list", { // sku_id: "190720" sku_id: "190740" }).then(res => { if (res&&Array.isArray(res.data)&&res.data.length>0) { res.data.forEach(v => { v.sku.is_compose = 1; v.num = this.data.producNum; v.sku.compose_sku_id = v.compose_sku_id }); util.orderByShoppingCart(res.data,app) } }) }, 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 => { }) 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" }) 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); } }) }) //成功得到图片信息后，开始绘图 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); //如果数组长度大于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); } }, setSimpleValue: function (e) { let keyname = e.currentTarget.dataset.keyname let val = e.currentTarget.dataset.val let param = {} param[keyname] = val this.setData(param) }, minus: function () { if (this.data.producNum == 1) return; this.setData({ producNum: this.data.producNum - 1 }) }, add: function () { this.setData({ producNum: this.data.producNum + 1 }) }, /** * 生命周期函数--监听页面初次渲染完成 */ 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 () { } })