// 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({ /** * 页面的初始数据 */ data: { info: null, bookingInfo: null, bookingInfoTitle: "", safeBottom: app.globalData.safeBottom, isLike: 0, comment: [], commentTotal: 0, isTest: true, retailId: "", shareImg: null, showShareFlag: false, showAllowance: false, allowance_data:null, //购物车数量 producNum: 1, skuIndex: 0, aniSkuIndex: -1, cartCount: 0, cartImgInfo: null, cartTop: 0, top: 0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { if (!options.id) { util.back() return; } if (options.retailId) { this.setData({ retailId: options.retailId }) } this.setData({ id: options.id }) commonApi._post("scene/detail", { id: options.id }).then(res => { if (!res.data) { wx.showToast({ title: '产品已下架', icon: 'none' }) setTimeout(() => { util.back(); }, 1000) return; } 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) { res.data.product = [pItem]; } } // 如果带有指定skuid的话 那么取指定的sku展示 if (options.skuid) { let pItem = null; for (let i = 0; i < res.data.product.length; i++) { for (let j = 0; j < res.data.product[i].sku.length; j++) { if (res.data.product[i].sku[j].id == options.skuid) { res.data.product[i].sku = [res.data.product[i].sku[j]]; pItem = res.data.product[i]; break; } } } if (pItem) { res.data.product = [pItem]; } } // res.data.listimg = res.data.listimg?res.data.listimg.split(","):[]; 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 }) util.pagePoint({ event: 'scene_view', param: { type: res.data.type, id: res.data.id } }, 1) this.BroswerRecord() }) // 获取收藏的状态 if (wx.getStorageSync("jstrip_token")) { commonApi.user_post("scene/is_scene_collection", { scene_id: options.id }).then(res => { this.setData({ isLike: res.data }) }) } commonApi._post("ask/getQuestionList", { scene_id: options.id, page_no: 1, page_num: 3 }).then(res => { this.setData({ ask: res.data.rows }) console.log(res) }) // 获取评价列表 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 }) console.log(res) }) }, changeAllowance: function () { this.setData({ showAllowance: !this.data.showAllowance }) }, 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) }, 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) { wx.showToast({ title: '操作成功', }) this.setData({ isLike: isLike == 1 ? 0 : 1 }) } }) }, gotolocation: function () { let info = this.data.info; wx.openLocation({ latitude: Number(info.lat), longitude: Number(info.lon) }) }, audioGuide: function () { wx.navigateToMiniProgram({ appId: 'wx74f380bc721a0379', path: '/pages/listen/listen?title=君到苏州' }) }, showBookingInfo: function (e) { this.setData({ bookingInfo: e.currentTarget.dataset.item.sku_model, bookingInfoTitle: e.currentTarget.dataset.item.sku_name }) util.pagePoint({ event: "scene_notice", param: { type: this.data.info.type, id: this.data.info.id } }, 1) }, closeMask: function () { this.setData({ bookingInfo: null }) }, order: function (e) { console.log(this.data.info,this.data.skuFlag) if (e.currentTarget.dataset.disable == 1) return; util.pagePoint({ event: 'scene_order', param: { type: this.data.info.type, id: this.data.info.id } }, 1) wx.setStorageSync('login_from', 'scene_order_login') wx.setStorageSync('order_from', 'scene_order_submit') app.globalData.couponInfo = null; app.globalData.retailId = this.data.retailId; // let sku = e.currentTarget.dataset.sku,product = e.currentTarget.dataset.product; app.globalData.product = e.currentTarget.dataset; wx.navigateTo({ url: '/pages/order/scene/index', }) }, // order: function (e) { // console.log(this.data.info,this.data.skuFlag) // if (this.data.skuFlag == 'order'){ // if (e.currentTarget.dataset.disable == 1) return; // util.pagePoint({ // event: 'scene_order', // param: { // type: this.data.info.type, // id: this.data.info.id // } // }, 1) // wx.setStorageSync('login_from', 'scene_order_login') // wx.setStorageSync('order_from', 'scene_order_submit') // app.globalData.couponInfo = null; // app.globalData.retailId = this.data.retailId; // // let sku = e.currentTarget.dataset.sku,product = e.currentTarget.dataset.product; // app.globalData.product = e.currentTarget.dataset; // wx.navigateTo({ // url: '/pages/order/scene/index', // }) // }else { // commonApi.user_post("cart/add_sku", { // sku_id: this.data.info.product[0].sku[this.data.skuIndex].id, // num: this.data.producNum // }).then(res => { // if (res.code == 1) { // commonApi.user_post('cart/get_list', {}).then(res => { // this.setData({ // cartCount: res.data.length // }) // }) // // 加动效 // console.log(this.data.skuIndex) // this.setData({ // skuFlag: null, // aniSkuIndex: this.data.skuIndex, // cartImgInfo: null // }) // setTimeout(() => { // this.setData({ // aniSkuIndex: -1 // }) // wx.showModal({ // title: "提示", // content: "去购物车结算?", // success: function (res) { // if (res.confirm) { // wx.navigateTo({ // url: '/pages/user/cartlist/list', // }) // } // } // }) // }, 650) // } // }) // } // }, pagePoint: function (e) { util.pagePoint({ event: e.currentTarget.dataset.event, param: { type: this.data.info.type, id: this.data.info.id } }, 1) }, // 分享 share: function () { if (!wx.getStorageSync("jstrip_token")) { wx.setStorageSync('login_from', 'scene_share_login') commonApi.user_post("user/getMyInfo", {}).then(res => { }).catch(err => { }) return; } if (!this.data.shareImg) { wx.showToast({ title: '图片生成中,稍后再试', icon: 'none' }) return; } this.setData({ showShareFlag: !this.data.showShareFlag }) }, // 保存 save() { let url = this.data.shareImg, that = this; wx.authorize({ /* 这个就是保存相册的 */ scope: 'scope.writePhotosAlbum', success() { wx.saveImageToPhotosAlbum({ filePath: url, success(res) { wx.showToast({ title: '保存成功', icon: "success" }) that.setData({ showShareFlag: !that.data.showShareFlag }) util.pagePoint({ event: 'scene_share_save', param: { type: that.data.info.type, id: that.data.info.id } }, 1) }, fail(res) { wx.showToast({ title: '保存失败', icon: 'none' }) } }) }, complete(res) { console.log(res); /* 这里判断一下如果没有授权重新打开设置选项 */ wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { /* 打开设置的方法 */ // opensit(); wx.showToast({ title: '请打开权限后再试', icon: 'none' }) } } }); } }); }, // 绘制海报 drawImg: function () { var that = this, userinfo = wx.getStorageSync('jstrip_userInfo'); if (!userinfo) { // 去登录 return false; } const ctx = wx.createCanvasContext('imageCanvas'); // const device = wx.getSystemInfoSync(); // const ratio = device.screenWidth / 750; // 先获取到图片信息 let promise2 = new Promise(function (resolve, reject) { wx.getImageInfo({ src: that.data.info.headimg, success: function (res) { resolve(res); }, fail: function (res) { reject(res); } }) }) let promise3 = new Promise(function (resolve, reject) { let userid = wx.getStorageSync('jstrip_userid') new QRCode('myQrcode', { text: 'https://m.cloud.sz-trip.com/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.sub_title if (subtitle && subtitle.length > 10) { subtitle = subtitle.substr(0, 10) + '...' } if (subtitle) { 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); } }, //加入购物车 showCart: function () { console.log(this.data) if (this.data.info.product[0].sku.length == 0) { wx.showToast({ title: '该产品未设置规格,不能加购', icon: 'none' }) return; } this.setData({ skuFlag: "cart" }) let that = this wx.createSelectorQuery().select('#skuImg').boundingClientRect(function (res) { console.log(res) that.setData({ cartImgInfo: 'top:' + res.top + 'px;left:' + res.left + 'px;' }) }).exec() }, hideSku: function () { this.setData({ skuFlag: null, cartImgInfo: null }) }, //加减数量 minus: function () { if (this.data.producNum == 1) return; this.setData({ producNum: this.data.producNum - 1 }) }, add: function () { this.setData({ producNum: this.data.producNum + 1 }) }, //立即预定 showOrder: function () { if (this.data.info.product[0].sku.length == 0) { wx.showToast({ title: '该产品未设置规格,不能购买', icon: 'none' }) return; } this.setData({ skuFlag: 'order' }) }, selectSku: function (e) { let index = e.currentTarget.dataset.index; this.setData({ skuIndex: index }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { if (app.globalData.configJson) { this.setData({ isTest: app.globalData.configJson.isTest }) } else { setTimeout(() => { this.onReady() }, 300) } }, /** * 生命周期函数--监听页面显示 */ onShow: function () { if (!wx.getStorageSync('jstrip_token')) { return; } if (this.data.info && this.data.info.id) { this.drawImg() // 获取补贴 if (this.data.product.length == 1) { commonApi.user_post("product/getProductAllowancePrice", { product_code: this.data.product[0].product.product_code }).then(resTwo => { console.log(resTwo) if (resTwo && resTwo.code == 1) { this.setData({ allowance_data: resTwo.data }) let spread_price = Number(this.data.allowance_data.discount_limit_price - this.data.allowance_data.user_used_price) let sInfo = this.data.product[0].sku console.log(9999, this.data.allowance_data.discount_rate / 100 * sInfo.price) console.log(9999, spread_price) if (spread_price > 0) { if (spread_price < this.data.allowance_data.discount_rate / 100 * sInfo.price) { this.setData({ allowance_price: spread_price }) } else { this.setData({ allowance_price: this.data.allowance_data.discount_rate / 100 * sInfo.price }) } this.changePrice() } else { this.setData({ allowance_price: 0 }) } } }) } commonApi.user_post('cart/get_list', {}).then(res => { console.log(res,res.data) this.setData({ cartCount: res.data.length }) }) } else { setTimeout(() => { this.onShow() }, 200) } }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })