商品详情页中的加入购物车样式调整，添加客服功能

litemall-wx/pages/goods/goods.js

@@ -42,7 +42,7 @@ Page({
             // 这里检测一下
             let _productPrice = res.data.productList[0].price;
             let _goodsPrice = res.data.info.retailPrice;
-            if (_productPrice != _goodsPrice){
+            if (_productPrice != _goodsPrice) {
               console.error('商品数量价格和货品不一致');
             }
 
@@ -206,13 +206,13 @@ Page({
       }
 
       let checkedProduct = checkedProductArray[0];
-      if (checkedProduct.number > 0){
+      if (checkedProduct.number > 0) {
         this.setData({
           checkedSpecPrice: checkedProduct.price,
           soldout: false
         });
       }
-      else{
+      else {
         this.setData({
           checkedSpecPrice: this.data.goods.retailPrice,
           soldout: true
@@ -220,7 +220,7 @@ Page({
       }
 
     }
-    else{
+    else {
       this.setData({
         checkedSpecText: '规格数量选择',
         checkedSpecPrice: this.data.goods.retailPrice,
@@ -276,28 +276,33 @@ Page({
       });
     }
   },
-  closeAttrOrCollect: function () {
-    let that = this;
-    if (this.data.openAttr) {
+  closeAttr: function () {
     this.setData({
       openAttr: false,
     });
-      if (that.data.userHasCollect == 1) {
-        that.setData({
-          collectBackImage: that.data.hasCollectImage
-        });
-      } else {
-        that.setData({
-          collectBackImage: that.data.noCollectImage
-        });
-      }
-    } else {
+  },
+  addCollectOrNot: function () {
+    let that = this;
+    // if (this.data.openAttr) {
+    //   this.setData({
+    //     openAttr: false,
+    //   });
+    //   if (that.data.userHasCollect == 1) {
+    //     that.setData({
+    //       collectBackImage: that.data.hasCollectImage
+    //     });
+    //   } else {
+    //     that.setData({
+    //       collectBackImage: that.data.noCollectImage
+    //     });
+    //   }
+    // } else {
       //添加或是取消收藏
       util.request(api.CollectAddOrDelete, { type: 0, valueId: this.data.id }, "POST")
         .then(function (res) {
           let _res = res;
           if (_res.errno == 0) {
-            if ( _res.data.type == 'add') {
+            if (_res.data.type == 'add') {
               that.setData({
                 collectBackImage: that.data.hasCollectImage
               });
@@ -316,7 +321,6 @@ Page({
           }
 
         });
-    }
 
   },
   openCartPage: function () {
@@ -394,7 +398,7 @@ Page({
       //打开规格选择窗口
       this.setData({
         openAttr: !this.data.openAttr,
-        collectBackImage: '/static/images/detail_back.png'
+        // collectBackImage: '/static/images/detail_back.png'
       });
     } else {
 

litemall-wx/pages/goods/goods.wxml

-<scroll-view class="container" scroll-y="true">
-  <view wx:if="{{!openAttr}}">
+<view class="container">
   <swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
     <swiper-item wx:for="{{goods.gallery}}" wx:key="*this">
       <image src="{{item}}" background-size="cover"></image>
@@ -16,7 +15,7 @@
       <text class="desc">{{goods.goodsBrief}}</text>
       <text class="price">￥{{checkedSpecPrice}}</text>
       <view class="brand" wx:if="{{brand.name}}">
-          <navigator url="/pages/brandDetail/brandDetail?id={{brand.id}}">
+        <navigator url="../brandDetail/brandDetail?id={{brand.id}}">
           <text>{{brand.name}}</text>
         </navigator>
       </view>
@@ -46,15 +45,16 @@
           {{item.content}}
         </view>
         <view class="imgs" wx:if="{{item.picList.length > 0}}">
-            <image class="img"  wx:for="{{item.picList}}" wx:key="*this"  wx:for-item="iitem" src="{{iitem}}"></image>
+          <image class="img" wx:for="{{item.picList}}" wx:key="*this" wx:for-item="iitem" src="{{iitem}} "></image>
         </view>
+        <!-- <view class="spec">白色 2件</view> -->
       </view>
     </view>
   </view>
   <view class="goods-attr">
     <view class="t">商品参数</view>
     <view class="l">
-        <view class="item" wx:for="{{attribute}}" wx:key="item">
+      <view class="item" wx:for="{{attribute}}" wx:key="name">
         <text class="left">{{item.attribute}}</text>
         <text class="right">{{item.value}}</text>
       </view>
@@ -66,6 +66,7 @@
     <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
   </view>
 
+
   <view class="common-problem">
     <view class="h">
       <view class="line"></view>
@@ -99,14 +100,18 @@
       </view>
     </view>
   </view>
+</view>
+<view class="attr-pop-box" hidden="{{!openAttr}}">
+  <view class="attr-pop">
+    <view class="close" bindtap="closeAttr">
+      <image class="icon" src="/static/images/icon_close.png"></image>
     </view>
-  <view wx:if="{{openAttr}}" class="attr-pop">
     <view class="img-info">
       <image class="img" src="{{goods.picUrl}}"></image>
       <view class="info">
         <view class="c">
           <view class="p">价格：￥{{checkedSpecPrice}}</view>
-          <view class="a">{{tmpSpecText}}</view>
+          <view class="a" wx:if="{{productList.length>0}}">已选择：{{checkedSpecText}}</view>
         </view>
       </view>
     </view>
@@ -114,9 +119,7 @@
       <view class="spec-item" wx:for="{{specificationList}}" wx:key="name">
         <view class="name">{{item.name}}</view>
         <view class="values">
-          <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue" wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="id" data-value-id="{{vitem.id}}" data-name="{{vitem.specification}}">
-          {{vitem.value}}
-          </view>
+          <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue" wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}" data-name-id="{{vitem.specification}}">{{vitem.value}}</view>
         </view>
       </view>
 
@@ -130,9 +133,13 @@
       </view>
     </view>
   </view>
-</scroll-view>
+</view>
+<view class="contact">
+  <contact-button style="opacity:0;position:absolute;" type="default-dark" session-from="weapp" size="27">
+  </contact-button>
+</view>
 <view class="bottom-btn">
-  <view class="l l-collect {{ openAttr ? 'back' : ''}}" bindtap="closeAttrOrCollect">
+  <view class="l l-collect" bindtap="addCollectOrNot">
     <image class="icon" src="{{ collectBackImage }}"></image>
   </view>
   <view class="l l-cart">

litemall-wx/pages/goods/goods.wxss

-.container{
+.container {
   margin-bottom: 100rpx;
 }
-.goodsimgs{
+
+.goodsimgs {
   width: 750rpx;
   height: 750rpx;
 }
 
-.goodsimgs image{
+.goodsimgs image {
   width: 750rpx;
   height: 750rpx;
 }
 
-.service-policy{
+.service-policy {
   width: 750rpx;
   height: 73rpx;
   background: #f4f4f4;
@@ -22,7 +23,7 @@
   justify-content: space-between;
 }
 
-.service-policy .item{
+.service-policy .item {
   background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) 0 center no-repeat;
   background-size: 10rpx;
   padding-left: 15rpx;
@@ -32,14 +33,14 @@
   color: #666;
 }
 
-.goods-info{
+.goods-info {
   width: 750rpx;
   height: 306rpx;
   overflow: hidden;
   background: #fff;
 }
 
-.goods-info .c{
+.goods-info .c {
   display: block;
   width: 718.75rpx;
   height: 100%;
@@ -48,20 +49,20 @@
   border-bottom: 1px solid #f4f4f4;
 }
 
-.goods-info .c text{
+.goods-info .c text {
   display: block;
   width: 687.5rpx;
   text-align: center;
 }
 
-.goods-info .name{
+.goods-info .name {
   height: 41rpx;
   margin-bottom: 5.208rpx;
   font-size: 41rpx;
   line-height: 41rpx;
 }
 
-.goods-info .desc{
+.goods-info .desc {
   height: 43rpx;
   margin-bottom: 41rpx;
   font-size: 24rpx;
@@ -69,21 +70,20 @@
   color: #999;
 }
 
-
-.goods-info .price{
+.goods-info .price {
   height: 35rpx;
   font-size: 35rpx;
   line-height: 35rpx;
   color: #b4282d;
 }
 
-.goods-info .brand{
+.goods-info .brand {
   margin-top: 23rpx;
   min-height: 40rpx;
   text-align: center;
 }
 
-.goods-info .brand text{
+.goods-info .brand text {
   display: inline-block;
   width: auto;
   padding: 2px 30rpx 2px 10.5rpx;
@@ -96,14 +96,14 @@
   background-size: 10.75rpx 18.75rpx;
 }
 
-.section-nav{
+.section-nav {
   width: 750rpx;
   height: 108rpx;
   background: #fff;
   margin-bottom: 20rpx;
 }
 
-.section-nav .t{
+.section-nav .t {
   float: left;
   width: 600rpx;
   height: 108rpx;
@@ -113,7 +113,7 @@
   margin-left: 31.25rpx;
 }
 
-.section-nav .i{
+.section-nav .i {
   float: right;
   width: 52rpx;
   height: 52rpx;
@@ -121,7 +121,7 @@
   margin-top: 28rpx;
 }
 
-.section-act .t{
+.section-act .t {
   float: left;
   display: flex;
   align-items: center;
@@ -134,14 +134,14 @@
   margin-left: 31.25rpx;
 }
 
-.section-act .label{
+.section-act .label {
   color: #999;
 }
 
-.section-act .tag{
+.section-act .tag {
   display: flex;
   align-items: center;
-    padding:0 10rpx;
+  padding: 0 10rpx;
   border-radius: 3px;
   height: 37rpx;
   width: auto;
@@ -149,10 +149,10 @@
   overflow: hidden;
   border: 1px solid #f48f18;
   font-size: 25rpx;
-    margin:0 10rpx;
+  margin: 0 10rpx;
 }
 
-.section-act .text{
+.section-act .text {
   display: flex;
   align-items: center;
   height: 37rpx;
@@ -162,15 +162,15 @@
   font-size: 29rpx;
 }
 
-.comments{
+.comments {
   width: 100%;
   height: auto;
-    padding-left:30rpx;
+  padding-left: 30rpx;
   background: #fff;
   margin: 20rpx 0;
 }
 
-.comments .h{
+.comments .h {
   height: 102.5rpx;
   line-height: 100.5rpx;
   width: 718.75rpx;
@@ -178,7 +178,7 @@
   border-bottom: 1px solid #d9d9d9;
 }
 
-.comments .h .t{
+.comments .h .t {
   display: block;
   float: left;
   width: 50%;
@@ -186,7 +186,7 @@
   color: #333;
 }
 
-.comments .h .i{
+.comments .h .i {
   display: block;
   float: right;
   width: 164rpx;
@@ -196,24 +196,24 @@
   background-size: 52rpx;
 }
 
-.comments .b{
+.comments .b {
   height: auto;
   width: 720rpx;
 }
 
-.comments .item{
+.comments .item {
   height: auto;
   width: 720rpx;
   overflow: hidden;
 }
 
-.comments .info{
+.comments .info {
   height: 127rpx;
   width: 100%;
   padding: 33rpx 0 27rpx 0;
 }
 
-.comments .user{
+.comments .user {
   float: left;
   width: auto;
   height: 67rpx;
@@ -221,7 +221,7 @@
   font-size: 0;
 }
 
-.comments .user image{
+.comments .user image {
   float: left;
   width: 67rpx;
   height: 67rpx;
@@ -229,7 +229,7 @@
   border-radius: 50%;
 }
 
-.comments .user text{
+.comments .user text {
   display: inline-block;
   width: auto;
   height: 66rpx;
@@ -238,7 +238,7 @@
   line-height: 66rpx;
 }
 
-.comments .time{
+.comments .time {
   display: block;
   float: right;
   width: auto;
@@ -249,7 +249,7 @@
   margin-right: 30rpx;
 }
 
-.comments .content{
+.comments .content {
   width: 720rpx;
   padding-right: 30rpx;
   line-height: 45.8rpx;
@@ -257,20 +257,19 @@
   margin-bottom: 24rpx;
 }
 
-.comments .imgs{
+.comments .imgs {
   width: 720rpx;
   height: auto;
   margin-bottom: 25rpx;
 }
 
-.comments .imgs .img{
+.comments .imgs .img {
   height: 150rpx;
   width: 150rpx;
   margin-right: 28rpx;
 }
 
-
-.comments .spec{
+.comments .spec {
   width: 720rpx;
   padding-right: 30rpx;
   line-height: 30rpx;
@@ -279,8 +278,7 @@
   margin-bottom: 30rpx;
 }
 
-
-.goods-attr{
+.goods-attr {
   width: 750rpx;
   height: auto;
   overflow: hidden;
@@ -288,14 +286,14 @@
   background: #fff;
 }
 
-.goods-attr .t{
+.goods-attr .t {
   width: 687.5rpx;
   height: 104rpx;
   line-height: 104rpx;
   font-size: 38.5rpx;
 }
 
-.goods-attr .item{
+.goods-attr .item {
   width: 687.5rpx;
   height: 68rpx;
   padding: 11rpx 20rpx;
@@ -304,7 +302,7 @@
   font-size: 38.5rpx;
 }
 
-.goods-attr .left{
+.goods-attr .left {
   float: left;
   font-size: 25rpx;
   width: 134rpx;
@@ -314,7 +312,7 @@
   color: #999;
 }
 
-.goods-attr .right{
+.goods-attr .right {
   float: left;
   font-size: 36.5rpx;
   margin-left: 20rpx;
@@ -325,25 +323,24 @@
   color: #333;
 }
 
-.detail{
+.detail {
   width: 750rpx;
   height: auto;
   overflow: hidden;
 }
 
-.detail image{
+.detail image {
   width: 750rpx;
   display: block;
 }
 
-
-.common-problem{
+.common-problem {
   width: 750rpx;
   height: auto;
   overflow: hidden;
 }
 
-.common-problem .h{
+.common-problem .h {
   position: relative;
   height: 145.5rpx;
   width: 750rpx;
@@ -352,7 +349,7 @@
   text-align: center;
 }
 
-.common-problem .h .line{
+.common-problem .h .line {
   display: inline-block;
   position: absolute;
   top: 72rpx;
@@ -364,7 +361,7 @@
   background: #ccc;
 }
 
-.common-problem .h .title{
+.common-problem .h .title {
   display: inline-block;
   position: absolute;
   top: 56.125rpx;
@@ -376,22 +373,21 @@
   background: #fff;
 }
 
-.common-problem .b{
+.common-problem .b {
   width: 750rpx;
   height: auto;
   overflow: hidden;
   padding: 0rpx 30rpx;
   background: #fff;
-
 }
 
-.common-problem .item{
+.common-problem .item {
   height: auto;
   overflow: hidden;
   padding-bottom: 25rpx;
 }
 
-.common-problem .question-box .spot{
+.common-problem .question-box .spot {
   float: left;
   display: block;
   height: 8rpx;
@@ -401,7 +397,7 @@
   margin-top: 11rpx;
 }
 
-.common-problem .question-box .question{
+.common-problem .question-box .question {
   float: left;
   line-height: 30rpx;
   padding-left: 8rpx;
@@ -411,21 +407,20 @@
   color: #303030;
 }
 
-.common-problem .answer{
+.common-problem .answer {
   line-height: 36rpx;
   padding-left: 16rpx;
   font-size: 26rpx;
   color: #787878;
 }
 
-
-.related-goods{
+.related-goods {
   width: 750rpx;
   height: auto;
   overflow: hidden;
 }
 
-.related-goods .h{
+.related-goods .h {
   position: relative;
   height: 145.5rpx;
   width: 750rpx;
@@ -435,7 +430,7 @@
   border-bottom: 1px solid #f4f4f4;
 }
 
-.related-goods .h .line{
+.related-goods .h .line {
   display: inline-block;
   position: absolute;
   top: 72rpx;
@@ -447,7 +442,7 @@
   background: #ccc;
 }
 
-.related-goods .h .title{
+.related-goods .h .title {
   display: inline-block;
   position: absolute;
   top: 56.125rpx;
@@ -459,13 +454,13 @@
   background: #fff;
 }
 
-.related-goods .b{
+.related-goods .b {
   width: 750rpx;
   height: auto;
   overflow: hidden;
 }
 
-.related-goods .b .item{
+.related-goods .b .item {
   float: left;
   background: #fff;
   width: 375rpx;
@@ -477,12 +472,12 @@
   border-bottom: 1px solid #f4f4f4;
 }
 
-.related-goods .item .img{
+.related-goods .item .img {
   width: 311.45rpx;
   height: 311.45rpx;
 }
 
-.related-goods .item .name{
+.related-goods .item .name {
   display: block;
   width: 311.45rpx;
   height: 35rpx;
@@ -493,7 +488,7 @@
   color: #333;
 }
 
-.related-goods .item .price{
+.related-goods .item .price {
   display: block;
   width: 311.45rpx;
   height: 30rpx;
@@ -502,10 +497,10 @@
   color: #b4282d;
 }
 
-.bottom-btn{
+.bottom-btn {
   position: fixed;
-    left:0;
-    bottom:0;
+  left: 0;
+  bottom: 0;
   z-index: 10;
   width: 750rpx;
   height: 100rpx;
@@ -513,7 +508,7 @@
   background: #fff;
 }
 
-.bottom-btn .l{
+.bottom-btn .l {
   float: left;
   height: 100rpx;
   width: 162rpx;
@@ -521,63 +516,84 @@
   display: flex;
   align-items: center;
   justify-content: center;
-    
 }
 
-.bottom-btn .l.l-collect{
+.bottom-btn .l.l-collect {
   border-right: none;
   border-left: none;
   text-align: center;
+  width: 90rpx;
+}
+.bottom-btn .l.l-kefu {
+  position: relative;
+  height:54rpx;
+  width: 63rpx;
 }
 
-
-.bottom-btn .l.l-cart .box{
+.bottom-btn .l.l-cart .box {
   position: relative;
   height: 60rpx;
   width: 60rpx;
+  
 }
 
-.bottom-btn .l.l-cart .cart-count{
+.bottom-btn .l.l-cart .cart-count {
   height: 28rpx;
   width: 28rpx;
   z-index: 10;
   position: absolute;
   top: 0;
-    right:0;
+  right: 0;
   background: #b4282d;
   text-align: center;
   font-size: 18rpx;
   color: #fff;
   line-height: 28rpx;
   border-radius: 50%;
-
 }
 
-.bottom-btn .l.l-cart .icon{
-  
+.bottom-btn .l.l-cart .icon {
   position: absolute;
   top: 10rpx;
-    left:0;
-    
+  left: 0;
 }
 
+.bottom-btn .l.l-kefu .kefu-count {
+  height: 28rpx;
+  width: 28rpx;
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  right: 0;
+  /* background: #b4282d; */
+  text-align: center;
+  font-size: 18rpx;
+  color: #fff;
+  line-height: 28rpx;
+  border-radius: 50%;
+}
+.bottom-btn .l.l-kefu .icon{
+  position: absolute;
+  top: 10rpx;
+  left: 0;
+}
 
-.bottom-btn .l .icon{
+.bottom-btn .l .icon {
   display: block;
   height: 44rpx;
   width: 44rpx;
 }
 
-
 .bottom-btn .c{
     float: left;
+    background: #f48f18;
     height: 100rpx;
     line-height: 96rpx;
     flex: 1;
     text-align: center;
-    color: #333;
-    border-top: 1px solid #f4f4f4;
-    border-bottom: 1px solid #f4f4f4;
+    color: #fff;
+     /* border-top: 2px solid #f4f4f4; */
+    /* border-bottom: 2px solid #f4f4f4;  */
 }
 
 .bottom-btn .r{
@@ -591,33 +607,51 @@
     color: #fff;
 }
 
-.bottom-btn .n{
-    border:1px solid #f4f4f4;
-    background: #f4f4f4;
-    float: left;
-    height: 100rpx;
-    line-height: 96rpx;
-    flex: 1;
-    text-align: center;
-}
-
 @import "../../lib/wxParse/wxParse.wxss";
 
-.attr-pop{
+.attr-pop-box {
   width: 100%;
   height: 100%;
+  position: fixed;
+  background: rgba(0, 0, 0, .5);
+  z-index: 8;
+  bottom: 0;
+  /* display: none; */
+}
+
+.attr-pop {
+  width: 100%;
+  height: auto;
+  max-height: 780rpx;
   padding: 31.25rpx;
   background: #fff;
+  position: fixed;
+  z-index: 9;
+  bottom: 100rpx;
 }
 
-.attr-pop .img-info{
+.attr-pop .close {
+  position: absolute;
+  width: 48rpx;
+  height: 48rpx;
+  right: 31.25rpx;
+  overflow: hidden;
+  top: 31.25rpx;
+}
+
+.attr-pop .close .icon {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.attr-pop .img-info {
   width: 687.5rpx;
   height: 177rpx;
   overflow: hidden;
   margin-bottom: 41.5rpx;
 }
 
-.attr-pop .img{
+.attr-pop .img {
   float: left;
   height: 177rpx;
   width: 177rpx;
@@ -625,14 +659,14 @@
   margin-right: 31.25rpx;
 }
 
-.attr-pop .info{
+.attr-pop .info {
   float: left;
   height: 177rpx;
   display: flex;
   align-items: center;
 }
 
-.attr-pop .p{
+.attr-pop .p {
   font-size: 33rpx;
   color: #333;
   height: 33rpx;
@@ -640,33 +674,33 @@
   margin-bottom: 10rpx;
 }
 
-.attr-pop .a{
+.attr-pop .a {
   font-size: 29rpx;
   color: #333;
   height: 40rpx;
   line-height: 40rpx;
 }
 
-.spec-con{
+.spec-con {
   width: 100%;
   height: auto;
   overflow: hidden;
 }
 
-.spec-con .name{
+.spec-con .name {
   height: 32rpx;
   margin-bottom: 22rpx;
   font-size: 29rpx;
   color: #333;
 }
 
-.spec-con .values{
+.spec-con .values {
   height: auto;
   margin-bottom: 31.25rpx;
   font-size: 0;
 }
 
-.spec-con .value{
+.spec-con .value {
   display: inline-block;
   height: 62rpx;
   padding: 0 35rpx;
@@ -679,31 +713,31 @@
   color: #333;
 }
 
-.spec-con .value.disable{
+.spec-con .value.disable {
   border: 1px solid #ccc;
   color: #ccc;
 }
 
-.spec-con .value.selected{
+.spec-con .value.selected {
   border: 1px solid #b4282d;
   color: #b4282d;
 }
 
-.number-item .selnum{
+.number-item .selnum {
   width: 322rpx;
   height: 71rpx;
   border: 1px solid #ccc;
   display: flex;
 }
 
-.number-item .cut{
+.number-item .cut {
   width: 93.75rpx;
   height: 100%;
   text-align: center;
   line-height: 65rpx;
 }
 
-.number-item .number{
+.number-item .number {
   flex: 1;
   height: 100%;
   text-align: center;
@@ -713,11 +747,55 @@
   float: left;
 }
 
-.number-item .add{
+.number-item .add {
   width: 93.75rpx;
   height: 100%;
   text-align: center;
   line-height: 65rpx;
 }
 
+.contact{
+
+    height: 100rpx;
+
+    width: 100rpx;
+
+    background-color: #008000;
 
+    border-radius: 100%;
+
+    position: fixed;
+
+    bottom: 150rpx;
+
+    right: 20rpx;
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+    z-index: 9;
+
+  flex-direction: column;
+
+  /*line-height: 100rpx;
+  text-align: center;
+  padding-top: 26rpx;*/
+  font-size: 20rpx;
+  color: #008000;
+  box-sizing: border-box;
+   background: url("https://litemall.oss-cn-shenzhen.aliyuncs.com/kefu.png") no-repeat center 21rpx; 
+  background-size: 55rpx auto;
+}
+
+.contact .name{
+
+    font-size: 32rpx;
+
+    max-width: 80rpx;
+
+    color: #fff;
+    text-align: center;
+}