From a2851610cb15769e6549e716ebc506f238dd1e7e Mon Sep 17 00:00:00 2001 From: penglei <1317821900@qq.com> Date: Thu, 27 Dec 2018 12:36:40 +0800 Subject: [PATCH] =?UTF-8?q?1.=20=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E9=A1=B5=E6=96=B0=E5=A2=9E=E9=A2=86=E5=8F=96=E4=BC=98=E6=83=A0?= =?UTF-8?q?=E5=88=B8=E4=BB=A5=E5=8F=8A=E5=B1=95=E7=A4=BA=E4=BF=83=E9=94=80?= =?UTF-8?q?=E6=B4=BB=E5=8A=A8=202.=20=E8=B4=AD=E7=89=A9=E8=BD=A6=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=96=B0=E5=A2=9E=E9=A2=86=E5=8F=96=E4=BC=98=E6=83=A0?= =?UTF-8?q?=E5=88=B8=E4=BB=A5=E5=8F=8A=E5=B1=95=E7=A4=BA=E4=BF=83=E9=94=80?= =?UTF-8?q?=E6=B4=BB=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/store/cart/cart.css | 2 +- src/pages/store/cart/cart.js | 121 +++++++++- src/pages/store/cart/cart.less | 311 ++++++++++++++++++++++++- src/pages/store/cart/cart.wxml | 142 ++++++++++++ src/pages/store/cart/cart.wxss | 2 +- src/pages/store/detail/detail.css | 2 +- src/pages/store/detail/detail.js | 89 +++++++- src/pages/store/detail/detail.less | 351 +++++++++++++++++++++++++++++ src/pages/store/detail/detail.wxml | 159 ++++++++++++- src/pages/store/detail/detail.wxss | 2 +- 10 files changed, 1165 insertions(+), 16 deletions(-) diff --git a/src/pages/store/cart/cart.css b/src/pages/store/cart/cart.css index f2b5122..1b17203 100644 --- a/src/pages/store/cart/cart.css +++ b/src/pages/store/cart/cart.css @@ -1 +1 @@ -#store-cart .goods-box{padding-bottom:50px}#store-cart .goods-box .goods-item{display:flex;padding:10px;background:#FFF;font-size:12px;align-items:center}#store-cart .goods-box .goods-item .img-box image{display:block;width:80px;height:80px;border:1px solid #e5e5e5}#store-cart .goods-box .goods-item .item-info{margin-left:10px;line-height:20px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#store-cart .goods-box .goods-item .item-info .name{padding-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#store-cart .goods-box .goods-item .item-info .money-box{display:flex;color:#838383}#store-cart .goods-box .goods-item .item-info .money-box .model{flex:1}#store-cart .goods-box .goods-item .item-info .mun-box{display:flex;align-items:center}#store-cart .goods-box .goods-item .item-info .mun-box .change-num{flex:1;padding-top:4px}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul{display:flex}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li{display:block;list-style:none;width:30px;height:30px;border:1px solid #e8e8e8;text-align:center;line-height:30px}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li:nth-child(2){border-left:none;border-right:none}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li input{display:block;border:none;height:100%;width:100%;text-align:center;outline:0}#store-cart .goods-box .goods-item .item-info .mun-box .remove{color:#0899ff}#store-cart .buy-box{display:flex;align-items:center;position:fixed;bottom:0;width:100%;height:50px;line-height:50px;font-size:15px;background:#FFF;z-index:10}#store-cart .buy-box .checkbox{display:flex;align-items:center;margin:0 10px}#store-cart .buy-box .checkbox checkbox{display:flex}#store-cart .buy-box .money-box{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#store-cart .buy-box .num-box{height:100%;width:110px;text-align:center;color:#FFF;border-radius:0;background:#ff2741}#store-cart checkbox .wx-checkbox-input{border-radius:100%;background-color:#fff;border:1px solid #c1caca;box-shadow:0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05);height:14px;width:14px}#store-cart checkbox .wx-checkbox-input.wx-checkbox-input-checked{background-color:#ff2741;border:1px solid #ff2741} \ No newline at end of file +#store-cart .goods-box{padding-bottom:50px}#store-cart .goods-box .goods-item{display:flex;padding:10px;background:#FFF;font-size:12px;align-items:center}#store-cart .goods-box .goods-item .img-box image{display:block;width:80px;height:80px;border:1px solid #e5e5e5}#store-cart .goods-box .goods-item .item-info{margin-left:10px;line-height:20px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#store-cart .goods-box .goods-item .item-info .name{padding-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#store-cart .goods-box .goods-item .item-info .money-box{display:flex;color:#838383}#store-cart .goods-box .goods-item .item-info .money-box .model{flex:1}#store-cart .goods-box .goods-item .item-info .mun-box{display:flex;align-items:center}#store-cart .goods-box .goods-item .item-info .mun-box .change-num{flex:1;padding-top:4px}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul{display:flex}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li{display:block;list-style:none;width:30px;height:30px;border:1px solid #e8e8e8;text-align:center;line-height:30px}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li:nth-child(2){border-left:none;border-right:none}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li input{display:block;border:none;height:100%;width:100%;text-align:center;outline:0}#store-cart .goods-box .goods-item .item-info .mun-box .remove{color:#0899ff}#store-cart .buy-box{display:flex;align-items:center;position:fixed;bottom:0;width:100%;height:50px;line-height:50px;font-size:15px;background:#FFF;z-index:10}#store-cart .buy-box .checkbox{display:flex;align-items:center;margin:0 10px}#store-cart .buy-box .checkbox checkbox{display:flex}#store-cart .buy-box .money-box{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#store-cart .buy-box .num-box{height:100%;width:110px;text-align:center;color:#FFF;border-radius:0;background:#ff2741}#store-cart .discount-box .is-login,#store-cart .discount-box .no-login{background:#FFF;padding:10px 0 10px 15px;margin-bottom:10px;display:flex}#store-cart .discount-box .is-login{font-size:12px;align-items:center}#store-cart .discount-box .is-login .promotion-box{flex:1}#store-cart .discount-box .is-login .promotion-box .promotion{display:flex;align-items:center;color:#4a4a4a}#store-cart .discount-box .is-login .promotion-box .promotion .title{color:#ff2741;border:1px solid #ff2741;border-radius:3px;padding:3px 5px;margin-right:10px}#store-cart .discount-box .is-login .coupon{padding:0 15px;color:#ff2741}#store-cart .discount-box .is-login .coupon.mx-1px-left:before{border-left:1px solid #979797}#store-cart .discount-box .no-login{font-size:14px;align-items:center}#store-cart .discount-box .no-login .left{display:flex;align-items:center;flex:1}#store-cart .discount-box .no-login .left i{color:#e73237;margin-right:5px}#store-cart .discount-box .no-login .left span{color:#e73237}#store-cart .discount-box .no-login .right{color:#e73237;padding-right:15px}#store-cart .maks{position:fixed;bottom:0;width:100%;height:100%;z-index:40;background:rgba(0,0,0,.4);opacity:1;transition:opacity .3s ease;display:none}#store-cart .maks.cur{display:block}#store-cart .popup-box{background:#F7F7F7;position:fixed;bottom:0;width:100%;height:0;z-index:50;transition:all .3s linear}#store-cart .popup-box.cur{height:60%}#store-cart .popup-box .popup{height:100%;box-sizing:border-box}#store-cart .popup-box .popup .popup-top{padding:0 15px;background:#e9e9e9;text-align:center;overflow:visible}#store-cart .popup-box .popup .popup-top .title{position:relative;color:#4A4A4A;overflow:visible;font-size:14px;padding:10px 0}#store-cart .popup-box .popup .popup-top .title .close{position:absolute;right:-10px;top:0;padding:10px}#store-cart .popup-box .popup .popup-bottom{padding:0 15px;height:100%;overflow:auto;box-sizing:border-box}#store-cart .popup-box .popup .popup-bottom.coupon .title{font-size:14px;color:#000;padding-top:8px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box{margin-bottom:50px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item{margin-bottom:10px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item:first-child{margin-top:10px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon{display:flex}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon.shasow{box-shadow:0 7px 10px 0 rgba(6,0,0,.2)}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left{width:110px;height:80px;color:#fff;background:#ff2741;position:relative}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;font-size:12px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box{text-align:center;width:100%}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text{display:block;padding:0 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:20px;font-weight:600}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text.label{font-size:12px;font-weight:100}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text .money{font-size:14px;font-weight:100}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .money-num{font-size:25px;font-weight:700}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap{position:absolute;top:0;margin-top:5px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap .dot-item{width:5px;height:5px;background:#F7F7F7;border-radius:50%;margin:4px 0 9px -1px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap .dot-item:last-child{margin-top:10px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right{flex:1;background:#fff;padding:0 15px;font-size:12px;overflow:hidden}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .top{font-size:12px;display:-webkit-box;color:#333;height:40px;line-height:20px;padding-top:8px;box-sizing:border-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .top .type{color:#333;border:1px solid #333;padding:2px 5px;border-radius:3px;line-height:20px;margin-right:5px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:7px 0}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .tiem-box{color:#9E9E9F;flex:1;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .btn{text-align:center;border-radius:3px;padding:3px 12px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .use{color:#fff;border:1px solid #ff2741;background:#ff2741}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .already{color:#9B9B9B;background:#fff;border:1px solid #9B9B9B}#store-cart .popup-box .popup .popup-bottom.discounts{height:100%;overflow:auto;box-sizing:border-box}#store-cart .popup-box .popup .popup-bottom.discounts .disconts-item{display:flex;align-items:baseline;padding:10px 5px}#store-cart .popup-box .popup .popup-bottom.discounts .disconts-item:last-child:before{display:none}#store-cart .popup-box .popup .popup-bottom.discounts .disconts-item:last-child{margin-bottom:0}#store-cart .popup-box .popup .popup-bottom.discounts .disconts-item .discounts-tags-title{color:#ff2741;border:1px solid #ff2741;border-radius:3px;padding:0 5px;margin-right:10px}#store-cart .popup-box .popup .popup-bottom.discounts .disconts-item .tags-item{flex:1}#store-cart checkbox .wx-checkbox-input{border-radius:100%;background-color:#fff;border:1px solid #c1caca;box-shadow:0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05);height:14px;width:14px}#store-cart checkbox .wx-checkbox-input.wx-checkbox-input-checked{background-color:#ff2741;border:1px solid #ff2741} \ No newline at end of file diff --git a/src/pages/store/cart/cart.js b/src/pages/store/cart/cart.js index f5f5955..891aee2 100644 --- a/src/pages/store/cart/cart.js +++ b/src/pages/store/cart/cart.js @@ -17,7 +17,12 @@ Page({ select_products:{}, allCheck:true, channel:'normal', - loading:false + loading:false, + coupons: [], // 可领取的优惠券信息 + discounts: [], // 可享受的优惠折扣信息 + show_coupons: false, // 领取优惠券 + show_discounts: false, // 查看促销活动 + goodsList: [], // 购物车里存在的商品id }, onShow() { var token = cookieStorage.get('user_token'); @@ -38,7 +43,107 @@ Page({ url: '/pages/store/detail/detail?id=' + id }) }, + goLogin() { + var url = getUrl(); + wx.navigateTo({ + url: '/pages/user/register/register?url=' + url + }) + }, + changeCoupons() { + this.setData({ + show_coupons: !this.data.show_coupons + }) + }, + changeDiscounts() { + this.setData({ + show_discounts: !this.data.show_discounts + }) + }, + // 购物车领券 + cardDiscount(ids) { + sandBox.post({ + api: 'api/shoppingCart/discount', + data: { + ids: ids + } + }).then(res => { + if (res.statusCode == 200) { + res = res.data; + if (res.status && res.data) { + res.data.coupons.forEach(v => v.receive = false); + this.setData({ + coupons: res.data.coupons, + discounts: res.data.discounts + }) + } + } + }) + }, + + // 领取优惠券 + getCoupon(e) { + var is_login = cookieStorage.get('user_token'); + var discount_id = e.currentTarget.dataset.id; + var index = e.currentTarget.dataset.index; + if (is_login) { + this.goodsConvertCoupon(discount_id, index); + } else { + var url = getUrl(); + wx.showModal({ + tiele: '', + content: '请先登录', + success: res => { + if (res.confirm) { + wx.navigateTo({ + url: '/pages/user/register/register?url=' + url + }) + } + } + }) + } + }, + // 领取优惠券接口 + goodsConvertCoupon(discount_id, index) { + var token = cookieStorage.get('user_token'); + wx.showLoading({ + title: '正在领取', + mask: true + }) + sandBox.post({ + api: 'api/coupon/take', + header: { + Authorization: token + }, + data: { + discount_id: discount_id + } + }).then(res => { + if (res.statusCode == 200) { + res = res.data; + if (res.status) { + var coupons = `coupons[${index}]` + this.setData({ + [`${coupons}.receive`]: true + }); + wx.showToast({ + title: '领取成功', + }) + } else { + wx.showToast({ + title: res.message, + image: '../../../assets/image/error.png' + }) + } + } else { + wx.showToast({ + title: '领取失败', + image: '../../../assets/image/error.png' + }) + } + wx.hideLoading(); + }) + }, // 提交本地购物车 appendToCart(data) { @@ -104,6 +209,20 @@ Page({ res.data[key].checked = true; return res.data[key] }).concat(data); + + // 购物车领券 + if (data.length) { + var list = []; + data.forEach(v => { + if (this.data.goodsList.indexOf(v.com_id) == -1) { + list.push(v.com_id) + }; + }); + this.setData({ + goodsList: list + }); + this.cardDiscount(list); + } } this.setData({ list: data diff --git a/src/pages/store/cart/cart.less b/src/pages/store/cart/cart.less index a1994e8..f7ca6a1 100644 --- a/src/pages/store/cart/cart.less +++ b/src/pages/store/cart/cart.less @@ -11,12 +11,6 @@ font-size: 12px; align-items: center; - .input{ - - } - - - .img-box{ image{ display: block; @@ -128,6 +122,311 @@ } } + + /*领券头部*/ + .discount-box{ + .is-login{ + font-size: 12px; + display: flex; + align-items: center; + background: #FFFFFF; + padding: 10px 0 10px 15px; + margin-bottom: 10px; + .promotion-box{ + flex: 1; + .promotion{ + display: flex; + align-items: center; + color:#4a4a4a; + .title{ + color: @globalColor; + border:1px solid @globalColor; + border-radius:3px; + padding: 3px 5px; + margin-right: 10px; + } + } + } + + .coupon{ + padding: 0 15px; + color:@globalColor; + &.mx-1px-left:before{ + border-left: 1px solid #979797; + } + } + } + .no-login{ + background: #FFFFFF; + padding: 10px 0 10px 15px; + margin-bottom: 10px; + font-size: 14px; + display: flex; + align-items: center; + .left{ + display: flex; + align-items: center; + flex: 1; + i{ + color: #e73237; + margin-right: 5px; + } + span{ + color:#e73237; + } + } + .right{ + color:#e73237; + padding-right: 15px; + } + } + } + .maks{ + position: fixed; + bottom: 0; + width: 100%; + height: 100%; + z-index: 40; + background: rgba(0,0,0,.4); + opacity: 1; + transition: opacity .3s ease; + display: none; + + &.cur{ + display: block; + } + } + + //选择优惠券以及促销活动部分 + .popup-box { + background: #F7F7F7; + position: fixed; + bottom: 0; + width: 100%; + height: 0; + z-index: 50; + + + transition:all .3s linear; + + + &.cur{ + height: 60%; + } + + .popup { + height: 100%; + box-sizing: border-box; + + .popup-top { + padding: 0 15px; + + background: #e9e9e9; + text-align: center; + overflow: visible; + + .title { + position: relative; + color: #4A4A4A; + overflow: visible; + font-size: 14px; + padding: 10px 0; + + .close { + position: absolute; + right: -10px; + top: 0px; + padding: 10px; + } + } + } + .popup-bottom { + padding: 0 15px; + height: 100%; + overflow: auto; + box-sizing: border-box; + + //优惠券 + &.coupon { + .title{ + font-size: 14px; + color: #000; + padding-top: 8px; + } + .coupon-box { + margin-bottom: 50px; + .coupon-item { + margin-bottom: 10px; + &:first-child { + margin-top: 10px; + } + .coupon { + display: flex; + + &.shasow { + box-shadow: 0px 7px 10px 0px rgba(6, 0, 0, 0.2); + } + + .coupon-left { + width: 110px; + height: 80px; + color: #ffffff; + background-size: cover; + background: @globalColor; + position: relative; + + .text-wrap { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + font-size: 12px; + .text-box { + text-align: center; + width: 100%; + .text{ + display: block; + padding: 0 10px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 20px; + font-weight: 600; + &.label{ + font-size: 12px; + font-weight: 100; + } + .money{ + font-size: 14px; + font-weight: 100; + } + } + + .money-num { + font-size: 25px; + font-weight: bold; + } + } + } + .dot-wrap { + position: absolute; + top: 0px; + margin-top: 5px; + .dot-item { + width: 5px; + height: 5px; + background: #F7F7F7; + border-radius: 50%; + margin: 4px 0 9px -1px; + + &:last-child { + margin-top: 10px; + } + } + } + } + .coupon-right { + flex: 1; + background: #fff; + padding: 0px 15px; + font-size: 12px; + overflow: hidden; + + .top { + font-size: 12px; + display: -webkit-box; + color: #333333; + height: 40px; + line-height: 20px; + padding-top: 8px; + box-sizing: border-box; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + .type { + color: #333333; + border: 1px solid #333333; + padding: 2px 5px; + border-radius: 3px; + line-height: 20px; + margin-right: 5px; + } + } + + .bottom { + .bottom-use { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 12px; + margin: 7px 0; + .tiem-box { + color: #9E9E9F; + flex: 1; + font-size: 9px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-top: 5px; + } + .btn { + text-align: center; + border-radius: 3px; + padding: 3px 12px; + } + .use { + color: #fff; + border: 1px solid @globalColor; + background: @globalColor; + } + .already { + color: #9B9B9B; + background: #fff; + border: 1px solid #9B9B9B; + } + } + } + } + } + } + + } + } + + //促销 + &.discounts { + height:100%; + overflow: auto; + box-sizing: border-box; + .disconts-item { + display: flex; + align-items: baseline; + padding: 10px 5px; + &:last-child:before { + display: none; + } + + &:last-child { + margin-bottom: 0; + } + .discounts-tags-title { + color: @globalColor; + border: 1px solid @globalColor; + border-radius: 3px; + padding: 0 5px; + margin-right: 10px; + } + .tags-item{ + flex: 1; + } + } + } + } + + } + } + //重置按钮样式 checkbox .wx-checkbox-input{ border-radius: 100%; diff --git a/src/pages/store/cart/cart.wxml b/src/pages/store/cart/cart.wxml index bc692b3..b681062 100644 --- a/src/pages/store/cart/cart.wxml +++ b/src/pages/store/cart/cart.wxml @@ -1,4 +1,34 @@ + + + + + + @@ -52,4 +82,116 @@ 结算{{'('+ select_products.count + ')' || 0}} + + + + + + + + + + 优惠券 + + X + + + + + + 可领优惠券 + + + + + + + + + ￥ + {{ item.action_type.value }} + + 折 + + {{ item.label }} + + + + + + + + + + + + + + + + + + + + + + + + {{item.title}} + + + + + {{item.use_start_time}}至{{item.use_end_time}} + + + 点击领取 + + + + 已领取 + + + + + + + + + + + + + + + + + + + + + + + 促销 + + X + + + + + + + + + {{item.tags}} + + + {{item.label}} + + + + + + + \ No newline at end of file diff --git a/src/pages/store/cart/cart.wxss b/src/pages/store/cart/cart.wxss index f2b5122..1b17203 100644 --- a/src/pages/store/cart/cart.wxss +++ b/src/pages/store/cart/cart.wxss @@ -1 +1 @@ -#store-cart .goods-box{padding-bottom:50px}#store-cart .goods-box .goods-item{display:flex;padding:10px;background:#FFF;font-size:12px;align-items:center}#store-cart .goods-box .goods-item .img-box image{display:block;width:80px;height:80px;border:1px solid #e5e5e5}#store-cart .goods-box .goods-item .item-info{margin-left:10px;line-height:20px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#store-cart .goods-box .goods-item .item-info .name{padding-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#store-cart .goods-box .goods-item .item-info .money-box{display:flex;color:#838383}#store-cart .goods-box .goods-item .item-info .money-box .model{flex:1}#store-cart .goods-box .goods-item .item-info .mun-box{display:flex;align-items:center}#store-cart .goods-box .goods-item .item-info .mun-box .change-num{flex:1;padding-top:4px}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul{display:flex}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li{display:block;list-style:none;width:30px;height:30px;border:1px solid #e8e8e8;text-align:center;line-height:30px}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li:nth-child(2){border-left:none;border-right:none}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li input{display:block;border:none;height:100%;width:100%;text-align:center;outline:0}#store-cart .goods-box .goods-item .item-info .mun-box .remove{color:#0899ff}#store-cart .buy-box{display:flex;align-items:center;position:fixed;bottom:0;width:100%;height:50px;line-height:50px;font-size:15px;background:#FFF;z-index:10}#store-cart .buy-box .checkbox{display:flex;align-items:center;margin:0 10px}#store-cart .buy-box .checkbox checkbox{display:flex}#store-cart .buy-box .money-box{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#store-cart .buy-box .num-box{height:100%;width:110px;text-align:center;color:#FFF;border-radius:0;background:#ff2741}#store-cart checkbox .wx-checkbox-input{border-radius:100%;background-color:#fff;border:1px solid #c1caca;box-shadow:0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05);height:14px;width:14px}#store-cart checkbox .wx-checkbox-input.wx-checkbox-input-checked{background-color:#ff2741;border:1px solid #ff2741} \ No newline at end of file +#store-cart .goods-box{padding-bottom:50px}#store-cart .goods-box .goods-item{display:flex;padding:10px;background:#FFF;font-size:12px;align-items:center}#store-cart .goods-box .goods-item .img-box image{display:block;width:80px;height:80px;border:1px solid #e5e5e5}#store-cart .goods-box .goods-item .item-info{margin-left:10px;line-height:20px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#store-cart .goods-box .goods-item .item-info .name{padding-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#store-cart .goods-box .goods-item .item-info .money-box{display:flex;color:#838383}#store-cart .goods-box .goods-item .item-info .money-box .model{flex:1}#store-cart .goods-box .goods-item .item-info .mun-box{display:flex;align-items:center}#store-cart .goods-box .goods-item .item-info .mun-box .change-num{flex:1;padding-top:4px}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul{display:flex}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li{display:block;list-style:none;width:30px;height:30px;border:1px solid #e8e8e8;text-align:center;line-height:30px}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li:nth-child(2){border-left:none;border-right:none}#store-cart .goods-box .goods-item .item-info .mun-box .change-num ul li input{display:block;border:none;height:100%;width:100%;text-align:center;outline:0}#store-cart .goods-box .goods-item .item-info .mun-box .remove{color:#0899ff}#store-cart .buy-box{display:flex;align-items:center;position:fixed;bottom:0;width:100%;height:50px;line-height:50px;font-size:15px;background:#FFF;z-index:10}#store-cart .buy-box .checkbox{display:flex;align-items:center;margin:0 10px}#store-cart .buy-box .checkbox checkbox{display:flex}#store-cart .buy-box .money-box{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#store-cart .buy-box .num-box{height:100%;width:110px;text-align:center;color:#FFF;border-radius:0;background:#ff2741}#store-cart .discount-box .is-login,#store-cart .discount-box .no-login{background:#FFF;padding:10px 0 10px 15px;margin-bottom:10px;display:flex}#store-cart .discount-box .is-login{font-size:12px;align-items:center}#store-cart .discount-box .is-login .promotion-box{flex:1}#store-cart .discount-box .is-login .promotion-box .promotion{display:flex;align-items:center;color:#4a4a4a}#store-cart .discount-box .is-login .promotion-box .promotion .title{color:#ff2741;border:1px solid #ff2741;border-radius:3px;padding:3px 5px;margin-right:10px}#store-cart .discount-box .is-login .coupon{padding:0 15px;color:#ff2741}#store-cart .discount-box .is-login .coupon.mx-1px-left:before{border-left:1px solid #979797}#store-cart .discount-box .no-login{font-size:14px;align-items:center}#store-cart .discount-box .no-login .left{display:flex;align-items:center;flex:1}#store-cart .discount-box .no-login .left i{color:#e73237;margin-right:5px}#store-cart .discount-box .no-login .left span{color:#e73237}#store-cart .discount-box .no-login .right{color:#e73237;padding-right:15px}#store-cart .maks{position:fixed;bottom:0;width:100%;height:100%;z-index:40;background:rgba(0,0,0,.4);opacity:1;transition:opacity .3s ease;display:none}#store-cart .maks.cur{display:block}#store-cart .popup-box{background:#F7F7F7;position:fixed;bottom:0;width:100%;height:0;z-index:50;transition:all .3s linear}#store-cart .popup-box.cur{height:60%}#store-cart .popup-box .popup{height:100%;box-sizing:border-box}#store-cart .popup-box .popup .popup-top{padding:0 15px;background:#e9e9e9;text-align:center;overflow:visible}#store-cart .popup-box .popup .popup-top .title{position:relative;color:#4A4A4A;overflow:visible;font-size:14px;padding:10px 0}#store-cart .popup-box .popup .popup-top .title .close{position:absolute;right:-10px;top:0;padding:10px}#store-cart .popup-box .popup .popup-bottom{padding:0 15px;height:100%;overflow:auto;box-sizing:border-box}#store-cart .popup-box .popup .popup-bottom.coupon .title{font-size:14px;color:#000;padding-top:8px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box{margin-bottom:50px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item{margin-bottom:10px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item:first-child{margin-top:10px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon{display:flex}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon.shasow{box-shadow:0 7px 10px 0 rgba(6,0,0,.2)}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left{width:110px;height:80px;color:#fff;background:#ff2741;position:relative}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;font-size:12px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box{text-align:center;width:100%}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text{display:block;padding:0 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:20px;font-weight:600}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text.label{font-size:12px;font-weight:100}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text .money{font-size:14px;font-weight:100}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .money-num{font-size:25px;font-weight:700}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap{position:absolute;top:0;margin-top:5px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap .dot-item{width:5px;height:5px;background:#F7F7F7;border-radius:50%;margin:4px 0 9px -1px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap .dot-item:last-child{margin-top:10px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right{flex:1;background:#fff;padding:0 15px;font-size:12px;overflow:hidden}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .top{font-size:12px;display:-webkit-box;color:#333;height:40px;line-height:20px;padding-top:8px;box-sizing:border-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .top .type{color:#333;border:1px solid #333;padding:2px 5px;border-radius:3px;line-height:20px;margin-right:5px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:7px 0}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .tiem-box{color:#9E9E9F;flex:1;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .btn{text-align:center;border-radius:3px;padding:3px 12px}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .use{color:#fff;border:1px solid #ff2741;background:#ff2741}#store-cart .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .already{color:#9B9B9B;background:#fff;border:1px solid #9B9B9B}#store-cart .popup-box .popup .popup-bottom.discounts{height:100%;overflow:auto;box-sizing:border-box}#store-cart .popup-box .popup .popup-bottom.discounts .disconts-item{display:flex;align-items:baseline;padding:10px 5px}#store-cart .popup-box .popup .popup-bottom.discounts .disconts-item:last-child:before{display:none}#store-cart .popup-box .popup .popup-bottom.discounts .disconts-item:last-child{margin-bottom:0}#store-cart .popup-box .popup .popup-bottom.discounts .disconts-item .discounts-tags-title{color:#ff2741;border:1px solid #ff2741;border-radius:3px;padding:0 5px;margin-right:10px}#store-cart .popup-box .popup .popup-bottom.discounts .disconts-item .tags-item{flex:1}#store-cart checkbox .wx-checkbox-input{border-radius:100%;background-color:#fff;border:1px solid #c1caca;box-shadow:0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05);height:14px;width:14px}#store-cart checkbox .wx-checkbox-input.wx-checkbox-input-checked{background-color:#ff2741;border:1px solid #ff2741} \ No newline at end of file diff --git a/src/pages/store/detail/detail.css b/src/pages/store/detail/detail.css index 5ed25f5..33554d3 100644 --- a/src/pages/store/detail/detail.css +++ b/src/pages/store/detail/detail.css @@ -1 +1 @@ -#detail .wxParse-p image{width:100%!important}#detail .top-tap{display:flex;align-content:center;position:fixed;top:0;width:100%;z-index:20;padding:6px 10%;font-size:14px;background:#FFF;color:#4A4A4A;box-sizing:border-box}#detail .top-tap .item{flex:1;text-align:center}#detail .top-tap .item .name{display:inline-block;padding:5px 0}#detail .top-tap .item .name.active{color:#ff2741;border-bottom:2px solid #ff2741}#detail .top-tap .share{position:relative;right:-10px;background:#FFF;border-radius:0;margin:0;padding:0;top:4px;line-height:inherit;font-size:16px}#detail .top-tap .share:after{border:none}#detail .top-box{padding-top:40px}#detail .top-box swiper{height:730rpx;background:#fff}#detail .top-box swiper .slide-image{width:100%;height:100%}#detail .top-box .basic-information{font-size:12px;background:#fff}#detail .top-box .basic-information .goods-name{font-size:14px;color:#000;padding:5px 15px}#detail .top-box .basic-information .goods-price{display:flex;padding:0 15px;align-items:center;color:#ee2b1d}#detail .top-box .basic-information .goods-price .price{font-size:20px;color:#ff2741;margin-right:5px}#detail .top-box .basic-information .market-price-box{display:flex;align-items:center;justify-content:space-between;padding:0 15px 10px;font-size:12px;color:#959595}#detail .top-box .basic-information .market-price-box .market-price{text-decoration:line-through}#detail .top-box .basic-information .tags-box{padding:0 15px 10px}#detail .top-box .basic-information .tags-box span{font-size:10px;color:#9f9f9f;background:#e4e4e4;border-radius:4px;padding:3px 5px;margin-right:5px;margin-top:5px;display:inline-block}#detail .wrap-item{background-color:#FFF;margin-top:10px}#detail .wrap-item.commodity{padding-bottom:80px}#detail .wrap-item .title{display:flex;padding:10px 15px;align-items:center;font-size:14px}#detail .wrap-item .title .text{flex:1}#detail .wrap-item .title .arrow-up{width:30px;height:10px;margin-top:3px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/down.png) center no-repeat;transform:rotate(180deg);background-size:10px}#detail .wrap-item .title .arrow-down{width:20px;height:10px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/down.png) center no-repeat;background-size:10px;margin-right:5px}#detail .wrap-item .content{padding:10px 15px;box-sizing:border-box}#detail .wrap-item .content .comment_list{font-size:12px;line-height:20px}#detail .wrap-item .content .comment_list .comment_user{display:flex;align-items:center}#detail .wrap-item .content .comment_list .comment_user .img-box{display:flex;align-items:center;flex:1}#detail .wrap-item .content .comment_list .comment_user .img-box image{width:25px;height:25px;border-radius:100%}#detail .wrap-item .content .comment_list .comment_user .rater .vlc-rater{display:flex}#detail .wrap-item .content .comment_list .comment_user .user_name{margin-left:15px;display:inline-block;color:#717071}#detail .wrap-item .content .comment_list .comment_content{margin-top:0}#detail .wrap-item .content .comment_list .comment-img{font-size:0;margin:5px 0}#detail .wrap-item .content .comment_list .comment-img image{display:inline-block;width:25%;padding:0 5px}#detail .wrap-item .content .comment_list .comment_time{display:flex;align-items:center;margin:10px 0;color:#838282}#detail .wrap-item .content .comment_list .comment_time .time{margin-right:15px}#detail .wrap-item .content .comment_list .all-comment{text-align:center}#detail .wrap-item .content .comment_list .all-comment .text{margin-top:10px;display:inline-block;font-size:10px;color:#4A4A4A;border:1px solid #4A4A4A;border-radius:3px;padding:2px 4px}#detail .wrap-item .content .argument-box{color:#000}#detail .wrap-item .content .argument-box .argument-top{line-height:20px}#detail .wrap-item .content .argument-box .argument-top span{display:inline-block;font-size:10px;width:50%;box-sizing:border-box;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/goods-list.png) left no-repeat;padding-left:15px}#detail .wrap-item .content .argument-box .argument-bottom{font-size:10px;margin-top:35px}#detail .wrap-item .content .argument-box .argument-bottom .argument-item{display:flex;margin-bottom:10px}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box{flex:1}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul{display:flex;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/lvl-bg.png) top repeat-x}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul .red-dot{background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/red-dot.png) top no-repeat}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul li{flex:1;display:inline-block;text-align:center;padding-top:15px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/dot.png) top no-repeat}#detail .tabbar{position:fixed;bottom:0;width:100%;height:55px;z-index:50;color:#9B9B9B;font-size:13px;background:#FFF;display:flex}#detail .tabbar .tabbar-item{display:flex;flex:1;width:0%;justify-content:center;align-items:center;font-size:12px;flex-direction:column}#detail .tabbar .tabbar-item i{font-size:20px}#detail .tabbar .tabbar-item.show-cart{color:#fff;background:#000;font-size:18px;font-weight:700;flex:2}#detail .tabbar .tabbar-item.show-cart.active{background:#ff2741}#detail .tabbar .tabbar-item.show-cart.disabled{background:#C2C2C2}#detail .tabbar .tabbar-item.favorite,#detail .tabbar .tabbar-item.favorite i{color:#ff2741}#detail .maks{position:fixed;bottom:0;width:100%;height:100%;z-index:40;background:rgba(0,0,0,.4);opacity:1;transition:opacity .3s ease;display:none}#detail .maks.cur{display:block}#detail .sku-popup{width:100%;position:fixed;left:0;bottom:-55px;z-index:51;transform:translate3d(0,100,0)}#detail .sku-popup .select-goods-cloese{position:absolute;top:12px;right:10px;width:20px;height:20px;background:0 0;z-index:4;overflow:visible}#detail .sku-popup .select-goods-cloese:after,#detail .sku-popup .select-goods-cloese:before{top:9px;left:-1px;width:28px;height:2px;background:#2e2e2e;position:absolute;content:''}#detail .sku-popup .select-goods-cloese:before{transform:rotate(45deg)}#detail .sku-popup .select-goods-cloese:after{transform:rotate(-45deg)}#detail .sku-popup .select-goods-container{background:#fff;position:relative;z-index:100}#detail .sku-popup .select-goods-container .select-goods-header{position:relative;height:60px}#detail .sku-popup .select-goods-container .select-goods-header .img-box{position:absolute;left:10px;bottom:10px;width:78px;height:78px;border:1px solid #e5e5e5;background:#f9f9f9}#detail .sku-popup .select-goods-container .select-goods-header .img-box image{width:100%;height:100%}#detail .sku-popup .select-goods-container .select-goods-header .price-box{font-size:18px;margin-left:100px;height:100%;display:flex;flex-direction:column;justify-content:center}#detail .sku-popup .select-goods-container .select-goods-header .price-box .price{font-weight:700;color:#ee2b1d}#detail .sku-popup .select-goods-container .select-goods-header .price-box .count{font-size:14px;color:#6c6c6c;text-indent:3px}#detail .sku-popup .select-goods-container .select-goods-spec{font-size:12px;padding:12px 8px 50px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line{display:flex;margin-bottom:15px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-title{padding-right:11px;color:#c4c4c4;width:50px;line-height:35px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value{flex:1;font-size:0;margin-top:-10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block{display:inline-block;margin-top:10px;margin-right:10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block .spec-text{display:block;padding:0 7px;height:33px;line-height:33px;min-width:20px;border:1px solid #DDD;text-align:center;font-size:12px;position:relative}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.active span:before{content:'';position:absolute;border:3px solid #ff2741;top:-1px;left:-1px;right:-1px;bottom:-1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span{border:none;margin:1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span:before{content:'';position:absolute;background-color:#eee;top:-1px;left:-1px;right:-1px;bottom:-1px;opacity:.6}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span:after{content:'';position:absolute;border:3px dashed #cfcfcf;top:-1px;left:-1px;right:-1px;bottom:-1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value{display:flex;font-size:0}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value span{display:block;border:1px solid #e8e8e8;text-align:center;min-width:28px;width:28px;height:28px;line-height:28px;font-size:12px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value span.store{width:auto;border-color:#fff;margin-left:10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value input{display:block;border:none;height:100%;width:100%;text-align:center;outline:0}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value .none-border{width:30px;border:1px solid #e8e8e8;border-left:none;border-right:none}#detail .sku-popup .select-goods-container .select-goods-spec .button{height:50px;line-height:50px;text-align:center;position:absolute;bottom:0;left:0;right:0;border-radius:0;background:#ff2741}#detail .sku-popup .select-goods-container .select-goods-spec .button.disabled{background:#C2C2C2}#detail .cart-box .cart-mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background-color:rgba(0,0,0,.4)}#detail .cart-box .cart-dialog{position:fixed;z-index:500;width:85%;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#fafafc;text-align:center;border-radius:5px;overflow:hidden}#detail .cart-box .cart-dialog .title{padding:20px 0;font-size:15px}#detail .cart-box .cart-dialog .buttons{display:flex;padding:20px 8px;font-size:15px;word-wrap:break-word;word-break:break-all}#detail .cart-box .cart-dialog .buttons .button{display:block;background:#ff2741;color:#fff;padding:10px;margin:0 8px;flex:1;width:0;text-align:center;border-radius:3px}#detail .cart-box .cart-dialog .buttons .button.agin{background-color:#FFF;color:#ff2741;border:1px solid #ff2741}#detail .share-box{background:#CDCDD1;position:fixed;bottom:0;width:100%;height:0;z-index:50;transition:all .3s linear}#detail .share-box .shaer-item{height:50px;line-height:50px;text-align:center;font-size:18px;color:#2E2D2D;background:#fff;border-radius:0}#detail .share-box .shaer-item:after{border:none}#detail .share-box .shaer-item.clear{margin-top:5px;color:#9B9B9B}#detail .share-box.cur{height:155px} \ No newline at end of file +#detail .wxParse-p image{width:100%!important}#detail .top-tap{display:flex;align-content:center;position:fixed;top:0;width:100%;z-index:20;padding:6px 10%;font-size:14px;background:#FFF;color:#4A4A4A;box-sizing:border-box}#detail .top-tap .item{flex:1;text-align:center}#detail .top-tap .item .name{display:inline-block;padding:5px 0}#detail .top-tap .item .name.active{color:#ff2741;border-bottom:2px solid #ff2741}#detail .top-tap .share{position:relative;right:-10px;background:#FFF;border-radius:0;margin:0;padding:0;top:4px;line-height:inherit;font-size:16px}#detail .top-tap .share:after{border:none}#detail .top-box{padding-top:40px}#detail .top-box swiper{height:730rpx;background:#fff}#detail .top-box swiper .slide-image{width:100%;height:100%}#detail .top-box .basic-information{font-size:12px;background:#fff}#detail .top-box .basic-information .goods-name{font-size:14px;color:#000;padding:5px 15px}#detail .top-box .basic-information .goods-price{display:flex;padding:0 15px;align-items:center;color:#ee2b1d}#detail .top-box .basic-information .goods-price .price{font-size:20px;color:#ff2741;margin-right:5px}#detail .top-box .basic-information .market-price-box{display:flex;align-items:center;justify-content:space-between;padding:0 15px 10px;font-size:12px;color:#959595}#detail .top-box .basic-information .market-price-box .market-price{text-decoration:line-through}#detail .top-box .basic-information .tags-box{padding:0 15px 10px}#detail .top-box .basic-information .tags-box span{font-size:10px;color:#9f9f9f;background:#e4e4e4;border-radius:4px;padding:3px 5px;margin-right:5px;margin-top:5px;display:inline-block}#detail .top-box .basic-information .coupons-tags{padding:10px 15px;display:flex;align-items:baseline}#detail .top-box .basic-information .coupons-tags .tags-title{width:30px;color:#585757;font-weight:700}#detail .top-box .basic-information .coupons-tags .coupon-box{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:flex-start;align-items:center;flex:1}#detail .top-box .basic-information .coupons-tags .coupon-box .tags-item{color:#fff;background:#ff2741;padding:2px 7px;position:relative;margin:5px 10px 5px 0}#detail .top-box .basic-information .coupons-tags .coupon-box .tags-item .dot-wrap .dot-left{position:absolute;top:0;left:5px}#detail .top-box .basic-information .coupons-tags .coupon-box .tags-item .dot-wrap .dot-right{position:absolute;top:0;right:-4px}#detail .top-box .basic-information .coupons-tags .coupon-box .tags-item .dot-wrap .dot-item{width:5px;height:5px;background:#F7F7F7;border-radius:50%;margin:2px 0 2px -7px}#detail .top-box .basic-information .coupons-tags .coupon-box .tags-item .dot-wrap .dot-item:last-child{margin-top:0}#detail .top-box .basic-information .discounts-tags{display:flex;padding:10px 15px;align-items:baseline}#detail .top-box .basic-information .discounts-tags .tags-title{width:30px;color:#585757;font-weight:700}#detail .top-box .basic-information .discounts-tags .discounts-box{flex:1;overflow:hidden}#detail .top-box .basic-information .discounts-tags .discounts-box .disconts-item{display:flex;align-items:center;margin-bottom:10px}#detail .popup-box .popup .popup-bottom.discounts .disconts-item:last-child,#detail .top-box .basic-information .discounts-tags .discounts-box .disconts-item:last-child{margin-bottom:0}#detail .top-box .basic-information .discounts-tags .discounts-box .disconts-item .discounts-tags-title{color:#ff2741;border:1px solid #ff2741;border-radius:3px;padding:0 5px;margin-right:10px}#detail .top-box .basic-information .discounts-tags .discounts-box .disconts-item .tags-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}#detail .wrap-item{background-color:#FFF;margin-top:10px}#detail .wrap-item.commodity{padding-bottom:80px}#detail .wrap-item .title{display:flex;padding:10px 15px;align-items:center;font-size:14px}#detail .wrap-item .title .text{flex:1}#detail .wrap-item .title .arrow-up{width:30px;height:10px;margin-top:3px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/down.png) center no-repeat;transform:rotate(180deg);background-size:10px}#detail .wrap-item .title .arrow-down{width:20px;height:10px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/down.png) center no-repeat;background-size:10px;margin-right:5px}#detail .wrap-item .content{padding:10px 15px;box-sizing:border-box}#detail .wrap-item .content .comment_list{font-size:12px;line-height:20px}#detail .wrap-item .content .comment_list .comment_user{display:flex;align-items:center}#detail .wrap-item .content .comment_list .comment_user .img-box{display:flex;align-items:center;flex:1}#detail .wrap-item .content .comment_list .comment_user .img-box image{width:25px;height:25px;border-radius:100%}#detail .wrap-item .content .comment_list .comment_user .rater .vlc-rater{display:flex}#detail .wrap-item .content .comment_list .comment_user .user_name{margin-left:15px;display:inline-block;color:#717071}#detail .wrap-item .content .comment_list .comment_content{margin-top:0}#detail .wrap-item .content .comment_list .comment-img{font-size:0;margin:5px 0}#detail .wrap-item .content .comment_list .comment-img image{display:inline-block;width:25%;padding:0 5px}#detail .wrap-item .content .comment_list .comment_time{display:flex;align-items:center;margin:10px 0;color:#838282}#detail .wrap-item .content .comment_list .comment_time .time{margin-right:15px}#detail .wrap-item .content .comment_list .all-comment{text-align:center}#detail .wrap-item .content .comment_list .all-comment .text{margin-top:10px;display:inline-block;font-size:10px;color:#4A4A4A;border:1px solid #4A4A4A;border-radius:3px;padding:2px 4px}#detail .wrap-item .content .argument-box{color:#000}#detail .wrap-item .content .argument-box .argument-top{line-height:20px}#detail .wrap-item .content .argument-box .argument-top span{display:inline-block;font-size:10px;width:50%;box-sizing:border-box;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/goods-list.png) left no-repeat;padding-left:15px}#detail .wrap-item .content .argument-box .argument-bottom{font-size:10px;margin-top:35px}#detail .wrap-item .content .argument-box .argument-bottom .argument-item{display:flex;margin-bottom:10px}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box{flex:1}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul{display:flex;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/lvl-bg.png) top repeat-x}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul .red-dot{background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/red-dot.png) top no-repeat}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul li{flex:1;display:inline-block;text-align:center;padding-top:15px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/dot.png) top no-repeat}#detail .tabbar{position:fixed;bottom:0;width:100%;height:55px;z-index:50;color:#9B9B9B;font-size:13px;background:#FFF;display:flex}#detail .tabbar .tabbar-item{display:flex;flex:1;width:0%;justify-content:center;align-items:center;font-size:12px;flex-direction:column}#detail .tabbar .tabbar-item i{font-size:20px}#detail .tabbar .tabbar-item.show-cart{color:#fff;background:#000;font-size:18px;font-weight:700;flex:2}#detail .tabbar .tabbar-item.show-cart.active{background:#ff2741}#detail .tabbar .tabbar-item.show-cart.disabled{background:#C2C2C2}#detail .tabbar .tabbar-item.favorite,#detail .tabbar .tabbar-item.favorite i{color:#ff2741}#detail .maks{position:fixed;bottom:0;width:100%;height:100%;z-index:40;background:rgba(0,0,0,.4);opacity:1;transition:opacity .3s ease;display:none}#detail .maks.cur{display:block}#detail .sku-popup{width:100%;position:fixed;left:0;bottom:-55px;z-index:51;transform:translate3d(0,100,0)}#detail .sku-popup .select-goods-cloese{position:absolute;top:12px;right:10px;width:20px;height:20px;background:0 0;z-index:4;overflow:visible}#detail .sku-popup .select-goods-cloese:after,#detail .sku-popup .select-goods-cloese:before{top:9px;left:-1px;position:absolute;height:2px;background:#2e2e2e;content:'';width:28px}#detail .sku-popup .select-goods-cloese:before{transform:rotate(45deg)}#detail .sku-popup .select-goods-cloese:after{transform:rotate(-45deg)}#detail .sku-popup .select-goods-container{background:#fff;position:relative;z-index:100}#detail .sku-popup .select-goods-container .select-goods-header{position:relative;height:60px}#detail .sku-popup .select-goods-container .select-goods-header .img-box{position:absolute;left:10px;bottom:10px;width:78px;height:78px;border:1px solid #e5e5e5;background:#f9f9f9}#detail .sku-popup .select-goods-container .select-goods-header .img-box image{width:100%;height:100%}#detail .sku-popup .select-goods-container .select-goods-header .price-box{font-size:18px;margin-left:100px;height:100%;display:flex;flex-direction:column;justify-content:center}#detail .sku-popup .select-goods-container .select-goods-header .price-box .price{font-weight:700;color:#ee2b1d}#detail .sku-popup .select-goods-container .select-goods-header .price-box .count{font-size:14px;color:#6c6c6c;text-indent:3px}#detail .sku-popup .select-goods-container .select-goods-spec{font-size:12px;padding:12px 8px 50px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line{display:flex;margin-bottom:15px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-title{padding-right:11px;color:#c4c4c4;width:50px;line-height:35px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value{flex:1;font-size:0;margin-top:-10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block{display:inline-block;margin-top:10px;margin-right:10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block .spec-text{display:block;padding:0 7px;height:33px;line-height:33px;min-width:20px;border:1px solid #DDD;text-align:center;font-size:12px;position:relative}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.active span:before{content:'';position:absolute;border:3px solid #ff2741;top:-1px;left:-1px;right:-1px;bottom:-1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span{border:none;margin:1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span:before{content:'';position:absolute;background-color:#eee;top:-1px;left:-1px;right:-1px;bottom:-1px;opacity:.6}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span:after{content:'';position:absolute;border:3px dashed #cfcfcf;top:-1px;left:-1px;right:-1px;bottom:-1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value{display:flex;font-size:0}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value span{display:block;border:1px solid #e8e8e8;text-align:center;min-width:28px;width:28px;height:28px;line-height:28px;font-size:12px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value span.store{width:auto;border-color:#fff;margin-left:10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value input{display:block;border:none;height:100%;width:100%;text-align:center;outline:0}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value .none-border{width:30px;border:1px solid #e8e8e8;border-left:none;border-right:none}#detail .sku-popup .select-goods-container .select-goods-spec .button{height:50px;line-height:50px;text-align:center;position:absolute;bottom:0;left:0;right:0;border-radius:0;background:#ff2741}#detail .sku-popup .select-goods-container .select-goods-spec .button.disabled{background:#C2C2C2}#detail .cart-box .cart-mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background-color:rgba(0,0,0,.4)}#detail .cart-box .cart-dialog{position:fixed;z-index:500;width:85%;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#fafafc;text-align:center;border-radius:5px;overflow:hidden}#detail .popup-box,#detail .share-box{bottom:0;z-index:50;transition:all .3s linear}#detail .cart-box .cart-dialog .title{padding:20px 0;font-size:15px}#detail .cart-box .cart-dialog .buttons{display:flex;padding:20px 8px;font-size:15px;word-wrap:break-word;word-break:break-all}#detail .cart-box .cart-dialog .buttons .button{display:block;background:#ff2741;color:#fff;padding:10px;margin:0 8px;flex:1;width:0;text-align:center;border-radius:3px}#detail .cart-box .cart-dialog .buttons .button.agin{background-color:#FFF;color:#ff2741;border:1px solid #ff2741}#detail .popup-box{background:#F7F7F7;position:fixed;width:100%;height:0}#detail .popup-box.cur{height:60%}#detail .popup-box .popup{height:100%;box-sizing:border-box}#detail .popup-box .popup .popup-top{padding:0 15px;background:#e9e9e9;text-align:center;overflow:visible}#detail .popup-box .popup .popup-top .title{position:relative;color:#4A4A4A;overflow:visible;font-size:14px;padding:10px 0}#detail .popup-box .popup .popup-top .title .close{position:absolute;right:-10px;top:0;padding:10px}#detail .popup-box .popup .popup-bottom{padding:0 15px;height:100%;overflow:auto;box-sizing:border-box}#detail .popup-box .popup .popup-bottom.coupon .title{font-size:14px;color:#000;padding-top:8px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box{margin-bottom:50px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item{margin-bottom:10px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item:first-child{margin-top:10px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon{display:flex}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon.shasow{box-shadow:0 7px 10px 0 rgba(6,0,0,.2)}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left{width:110px;height:80px;color:#fff;background:#ff2741;position:relative}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;font-size:12px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box{text-align:center;width:100%}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text{display:block;padding:0 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:20px;font-weight:600}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text.label{font-size:12px;font-weight:100}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text .money{font-size:14px;font-weight:100}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .money-num{font-size:25px;font-weight:700}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap{position:absolute;top:0;margin-top:5px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap .dot-item{width:5px;height:5px;background:#F7F7F7;border-radius:50%;margin:4px 0 9px -1px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap .dot-item:last-child{margin-top:10px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right{flex:1;background:#fff;padding:0 15px;font-size:12px;overflow:hidden}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .top{font-size:12px;display:-webkit-box;color:#333;height:40px;line-height:20px;padding-top:8px;box-sizing:border-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .top .type{color:#333;border:1px solid #333;padding:2px 5px;border-radius:3px;line-height:20px;margin-right:5px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:7px 0}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .tiem-box{color:#9E9E9F;flex:1;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .btn{text-align:center;border-radius:3px;padding:3px 12px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .use{color:#fff;border:1px solid #ff2741;background:#ff2741}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .already{color:#9B9B9B;background:#fff;border:1px solid #9B9B9B}#detail .popup-box .popup .popup-bottom.discounts{height:100%;overflow:auto;box-sizing:border-box}#detail .popup-box .popup .popup-bottom.discounts .disconts-item{display:flex;align-items:baseline;padding:10px 5px}#detail .popup-box .popup .popup-bottom.discounts .disconts-item:last-child:before{display:none}#detail .popup-box .popup .popup-bottom.discounts .disconts-item .discounts-tags-title{color:#ff2741;border:1px solid #ff2741;border-radius:3px;padding:0 5px;margin-right:10px}#detail .popup-box .popup .popup-bottom.discounts .disconts-item .tags-item{flex:1}#detail .share-box{background:#CDCDD1;position:fixed;width:100%;height:0}#detail .share-box .shaer-item{height:50px;line-height:50px;text-align:center;font-size:18px;color:#2E2D2D;background:#fff;border-radius:0}#detail .share-box .shaer-item:after{border:none}#detail .share-box .shaer-item.clear{margin-top:5px;color:#9B9B9B}#detail .share-box.cur{height:155px} \ No newline at end of file diff --git a/src/pages/store/detail/detail.js b/src/pages/store/detail/detail.js index 6e2c539..bad8bfb 100644 --- a/src/pages/store/detail/detail.js +++ b/src/pages/store/detail/detail.js @@ -47,6 +47,10 @@ Page({ query: {}, // skuTable: {}, // store_count: '', // 商品数量 + coupons: [], // 可领取的优惠券信息 + discounts: [], // 可享受的优惠折扣信息 + show_coupons: false, // 领取优惠券 + show_discounts: false, // 查看促销活动 showToTop: false, @@ -54,9 +58,6 @@ Page({ select_count: 1, is_login: true, canBuy: false, - query: {}, - animationSelect: {}, - loading: false, }, onLoad(e) { var id = ''; @@ -122,6 +123,81 @@ Page({ show_share: !this.data.show_share }) }, + changeCoupons() { + this.setData({ + show_coupons: !this.data.show_coupons + }) + }, + changeDiscounts() { + this.setData({ + show_discounts: !this.data.show_discounts + }) + }, + + // 领取优惠券 + getCoupon(e) { + var is_login = cookieStorage.get('user_token'); + var discount_id = e.currentTarget.dataset.id; + var index = e.currentTarget.dataset.index; + if (is_login) { + this.goodsConvertCoupon(discount_id, index); + } else { + var url = getUrl(); + wx.showModal({ + tiele: '', + content: '请先登录', + success: res => { + if (res.confirm) { + wx.navigateTo({ + url: '/pages/user/register/register?url=' + url + }) + } + } + }) + } + }, + // 领取优惠券接口 + goodsConvertCoupon(discount_id, index) { + var token = cookieStorage.get('user_token'); + wx.showLoading({ + title: '正在领取', + mask: true + }) + sandBox.post({ + api: 'api/coupon/take', + header: { + Authorization: token + }, + data: { + discount_id: discount_id + } + }).then(res => { + if (res.statusCode == 200) { + res = res.data; + if (res.status) { + var coupons = `coupons[${index}]` + this.setData({ + [`${coupons}.receive`]: true + }); + wx.showToast({ + title: '领取成功', + }) + } else { + wx.showToast({ + title: res.message, + image: '../../../assets/image/error.png' + }) + } + } else { + wx.showToast({ + title: '领取失败', + image: '../../../assets/image/error.png' + }) + } + wx.hideLoading(); + }) + }, + // 点击滚动到指定位置 jumpScroll(e) { @@ -187,6 +263,13 @@ Page({ fontSize: 14 }) } + if (res.meta.discounts) { + res.meta.discounts.coupons.forEach(v => v.receive = false); + this.setData({ + coupons: res.meta.discounts.coupons, + discounts: res.meta.discounts.discounts + }) + } Wxparse.wxParse('detailI', 'html', res.data.content, this, 0); this.attributesList(res.meta); wx.setNavigationBarTitle({ diff --git a/src/pages/store/detail/detail.less b/src/pages/store/detail/detail.less index 6eb2600..9146e63 100644 --- a/src/pages/store/detail/detail.less +++ b/src/pages/store/detail/detail.less @@ -107,6 +107,93 @@ } } + .coupons-tags { + padding: 10px 15px; + display: flex; + align-items: baseline; + + .tags-title { + width: 30px; + color: #585757; + font-weight: bold; + } + .coupon-box { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: flex-start; + align-items: center; + flex: 1; + .tags-item { + color: #ffffff; + background: @globalColor; + padding: 2px 7px; + position: relative; + margin: 5px 10px 5px 0; + .dot-wrap { + + .dot-left { + position: absolute; + top: 0; + left: 5px; + } + .dot-right { + position: absolute; + top: 0; + right: -4px; + } + .dot-item { + width: 5px; + height: 5px; + background: #F7F7F7; + border-radius: 50%; + margin: 2px 0 2px -7px; + + &:last-child { + margin-top: 0; + } + } + } + } + } + + } + .discounts-tags { + display: flex; + padding: 10px 15px; + align-items: baseline; + .tags-title { + width: 30px; + color: #585757; + font-weight: bold; + } + .discounts-box { + flex: 1; + overflow: hidden; + .disconts-item { + display: flex; + align-items: center; + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } + .discounts-tags-title { + color: @globalColor; + border: 1px solid @globalColor; + border-radius: 3px; + padding: 0 5px; + margin-right: 10px; + } + .tags-item{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; + } + } + } + } } } .wrap-item { @@ -595,6 +682,270 @@ } + //弹出分享部分 + .share-box { + background: #CDCDD1; + position: fixed; + bottom: 0; + width: 100%; + height: 0; + z-index: 50; + transition:all .3s linear; + .shaer-item { + height: 50px; + line-height: 50px; + text-align: center; + font-size: 18px; + color: #2E2D2D; + background: #ffffff; + border-radius: 0; + &:after { + border: none; + } + &.clear { + margin-top: 5px; + color: #9B9B9B; + } + } + + + &.cur{ + height: 155px; + + } + } + + //选择优惠券以及促销活动部分 + .popup-box { + background: #F7F7F7; + position: fixed; + bottom: 0; + width: 100%; + height: 0; + z-index: 50; + + + transition:all .3s linear; + + + &.cur{ + height: 60%; + } + + .popup { + height: 100%; + box-sizing: border-box; + + .popup-top { + padding: 0 15px; + + background: #e9e9e9; + text-align: center; + overflow: visible; + + .title { + position: relative; + color: #4A4A4A; + overflow: visible; + font-size: 14px; + padding: 10px 0; + + .close { + position: absolute; + right: -10px; + top: 0px; + padding: 10px; + } + } + } + .popup-bottom { + padding: 0 15px; + height: 100%; + overflow: auto; + box-sizing: border-box; + + //优惠券 + &.coupon { + .title{ + font-size: 14px; + color: #000; + padding-top: 8px; + } + .coupon-box { + margin-bottom: 50px; + .coupon-item { + margin-bottom: 10px; + &:first-child { + margin-top: 10px; + } + .coupon { + display: flex; + + &.shasow { + box-shadow: 0px 7px 10px 0px rgba(6, 0, 0, 0.2); + } + + .coupon-left { + width: 110px; + height: 80px; + color: #ffffff; + background-size: cover; + background: @globalColor; + position: relative; + + .text-wrap { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + font-size: 12px; + .text-box { + text-align: center; + width: 100%; + .text{ + display: block; + padding: 0 10px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 20px; + font-weight: 600; + &.label{ + font-size: 12px; + font-weight: 100; + } + .money{ + font-size: 14px; + font-weight: 100; + } + } + + .money-num { + font-size: 25px; + font-weight: bold; + } + } + } + .dot-wrap { + position: absolute; + top: 0px; + margin-top: 5px; + .dot-item { + width: 5px; + height: 5px; + background: #F7F7F7; + border-radius: 50%; + margin: 4px 0 9px -1px; + + &:last-child { + margin-top: 10px; + } + } + } + } + .coupon-right { + flex: 1; + background: #fff; + padding: 0px 15px; + font-size: 12px; + overflow: hidden; + + .top { + font-size: 12px; + display: -webkit-box; + color: #333333; + height: 40px; + line-height: 20px; + padding-top: 8px; + box-sizing: border-box; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + .type { + color: #333333; + border: 1px solid #333333; + padding: 2px 5px; + border-radius: 3px; + line-height: 20px; + margin-right: 5px; + } + } + + .bottom { + .bottom-use { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 12px; + margin: 7px 0; + .tiem-box { + color: #9E9E9F; + flex: 1; + font-size: 9px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-top: 5px; + } + .btn { + text-align: center; + border-radius: 3px; + padding: 3px 12px; + } + .use { + color: #fff; + border: 1px solid @globalColor; + background: @globalColor; + } + .already { + color: #9B9B9B; + background: #fff; + border: 1px solid #9B9B9B; + } + } + } + } + } + } + + } + } + + //促销 + &.discounts { + height:100%; + overflow: auto; + box-sizing: border-box; + .disconts-item { + display: flex; + align-items: baseline; + padding: 10px 5px; + &:last-child:before { + display: none; + } + + &:last-child { + margin-bottom: 0; + } + .discounts-tags-title { + color: @globalColor; + border: 1px solid @globalColor; + border-radius: 3px; + padding: 0 5px; + margin-right: 10px; + } + .tags-item{ + flex: 1; + } + } + } + } + + } + } + + //弹出分享部分 .share-box { background: #CDCDD1; diff --git a/src/pages/store/detail/detail.wxml b/src/pages/store/detail/detail.wxml index 44a2c69..e5e5175 100644 --- a/src/pages/store/detail/detail.wxml +++ b/src/pages/store/detail/detail.wxml @@ -56,6 +56,50 @@ {{item}} + + + + + 领券 + + + + {{item.label}} + + + + + + + + + + + + + + + + + + + + + + 促销 + + + + + {{item.tags}} + + + {{item.label}} + + + + + @@ -154,7 +198,6 @@ - @@ -229,6 +272,7 @@ + - @@ -267,4 +310,116 @@ 取消 + + + + + + + + + + 优惠券 + + X + + + + + + 可领优惠券 + + + + + + + + + ￥ + {{ item.action_type.value }} + + 折 + + {{ item.label }} + + + + + + + + + + + + + + + + + + + + + + + + {{item.title}} + + + + + {{item.use_start_time}}至{{item.use_end_time}} + + + 点击领取 + + + + 已领取 + + + + + + + + + + + + + + + + + + + + + + + 促销 + + X + + + + + + + + + {{item.tags}} + + + {{item.label}} + + + + + + + diff --git a/src/pages/store/detail/detail.wxss b/src/pages/store/detail/detail.wxss index 5ed25f5..33554d3 100644 --- a/src/pages/store/detail/detail.wxss +++ b/src/pages/store/detail/detail.wxss @@ -1 +1 @@ -#detail .wxParse-p image{width:100%!important}#detail .top-tap{display:flex;align-content:center;position:fixed;top:0;width:100%;z-index:20;padding:6px 10%;font-size:14px;background:#FFF;color:#4A4A4A;box-sizing:border-box}#detail .top-tap .item{flex:1;text-align:center}#detail .top-tap .item .name{display:inline-block;padding:5px 0}#detail .top-tap .item .name.active{color:#ff2741;border-bottom:2px solid #ff2741}#detail .top-tap .share{position:relative;right:-10px;background:#FFF;border-radius:0;margin:0;padding:0;top:4px;line-height:inherit;font-size:16px}#detail .top-tap .share:after{border:none}#detail .top-box{padding-top:40px}#detail .top-box swiper{height:730rpx;background:#fff}#detail .top-box swiper .slide-image{width:100%;height:100%}#detail .top-box .basic-information{font-size:12px;background:#fff}#detail .top-box .basic-information .goods-name{font-size:14px;color:#000;padding:5px 15px}#detail .top-box .basic-information .goods-price{display:flex;padding:0 15px;align-items:center;color:#ee2b1d}#detail .top-box .basic-information .goods-price .price{font-size:20px;color:#ff2741;margin-right:5px}#detail .top-box .basic-information .market-price-box{display:flex;align-items:center;justify-content:space-between;padding:0 15px 10px;font-size:12px;color:#959595}#detail .top-box .basic-information .market-price-box .market-price{text-decoration:line-through}#detail .top-box .basic-information .tags-box{padding:0 15px 10px}#detail .top-box .basic-information .tags-box span{font-size:10px;color:#9f9f9f;background:#e4e4e4;border-radius:4px;padding:3px 5px;margin-right:5px;margin-top:5px;display:inline-block}#detail .wrap-item{background-color:#FFF;margin-top:10px}#detail .wrap-item.commodity{padding-bottom:80px}#detail .wrap-item .title{display:flex;padding:10px 15px;align-items:center;font-size:14px}#detail .wrap-item .title .text{flex:1}#detail .wrap-item .title .arrow-up{width:30px;height:10px;margin-top:3px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/down.png) center no-repeat;transform:rotate(180deg);background-size:10px}#detail .wrap-item .title .arrow-down{width:20px;height:10px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/down.png) center no-repeat;background-size:10px;margin-right:5px}#detail .wrap-item .content{padding:10px 15px;box-sizing:border-box}#detail .wrap-item .content .comment_list{font-size:12px;line-height:20px}#detail .wrap-item .content .comment_list .comment_user{display:flex;align-items:center}#detail .wrap-item .content .comment_list .comment_user .img-box{display:flex;align-items:center;flex:1}#detail .wrap-item .content .comment_list .comment_user .img-box image{width:25px;height:25px;border-radius:100%}#detail .wrap-item .content .comment_list .comment_user .rater .vlc-rater{display:flex}#detail .wrap-item .content .comment_list .comment_user .user_name{margin-left:15px;display:inline-block;color:#717071}#detail .wrap-item .content .comment_list .comment_content{margin-top:0}#detail .wrap-item .content .comment_list .comment-img{font-size:0;margin:5px 0}#detail .wrap-item .content .comment_list .comment-img image{display:inline-block;width:25%;padding:0 5px}#detail .wrap-item .content .comment_list .comment_time{display:flex;align-items:center;margin:10px 0;color:#838282}#detail .wrap-item .content .comment_list .comment_time .time{margin-right:15px}#detail .wrap-item .content .comment_list .all-comment{text-align:center}#detail .wrap-item .content .comment_list .all-comment .text{margin-top:10px;display:inline-block;font-size:10px;color:#4A4A4A;border:1px solid #4A4A4A;border-radius:3px;padding:2px 4px}#detail .wrap-item .content .argument-box{color:#000}#detail .wrap-item .content .argument-box .argument-top{line-height:20px}#detail .wrap-item .content .argument-box .argument-top span{display:inline-block;font-size:10px;width:50%;box-sizing:border-box;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/goods-list.png) left no-repeat;padding-left:15px}#detail .wrap-item .content .argument-box .argument-bottom{font-size:10px;margin-top:35px}#detail .wrap-item .content .argument-box .argument-bottom .argument-item{display:flex;margin-bottom:10px}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box{flex:1}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul{display:flex;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/lvl-bg.png) top repeat-x}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul .red-dot{background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/red-dot.png) top no-repeat}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul li{flex:1;display:inline-block;text-align:center;padding-top:15px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/dot.png) top no-repeat}#detail .tabbar{position:fixed;bottom:0;width:100%;height:55px;z-index:50;color:#9B9B9B;font-size:13px;background:#FFF;display:flex}#detail .tabbar .tabbar-item{display:flex;flex:1;width:0%;justify-content:center;align-items:center;font-size:12px;flex-direction:column}#detail .tabbar .tabbar-item i{font-size:20px}#detail .tabbar .tabbar-item.show-cart{color:#fff;background:#000;font-size:18px;font-weight:700;flex:2}#detail .tabbar .tabbar-item.show-cart.active{background:#ff2741}#detail .tabbar .tabbar-item.show-cart.disabled{background:#C2C2C2}#detail .tabbar .tabbar-item.favorite,#detail .tabbar .tabbar-item.favorite i{color:#ff2741}#detail .maks{position:fixed;bottom:0;width:100%;height:100%;z-index:40;background:rgba(0,0,0,.4);opacity:1;transition:opacity .3s ease;display:none}#detail .maks.cur{display:block}#detail .sku-popup{width:100%;position:fixed;left:0;bottom:-55px;z-index:51;transform:translate3d(0,100,0)}#detail .sku-popup .select-goods-cloese{position:absolute;top:12px;right:10px;width:20px;height:20px;background:0 0;z-index:4;overflow:visible}#detail .sku-popup .select-goods-cloese:after,#detail .sku-popup .select-goods-cloese:before{top:9px;left:-1px;width:28px;height:2px;background:#2e2e2e;position:absolute;content:''}#detail .sku-popup .select-goods-cloese:before{transform:rotate(45deg)}#detail .sku-popup .select-goods-cloese:after{transform:rotate(-45deg)}#detail .sku-popup .select-goods-container{background:#fff;position:relative;z-index:100}#detail .sku-popup .select-goods-container .select-goods-header{position:relative;height:60px}#detail .sku-popup .select-goods-container .select-goods-header .img-box{position:absolute;left:10px;bottom:10px;width:78px;height:78px;border:1px solid #e5e5e5;background:#f9f9f9}#detail .sku-popup .select-goods-container .select-goods-header .img-box image{width:100%;height:100%}#detail .sku-popup .select-goods-container .select-goods-header .price-box{font-size:18px;margin-left:100px;height:100%;display:flex;flex-direction:column;justify-content:center}#detail .sku-popup .select-goods-container .select-goods-header .price-box .price{font-weight:700;color:#ee2b1d}#detail .sku-popup .select-goods-container .select-goods-header .price-box .count{font-size:14px;color:#6c6c6c;text-indent:3px}#detail .sku-popup .select-goods-container .select-goods-spec{font-size:12px;padding:12px 8px 50px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line{display:flex;margin-bottom:15px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-title{padding-right:11px;color:#c4c4c4;width:50px;line-height:35px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value{flex:1;font-size:0;margin-top:-10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block{display:inline-block;margin-top:10px;margin-right:10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block .spec-text{display:block;padding:0 7px;height:33px;line-height:33px;min-width:20px;border:1px solid #DDD;text-align:center;font-size:12px;position:relative}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.active span:before{content:'';position:absolute;border:3px solid #ff2741;top:-1px;left:-1px;right:-1px;bottom:-1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span{border:none;margin:1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span:before{content:'';position:absolute;background-color:#eee;top:-1px;left:-1px;right:-1px;bottom:-1px;opacity:.6}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span:after{content:'';position:absolute;border:3px dashed #cfcfcf;top:-1px;left:-1px;right:-1px;bottom:-1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value{display:flex;font-size:0}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value span{display:block;border:1px solid #e8e8e8;text-align:center;min-width:28px;width:28px;height:28px;line-height:28px;font-size:12px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value span.store{width:auto;border-color:#fff;margin-left:10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value input{display:block;border:none;height:100%;width:100%;text-align:center;outline:0}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value .none-border{width:30px;border:1px solid #e8e8e8;border-left:none;border-right:none}#detail .sku-popup .select-goods-container .select-goods-spec .button{height:50px;line-height:50px;text-align:center;position:absolute;bottom:0;left:0;right:0;border-radius:0;background:#ff2741}#detail .sku-popup .select-goods-container .select-goods-spec .button.disabled{background:#C2C2C2}#detail .cart-box .cart-mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background-color:rgba(0,0,0,.4)}#detail .cart-box .cart-dialog{position:fixed;z-index:500;width:85%;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#fafafc;text-align:center;border-radius:5px;overflow:hidden}#detail .cart-box .cart-dialog .title{padding:20px 0;font-size:15px}#detail .cart-box .cart-dialog .buttons{display:flex;padding:20px 8px;font-size:15px;word-wrap:break-word;word-break:break-all}#detail .cart-box .cart-dialog .buttons .button{display:block;background:#ff2741;color:#fff;padding:10px;margin:0 8px;flex:1;width:0;text-align:center;border-radius:3px}#detail .cart-box .cart-dialog .buttons .button.agin{background-color:#FFF;color:#ff2741;border:1px solid #ff2741}#detail .share-box{background:#CDCDD1;position:fixed;bottom:0;width:100%;height:0;z-index:50;transition:all .3s linear}#detail .share-box .shaer-item{height:50px;line-height:50px;text-align:center;font-size:18px;color:#2E2D2D;background:#fff;border-radius:0}#detail .share-box .shaer-item:after{border:none}#detail .share-box .shaer-item.clear{margin-top:5px;color:#9B9B9B}#detail .share-box.cur{height:155px} \ No newline at end of file +#detail .wxParse-p image{width:100%!important}#detail .top-tap{display:flex;align-content:center;position:fixed;top:0;width:100%;z-index:20;padding:6px 10%;font-size:14px;background:#FFF;color:#4A4A4A;box-sizing:border-box}#detail .top-tap .item{flex:1;text-align:center}#detail .top-tap .item .name{display:inline-block;padding:5px 0}#detail .top-tap .item .name.active{color:#ff2741;border-bottom:2px solid #ff2741}#detail .top-tap .share{position:relative;right:-10px;background:#FFF;border-radius:0;margin:0;padding:0;top:4px;line-height:inherit;font-size:16px}#detail .top-tap .share:after{border:none}#detail .top-box{padding-top:40px}#detail .top-box swiper{height:730rpx;background:#fff}#detail .top-box swiper .slide-image{width:100%;height:100%}#detail .top-box .basic-information{font-size:12px;background:#fff}#detail .top-box .basic-information .goods-name{font-size:14px;color:#000;padding:5px 15px}#detail .top-box .basic-information .goods-price{display:flex;padding:0 15px;align-items:center;color:#ee2b1d}#detail .top-box .basic-information .goods-price .price{font-size:20px;color:#ff2741;margin-right:5px}#detail .top-box .basic-information .market-price-box{display:flex;align-items:center;justify-content:space-between;padding:0 15px 10px;font-size:12px;color:#959595}#detail .top-box .basic-information .market-price-box .market-price{text-decoration:line-through}#detail .top-box .basic-information .tags-box{padding:0 15px 10px}#detail .top-box .basic-information .tags-box span{font-size:10px;color:#9f9f9f;background:#e4e4e4;border-radius:4px;padding:3px 5px;margin-right:5px;margin-top:5px;display:inline-block}#detail .top-box .basic-information .coupons-tags{padding:10px 15px;display:flex;align-items:baseline}#detail .top-box .basic-information .coupons-tags .tags-title{width:30px;color:#585757;font-weight:700}#detail .top-box .basic-information .coupons-tags .coupon-box{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:flex-start;align-items:center;flex:1}#detail .top-box .basic-information .coupons-tags .coupon-box .tags-item{color:#fff;background:#ff2741;padding:2px 7px;position:relative;margin:5px 10px 5px 0}#detail .top-box .basic-information .coupons-tags .coupon-box .tags-item .dot-wrap .dot-left{position:absolute;top:0;left:5px}#detail .top-box .basic-information .coupons-tags .coupon-box .tags-item .dot-wrap .dot-right{position:absolute;top:0;right:-4px}#detail .top-box .basic-information .coupons-tags .coupon-box .tags-item .dot-wrap .dot-item{width:5px;height:5px;background:#F7F7F7;border-radius:50%;margin:2px 0 2px -7px}#detail .top-box .basic-information .coupons-tags .coupon-box .tags-item .dot-wrap .dot-item:last-child{margin-top:0}#detail .top-box .basic-information .discounts-tags{display:flex;padding:10px 15px;align-items:baseline}#detail .top-box .basic-information .discounts-tags .tags-title{width:30px;color:#585757;font-weight:700}#detail .top-box .basic-information .discounts-tags .discounts-box{flex:1;overflow:hidden}#detail .top-box .basic-information .discounts-tags .discounts-box .disconts-item{display:flex;align-items:center;margin-bottom:10px}#detail .popup-box .popup .popup-bottom.discounts .disconts-item:last-child,#detail .top-box .basic-information .discounts-tags .discounts-box .disconts-item:last-child{margin-bottom:0}#detail .top-box .basic-information .discounts-tags .discounts-box .disconts-item .discounts-tags-title{color:#ff2741;border:1px solid #ff2741;border-radius:3px;padding:0 5px;margin-right:10px}#detail .top-box .basic-information .discounts-tags .discounts-box .disconts-item .tags-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}#detail .wrap-item{background-color:#FFF;margin-top:10px}#detail .wrap-item.commodity{padding-bottom:80px}#detail .wrap-item .title{display:flex;padding:10px 15px;align-items:center;font-size:14px}#detail .wrap-item .title .text{flex:1}#detail .wrap-item .title .arrow-up{width:30px;height:10px;margin-top:3px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/down.png) center no-repeat;transform:rotate(180deg);background-size:10px}#detail .wrap-item .title .arrow-down{width:20px;height:10px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/down.png) center no-repeat;background-size:10px;margin-right:5px}#detail .wrap-item .content{padding:10px 15px;box-sizing:border-box}#detail .wrap-item .content .comment_list{font-size:12px;line-height:20px}#detail .wrap-item .content .comment_list .comment_user{display:flex;align-items:center}#detail .wrap-item .content .comment_list .comment_user .img-box{display:flex;align-items:center;flex:1}#detail .wrap-item .content .comment_list .comment_user .img-box image{width:25px;height:25px;border-radius:100%}#detail .wrap-item .content .comment_list .comment_user .rater .vlc-rater{display:flex}#detail .wrap-item .content .comment_list .comment_user .user_name{margin-left:15px;display:inline-block;color:#717071}#detail .wrap-item .content .comment_list .comment_content{margin-top:0}#detail .wrap-item .content .comment_list .comment-img{font-size:0;margin:5px 0}#detail .wrap-item .content .comment_list .comment-img image{display:inline-block;width:25%;padding:0 5px}#detail .wrap-item .content .comment_list .comment_time{display:flex;align-items:center;margin:10px 0;color:#838282}#detail .wrap-item .content .comment_list .comment_time .time{margin-right:15px}#detail .wrap-item .content .comment_list .all-comment{text-align:center}#detail .wrap-item .content .comment_list .all-comment .text{margin-top:10px;display:inline-block;font-size:10px;color:#4A4A4A;border:1px solid #4A4A4A;border-radius:3px;padding:2px 4px}#detail .wrap-item .content .argument-box{color:#000}#detail .wrap-item .content .argument-box .argument-top{line-height:20px}#detail .wrap-item .content .argument-box .argument-top span{display:inline-block;font-size:10px;width:50%;box-sizing:border-box;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/goods-list.png) left no-repeat;padding-left:15px}#detail .wrap-item .content .argument-box .argument-bottom{font-size:10px;margin-top:35px}#detail .wrap-item .content .argument-box .argument-bottom .argument-item{display:flex;margin-bottom:10px}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box{flex:1}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul{display:flex;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/lvl-bg.png) top repeat-x}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul .red-dot{background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/red-dot.png) top no-repeat}#detail .wrap-item .content .argument-box .argument-bottom .argument-item .index-box ul li{flex:1;display:inline-block;text-align:center;padding-top:15px;background:url(https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/小程序/dot.png) top no-repeat}#detail .tabbar{position:fixed;bottom:0;width:100%;height:55px;z-index:50;color:#9B9B9B;font-size:13px;background:#FFF;display:flex}#detail .tabbar .tabbar-item{display:flex;flex:1;width:0%;justify-content:center;align-items:center;font-size:12px;flex-direction:column}#detail .tabbar .tabbar-item i{font-size:20px}#detail .tabbar .tabbar-item.show-cart{color:#fff;background:#000;font-size:18px;font-weight:700;flex:2}#detail .tabbar .tabbar-item.show-cart.active{background:#ff2741}#detail .tabbar .tabbar-item.show-cart.disabled{background:#C2C2C2}#detail .tabbar .tabbar-item.favorite,#detail .tabbar .tabbar-item.favorite i{color:#ff2741}#detail .maks{position:fixed;bottom:0;width:100%;height:100%;z-index:40;background:rgba(0,0,0,.4);opacity:1;transition:opacity .3s ease;display:none}#detail .maks.cur{display:block}#detail .sku-popup{width:100%;position:fixed;left:0;bottom:-55px;z-index:51;transform:translate3d(0,100,0)}#detail .sku-popup .select-goods-cloese{position:absolute;top:12px;right:10px;width:20px;height:20px;background:0 0;z-index:4;overflow:visible}#detail .sku-popup .select-goods-cloese:after,#detail .sku-popup .select-goods-cloese:before{top:9px;left:-1px;position:absolute;height:2px;background:#2e2e2e;content:'';width:28px}#detail .sku-popup .select-goods-cloese:before{transform:rotate(45deg)}#detail .sku-popup .select-goods-cloese:after{transform:rotate(-45deg)}#detail .sku-popup .select-goods-container{background:#fff;position:relative;z-index:100}#detail .sku-popup .select-goods-container .select-goods-header{position:relative;height:60px}#detail .sku-popup .select-goods-container .select-goods-header .img-box{position:absolute;left:10px;bottom:10px;width:78px;height:78px;border:1px solid #e5e5e5;background:#f9f9f9}#detail .sku-popup .select-goods-container .select-goods-header .img-box image{width:100%;height:100%}#detail .sku-popup .select-goods-container .select-goods-header .price-box{font-size:18px;margin-left:100px;height:100%;display:flex;flex-direction:column;justify-content:center}#detail .sku-popup .select-goods-container .select-goods-header .price-box .price{font-weight:700;color:#ee2b1d}#detail .sku-popup .select-goods-container .select-goods-header .price-box .count{font-size:14px;color:#6c6c6c;text-indent:3px}#detail .sku-popup .select-goods-container .select-goods-spec{font-size:12px;padding:12px 8px 50px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line{display:flex;margin-bottom:15px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-title{padding-right:11px;color:#c4c4c4;width:50px;line-height:35px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value{flex:1;font-size:0;margin-top:-10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block{display:inline-block;margin-top:10px;margin-right:10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block .spec-text{display:block;padding:0 7px;height:33px;line-height:33px;min-width:20px;border:1px solid #DDD;text-align:center;font-size:12px;position:relative}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.active span:before{content:'';position:absolute;border:3px solid #ff2741;top:-1px;left:-1px;right:-1px;bottom:-1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span{border:none;margin:1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span:before{content:'';position:absolute;background-color:#eee;top:-1px;left:-1px;right:-1px;bottom:-1px;opacity:.6}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .spec-value .spec-block.disabled span:after{content:'';position:absolute;border:3px dashed #cfcfcf;top:-1px;left:-1px;right:-1px;bottom:-1px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value{display:flex;font-size:0}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value span{display:block;border:1px solid #e8e8e8;text-align:center;min-width:28px;width:28px;height:28px;line-height:28px;font-size:12px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value span.store{width:auto;border-color:#fff;margin-left:10px}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value input{display:block;border:none;height:100%;width:100%;text-align:center;outline:0}#detail .sku-popup .select-goods-container .select-goods-spec .spec-line .num-value .none-border{width:30px;border:1px solid #e8e8e8;border-left:none;border-right:none}#detail .sku-popup .select-goods-container .select-goods-spec .button{height:50px;line-height:50px;text-align:center;position:absolute;bottom:0;left:0;right:0;border-radius:0;background:#ff2741}#detail .sku-popup .select-goods-container .select-goods-spec .button.disabled{background:#C2C2C2}#detail .cart-box .cart-mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background-color:rgba(0,0,0,.4)}#detail .cart-box .cart-dialog{position:fixed;z-index:500;width:85%;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#fafafc;text-align:center;border-radius:5px;overflow:hidden}#detail .popup-box,#detail .share-box{bottom:0;z-index:50;transition:all .3s linear}#detail .cart-box .cart-dialog .title{padding:20px 0;font-size:15px}#detail .cart-box .cart-dialog .buttons{display:flex;padding:20px 8px;font-size:15px;word-wrap:break-word;word-break:break-all}#detail .cart-box .cart-dialog .buttons .button{display:block;background:#ff2741;color:#fff;padding:10px;margin:0 8px;flex:1;width:0;text-align:center;border-radius:3px}#detail .cart-box .cart-dialog .buttons .button.agin{background-color:#FFF;color:#ff2741;border:1px solid #ff2741}#detail .popup-box{background:#F7F7F7;position:fixed;width:100%;height:0}#detail .popup-box.cur{height:60%}#detail .popup-box .popup{height:100%;box-sizing:border-box}#detail .popup-box .popup .popup-top{padding:0 15px;background:#e9e9e9;text-align:center;overflow:visible}#detail .popup-box .popup .popup-top .title{position:relative;color:#4A4A4A;overflow:visible;font-size:14px;padding:10px 0}#detail .popup-box .popup .popup-top .title .close{position:absolute;right:-10px;top:0;padding:10px}#detail .popup-box .popup .popup-bottom{padding:0 15px;height:100%;overflow:auto;box-sizing:border-box}#detail .popup-box .popup .popup-bottom.coupon .title{font-size:14px;color:#000;padding-top:8px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box{margin-bottom:50px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item{margin-bottom:10px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item:first-child{margin-top:10px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon{display:flex}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon.shasow{box-shadow:0 7px 10px 0 rgba(6,0,0,.2)}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left{width:110px;height:80px;color:#fff;background:#ff2741;position:relative}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;font-size:12px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box{text-align:center;width:100%}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text{display:block;padding:0 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:20px;font-weight:600}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text.label{font-size:12px;font-weight:100}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .text .money{font-size:14px;font-weight:100}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .text-wrap .text-box .money-num{font-size:25px;font-weight:700}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap{position:absolute;top:0;margin-top:5px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap .dot-item{width:5px;height:5px;background:#F7F7F7;border-radius:50%;margin:4px 0 9px -1px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-left .dot-wrap .dot-item:last-child{margin-top:10px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right{flex:1;background:#fff;padding:0 15px;font-size:12px;overflow:hidden}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .top{font-size:12px;display:-webkit-box;color:#333;height:40px;line-height:20px;padding-top:8px;box-sizing:border-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .top .type{color:#333;border:1px solid #333;padding:2px 5px;border-radius:3px;line-height:20px;margin-right:5px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:7px 0}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .tiem-box{color:#9E9E9F;flex:1;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .btn{text-align:center;border-radius:3px;padding:3px 12px}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .use{color:#fff;border:1px solid #ff2741;background:#ff2741}#detail .popup-box .popup .popup-bottom.coupon .coupon-box .coupon-item .coupon .coupon-right .bottom .bottom-use .already{color:#9B9B9B;background:#fff;border:1px solid #9B9B9B}#detail .popup-box .popup .popup-bottom.discounts{height:100%;overflow:auto;box-sizing:border-box}#detail .popup-box .popup .popup-bottom.discounts .disconts-item{display:flex;align-items:baseline;padding:10px 5px}#detail .popup-box .popup .popup-bottom.discounts .disconts-item:last-child:before{display:none}#detail .popup-box .popup .popup-bottom.discounts .disconts-item .discounts-tags-title{color:#ff2741;border:1px solid #ff2741;border-radius:3px;padding:0 5px;margin-right:10px}#detail .popup-box .popup .popup-bottom.discounts .disconts-item .tags-item{flex:1}#detail .share-box{background:#CDCDD1;position:fixed;width:100%;height:0}#detail .share-box .shaer-item{height:50px;line-height:50px;text-align:center;font-size:18px;color:#2E2D2D;background:#fff;border-radius:0}#detail .share-box .shaer-item:after{border:none}#detail .share-box .shaer-item.clear{margin-top:5px;color:#9B9B9B}#detail .share-box.cur{height:155px} \ No newline at end of file