From 644ca9cb7296ed7310f47402feab997d18e11519 Mon Sep 17 00:00:00 2001 From: xuetaotao Date: Sat, 30 Oct 2021 17:00:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AF=A6=E6=83=85=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修改详情页 --- pages/info/activityInfo/index.js | 227 +++++---- pages/info/activityInfo/index.wxml | 2 +- pages/info/cardInfo/index.wxml | 2 +- pages/info/hotelProductInfo/index.js | 2 +- pages/info/hotelProductInfo/index.wxml | 2 +- pages/info/museumInfo/index.js | 29 +- pages/info/museumInfo/index.wxml | 1 - pages/info/roadInfo/index.js | 405 ++++++++++++--- pages/info/roadInfo/index.wxml | 27 + pages/info/roadInfo/index.wxss | 77 +++ pages/info/sceneProductInfo/index.js | 664 ++++++++++++------------- pages/info/sceneProductInfo/index.wxml | 2 +- 12 files changed, 910 insertions(+), 530 deletions(-) diff --git a/pages/info/activityInfo/index.js b/pages/info/activityInfo/index.js index dca8a01..0137f04 100644 --- a/pages/info/activityInfo/index.js +++ b/pages/info/activityInfo/index.js @@ -7,104 +7,104 @@ Page({ * 页面的初始数据 */ data: { - id:null, - info:null, - retailId:"", - shareImg:null, - showShareFlag:false + id: null, + info: null, + retailId: "", + shareImg: null, + showShareFlag: false }, - // 分享 - share:function(){ - if(!wx.getStorageSync("jstrip_token")){ - commonApi.user_post("user/getMyInfo",{}).then(res=>{ + // 分享 + share: function () { + if (!wx.getStorageSync("jstrip_token")) { + commonApi.user_post("user/getMyInfo", {}).then(res => { }) return; } - if(!this.data.shareImg){ + if (!this.data.shareImg) { wx.showToast({ title: '图片生成中，稍后再试', - icon:'none' + icon: 'none' }) return; } this.setData({ - showShareFlag:!this.data.showShareFlag + showShareFlag: !this.data.showShareFlag }) }, // 保存 - save(){ - let url = this.data.shareImg,that = this; + save() { + let url = this.data.shareImg, that = this; wx.authorize({ /* 这个就是保存相册的 */ scope: 'scope.writePhotosAlbum', success() { wx.saveImageToPhotosAlbum({ - filePath:url, - success(res) { + filePath: url, + success(res) { wx.showToast({ title: '保存成功', - icon:"success" + icon: "success" }) that.setData({ - showShareFlag:!this.data.showShareFlag + showShareFlag: !this.data.showShareFlag }) }, - fail(res){ + fail(res) { wx.showToast({ title: '保存失败', - icon:'none' + icon: 'none' }) } - }) + }) }, complete(res) { - console.log(res); - /* 这里判断一下如果没有授权重新打开设置选项 */ - wx.getSetting({ - success(res) { - if (!res.authSetting['scope.writePhotosAlbum']) { - /* 打开设置的方法 */ - // opensit(); - wx.showToast({ - title: '请打开权限后再试', - icon:'none' - }) - } - } - }); + 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){ + 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){ + let promise2 = new Promise(function (resolve, reject) { wx.getImageInfo({ - src:that.data.info.post_url, - success:function(res){ + src: that.data.info.post_url, + success: function (res) { resolve(res); }, - fail:function(res){ + fail: function (res) { reject(res); } }) }) - let promise3 = new Promise(function(resolve,reject){ + 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, + 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 @@ -115,52 +115,52 @@ Page({ }) }) //成功得到图片信息后，开始绘图 - Promise.all([promise2,promise3]).then(imgs=>{ + Promise.all([promise2, promise3]).then(imgs => { ctx.save(); ctx.beginPath(); //开始绘制 - that.handleBorderRect(ctx,0,0,551 * ratio,407 * ratio,25 * ratio,'#ccc') + 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.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') + 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.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); + 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 price = "￥" + (that.data.info.price / 100); let width = ctx.measureText(price).width; - ctx.fillText(price, 25*ratio, 620*ratio); + 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)+'...' + if (that.data.info.subtitle.length > 10) { + subtitle = that.data.info.subtitle.substr(0, 10) + '...' } - ctx.fillText(subtitle, 25*ratio, 540*ratio); + 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 = "￥" + (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.moveTo(40 * ratio + width, 608 * ratio) + ctx.lineTo(45 * ratio + width + market_price_width, 608 * ratio) ctx.stroke(); // 长按识别二维码 // ctx.setFillStyle("#666"); @@ -172,33 +172,33 @@ Page({ // ctx.setFontSize(24 * ratio); //字大小 // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线 // ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio); - ctx.draw(); + ctx.draw(); // 转为图片 - setTimeout(()=>{ + setTimeout(() => { wx.canvasToTempFilePath({ x: 0, y: 0, canvasId: 'imageCanvas', success: function (res) { that.setData({ - shareImg:res.tempFilePath + shareImg: res.tempFilePath }) }, - fail(err){ - console.log('agdgjgdajhg',err) + fail(err) { + console.log('agdgjgdajhg', err) } }) - },500) + }, 500) return false; - }).catch(err=>{ - console.log("this err",err) + }).catch(err => { + console.log("this err", err) }) }, // 圆角矩形 - handleBorderRect(ctx, x, y, w, h, r, color){ + handleBorderRect(ctx, x, y, w, h, r, color) { ctx.beginPath(); - ctx.moveTo(x+w,y+h); - ctx.lineTo(x,y+h) + 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); @@ -206,16 +206,16 @@ Page({ 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, y + h); ctx.lineTo(x + w - r, y + h); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); }, - handleBorderRect2(ctx, x, y, w, h, r, color){ + handleBorderRect2(ctx, x, y, w, h, r, color) { ctx.beginPath(); - ctx.moveTo(x,y); - ctx.lineTo(x+w,y) + 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); @@ -229,8 +229,8 @@ Page({ ctx.closePath(); }, // 绘制两行文字 - drawText: function(ctx, str, x, y, canvasWidth,ratio) { - let row = [],temp="",chr=str.split(""); + 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]; @@ -273,57 +273,57 @@ Page({ onLoad: function (options) { let id = options.id; this.setData({ - id:id + id: id }) - if(options.retailId){ + if (options.retailId) { this.setData({ - retailId:options.retailId + retailId: options.retailId }) } - commonApi._post("pbservice/Actcalendar/getActDetail",{ - id:id - }).then(res=>{ + commonApi._post("pbservice/Actcalendar/getActDetail", { + id: id + }).then(res => { this.setData({ - info:res.data + 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=>{ + 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) + }, 500) }, - order:function(){ + 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){ + if (!skuid) return; + commonApi._post("product/get_sku_detail_by_id", { + sku_id: skuid + }).then(res => { + if (!res.data) { wx.showToast({ title: '本活动不支持预约', - icon:'none' + icon: 'none' }) return; } app.globalData.couponInfo = null; app.globalData.product = { - sku:res.data, - product:res.data.product + sku: res.data, + product: res.data.product } app.globalData.retailId = this.data.retailId; wx.navigateTo({ @@ -343,6 +343,17 @@ Page({ * 生命周期函数--监听页面显示 */ onShow: function () { + // if (!wx.getStorageSync('jstrip_token')) { + // return; + // } + // if (this.data.info && this.data.info.id) { + // this.drawImg() + // } + // else { + // setTimeout(() => { + // this.onShow() + // }, 200) + // } }, /** diff --git a/pages/info/activityInfo/index.wxml b/pages/info/activityInfo/index.wxml index a46a441..2fb6811 100644 --- a/pages/info/activityInfo/index.wxml +++ b/pages/info/activityInfo/index.wxml @@ -1,7 +1,7 @@ - + - + diff --git a/pages/info/hotelProductInfo/index.js b/pages/info/hotelProductInfo/index.js index 0ce7f1f..3ce384a 100644 --- a/pages/info/hotelProductInfo/index.js +++ b/pages/info/hotelProductInfo/index.js @@ -407,7 +407,7 @@ Page({ let promise3 = new Promise(function (resolve, reject) { let userid = wx.getStorageSync('jstrip_userid') new QRCode('myQrcode', { - text: 'https://m.cloud.sz-trip.com/ScenicDetail?id=' + that.data.sceneInfo.id + '&sharedUserId=' + userid + '&channel=-1', + text: 'https://m.cloud.sz-trip.com/HotelDetail?id=' + that.data.sceneInfo.id + '&sharedUserId=' + userid + '&channel=-1', width: 500, height: 500, padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0 diff --git a/pages/info/hotelProductInfo/index.wxml b/pages/info/hotelProductInfo/index.wxml index 4776f20..a18432d 100644 --- a/pages/info/hotelProductInfo/index.wxml +++ b/pages/info/hotelProductInfo/index.wxml @@ -1,6 +1,6 @@ - + diff --git a/pages/info/museumInfo/index.js b/pages/info/museumInfo/index.js index a5221f6..33ef036 100644 --- a/pages/info/museumInfo/index.js +++ b/pages/info/museumInfo/index.js @@ -5,6 +5,7 @@ let device = wx.getSystemInfoSync(); const ratio = device.windowWidth / 750; let rect = wx.getMenuButtonBoundingClientRect(); let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight; +import QRCode from '../../../utils/weapp-qrcode.js' Page({ /** @@ -216,7 +217,7 @@ Page({ let promise3 = new Promise(function (resolve, reject) { let userid = wx.getStorageSync('jstrip_userid') new QRCode('myQrcode', { - text: 'https://m.cloud.sz-trip.com/ScenicDetail?id=' + that.data.info.id + '&sharedUserId=' + userid + '&channel=-1', + text: 'https://m.cloud.sz-trip.com/PavilionDetail?id=' + that.data.info.id + '&sharedUserId=' + userid + '&channel=-1', width: 500, height: 500, padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0 @@ -248,14 +249,14 @@ Page({ ctx.setFillStyle("#D62828"); ctx.setFontSize(40 * ratio); //字大小 ctx.setTextAlign('left'); //是否居中显示，参考点画布中线 - let price = that.data.info.price ? ("￥" + (that.data.info.price / 100)) : '免费'; + 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]; + let subtitle = that.data.info.product_venue.subtitle; if (subtitle.length > 10) { subtitle = subtitle.substr(0, 10) + '...' } @@ -429,17 +430,17 @@ Page({ }) } - // if (!wx.getStorageSync('jstrip_token')) { - // return; - // } - // if (this.data.info && this.data.info.id) { - // this.drawImg() - // } - // else { - // setTimeout(() => { - // this.onShow() - // }, 200) - // } + if (!wx.getStorageSync('jstrip_token')) { + return; + } + if (this.data.info && this.data.info.id) { + this.drawImg() + } + else { + setTimeout(() => { + this.onShow() + }, 200) + } }, /** diff --git a/pages/info/museumInfo/index.wxml b/pages/info/museumInfo/index.wxml index 2eb01f0..e7bafd6 100644 --- a/pages/info/museumInfo/index.wxml +++ b/pages/info/museumInfo/index.wxml @@ -48,7 +48,6 @@ 参观预约 - diff --git a/pages/info/roadInfo/index.js b/pages/info/roadInfo/index.js index d926014..258dfe8 100644 --- a/pages/info/roadInfo/index.js +++ b/pages/info/roadInfo/index.js @@ -2,6 +2,7 @@ let device = wx.getSystemInfoSync(); const ratio = device.windowWidth / 750; import commonApi from "../../../utils/https/common" +import QRCode from '../../../utils/weapp-qrcode.js' let app = getApp() Page({ @@ -9,14 +10,16 @@ Page({ * 页面的初始数据 */ data: { - fixed:false, - type:1, - top:0, - info:null, - comment:[], - commentTotal:0, - retailId:"", - retailSkuId:"" + fixed: false, + type: 1, + top: 0, + info: null, + comment: [], + commentTotal: 0, + retailId: "", + retailSkuId: "", + shareImg: null, + showShareFlag: false }, /** @@ -26,140 +29,392 @@ Page({ let rect = wx.getMenuButtonBoundingClientRect(); let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight; this.setData({ - top:height, - id:options.id + top: height, + id: options.id }) - if(options.retailId){ + if (options.retailId) { this.setData({ - retailId:options.retailId + retailId: options.retailId }) } let api = commonApi._post; - if(wx.getStorageSync("jstrip_token")){ + 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); + 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 + retailSkuId: options.skuid }) } this.setData({ - info:res.data + 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=>{ + 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 + 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=>{ + 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) + }, 500) }, - changeMenu:function(e){ - let index = e.currentTarget.dataset.index,that = this; - const query=wx.createSelectorQuery(); //创建节点查询器 - query.select("#box"+index).boundingClientRect() //选择toViewid获取位置信息 + 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) { + 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 + type: index }) }) }, - onPageScroll:function(e){ - let that = this,height = this.data.top; + 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){ + wx.createSelectorQuery().select('#menus').boundingClientRect(function (rect) { + console.log(rect.top, topHeight) + if (rect.top <= topHeight) { // 此时应该把menus固定在顶部 that.setData({ - fixed:true + fixed: true }) } - else{ + else { that.setData({ - fixed:false + fixed: false }) } // 滚动时判断滚动到哪个部分了 - const query=wx.createSelectorQuery(); //创建节点查询器 + 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 { + + }) + 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: !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.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); + } + }, /** * 生命周期函数--监听页面初次渲染完成 @@ -172,7 +427,17 @@ Page({ * 生命周期函数--监听页面显示 */ onShow: function () { - + if (!wx.getStorageSync('jstrip_token')) { + return; + } + if (this.data.info && this.data.info.id) { + this.drawImg() + } + else { + setTimeout(() => { + this.onShow() + }, 200) + } }, /** diff --git a/pages/info/roadInfo/index.wxml b/pages/info/roadInfo/index.wxml index 24b011d..b28f7ae 100644 --- a/pages/info/roadInfo/index.wxml +++ b/pages/info/roadInfo/index.wxml @@ -1,6 +1,7 @@ + @@ -90,4 +91,30 @@ 客服 立即预订 + + + + + + + + + + \ No newline at end of file diff --git a/pages/info/roadInfo/index.wxss b/pages/info/roadInfo/index.wxss index 9f3581f..96f30f8 100644 --- a/pages/info/roadInfo/index.wxss +++ b/pages/info/roadInfo/index.wxss @@ -359,4 +359,81 @@ page { background: #D62828; border-radius: 39rpx; text-align: center; +} + +.mask-content { + position: absolute; + left: 0; + right: 0; + bottom: 0; + width: 100%; +} +.mask-content .icon-close { + position: absolute; + right: 40rpx; + top: 40rpx; +} + +.share-img-box { + /* width: 551rpx; */ + position: static; + background: none; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.share-img { + display: block; + width: 551rpx; +} +.share-tips { + width: 426rpx; + height: 150rpx; + background: #FFFFFF; + border-radius: 25rpx; + margin-top: 25rpx; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 65rpx; + color: #999; + font-size: 24rpx; + text-align: center; + line-height: 40rpx; +} +.share-tips .img { + display: block; + width: 55rpx; + margin: 0 auto; + margin-bottom: 4rpx; +} +.tipimg { + position: absolute; + left: 50%; + margin-left: 16rpx; + width: 24rpx; + height: 24rpx; + background: #D62828; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + top: 34rpx; +} +.tipimg image { + width: 21rpx; + display: block; + +} +.save-btn { + width: 403rpx; + line-height: 77rpx; + background: #D62828; + border-radius: 39rpx; + text-align: center; + color: #fff; + font-size: 31rpx; + font-weight: 500; + margin-top: 50rpx; } \ No newline at end of file diff --git a/pages/info/sceneProductInfo/index.js b/pages/info/sceneProductInfo/index.js index d0965ad..37af081 100644 --- a/pages/info/sceneProductInfo/index.js +++ b/pages/info/sceneProductInfo/index.js @@ -11,185 +11,185 @@ Page({ * 页面的初始数据 */ data: { - info:null, - bookingInfo:null, - bookingInfoTitle:"", - safeBottom:app.globalData.safeBottom, - isLike:0, - comment:[], - commentTotal:0, - isTest:true, - retailId:"", - shareImg:null, - showShareFlag:false + info: null, + bookingInfo: null, + bookingInfoTitle: "", + safeBottom: app.globalData.safeBottom, + isLike: 0, + comment: [], + commentTotal: 0, + isTest: true, + retailId: "", + shareImg: null, + showShareFlag: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { - if(!options.id){ + if (!options.id) { util.back() return; } - if(options.retailId){ + if (options.retailId) { this.setData({ - retailId:options.retailId + retailId: options.retailId }) } - commonApi._post("pbservice/Other/getClientConfig",{ - unique_key:"wechatxcx" - }).then(res=>{ + commonApi._post("pbservice/Other/getClientConfig", { + unique_key: "wechatxcx" + }).then(res => { let data = JSON.parse(res.data); this.setData({ - isTest:data.isTest + isTest: data.isTest }) }) this.setData({ - id:options.id + id: options.id }) - commonApi._post("scene/detail",{ - id:options.id - }).then(res=>{ - if(!res.data){ + commonApi._post("scene/detail", { + id: options.id + }).then(res => { + if (!res.data) { wx.showToast({ title: '产品已下架', - icon:'none' + icon: 'none' }) - setTimeout(()=>{ + setTimeout(() => { util.back(); - },1000) + }, 1000) return; } - res.data.display_tags = (res.data.display_tags?res.data.display_tags.split(","):[]).splice(0,2); + res.data.display_tags = (res.data.display_tags ? res.data.display_tags.split(",") : []).splice(0, 2); // 如果是带有指定good_id的 那么取指定的 - if(options.gid){ - let pItem = res.data.product.find(item=>item.id==options.gid); - if(pItem){ + if (options.gid) { + let pItem = res.data.product.find(item => item.id == options.gid); + if (pItem) { res.data.product = [pItem]; } } // 如果带有指定skuid的话 那么取指定的sku展示 - if(options.skuid){ + if (options.skuid) { let pItem = null; - for(let i = 0;i{ - product.sku.map(sku=>{ - sku.display_tags = (sku.display_tags?sku.display_tags.split(","):[]).splice(0,2); + res.data.product.map(product => { + product.sku.map(sku => { + sku.display_tags = (sku.display_tags ? sku.display_tags.split(",") : []).splice(0, 2); }) }) this.setData({ - info:res.data + info: res.data }) this.BroswerRecord() }) // 获取收藏的状态 - if(wx.getStorageSync("jstrip_token")){ - commonApi.user_post("scene/is_scene_collection",{ - scene_id:options.id - }).then(res=>{ + if (wx.getStorageSync("jstrip_token")) { + commonApi.user_post("scene/is_scene_collection", { + scene_id: options.id + }).then(res => { this.setData({ - isLike:res.data + isLike: res.data }) }) } - commonApi._post("ask/getQuestionList",{ - scene_id:options.id, - page_no:1, - page_num:3 - }).then(res=>{ + commonApi._post("ask/getQuestionList", { + scene_id: options.id, + page_no: 1, + page_num: 3 + }).then(res => { this.setData({ - ask:res.data.rows + ask: res.data.rows }) console.log(res) }) // 获取评价列表 - commonApi._post("scene/get_comment",{ - scene_id:options.id - }).then(res=>{ - res.data.list.map(item=>{ + commonApi._post("scene/get_comment", { + scene_id: options.id + }).then(res => { + res.data.list.map(item => { item.rate = Number(item.rate) }) this.setData({ - comment:res.data.list.splice(0,3), - commentTotal:res.data.total + comment: res.data.list.splice(0, 3), + commentTotal: res.data.total }) console.log(res) }) }, - BroswerRecord:function(){ - setTimeout(()=>{ - if(app.globalData.uuid){ - commonApi._post('browse/browse_record',{ - type:"scene", - title:this.data.info.title, - drive:"mini", - source_id:this.data.info.id, - url:"/pages/info/sceneProductInfo/index?id="+this.data.info.id, - uuid:app.globalData.uuid - }).then(res=>{ + BroswerRecord: function () { + setTimeout(() => { + if (app.globalData.uuid) { + commonApi._post('browse/browse_record', { + type: "scene", + title: this.data.info.title, + drive: "mini", + source_id: this.data.info.id, + url: "/pages/info/sceneProductInfo/index?id=" + this.data.info.id, + uuid: app.globalData.uuid + }).then(res => { }) } else { this.BroswerRecord(); } - },500) + }, 500) }, - like:function(){ - let id = this.data.id,isLike = Number(this.data.isLike); + like: function () { + let id = this.data.id, isLike = Number(this.data.isLike); console.log(isLike) - commonApi.user_post(isLike!=1?"scene/scene_collection":"scene/scene_cancel_collection",{ - scene_id:id - }).then(res=>{ - if(res.code==1){ + commonApi.user_post(isLike != 1 ? "scene/scene_collection" : "scene/scene_cancel_collection", { + scene_id: id + }).then(res => { + if (res.code == 1) { console.log(isLike) wx.showToast({ title: '操作成功', }) this.setData({ - isLike:isLike==1?0:1 + isLike: isLike == 1 ? 0 : 1 }) } }) }, - gotolocation:function(){ + gotolocation: function () { let info = this.data.info; wx.openLocation({ latitude: Number(info.lat), longitude: Number(info.lon) }) }, - audioGuide:function(){ + audioGuide: function () { wx.navigateToMiniProgram({ appId: 'wx74f380bc721a0379', - path:'/pages/listen/listen?title=君到苏州' + path: '/pages/listen/listen?title=君到苏州' }) }, - showBookingInfo:function(e){ + showBookingInfo: function (e) { this.setData({ - bookingInfo:e.currentTarget.dataset.item.sku_model, - bookingInfoTitle:e.currentTarget.dataset.item.sku_name + bookingInfo: e.currentTarget.dataset.item.sku_model, + bookingInfoTitle: e.currentTarget.dataset.item.sku_name }) }, - closeMask:function(){ + closeMask: function () { this.setData({ - bookingInfo:null + bookingInfo: null }) }, - order:function(e){ + order: function (e) { app.globalData.couponInfo = null; app.globalData.retailId = this.data.retailId; // let sku = e.currentTarget.dataset.sku,product = e.currentTarget.dataset.product; @@ -199,257 +199,257 @@ Page({ }) }, - // 分享 - 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 + // 分享 + share: function () { + if (!wx.getStorageSync("jstrip_token")) { + commonApi.user_post("user/getMyInfo", {}).then(res => { + }) - }, - // 保存 - 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){ + 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: !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' + 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); }, - complete(res) { - console.log(res); - /* 这里判断一下如果没有授权重新打开设置选项 */ - wx.getSetting({ - success(res) { - if (!res.authSetting['scope.writePhotosAlbum']) { - /* 打开设置的方法 */ - // opensit(); - wx.showToast({ - title: '请打开权限后再试', - icon:'none' - }) - } - } - }); + fail: function (res) { + reject(res); } - }); - - }, - // 绘制海报 - drawImg:function(){ - var that = this,userinfo = wx.getStorageSync('jstrip_userInfo'); - if(!userinfo){ - // 去登录 - return false; + }) + }) + let promise3 = new Promise(function (resolve, reject) { + let userid = wx.getStorageSync('jstrip_userid') + new QRCode('myQrcode', { + text: 'https://m.cloud.sz-trip.com/ScenicDetail?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 / 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) + '...' } - 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); + 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, 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: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/ScenicDetail?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) } }) - }) - //成功得到图片信息后，开始绘图 - 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.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, 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]; + }, 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 { - 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; - } + 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); - } - }, + 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); + } + }, /** * 生命周期函数--监听页面初次渲染完成 @@ -462,17 +462,17 @@ Page({ * 生命周期函数--监听页面显示 */ onShow: function () { - // if(!wx.getStorageSync('jstrip_token')){ - // return; - // } - // if(this.data.info && this.data.info.id){ - // this.drawImg() - // } - // else { - // setTimeout(()=>{ - // this.onShow() - // },200) - // } + if (!wx.getStorageSync('jstrip_token')) { + return; + } + if (this.data.info && this.data.info.id) { + this.drawImg() + } + else { + setTimeout(() => { + this.onShow() + }, 200) + } }, /** diff --git a/pages/info/sceneProductInfo/index.wxml b/pages/info/sceneProductInfo/index.wxml index 6e12acb..0148e00 100644 --- a/pages/info/sceneProductInfo/index.wxml +++ b/pages/info/sceneProductInfo/index.wxml @@ -1,6 +1,6 @@ - +