Browse Source

feat[litemall-wx]: 优化客服按钮效果

linlinjava 3 years ago
parent
commit
33343a9fc1

+ 1 - 0
litemall-wx/pages/goods/goods.js

@@ -156,6 +156,7 @@ Page({
             });
             });
           }
           }
         }
         }
+        res.data.info.path = "pages/goods/goods?id=" + that.data.id
 
 
         that.setData({
         that.setData({
           goods: res.data.info,
           goods: res.data.info,

+ 6 - 6
litemall-wx/pages/goods/goods.wxml

@@ -178,14 +178,14 @@
   </view>
   </view>
 </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="bottom-btn">
+<view class="l">
+  <button show-message-card send-message-title="{{ goods.name }}" send-message-path="{{ goods.path }}"
+				send-message-img="{{ goods.picUrl }}" open-type="contact"  class="l-contact">
+				<van-icon class="icon" name="/static/images/customer.png" />
+			</button>
+</view>
   <view class="l l-collect" bindtap="addCollectOrNot" wx:if="{{!isGroupon}}">
   <view class="l l-collect" bindtap="addCollectOrNot" wx:if="{{!isGroupon}}">
     <van-icon class="icon" name="star" color="#ab956d" wx:if="{{collect}}"/>
     <van-icon class="icon" name="star" color="#ab956d" wx:if="{{collect}}"/>
     <van-icon class="icon" name="star-o" wx:else/>
     <van-icon class="icon" name="star-o" wx:else/>

+ 18 - 18
litemall-wx/pages/goods/goods.wxss

@@ -577,24 +577,37 @@
 .bottom-btn .l {
 .bottom-btn .l {
   float: left;
   float: left;
   height: 100rpx;
   height: 100rpx;
-  width: 162rpx;
+  width: 90rpx;
   border: 1px solid #f4f4f4;
   border: 1px solid #f4f4f4;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
 }
 }
 
 
+.bottom-btn .l .l-contact {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  line-height: 1;
+  background: #fff;
+  border-radius: 0;
+  height: 55rpx;
+}
+ 
+.bottom-btn .l .l-contact:after {
+  border: none;
+  border-radius: 0;
+}
+
 .bottom-btn .l.l-collect {
 .bottom-btn .l.l-collect {
   border-right: none;
   border-right: none;
   border-left: none;
   border-left: none;
   text-align: center;
   text-align: center;
-  width: 90rpx;
 }
 }
 
 
 .bottom-btn .l.l-collect .icon {
 .bottom-btn .l.l-collect .icon {
-  position: absolute;
-  top: 28rpx;
-  left: 20rpx;
   font-size: 44rpx;
   font-size: 44rpx;
 }
 }
 
 
@@ -808,19 +821,6 @@
   line-height: 65rpx;
   line-height: 65rpx;
 }
 }
 
 
-.contact {
-  height: 100rpx;
-  width: 100rpx;
-  border-radius: 100%;
-  position: fixed;
-  bottom: 96rpx;
-  right: 10rpx;
-  font-size: 20rpx;
-  box-sizing: border-box;
-  background: url("/static/images/customer.png") no-repeat center 21rpx;
-  background-size: 55rpx auto;
-}
-
 .share-pop-box {
 .share-pop-box {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;