diff --git a/app.wxss b/app.wxss index 115f3a6..ae93720 100644 --- a/app.wxss +++ b/app.wxss @@ -113,4 +113,18 @@ page{ max-width: 100%; height: auto; object-fit: cover; +} + +.icon-fenxiang { + position: absolute; + right: 20rpx; + margin-top: 20rpx; + width: 60rpx; + line-height: 60rpx; + background: rgba(0, 0, 0, 0.4); + border-radius: 50%; + text-align: center; + color: #fff; + font-size: 36rpx; + z-index: 1; } \ No newline at end of file diff --git a/pages/index/index.js b/pages/index/index.js index 6b75438..e8d62a2 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -157,9 +157,21 @@ Page({ limit:1 }).then(res=>{ if(res.data[0] && res.data[0].fast_sales_sku[0]){ - this.setData({ - saleProduct:res.data[0].fast_sales_sku[0] - }) + if(res.data[0].fast_sales_sku.length > 0){ + let price = res.data[0].fast_sales_sku[0].price + let data = res.data[0].fast_sales_sku[0] + for (let item of res.data[0].fast_sales_sku){ + if (price > item.price) price = item.price + } + data.price = price + this.setData({ + saleProduct:data + }) + }else{ + this.setData({ + saleProduct:res.data[0].fast_sales_sku[0] + }) + } } }) commonApi._post("product/get_product_by_tag",{ @@ -167,9 +179,23 @@ Page({ offset:0, limit:1 }).then(res=>{ - this.setData({ - roadProduct:res.data.list[0] - }) + if(res.data.list.length > 0){ + let price = res.data.list[0].price + for(let item of res.data.list ){ + if(item.price > price){ + price = item.price + } + } + let data = res.data.list[0] + data.price = price + this.setData({ + roadProduct:data + }) + }else{ + this.setData({ + roadProduct:[111] + }) + } }) }, getFourProduct:function(){ diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 62f9538..035ef39 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -8,11 +8,12 @@ 搜索想要的旅游产品或服务 - - + + - + @@ -52,15 +53,18 @@ 场馆预约 - + 非遗专卖 - + 剧场演出 - + 文创特产 @@ -71,38 +75,45 @@ - + 特惠新品超值商品限时抢购 - - + + + 限时特惠 新品推荐 + ￥{{saleProduct.price?saleProduct.price/100:0}} 精品线路四季苏州最是江南 - + - - + + + 四季苏州 最是江南 + ￥{{roadProduct.price?roadProduct.price/100:0}} - + @@ -119,16 +130,21 @@ --> - + + - - - + + + + - + + 更多 @@ -192,7 +208,8 @@ - + + @@ -228,12 +245,12 @@ 团队预约 - + 精彩回顾 - + + + + + + + \ No newline at end of file diff --git a/pages/info/activityInfo/index.wxss b/pages/info/activityInfo/index.wxss index 95184c5..cba4f6b 100644 --- a/pages/info/activityInfo/index.wxss +++ b/pages/info/activityInfo/index.wxss @@ -4,6 +4,9 @@ height: 330rpx; display: block; } +.swiper{ + position: relative; +} .top-box { margin: 25rpx; margin-top: -25rpx; @@ -143,4 +146,82 @@ color: #fff; font-size: 25rpx; float: right; +} + + +.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/cardInfo/index.js b/pages/info/cardInfo/index.js index ff2ab40..c917ec0 100644 --- a/pages/info/cardInfo/index.js +++ b/pages/info/cardInfo/index.js @@ -3,6 +3,7 @@ let device = wx.getSystemInfoSync(); const ratio = device.windowWidth / 750; import commonApi from "../../../utils/https/common" import util from "../../../utils/util" +import QRCode from '../../../utils/weapp-qrcode.js' let app = getApp() Page({ @@ -10,164 +11,428 @@ Page({ * 页面的初始数据 */ data: { - fixed:false, - type:1, - info:null, - top:0, - retailId:"" + fixed: false, + type: 1, + info: null, + top: 0, + retailId: "", + shareImg: null, + showShareFlag: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { - if(options.id){ + if (options.id) { this.setData({ - id:options.id + id: options.id }) } else { util.back(); return; } - if(options.retailId){ + if (options.retailId) { this.setData({ - retailId:options.retailId + retailId: options.retailId }) } let rect = wx.getMenuButtonBoundingClientRect(); let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight; console.log(height) this.setData({ - top:height + top: height }) 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); + 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); // 如果带有指定skuid的话 那么取指定的sku展示 - if(options.skuid){ - for(let i = 0;i{ - item.sku_model.recharge = item.sku_model.recharge?item.sku_model.recharge.split(","):[]; - item.sku_model.recharge.map(item=>{ + res.data.sku.map(item => { + item.sku_model.recharge = item.sku_model.recharge ? item.sku_model.recharge.split(",") : []; + item.sku_model.recharge.map(item => { item = Number(item); }) }) this.setData({ - info:res.data + info: res.data }) this.BroswerRecord(); }) }, - 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 }) }) }, - order:function(){ + order: function () { app.globalData.couponInfo = null; app.globalData.product = { - product:this.data.info, - sku:this.data.info.sku[0] + product: this.data.info, + sku: this.data.info.sku[0] } app.globalData.retailId = this.data.retailId; wx.navigateTo({ url: '/pages/order/card/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获取位置信息 - let minHeight = that.data.fixed?(110 * ratio + height): topHeight; - query.exec(function(res) { - if(res[1].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/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) + '...' + } + 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); + } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { - - }, - 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.id, - url:"/pages/info/cardInfo/index?id="+this.data.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.id, + url: "/pages/info/cardInfo/index?id=" + this.data.id, + uuid: app.globalData.uuid + }).then(res => { console.log(res) }) } else { this.BroswerRecord(); } - },500) + }, 500) }, /** * 生命周期函数--监听页面显示 */ 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/cardInfo/index.wxml b/pages/info/cardInfo/index.wxml index 5a4ac3b..1e668b1 100644 --- a/pages/info/cardInfo/index.wxml +++ b/pages/info/cardInfo/index.wxml @@ -1,6 +1,7 @@ + @@ -51,4 +52,29 @@ ￥{{info.price/100}} 立即预订 + + + + + + + + + \ No newline at end of file diff --git a/pages/info/cardInfo/index.wxss b/pages/info/cardInfo/index.wxss index 3e58a8b..06f0335 100644 --- a/pages/info/cardInfo/index.wxss +++ b/pages/info/cardInfo/index.wxss @@ -365,4 +365,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/hotelProductInfo/index.js b/pages/info/hotelProductInfo/index.js index e805448..0ce7f1f 100644 --- a/pages/info/hotelProductInfo/index.js +++ b/pages/info/hotelProductInfo/index.js @@ -1,6 +1,9 @@ // pages/info/hotelProductInfo/index.js import util from "../../../utils/util" import commonApi from "../../../utils/https/common" +let device = wx.getSystemInfoSync(); +const ratio = device.windowWidth / 750; +import QRCode from '../../../utils/weapp-qrcode.js' let app = getApp() Page({ @@ -8,31 +11,33 @@ Page({ * 页面的初始数据 */ data: { - invoiceModes:{ - 1:"如需发票,请向酒店前台索取", - 2:"美团开具发票", - 3:"第三方开具发票" + invoiceModes: { + 1: "如需发票,请向酒店前台索取", + 2: "美团开具发票", + 3: "第三方开具发票" }, - showInfoFlag:false, - listimgs:[], - startDate:"",//入住时间 - endDate:"",//离店时间 - startDateText:"",//入住时间转文字 - endDateText:"",//离店时间转文字 - days:1,//住店的日期总数 - today:"",//今天，也就是入住可以选择的日期 - tomorrow:"",//离店最早可以选择的日期 - sceneInfo:null, - ask:[], - isLike:0, - commentTotal:0, - comment:[], - products:[], - isTest:true, - activeSkuIndex:-1, - skuList:[], - roomInfo:null, - retailId:"" + showInfoFlag: false, + listimgs: [], + startDate: "",//入住时间 + endDate: "",//离店时间 + startDateText: "",//入住时间转文字 + endDateText: "",//离店时间转文字 + days: 1,//住店的日期总数 + today: "",//今天，也就是入住可以选择的日期 + tomorrow: "",//离店最早可以选择的日期 + sceneInfo: null, + ask: [], + isLike: 0, + commentTotal: 0, + comment: [], + products: [], + isTest: true, + activeSkuIndex: -1, + skuList: [], + roomInfo: null, + retailId: "", + shareImg: null, + showShareFlag: false }, /** @@ -40,95 +45,95 @@ Page({ */ onLoad: function (options) { this.setData({ - id:options.id + id: options.id }) - 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 }) }) // 先初始化日期 - let today = new Date(),tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000); + let today = new Date(), tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000); this.setData({ - today:util.formatDate(today), - startDate:util.formatDate(today), - endDate:util.formatDate(tomorrow), - startDateText:util.dateToText(today), - endDateText:util.dateToText(tomorrow), - tomorrow:util.formatDate(tomorrow) + today: util.formatDate(today), + startDate: util.formatDate(today), + endDate: util.formatDate(tomorrow), + startDateText: util.dateToText(today), + endDateText: util.dateToText(tomorrow), + tomorrow: util.formatDate(tomorrow) }) this.getDetail() // this.getProduct() }, - BroswerRecord:function(){ - setTimeout(()=>{ - if(app.globalData.uuid){ - commonApi._post('browse/browse_record',{ - type:"scene", - title:this.data.sceneInfo.title, - drive:"mini", - source_id:this.data.sceneInfo.id, - url:"/pages/info/hotelProductInfo/index?id="+this.data.sceneInfo.id, - uuid:app.globalData.uuid - }).then(res=>{ + BroswerRecord: function () { + setTimeout(() => { + if (app.globalData.uuid) { + commonApi._post('browse/browse_record', { + type: "scene", + title: this.data.sceneInfo.title, + drive: "mini", + source_id: this.data.sceneInfo.id, + url: "/pages/info/hotelProductInfo/index?id=" + this.data.sceneInfo.id, + uuid: app.globalData.uuid + }).then(res => { }) } else { this.BroswerRecord(); } - },500) + }, 500) }, - getProduct:function(){ - commonApi._post(this.data.sceneInfo.third_supplier_type=='mt'?"scene/get_mt_hotel_real_rooms_list":"scene/get_hotel_sku_list",{ - start_time:this.data.startDate, - end_time:this.data.endDate, - scene_id:this.data.id - }).then(res=>{ - res.data.map(item=>{ - item.display_tags = (item.display_tags?item.display_tags.split(","):[]).splice(0,2) + getProduct: function () { + commonApi._post(this.data.sceneInfo.third_supplier_type == 'mt' ? "scene/get_mt_hotel_real_rooms_list" : "scene/get_hotel_sku_list", { + start_time: this.data.startDate, + end_time: this.data.endDate, + scene_id: this.data.id + }).then(res => { + res.data.map(item => { + item.display_tags = (item.display_tags ? item.display_tags.split(",") : []).splice(0, 2) }) this.setData({ - products:res.data + products: res.data }) }) }, // 获取产品下面的规格列表 - getSkuList:function(e){ - if(e.currentTarget.dataset.index==this.data.activeSkuIndex){ + getSkuList: function (e) { + if (e.currentTarget.dataset.index == this.data.activeSkuIndex) { this.setData({ - activeSkuIndex:-1 + activeSkuIndex: -1 }) return; } this.setData({ - activeSkuIndex:e.currentTarget.dataset.index, - skuList:[] + activeSkuIndex: e.currentTarget.dataset.index, + skuList: [] }) - commonApi._post('scene/get_mt_hotel_real_rooms_sku_list',{ - start_date:this.data.startDate, - end_date:this.data.endDate, - real_room_id:e.currentTarget.dataset.id - }).then(res=>{ - if(!res.data || res.data.length==0){ + commonApi._post('scene/get_mt_hotel_real_rooms_sku_list', { + start_date: this.data.startDate, + end_date: this.data.endDate, + real_room_id: e.currentTarget.dataset.id + }).then(res => { + if (!res.data || res.data.length == 0) { wx.showToast({ title: '该房型暂无房间', - icon:'none' + icon: 'none' }) } this.setData({ - skuList:res.data + skuList: res.data }) }) }, - order:function(e){ + order: function (e) { let item = e.currentTarget.dataset.item; item.startDate = this.data.startDate; item.endDate = this.data.endDate; @@ -143,8 +148,8 @@ Page({ url: '/pages/order/hotel/index', }) }, - orderMt:function(e){ - let item = e.currentTarget.dataset.item,product = e.currentTarget.dataset.product; + orderMt: function (e) { + let item = e.currentTarget.dataset.item, product = e.currentTarget.dataset.product; item.startDate = this.data.startDate; item.endDate = this.data.endDate; item.startDateText = this.data.startDateText; @@ -155,10 +160,10 @@ Page({ item.id = item.sku_id; // item.product_id = product.real_room_id; item.sku_name = product.room_name; - item.sku_model={}; - item.sku_model.area = product.useable_area+"m²"; + item.sku_model = {}; + item.sku_model.area = product.useable_area + "m²"; item.sku_model.bed_type = item.bed_type; - item.sku_model.breakfast=item.breakfast; + item.sku_model.breakfast = item.breakfast; item.sku_model.max_room_num = item.max_room_num; app.globalData.product = item; app.globalData.retailId = this.data.retailId; @@ -168,148 +173,401 @@ Page({ url: '/pages/order/hotel/index', }) }, - getDay:function(date){ - let d = new Date(date.replace(/-/g,'/')).getDay(); - let days = ["日","一","二","三","四","五","六"]; + getDay: function (date) { + let d = new Date(date.replace(/-/g, '/')).getDay(); + let days = ["日", "一", "二", "三", "四", "五", "六"]; return days[d]; }, - getDetail:function(){ + getDetail: function () { // 获取详情 - commonApi._post("scene/detail",{ - id:this.data.id - }).then(res=>{ - if(!res.data) { + commonApi._post("scene/detail", { + id: this.data.id + }).then(res => { + if (!res.data) { util.back(); return; } // res.data.listimg = res.data.listimg?res.data.listimg.split(","):[]; - 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); this.setData({ - sceneInfo:res.data + sceneInfo: res.data }) this.BroswerRecord(); this.getProduct() }) // 获取问大家 - commonApi._post("ask/getQuestionList",{ - scene_id:this.data.id, - page_no:1, - page_num:3 - }).then(res=>{ + commonApi._post("ask/getQuestionList", { + scene_id: this.data.id, + page_no: 1, + page_num: 3 + }).then(res => { console.log(res) this.setData({ - ask:res.data.rows + ask: res.data.rows }) }) // 获取是否喜欢 - commonApi.user_post("scene/is_scene_collection",{ - scene_id:this.data.id - }).then(res=>{ + commonApi.user_post("scene/is_scene_collection", { + scene_id: this.data.id + }).then(res => { this.setData({ - isLike:res.data + isLike: res.data }) }) // 获取评价列表 - commonApi.user_post("scene/get_comment",{ - scene_id:this.data.id - }).then(res=>{ - res.data.list.map(item=>{ + commonApi.user_post("scene/get_comment", { + scene_id: this.data.id + }).then(res => { + res.data.list.map(item => { item.rate = Number(item.rate) }) this.setData({ - comment:res.data.list, - commentTotal:res.data.total + comment: res.data.list, + commentTotal: res.data.total }) }) }, - like:function(){ - let id = this.data.id,isLike = this.data.isLike; - commonApi.user_post(isLike!=1?"scene/scene_collection":"scene/scene_cancel_collection",{ - scene_id:id - }).then(res=>{ - if(res.code==1){ + like: function () { + let id = this.data.id, isLike = this.data.isLike; + commonApi.user_post(isLike != 1 ? "scene/scene_collection" : "scene/scene_cancel_collection", { + scene_id: id + }).then(res => { + if (res.code == 1) { wx.showToast({ title: '操作成功', }) this.setData({ - isLike:isLike==1?0:1 + isLike: isLike == 1 ? 0 : 1 }) } }) }, - gotoLocation:function(){ + gotoLocation: function () { let info = this.data.sceneInfo; wx.openLocation({ latitude: Number(info.lat), longitude: Number(info.lon), }) }, - changeInDate:function(e){ + changeInDate: function (e) { console.log(e) - let date = new Date(e.detail.value.replace(/-/g,'/')); + let date = new Date(e.detail.value.replace(/-/g, '/')); let tomorrow = new Date(date.getTime() + 24 * 60 * 60 * 1000); this.setData({ - startDate:util.formatDate(date), - startDateText:util.dateToText(date), - tomorrow:util.formatDate(tomorrow) + startDate: util.formatDate(date), + startDateText: util.dateToText(date), + tomorrow: util.formatDate(tomorrow) }) // 如果开始日期要比结束日期晚的话 那么结束日期自动变成开始日期的下一天 - let endDate = new Date(this.data.endDate.replace(/-/g,'/')); - if(endDate.getTime()<=date.getTime()){ + let endDate = new Date(this.data.endDate.replace(/-/g, '/')); + if (endDate.getTime() <= date.getTime()) { this.setData({ - endDate:util.formatDate(tomorrow), - endDateText:util.dateToText(tomorrow) + endDate: util.formatDate(tomorrow), + endDateText: util.dateToText(tomorrow) }) } this.calcDays(); }, - changeLeaveDate:function(e){ - let date = new Date(e.detail.value.replace(/-/g,'/')); + changeLeaveDate: function (e) { + let date = new Date(e.detail.value.replace(/-/g, '/')); console.log(date) this.setData({ - endDate:util.formatDate(date), - endDateText:util.dateToText(date) + endDate: util.formatDate(date), + endDateText: util.dateToText(date) }) this.calcDays(); }, - calcDays:function(){ - let endDate = this.data.endDate.replace(/-/g,'/'),startDate = this.data.startDate.replace(/-/g,'/'); + calcDays: function () { + let endDate = this.data.endDate.replace(/-/g, '/'), startDate = this.data.startDate.replace(/-/g, '/'); endDate = new Date(endDate).getTime(); startDate = new Date(startDate).getTime(); let days = Math.round((endDate - startDate) / (1000 * 24 * 60 * 60)) this.setData({ - days:days, - activeSkuIndex:-1, - skuList:[] + days: days, + activeSkuIndex: -1, + skuList: [] }) // this.getProduct() }, - showRoomInfo:function(e){ - let product = e.currentTarget.dataset.info,sku = e.currentTarget.dataset.sku; + showRoomInfo: function (e) { + let product = e.currentTarget.dataset.info, sku = e.currentTarget.dataset.sku; this.setData({ - showInfoFlag:true + showInfoFlag: true // roomInfo: }) - commonApi.user_post("product/getMtRoomSkuInfo",{ - real_room_id:product.real_room_id, - sku_id:sku.sku_id, + commonApi.user_post("product/getMtRoomSkuInfo", { + real_room_id: product.real_room_id, + sku_id: sku.sku_id, start_date: this.data.startDate, end_date: this.data.endDate - }).then(res=>{ + }).then(res => { this.setData({ - roomInfo:{ - sku:sku, - skuInfo:res.data, - productInfo:product + roomInfo: { + sku: sku, + skuInfo: res.data, + productInfo: product } }) }) }, - hideRoomInfo:function(){ + hideRoomInfo: function () { this.setData({ - showInfoFlag:false, - roomInfo:null + showInfoFlag: false, + roomInfo: null + }) + }, + + + // 分享 + 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 + }) + }, + // 保存 + 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.sceneInfo.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/ScenicDetail?id=' + that.data.sceneInfo.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.sceneInfo.title, 25 * ratio, 450 * ratio, 480 * ratio, ratio); + // 售价 + ctx.setFillStyle("#D62828"); + ctx.setFontSize(40 * ratio); //字大小 + ctx.setTextAlign('left'); //是否居中显示，参考点画布中线 + let price = "￥" + (that.data.sceneInfo.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.sceneInfo.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.sceneInfo.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]; + } + 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); + } }, /** @@ -323,7 +581,17 @@ Page({ * 生命周期函数--监听页面显示 */ onShow: function () { - + // if(!wx.getStorageSync('jstrip_token')){ + // return; + // } + // if(this.data.sceneInfo && this.data.sceneInfo.id){ + // this.drawImg() + // } + // else { + // setTimeout(()=>{ + // this.onShow() + // },200) + // } }, /** diff --git a/pages/info/hotelProductInfo/index.wxml b/pages/info/hotelProductInfo/index.wxml index a4ebd72..4776f20 100644 --- a/pages/info/hotelProductInfo/index.wxml +++ b/pages/info/hotelProductInfo/index.wxml @@ -1,5 +1,6 @@ + @@ -178,4 +179,29 @@ 立即预订 + + + + + + + + + \ No newline at end of file diff --git a/pages/info/hotelProductInfo/index.wxss b/pages/info/hotelProductInfo/index.wxss index 85dd114..d1ded8a 100644 --- a/pages/info/hotelProductInfo/index.wxss +++ b/pages/info/hotelProductInfo/index.wxss @@ -473,4 +473,81 @@ page { top: 10rpx; font-size: 50rpx; color: #333; +} + +.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/museumInfo/index.js b/pages/info/museumInfo/index.js index 3157cca..a5221f6 100644 --- a/pages/info/museumInfo/index.js +++ b/pages/info/museumInfo/index.js @@ -11,19 +11,21 @@ Page({ * 页面的初始数据 */ data: { - top:height, - info:null, - type:1, - actList:[], - actTotal:1, - id:null, - fixed:false, - isLogin:false, - product:null, - time:null, - date:null, - retailId:"", - isGroup:null + top: height, + info: null, + type: 1, + actList: [], + actTotal: 1, + id: null, + fixed: false, + isLogin: false, + product: null, + time: null, + date: null, + retailId: "", + isGroup: null, + shareImg: null, + showShareFlag: false }, /** @@ -31,58 +33,58 @@ Page({ */ onLoad: function (options) { this.setData({ - id:options.id + id: options.id }) - if(options.isGroup){ + if (options.isGroup) { this.setData({ - isGroup:options.isGroup + isGroup: options.isGroup }) } - if(options.retailId){ + if (options.retailId) { this.setData({ - retailId:options.retailId + retailId: options.retailId }) } - commonApi._post("scene/detail_for_venue",{ - id:options.id - }).then(res=>{ + commonApi._post("scene/detail_for_venue", { + id: options.id + }).then(res => { // res.data.listimg = res.data.listimg?res.data.listimg.split(","):[]; - if(res.data.product_venue && res.data.product_venue.sku && res.data.product_venue.sku[0]){ + if (res.data.product_venue && res.data.product_venue.sku && res.data.product_venue.sku[0]) { let sku = res.data.product_venue.sku[0]; - if(options.skuid){ - sku = res.data.product_venue.sku.find(item=>item.id==options.skuid); + if (options.skuid) { + sku = res.data.product_venue.sku.find(item => item.id == options.skuid); } let product = { - product:res.data.product_venue, - sku:sku + product: res.data.product_venue, + sku: sku }; app.globalData.product = product; this.setData({ - info:res.data, - product:product + info: res.data, + product: product }) } else { this.setData({ - info:res.data + info: res.data }) } - + this.BroswerRecord(); }) this.getAct() }, - getAct:function(){ - if(this.data.actList.length>=this.data.actTotal || this.data.isGroup==1) return; - commonApi._post('scene/get_scene_act_list',{ - scene_id:this.data.id, - page_no:1, - page_num:100 - }).then(res=>{ + getAct: function () { + if (this.data.actList.length >= this.data.actTotal || this.data.isGroup == 1) return; + commonApi._post('scene/get_scene_act_list', { + scene_id: this.data.id, + page_no: 1, + page_num: 100 + }).then(res => { let now = new Date().getTime(); - res.data.rows.map(item=>{ - let endTime = this.getMyTime(item.end_date+" 23:59:59"); - if(endTime { + let endTime = this.getMyTime(item.end_date + " 23:59:59"); + if (endTime < now) { item.isEnd = true; } else { @@ -90,38 +92,291 @@ Page({ } }) this.setData({ - actList:this.data.actList.concat(res.data.rows), - actTotal:res.data.total + actList: this.data.actList.concat(res.data.rows), + actTotal: res.data.total }) console.log(res) }) }, - getMyTime(t){ - let time = new Date(t.replace(/-/g,'/')).getTime(); + getMyTime(t) { + let time = new Date(t.replace(/-/g, '/')).getTime(); return time; }, - changeType:function(e){ + changeType: function (e) { this.setData({ - type:e.currentTarget.dataset.type + type: e.currentTarget.dataset.type }) }, - 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/museumInfo/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/museumInfo/index?id=" + this.data.info.id, + uuid: app.globalData.uuid + }).then(res => { }) } else { this.BroswerRecord(); } - },500) + }, 500) + }, + + + // 分享 + 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 + }) + }, + // 保存 + 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/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 ? ("￥" + (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); + } }, /** @@ -131,29 +386,29 @@ Page({ }, // 修改日期 - changeDate:function(e){ + changeDate: function (e) { this.setData({ - date:e.detail + date: e.detail }) }, // 修改分时 - changeTime:function(e){ + changeTime: function (e) { this.setData({ - time:e.detail + time: e.detail }) }, - order:function(){ - if(!this.data.info.product_venue) return; - if(!this.data.info.product_venue.sku[0]) return; + order: function () { + if (!this.data.info.product_venue) return; + if (!this.data.info.product_venue.sku[0]) return; app.globalData.couponInfo = null; app.globalData.retailId = this.data.retailId; // 如果在当前的详情页面选择了日期时间的话 那么需要修改日期时间 app.globalData.product = { - product:this.data.info.product_venue, - sku:this.data.info.product_venue.sku[0], - infoDate:this.data.date, - infoTime:this.data.time, - isGroup:this.data.isGroup + product: this.data.info.product_venue, + sku: this.data.info.product_venue.sku[0], + infoDate: this.data.date, + infoTime: this.data.time, + isGroup: this.data.isGroup } wx.navigateTo({ url: '/pages/order/scene/index?type=museum' @@ -164,15 +419,27 @@ Page({ * 生命周期函数--监听页面显示 */ onShow: function () { - if(!this.data.isLogin){ - commonApi.user_post("token/check").then(res=>{ - if(res.code==1){ + if (!this.data.isLogin) { + commonApi.user_post("token/check").then(res => { + if (res.code == 1) { this.setData({ - isLogin:true + isLogin: true }) } }) } + + // if (!wx.getStorageSync('jstrip_token')) { + // return; + // } + // if (this.data.info && this.data.info.id) { + // this.drawImg() + // } + // else { + // setTimeout(() => { + // this.onShow() + // }, 200) + // } }, /** @@ -209,19 +476,19 @@ Page({ onShareAppMessage: function () { }, - onPageScroll:function(e){ - if(this.data.isGroup) return; - let topHeight = this.data.top + (102 * ratio),that = this; - wx.createSelectorQuery().select('#content').boundingClientRect(function(rect){ - if(rect.top<=topHeight){ + onPageScroll: function (e) { + if (this.data.isGroup) return; + let topHeight = this.data.top + (102 * ratio), that = this; + wx.createSelectorQuery().select('#content').boundingClientRect(function (rect) { + if (rect.top <= topHeight) { // 此时应该把menus固定在顶部 that.setData({ - fixed:true + fixed: true }) } - else{ + else { that.setData({ - fixed:false + fixed: false }) } }).exec() diff --git a/pages/info/museumInfo/index.wxml b/pages/info/museumInfo/index.wxml index 5ec5d0d..2eb01f0 100644 --- a/pages/info/museumInfo/index.wxml +++ b/pages/info/museumInfo/index.wxml @@ -1,6 +1,7 @@ + @@ -47,3 +48,29 @@ 参观预约 + + + + + + + + + + \ No newline at end of file diff --git a/pages/info/museumInfo/index.wxss b/pages/info/museumInfo/index.wxss index 137bcad..f22fea6 100644 --- a/pages/info/museumInfo/index.wxss +++ b/pages/info/museumInfo/index.wxss @@ -139,4 +139,81 @@ left: 0; background:white; right: 0; +} + +.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/postProductInfo/index.js b/pages/info/postProductInfo/index.js index 060cf69..f3394c1 100644 --- a/pages/info/postProductInfo/index.js +++ b/pages/info/postProductInfo/index.js @@ -362,7 +362,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/MailMerchandiseDetail?id='+that.data.info.id+'&userId='+userid, + text: 'https://m.cloud.sz-trip.com/MailMerchandiseDetail?id='+that.data.info.id+'&sharedUserId='+userid+'&channel=-1', width: 500, height: 500, padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0 diff --git a/pages/info/sceneProductInfo/index.js b/pages/info/sceneProductInfo/index.js index 695620c..d0965ad 100644 --- a/pages/info/sceneProductInfo/index.js +++ b/pages/info/sceneProductInfo/index.js @@ -1,6 +1,9 @@ // pages/info/sceneProductInfo/index.js +let device = wx.getSystemInfoSync(); +const ratio = device.windowWidth / 750; import commonApi from "../../../utils/https/common" import util from "../../../utils/util" +import QRCode from '../../../utils/weapp-qrcode.js' let app = getApp() Page({ @@ -16,7 +19,9 @@ Page({ comment:[], commentTotal:0, isTest:true, - retailId:"" + retailId:"", + shareImg:null, + showShareFlag:false }, /** @@ -194,6 +199,258 @@ 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 + }) + }, + // 保存 + 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/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)+'...' + } + 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]; + } + 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); + } + }, + /** * 生命周期函数--监听页面初次渲染完成 */ @@ -205,7 +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) + // } }, /** diff --git a/pages/info/sceneProductInfo/index.wxml b/pages/info/sceneProductInfo/index.wxml index ed55744..6e12acb 100644 --- a/pages/info/sceneProductInfo/index.wxml +++ b/pages/info/sceneProductInfo/index.wxml @@ -1,5 +1,6 @@ +