diff --git a/pages/index/index.js b/pages/index/index.js index 17d0c1f..402f7d1 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -265,7 +265,7 @@ Page({ if(!this.data.listMore) return; commonApi._post("search/recommend",{ offset:this.data.list.length, - limit:10, + limit:16, lon:this.data.lon, lat:this.data.lat }).then(res=>{ @@ -289,7 +289,7 @@ Page({ }) }, onReachBottom:function(){ - this.getList() + // this.getList() }, gotoDetail:function(e){ let item = e.currentTarget.dataset.item; diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 91ffc71..f3ecba3 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -308,7 +308,6 @@ - - 暂无更多推荐 - + 查看更多 + 暂无更多推荐 diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 06dd536..a33ea08 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -464,4 +464,11 @@ } .title-header .icon-fanhui1 { display: none; +} +.more-btn-text { + text-align: center; + line-height: 40rpx; + color: #999; + font-size: 24rpx; + margin-bottom: 20rpx; } \ No newline at end of file diff --git a/pages/info/postProductInfo/index.js b/pages/info/postProductInfo/index.js index 8b164be..5d89da3 100644 --- a/pages/info/postProductInfo/index.js +++ b/pages/info/postProductInfo/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({ @@ -19,19 +20,32 @@ Page({ skuFlag:null, producNum:1, skuIndex:0, - retailId:"" + aniSkuIndex:-1, + retailId:"", + cartTop:0, + cartImgInfo:null, + cartCount:0, + shareImg:null, + showShareFlag:false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { - let rect = wx.getMenuButtonBoundingClientRect(); + let rect = wx.getMenuButtonBoundingClientRect(),that = this; let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight; this.setData({ top:height, id:options.id }) + // 获取购物车按钮的位置 + wx.createSelectorQuery().select('#cart').boundingClientRect(function(res){ + that.setData({ + cartTop:res.top + }) + }).exec() + if(options.retailId){ this.setData({ retailId:options.retailId @@ -48,6 +62,7 @@ Page({ this.setData({ info:res.data }) + this.drawImg() this.BroswerRecord() }) if(wx.getStorageSync("jstrip_token")){ @@ -58,6 +73,11 @@ Page({ isLike:res.data }) }) + commonApi.user_post('cart/get_list',{}).then(res=>{ + this.setData({ + cartCount:res.data.length + }) + }) } // 获取评价列表 commonApi._post("product/product_comment_list",{ @@ -160,13 +180,29 @@ Page({ }, showCart:function(){ + if(this.data.info.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 + skuFlag:null, + cartImgInfo:null }) }, minus:function(){ @@ -187,6 +223,13 @@ Page({ }) }, showOrder:function(){ + if(this.data.info.sku.length==0){ + wx.showToast({ + title: '该产品未设置规格,不能购买', + icon:'none' + }) + return; + } this.setData({ skuFlag:'order' }) @@ -212,17 +255,289 @@ Page({ num:this.data.producNum }).then(res=>{ if(res.code==1){ - wx.showToast({ - title: '加入购物车成功', - icon:"success" - }); + commonApi.user_post('cart/get_list',{}).then(res=>{ + this.setData({ + cartCount:res.data.length + }) + }) + // 加动效 this.setData({ - skuFlag:null + 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) } }) } }, + // 分享 + 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/MailMerchandiseDetail?id='+that.data.info.id+'&userId='+userid, + width: 500, + height: 500, + padding: 12, // 生成二维码四周自动留边宽度,不传入默认为0 + correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度 + callback: (res) => { + resolve(res); + } + }) + }) + //成功得到图片信息后,开始绘图 + Promise.all([promise2,promise3]).then(imgs=>{ + ctx.save(); + ctx.beginPath(); //开始绘制 + that.handleBorderRect(ctx,0,0,551 * ratio,407 * ratio,25 * ratio,'#ccc') + ctx.clip();//画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因 + ctx.drawImage(imgs[0].path, 0, 0,551 * ratio,407 * ratio); + ctx.restore(); + ctx.save(); + that.handleBorderRect2(ctx,0,407 * ratio,551 * ratio,236*ratio,25 * ratio,'#fff') + ctx.restore(); + // 绘制二维码 + ctx.drawImage(imgs[1].path, 373 * ratio, 495 * ratio,137 * ratio, 137 * ratio); + // 开始文字绘制 + ctx.setFillStyle("#000"); + ctx.setFontSize(30 * ratio); //字大小 + ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 + that.drawText(ctx,that.data.info.title, 25*ratio, 450*ratio,480 * ratio,ratio); + // 售价 + ctx.setFillStyle("#D62828"); + ctx.setFontSize(40 * ratio); //字大小 + ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 + let price = "¥"+(that.data.info.price/100); + let width = ctx.measureText(price).width; + ctx.fillText(price, 25*ratio, 620*ratio); + // 副标题 + ctx.setFillStyle("#999999"); + ctx.setFontSize(28 * ratio); //字大小 + ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 + let subtitle = that.data.info.subtitle; + if(that.data.info.subtitle.length>10){ + subtitle = that.data.info.subtitle.substr(0,10)+'...' + } + ctx.fillText(subtitle, 25*ratio, 540*ratio); + // ctx.draw(); + // 划线价 + ctx.setFillStyle("#999999"); + ctx.setFontSize(32 * ratio); //字大小 + ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 + let market_price = "¥"+(that.data.info.market_price/100) + ctx.fillText(market_price, 40*ratio + width, 620*ratio); + let market_price_width = ctx.measureText(market_price).width; + // 划线 + ctx.beginPath() + ctx.setLineWidth(1) + ctx.moveTo(40*ratio + width, 608*ratio) + ctx.lineTo(45*ratio + width + market_price_width, 608*ratio) + ctx.stroke(); + // 长按识别二维码 + // ctx.setFillStyle("#666"); + // ctx.setFontSize(22 * ratio); //字大小 + // ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 + // ctx.fillText("长按识别二维码", 404*ratio, 710*ratio); + // 长按图片转发或保存 + // ctx.setFillStyle("#000"); + // ctx.setFontSize(24 * ratio); //字大小 + // ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 + // ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio); + ctx.draw(); + // 转为图片 + setTimeout(()=>{ + wx.canvasToTempFilePath({ + x: 0, + y: 0, + canvasId: 'imageCanvas', + success: function (res) { + that.setData({ + shareImg:res.tempFilePath + }) + }, + fail(err){ + console.log('agdgjgdajhg',err) + } + }) + },500) + return false; + }).catch(err=>{ + console.log("this err",err) + }) + }, + // 圆角矩形 + handleBorderRect(ctx, x, y, w, h, r, color){ + ctx.beginPath(); + ctx.moveTo(x+w,y+h); + ctx.lineTo(x,y+h) + // 左上角 + ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI); + ctx.moveTo(x + r, y); + ctx.lineTo(x + w - r, y); + ctx.lineTo(x + w, y + r); + // 右上角 + ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI); + ctx.lineTo(x + w, y + h ); + ctx.lineTo(x + w - r, y + h); + ctx.fillStyle = color; + ctx.fill(); + ctx.closePath(); + }, + handleBorderRect2(ctx, x, y, w, h, r, color){ + ctx.beginPath(); + ctx.moveTo(x,y); + ctx.lineTo(x+w,y) + // 右下角 + ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI); + ctx.lineTo(x + r, y + h); + ctx.lineTo(x, y + h - r); + // 左下角 + ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI); + ctx.lineTo(x, y); + ctx.lineTo(x, y); + ctx.fillStyle = color; + ctx.fill(); + ctx.closePath(); + }, + // 绘制两行文字 + drawText: function(ctx, str, x, y, canvasWidth,ratio) { + let row = [],temp="",chr=str.split(""); + for (var a = 0; a < chr.length; a++) { + if (ctx.measureText(temp).width < canvasWidth) { + temp += chr[a]; + } + else { + a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比 + row.push(temp); + temp = ""; + } + } + row.push(temp); + + //如果数组长度大于2 则截取前两个 + if (row.length > 2) { + var rowCut = row.slice(0, 2); + var rowPart = rowCut[1]; + var test = ""; + var empty = []; + for (var a = 0; a < rowPart.length; a++) { + if (ctx.measureText(test).width < canvasWidth - 30 * ratio) { + test += rowPart[a]; + } + else { + break; + } + } + empty.push(test); + var group = empty[0] + "..."//这里只显示两行,超出的用...表示 + rowCut.splice(1, 1, group); + row = rowCut; + } + for (var b = 0; b < row.length; b++) { + ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth); + } + }, /** * 生命周期函数--监听页面初次渲染完成 */ diff --git a/pages/info/postProductInfo/index.wxml b/pages/info/postProductInfo/index.wxml index 47b89ee..4282a35 100644 --- a/pages/info/postProductInfo/index.wxml +++ b/pages/info/postProductInfo/index.wxml @@ -1,7 +1,8 @@ - + + @@ -28,35 +29,14 @@ 产品特色 - - 费用说明 - - 预订须知 - - @@ -87,22 +67,27 @@ 客服 - - - 购物车 - + + + 收藏 + 加入购物车 立即预订 + + + + {{cartCount}} + - + {{info.sku[skuIndex].price/100}} 已选择:{{info.sku[skuIndex].sku_name}} @@ -122,4 +107,29 @@ {{skuFlag=='cart'?'确认':'立即购买'}} + + + + + + + + + \ No newline at end of file diff --git a/pages/info/postProductInfo/index.wxss b/pages/info/postProductInfo/index.wxss index c267513..80824f3 100644 --- a/pages/info/postProductInfo/index.wxss +++ b/pages/info/postProductInfo/index.wxss @@ -355,6 +355,7 @@ page { } .fixed-bottom .iconfont { font-size: 34rpx; + line-height: 40rpx; } .btns { color: #fff; @@ -499,7 +500,20 @@ page { font-size: 33rpx; font-weight: 500; } -.icon-xin,.icon-shoucang { +/* .icon-xin,.icon-shoucang { + 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; +} */ +.icon-fenxiang { position: absolute; right: 20rpx; margin-top: 20rpx; @@ -514,4 +528,114 @@ page { } .icon-shoucang { color: #D62828; + font-size: 40rpx !important; + +} +/* 购物车 */ +.cart-box { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + width: 80rpx; + height: 80rpx; + background: #FFFFFF; + box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.2); + border-radius: 50%; + right: 20rpx; + bottom: 166rpx; +} +.cart-box image { + display: block; + width: 49rpx; +} +.cart-num { + width: 26rpx; + border: 1rpx solid; + border-radius: 50%; + line-height: 26rpx; + text-align: center; + font-size: 23rpx; + color: #D20000; + position: absolute; + right: -2rpx; + top: -5rpx; +} +.headimg { + position: fixed; + z-index: 3; + left: -218rpx; + width: 218rpx; + height: 180rpx; + top: 0; +} +.headimg.active { + transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1),width .6s ease,height .6s ease; + width: 80rpx; + height: 80rpx; + left: 650rpx; + border-radius: 50%; +} +.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/list/sale/index.wxml b/pages/list/sale/index.wxml index f252ae2..c2065fa 100644 --- a/pages/list/sale/index.wxml +++ b/pages/list/sale/index.wxml @@ -1,7 +1,7 @@ 正在疯抢 - 活动预告 + 新品专栏 diff --git a/pages/map/index.wxml b/pages/map/index.wxml index 3ef917c..e767152 100644 --- a/pages/map/index.wxml +++ b/pages/map/index.wxml @@ -28,7 +28,7 @@ - 文物 + 文保单位 @@ -42,10 +42,10 @@ 江南小书场 - + diff --git a/pages/order/postOrder/index.wxml b/pages/order/postOrder/index.wxml index a2d0663..0d76011 100644 --- a/pages/order/postOrder/index.wxml +++ b/pages/order/postOrder/index.wxml @@ -34,7 +34,7 @@ - 小计:{{item.sku.price/100 * item.productNum}} + 小计:{{item.sku.price * item.productNum /100}} diff --git a/project.config.json b/project.config.json index 88a16c0..2786333 100644 --- a/project.config.json +++ b/project.config.json @@ -4,7 +4,7 @@ "ignore": [] }, "setting": { - "urlCheck": false, + "urlCheck": true, "es6": true, "enhance": false, "postcss": true, diff --git a/project.private.config.json b/project.private.config.json index 61e95b9..846d55f 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -13,9 +13,9 @@ "miniprogram": { "list": [ { - "name": "pages/list/culturalUnit/index", - "pathName": "pages/list/culturalUnit/index", - "query": "url=https%3A%2F%2Fm.cloud.sz-trip.com%2FphotoWorksDetail%3Fid%3D1157%26type_id%3D1", + "name": "pages/info/postProductInfo/index", + "pathName": "pages/info/postProductInfo/index", + "query": "id=12677", "scene": null }, {