From 78a497ddb1194abc646d7ac2975618b50967ec8a Mon Sep 17 00:00:00 2001 From: xuetaotao Date: Wed, 1 Jun 2022 18:06:03 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E8=B4=B4=E6=8E=A5=E5=85=A5=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 补贴接入中 --- pages/info/postProductInfo/index.js | 460 +++++++++++++------------- pages/info/postProductInfo/index.wxml | 58 ++-- pages/info/postProductInfo/index.wxss | 153 ++++++++- project.private.config.json | 6 +- utils/https.js | 4 +- 5 files changed, 422 insertions(+), 259 deletions(-) diff --git a/pages/info/postProductInfo/index.js b/pages/info/postProductInfo/index.js index 59e0bd0..375cb58 100644 --- a/pages/info/postProductInfo/index.js +++ b/pages/info/postProductInfo/index.js @@ -11,235 +11,247 @@ Page({ * 页面的初始数据 */ data: { - autoPlay:true, - fixed:false, - type:1, - top:0, - isLike:0, - commentTotal:0, - comment:[], - info:null, - skuFlag:null, - producNum:1, - skuIndex:0, - aniSkuIndex:-1, - retailId:"", - cartTop:0, - cartImgInfo:null, - cartCount:0, - shareImg:null, - showShareFlag:false + autoPlay: true, + fixed: false, + type: 1, + top: 0, + isLike: 0, + commentTotal: 0, + comment: [], + info: null, + skuFlag: null, + producNum: 1, + skuIndex: 0, + aniSkuIndex: -1, + retailId: "", + cartTop: 0, + cartImgInfo: null, + cartCount: 0, + shareImg: null, + showShareFlag: false, + allowance_data: null }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { - let rect = wx.getMenuButtonBoundingClientRect(),that = this; + let rect = wx.getMenuButtonBoundingClientRect(), that = this; let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight; this.setData({ - top:height, - id:options.id + top: height, + id: options.id }) // 获取购物车按钮的位置 - wx.createSelectorQuery().select('#cart').boundingClientRect(function(res){ + wx.createSelectorQuery().select('#cart').boundingClientRect(function (res) { that.setData({ - cartTop:res.top + cartTop: res.top }) }).exec() - if(options.retailId){ + if (options.retailId) { this.setData({ - retailId:options.retailId + retailId: options.retailId }) } - commonApi._post("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); + commonApi._post("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]; } - res.data.flag = res.data.sku.find(item=>item.flag=='on')?res.data.flag:0 + res.data.flag = res.data.sku.find(item => item.flag == 'on') ? res.data.flag : 0 this.setData({ - info:res.data + info: res.data }) - + + // 获取补贴 + // commonApi.user_post("product/getProductAllowancePrice", { + // product_code: res.data.product_code + // }).then(resTwo => { + // if (resTwo) { + // this.setData({ + // allowance_data: resTwo.data + // }) + // } + // }) this.BroswerRecord() }) // 获取评价列表 - commonApi._post("product/product_comment_list",{ - product_id:options.id - }).then(res=>{ - res.data.list.map(item=>{ + commonApi._post("product/product_comment_list", { + product_id: options.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 }) }) + }, - 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/postProductInfo/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/postProductInfo/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 = this.data.isLike; - commonApi.user_post("product/"+(isLike==1?"product_cancel_collection":"product_collection"),{ - product_id:id - }).then(res=>{ - if(res.code==1){ + like: function () { + let id = this.data.id, isLike = this.data.isLike; + commonApi.user_post("product/" + (isLike == 1 ? "product_cancel_collection" : "product_collection"), { + product_id: id + }).then(res => { + if (res.code == 1) { this.setData({ - isLike:isLike==1?0:1 + isLike: isLike == 1 ? 0 : 1 }) } }) }, - 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){ - if(rect.top<=topHeight){ + wx.createSelectorQuery().select('#menus').boundingClientRect(function (rect) { + 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获取位置信息 - let minHeight = that.data.fixed?(110 * ratio + height): topHeight; - query.exec(function(res) { - if(res[2].top{ - if(res.code==1){ - commonApi.user_post('cart/get_list',{}).then(res=>{ + commonApi.user_post("cart/add_sku", { + sku_id: this.data.info.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 + cartCount: res.data.length }) }) // 加动效 this.setData({ - skuFlag:null, - aniSkuIndex:this.data.skuIndex, - cartImgInfo:null + skuFlag: null, + aniSkuIndex: this.data.skuIndex, + cartImgInfo: null }) - setTimeout(()=>{ + setTimeout(() => { this.setData({ - aniSkuIndex:-1 + aniSkuIndex: -1 }) wx.showModal({ - title:"提示", - content:"去购物车结算？", - success:function(res){ - if(res.confirm){ + title: "提示", + content: "去购物车结算？", + success: function (res) { + if (res.confirm) { wx.navigateTo({ url: '/pages/user/cartlist/list', }) } } }) - },650) + }, 650) } }) } }, // 分享 - share:function(){ - if(!wx.getStorageSync("jstrip_token")){ + share: function () { + if (!wx.getStorageSync("jstrip_token")) { util.pagePoint({ - event:'product_share_login', - type:this.data.info.type, - id:this.data.info.id - },1) - commonApi.user_post("user/getMyInfo",{}).then(res=>{ + event: 'product_share_login', + type: this.data.info.type, + id: this.data.info.id + }, 1) + 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 }) util.pagePoint({ - event:'product_share_save', - type:that.data.info.type, - id:that.data.info.id - },1) + event: 'product_share_save', + type: that.data.info.type, + id: that.data.info.id + }, 1) }, - 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' + }) + } + } + }); } - }); - + }); + }, - pagePoint: function(e) { + pagePoint: function (e) { util.pagePoint(e) }, // 绘制海报 - 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.headimg, - success:function(res){ + src: that.data.info.headimg, + 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/MailMerchandiseDetail?id='+that.data.info.id+'&sharedUserId='+userid+'&channel=-1', + new QRCode('myQrcode', { + text: 'https://m.cloud.sz-trip.com/MailMerchandiseDetail?id=' + that.data.info.id + '&sharedUserId=' + userid + '&channel=-1', width: 500, height: 500, padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0 @@ -398,52 +410,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"); @@ -455,33 +467,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); @@ -489,16 +501,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); @@ -512,8 +524,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]; @@ -560,34 +572,34 @@ Page({ * 生命周期函数--监听页面显示 */ onShow: function () { - if(!wx.getStorageSync('jstrip_token')){ + if (!wx.getStorageSync('jstrip_token')) { return; } - if(this.data.info && this.data.info.id){ - commonApi.user_post("product/is_product_collection",{ - product_id:this.data.info.id - }).then(res=>{ + if (this.data.info && this.data.info.id) { + commonApi.user_post("product/is_product_collection", { + product_id: this.data.info.id + }).then(res => { this.setData({ - isLike:res.data + isLike: res.data }) this.drawImg() }) - commonApi.user_post('cart/get_list',{}).then(res=>{ + commonApi.user_post('cart/get_list', {}).then(res => { this.setData({ - cartCount:res.data.length + cartCount: res.data.length }) }) } else { - setTimeout(()=>{ + setTimeout(() => { this.onShow() - },200) + }, 200) } }, - playVideo(){ + playVideo() { // 播放视频需要把autoplay暂停 this.setData({ - autoPlay:false + autoPlay: false }) }, diff --git a/pages/info/postProductInfo/index.wxml b/pages/info/postProductInfo/index.wxml index 5c1896a..55e21d5 100644 --- a/pages/info/postProductInfo/index.wxml +++ b/pages/info/postProductInfo/index.wxml @@ -2,12 +2,13 @@ - - + + - + @@ -17,11 +18,17 @@ + + 补贴价 + {{ allowance_data.mini_price / 100 }} + 单品最高补贴{{ allowance_data.max_price / 100 }}元 + {{info.title}} {{info.subtitle}} - {{item}} + {{item}} + ￥{{info.price/100}}起 @@ -32,10 +39,10 @@ 预定须知 - - 产品特色 + + 产品特色 - + 费用说明 @@ -47,7 +54,8 @@ - 游客点评{{info.rate}}分 + 游客点评{{info.rate}}分 共{{commentTotal}}条 @@ -59,13 +67,15 @@ {{item.user.nickname}} - + {{item.create_time}} {{item.content}} - 查看全部点评 + + 查看全部点评 @@ -85,7 +95,8 @@ - + {{cartCount}} @@ -101,7 +112,8 @@ - {{item.sku_name}} + {{item.sku_name}} 数量 @@ -111,7 +123,8 @@ - {{skuFlag=='cart'?'确认':'立即购买'}} + {{skuFlag=='cart'?'确认':'立即购买'}} + 该商品已下架 @@ -127,15 +140,22 @@ 保存到相册 diff --git a/pages/info/postProductInfo/index.wxss b/pages/info/postProductInfo/index.wxss index d03a1ea..e33b657 100644 --- a/pages/info/postProductInfo/index.wxss +++ b/pages/info/postProductInfo/index.wxss @@ -2,15 +2,19 @@ page { background: #f2f2f2; } + .swiper { width: 100%; height: 420rpx; } -.swiper image,.swiper video { + +.swiper image, +.swiper video { height: 420rpx; display: block; width: 100%; } + .top-info { border-radius: 20rpx 20rpx 0 0; background: white; @@ -19,16 +23,19 @@ page { margin-top: -20rpx; padding: 20rpx 40rpx; } + .top-info .title { font-size: 32rpx; font-weight: 500; color: #000; } + .top-info .subtitle { color: #666; font-size: 27rpx; margin-top: 20rpx; } + .tags-box { margin-top: 10rpx; display: flex; @@ -37,6 +44,7 @@ page { font-size: 27rpx; height: 50rpx; } + .tags-box .tag { position: relative; line-height: 20rpx; @@ -45,6 +53,7 @@ page { line-height: 50rpx; margin-right: 10rpx; } + .tags-box .tag .line { content: "1"; display: block; @@ -57,31 +66,38 @@ page { top: 30rpx; z-index: -1; } + .tags-price { flex: 1; text-align: right; color: #D62828; } -.tags-price text:nth-child(1){ + +.tags-price text:nth-child(1) { font-size: 27rpx; } -.tags-price text:nth-child(2){ + +.tags-price text:nth-child(2) { font-size: 40rpx; font-weight: bold; } -.tags-price text:nth-child(3){ + +.tags-price text:nth-child(3) { font-size: 20rpx; color: #999999; margin-left: 4rpx; } + .tags-box .iconfont { margin-left: 4rpx; font-size: 24rpx; } + .address-box { justify-content: space-between; margin-top: 0; } + .info-address { color: #666; font-size: 27rpx; @@ -89,9 +105,11 @@ page { height: 30rpx; line-height: 30rpx; } + .address-box .iconfont { font-size: 34rpx; } + .date-all-box { margin: 24rpx 20rpx; display: flex; @@ -105,6 +123,7 @@ page { font-weight: 500; padding: 0 37rpx; } + .days { text-align: center; font-size: 400; @@ -115,11 +134,13 @@ page { border: 1px solid white; font-size: 23rpx; } + .picker text { font-weight: 400; font-size: 21rpx; margin-left: 13rpx; } + .product-item { display: flex; align-items: flex-end; @@ -129,6 +150,7 @@ page { background: white; border-radius: 13rpx; } + .product-item image { width: 201rpx; height: 201rpx; @@ -136,28 +158,34 @@ page { margin-right: 26rpx; flex-shrink: 0; } + .product-item .product-info { flex: 1; } + .product-item .product-info .title { font-size: 32rpx; color: #000; font-weight: 500; } + .product-right { flex-shrink: 0; margin-left: 20rpx; } + .product-right .price { color: #D62828; font-size: 40rpx; font-weight: 500; } + .product-right .price::before { content: "￥"; font-size: 27rpx; font-weight: 400; } + .product-right .btn { color: #fff; width: 120rpx; @@ -169,6 +197,7 @@ page { text-align: center; margin-top: 20rpx; } + .product-info .subtitle { font-size: 24rpx; line-height: 36rpx; @@ -178,10 +207,12 @@ page { color: #999; white-space: normal; } + .product-tags { display: flex; align-items: center; } + .product-tag { font-size: 20rpx; color: #0B898E; @@ -191,14 +222,17 @@ page { padding: 0 15rpx; margin-right: 13rpx; } + .product-tags .product-tags:last-child { margin-right: 0; } + .box { margin: 20rpx; background: white; border-radius: 13rpx; } + .box-top { line-height: 95rpx; border-bottom: 1rpx solid #d9d9d9; @@ -207,17 +241,20 @@ page { font-size: 35rpx; padding: 0 20rpx; } + .box-top .iconfont { color: #0B898E; font-size: 33rpx; margin-right: 16rpx; } + .empty-box { text-align: center; padding: 40rpx 0; font-size: 23rpx; color: #333; } + .empty-btn { margin: 0 auto; margin-top: 30rpx; @@ -229,17 +266,20 @@ page { font-size: 32rpx; margin-bottom: 10rpx; } + .box-top .score { color: #D62828; font-size: 30rpx; font-weight: 400; margin-left: 11rpx; } + .product-comment { margin: 0 20rpx; border-bottom: 1rpx solid #ccc; padding: 33rpx 0; } + .product-comment-top { display: flex; justify-content: space-between; @@ -247,31 +287,37 @@ page { align-items: center; font-size: 24rpx; } + .product-comment-top image { flex-shrink: 0; width: 57rpx; height: 57rpx; border-radius: 50%; } + .product-comment-top .comment-info { flex: 1; margin: 0 15rpx; color: #666; font-size: 21rpx; } + .product-comment-top .comment-info .iconfont { color: #D62828; font-size: 22rpx; } -.product-comment-top .comment-info .iconfont text { + +.product-comment-top .comment-info .iconfont text { margin-right: 6rpx; } + .comment-content { margin-left: 72rpx; margin-top: 36rpx; font-size: 28rpx; color: #000; } + .more-comment-btn { line-height: 93rpx; margin-right: 20rpx; @@ -280,20 +326,24 @@ page { font-size: 27rpx; font-weight: 500; } + .more-comment-btn .iconfont { margin-left: 6rpx; font-size: 24rpx; } + .all-comment-num { float: right; color: #999999; font-size: 27rpx; font-weight: 400; } + .scroll-all-box { margin: 24rpx 0; background: white; } + .scroll-menus { padding: 0 40rpx; display: flex; @@ -304,10 +354,12 @@ page { height: 84rpx; border-bottom: 1rpx solid #d9d9d9; } + .scroll-menu-item { position: relative; line-height: 84rpx; } + .scroll-menu-item.active::after { content: "1"; font-size: 0; @@ -321,6 +373,7 @@ page { margin-left: -23rpx; bottom: 0rpx; } + .fixed-menus { position: fixed; left: 0; @@ -328,15 +381,18 @@ page { background: white; z-index: 1; } + .info-title { font-size: 35rpx; font-weight: bold; color: #000; margin-bottom: 30rpx; } + .info-box { padding: 20rpx 40rpx; } + .fixed-bottom { position: fixed; left: 0; @@ -353,10 +409,12 @@ page { justify-content: space-between; text-align: center; } + .fixed-bottom .iconfont { font-size: 34rpx; line-height: 40rpx; } + .btns { color: #fff; font-size: 32rpx; @@ -367,21 +425,26 @@ page { align-items: center; justify-content: center; } -.btns .btn{ + +.btns .btn { width: 216rpx; line-height: 78rpx; background: #D62828; } -.btns .btn:nth-child(1){ + +.btns .btn:nth-child(1) { margin-right: 3rpx; border-radius: 39rpx 0 0 39rpx; } -.btns .btn:nth-child(2){ + +.btns .btn:nth-child(2) { border-radius: 0 39rpx 39rpx 0; } + .btns .btn.disable { background: #ccc; } + .mask-content { position: absolute; left: 0; @@ -389,16 +452,19 @@ page { bottom: 0; width: 100%; } + .mask-content .icon-close { position: absolute; right: 40rpx; top: 40rpx; } + .sku-info-box { margin: 50rpx 40rpx; display: flex; justify-content: space-between; } + .sku-info-box image { width: 218rpx; height: 180rpx; @@ -407,24 +473,29 @@ page { margin-right: 40rpx; flex-shrink: 0; } + .sku-info { flex: 1; } + .sku-price { font-size: 40rpx; font-weight: 500; color: #D62828; margin: 20rpx 0; } + .sku-price::before { content: "￥"; font-weight: 400; font-size: 27rpx; } + .sku-name { font-size: 27rpx; color: #666666; } + .sku-names { display: flex; font-size: 29rpx; @@ -434,6 +505,7 @@ page { flex-wrap: wrap; margin-bottom: 20rpx; } + .sku-name-item { background: #EFEFEF; border: 1rpx solid #EFEFEF; @@ -443,14 +515,17 @@ page { margin-bottom: 25rpx; margin-right: 30rpx; } -.sku-name-item:nth-child(2n){ + +.sku-name-item:nth-child(2n) { margin-right: 0; } + .sku-name-item.active { color: #0B898E; border-color: #0B898E; background: rgba(11, 137, 142, 0.1); } + .number-box { display: flex; align-items: center; @@ -459,11 +534,13 @@ page { margin: 0 40rpx; padding: 40rpx 0; } + .number-box text { flex: 1; font-size: 29rpx; color: #333; } + .number-box view { border: 1rpx solid #666; border-radius: 7rpx; @@ -473,14 +550,17 @@ page { font-size: 33rpx; color: #000; } + .number-box view.disable { border-color: #ccc; color: #999; } + .number-box view.number { width: 94rpx; margin: 0 15rpx; } + .btn-box { height: 138rpx; background: #FFFFFF; @@ -493,6 +573,7 @@ page { right: 0; bottom: 0; } + .mask-btn { width: 670rpx; line-height: 78rpx; @@ -503,9 +584,11 @@ page { font-size: 33rpx; font-weight: 500; } + .mask-btn.disable { background: #ccc; } + /* .icon-xin,.icon-shoucang { position: absolute; right: 20rpx; @@ -532,11 +615,13 @@ page { font-size: 36rpx; z-index: 1; } + .icon-shoucang { color: #D62828; font-size: 40rpx !important; } + /* 购物车 */ .cart-box { position: fixed; @@ -551,10 +636,12 @@ page { right: 20rpx; bottom: 166rpx; } + .cart-box image { display: block; width: 49rpx; } + .cart-num { width: 26rpx; border: 1rpx solid; @@ -567,6 +654,7 @@ page { right: -2rpx; top: -5rpx; } + .headimg { position: fixed; z-index: 3; @@ -575,13 +663,15 @@ page { 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; + 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; @@ -591,10 +681,12 @@ page { align-items: center; justify-content: center; } + .share-img { display: block; width: 551rpx; } + .share-tips { width: 426rpx; height: 150rpx; @@ -610,12 +702,14 @@ page { text-align: center; line-height: 40rpx; } + .share-tips .img { display: block; width: 55rpx; margin: 0 auto; margin-bottom: 4rpx; } + .tipimg { position: absolute; left: 50%; @@ -629,11 +723,13 @@ page { justify-content: center; top: 34rpx; } + .tipimg image { width: 21rpx; display: block; - + } + .save-btn { width: 403rpx; line-height: 77rpx; @@ -644,4 +740,39 @@ page { font-size: 31rpx; font-weight: 500; margin-top: 50rpx; +} + +.allowance-box { + height: 114rpx; + background-image: url("/static/images/detail/allowanceBacTwo.png"); + padding: 20rpx 10rpx; + font-size: 18rpx; + color: #FFFFFF; + margin-top: -60rpx; + position: relative; + display: flex; + justify-content: start; +} + +.allowance-box .com-price { + font-size: 30rpx; + color: #FFFFFF; +} + +.allowance-box .com-price:before { + font-size: 18rpx; + color: #FFFFFF; +} + +.allowance-box .com-price:after { + font-size: 18rpx; + color: #FFFFFF; +} + +.allowance-box .yellow { + color: #DF2115; + padding: 8rpx 14rpx; + background-color: #FDEDD4; + margin-left: 20rpx; + border-radius: 30rpx; } \ No newline at end of file diff --git a/project.private.config.json b/project.private.config.json index 337eb90..48d2c65 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -13,9 +13,9 @@ "miniprogram": { "list": [ { - "name": "pages/list/museum/index", - "pathName": "pages/list/museum/index", - "query": "id=59532203100900035699", + "name": "产品详情4407", + "pathName": "pages/info/postProductInfo/index", + "query": "id=4407", "scene": null }, { diff --git a/utils/https.js b/utils/https.js index 9cb9ea0..c10da7b 100644 --- a/utils/https.js +++ b/utils/https.js @@ -1,8 +1,8 @@ var app = getApp(); import util from "../utils/util" // import userApi from "../utils/https/user.js"; -// const baseUrl = "https://test.api.cloud.sz-trip.com/api/"; -const baseUrl = "https://api.cloud.sz-trip.com/api/"; +const baseUrl = "https://test.api.cloud.sz-trip.com/api/"; +// const baseUrl = "https://api.cloud.sz-trip.com/api/"; const orders = ['','weight','distance','sale_number','sale_price','price']; //封装GET请求 function _get(url,data) {