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

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,21 +206,21 @@ 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
-        }); 
+        });
       }
-      
+
     }
-    else{
+    else {
       this.setData({
         checkedSpecText: '规格数量选择',
         checkedSpecPrice: this.data.goods.retailPrice,
@@ -276,28 +276,33 @@ Page({
       });
     }
   },
-  closeAttrOrCollect: function () {
+  closeAttr: function () {
+    this.setData({
+      openAttr: false,
+    });
+  },
+  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 {
+    // 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

@@ -1,112 +1,117 @@
-<scroll-view class="container" scroll-y="true">
-  <view wx:if="{{!openAttr}}">
-    <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>
-      </swiper-item>
-    </swiper>
-    <view class="service-policy">
-      <view class="item">30天无忧退货</view>
-      <view class="item">48小时快速退款</view>
-      <view class="item">满88元免邮费</view>
-    </view>
-    <view class="goods-info">
-      <view class="c">
-        <text class="name">{{goods.name}}</text>
-        <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}}">
-            <text>{{brand.name}}</text>
-          </navigator>
-        </view>
+<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>
+    </swiper-item>
+  </swiper>
+  <view class="service-policy">
+    <view class="item">30天无忧退货</view>
+    <view class="item">48小时快速退款</view>
+    <view class="item">满88元免邮费</view>
+  </view>
+  <view class="goods-info">
+    <view class="c">
+      <text class="name">{{goods.name}}</text>
+      <text class="desc">{{goods.goodsBrief}}</text>
+      <text class="price">￥{{checkedSpecPrice}}</text>
+      <view class="brand" wx:if="{{brand.name}}">
+        <navigator url="../brandDetail/brandDetail?id={{brand.id}}">
+          <text>{{brand.name}}</text>
+        </navigator>
       </view>
     </view>
-    <view class="section-nav section-attr" bindtap="switchAttrPop">
-      <view class="t">{{checkedSpecText}}</view>
-      <image class="i" src="/static/images/address_right.png" background-size="cover"></image>
+  </view>
+  <view class="section-nav section-attr" bindtap="switchAttrPop">
+    <view class="t">{{checkedSpecText}}</view>
+    <image class="i" src="/static/images/address_right.png" background-size="cover"></image>
+  </view>
+  <view class="comments" wx:if="{{comment.count > 0}}">
+    <view class="h">
+      <navigator url="/pages/comment/comment?valueId={{goods.id}}&type=0">
+        <text class="t">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
+        <text class="i">查看全部</text>
+      </navigator>
     </view>
-    <view class="comments" wx:if="{{comment.count > 0}}">
-      <view class="h">
-        <navigator url="/pages/comment/comment?valueId={{goods.id}}&type=0">
-          <text class="t">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
-          <text class="i">查看全部</text>
-        </navigator>
-      </view>
-      <view class="b">
-        <view class="item" wx:for="{{comment.data}}" wx:key="id">
-          <view class="info">
-            <view class="user">
-              <image src="{{item.avatar}}"></image>
-              <text>{{item.nickname}}</text>
-            </view>
-            <view class="time">{{item.addTime}}</view>
-          </view>
-          <view class="content">
-            {{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>
+    <view class="b">
+      <view class="item" wx:for="{{comment.data}}" wx:key="id">
+        <view class="info">
+          <view class="user">
+            <image src="{{item.avatar}}"></image>
+            <text>{{item.nickname}}</text>
           </view>
+          <view class="time">{{item.addTime}}</view>
+        </view>
+        <view class="content">
+          {{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>
         </view>
+        <!-- <view class="spec">白色 2件</view> -->
       </view>
     </view>
-    <view class="goods-attr">
-      <view class="t">商品参数</view>
-      <view class="l">
-        <view class="item" wx:for="{{attribute}}" wx:key="item">
-          <text class="left">{{item.attribute}}</text>
-          <text class="right">{{item.value}}</text>
-        </view>
+  </view>
+  <view class="goods-attr">
+    <view class="t">商品参数</view>
+    <view class="l">
+      <view class="item" wx:for="{{attribute}}" wx:key="name">
+        <text class="left">{{item.attribute}}</text>
+        <text class="right">{{item.value}}</text>
       </view>
     </view>
+  </view>
 
-    <view class="detail">
-      <import src="/lib/wxParse/wxParse.wxml" />
-      <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
-    </view>
+  <view class="detail">
+    <import src="/lib/wxParse/wxParse.wxml" />
+    <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
+  </view>
 
-    <view class="common-problem">
-      <view class="h">
-        <view class="line"></view>
-        <text class="title">常见问题</text>
-      </view>
-      <view class="b">
-        <view class="item" wx:for="{{issueList}}" wx:key="id">
-          <view class="question-box">
-            <text class="spot"></text>
-            <text class="question">{{item.question}}</text>
-          </view>
-          <view class="answer">
-            {{item.answer}}
-          </view>
+
+  <view class="common-problem">
+    <view class="h">
+      <view class="line"></view>
+      <text class="title">常见问题</text>
+    </view>
+    <view class="b">
+      <view class="item" wx:for="{{issueList}}" wx:key="id">
+        <view class="question-box">
+          <text class="spot"></text>
+          <text class="question">{{item.question}}</text>
+        </view>
+        <view class="answer">
+          {{item.answer}}
         </view>
       </view>
     </view>
+  </view>
 
-    <view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
-      <view class="h">
-        <view class="line"></view>
-        <text class="title">大家都在看</text>
-      </view>
-      <view class="b">
-        <view class="item" wx:for="{{relatedGoods}}" wx:key="id">
-          <navigator url="/pages/goods/goods?id={{item.id}}">
-            <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
-            <text class="name">{{item.name}}</text>
-            <text class="price">￥{{item.retailPrice}}</text>
-          </navigator>
-        </view>
+  <view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
+    <view class="h">
+      <view class="line"></view>
+      <text class="title">大家都在看</text>
+    </view>
+    <view class="b">
+      <view class="item" wx:for="{{relatedGoods}}" wx:key="id">
+        <navigator url="/pages/goods/goods?id={{item.id}}">
+          <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
+          <text class="name">{{item.name}}</text>
+          <text class="price">￥{{item.retailPrice}}</text>
+        </navigator>
       </view>
     </view>
   </view>
-  <view wx:if="{{openAttr}}" class="attr-pop">
+</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 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">