完成收藏功能针对topic的实现 (#456)

litemall-wx/pages/topicDetail/topicDetail.js

@@ -10,7 +10,9 @@ Page({
     topicList: [],
     commentCount: 0,
     commentList: [],
-    topicGoods: []
+    topicGoods: [],
+    collect: false,
+    userHasCollect: 0
   },
   onLoad: function(options) {
     // 页面初始化 options为页面跳转所带来的参数
@@ -25,7 +27,9 @@ Page({
       if (res.errno === 0) {
         that.setData({
           topic: res.data.topic,
-          topicGoods: res.data.goods
+          topicGoods: res.data.goods,
+          userHasCollect: res.data.userHasCollect,
+          collect: res.data.userHasCollect == 1
         });
 
         WxParse.wxParse('topicDetail', 'html', res.data.topic.content, that);
@@ -59,6 +63,31 @@ Page({
       }
     });
   },
+
+  //添加或是取消收藏
+  addCollectOrNot: function() {
+    let that = this;
+    util.request(api.CollectAddOrDelete, {
+        type: 1,
+        valueId: this.data.id
+      }, "POST")
+      .then(function(res) {
+        if (that.data.userHasCollect == 1) {
+          that.setData({
+            collect: false,
+            userHasCollect: 0
+          });
+        } else {
+          that.setData({
+            collect: true,
+            userHasCollect: 1
+          });
+        }
+
+      });
+
+  },
+
   postComment() {
     if (!app.globalData.hasLogin) {
       wx.navigateTo({

litemall-wx/pages/topicDetail/topicDetail.wxml

@@ -6,7 +6,9 @@
   <scroll-view class="sv-goods" wx:if="{{topicGoods.length > 0 }}">
     <view class="topic-goods">
       <view class="h">
-        <text class="t">专题商品</text>
+        <text class="t">专题商品</text>     
+        <van-icon class="i" bindtap="addCollectOrNot" name="star" wx:if="{{collect}}" color="#ab956d"/>
+        <van-icon class="i" bindtap="addCollectOrNot" name="star-o" wx:else/>
       </view>
       <view class="b">
         <view class="item" wx:for="{{topicGoods}}" wx:for-index="index" wx:for-item="item" wx:key="id">

litemall-wx/pages/topicDetail/topicDetail.wxss

@@ -144,6 +144,13 @@
   border-bottom: 1px solid #d9d9d9;
 }
 
+.topic-goods .h .i {
+  display: block;
+  float: right;
+  width: 33rpx;
+  height: 33rpx;
+}
+
 .topic-goods .h .t {
   display: block;
   float: left;

litemall-wx/pages/ucenter/collect/collect.js

@@ -27,9 +27,21 @@ Page({
           totalPages: res.data.pages
         });
       }
+    }).finally(() => {
       wx.hideLoading();
     });
   },
+  switchTab: function(event) {
+    let type = event.currentTarget.dataset.index;
+    this.setData({
+      collectList: [],
+      type,
+      page: 1,
+      limit: 10,
+      totalPages: 1
+    });
+    this.getCollectList();
+  },
   onLoad: function(options) {
     this.getCollectList();
   },
@@ -61,15 +73,13 @@ Page({
   onUnload: function() {
     // 页面关闭
   },
-  openGoods(event) {
-
+  openCollect(event) {
     let that = this;
     let index = event.currentTarget.dataset.index;
-    let goodsId = this.data.collectList[index].valueId;
+    let valueId = this.data.collectList[index].valueId;
 
     //触摸时间距离页面打开的毫秒数  
     var touchTime = that.data.touchEnd - that.data.touchStart;
-    console.log(touchTime);
     //如果按下时间大于350为长按  
     if (touchTime > 350) {
       wx.showModal({
@@ -80,10 +90,9 @@ Page({
 
             util.request(api.CollectAddOrDelete, {
               type: that.data.type,
-              valueId: goodsId
+              valueId: valueId
             }, 'POST').then(function(res) {
               if (res.errno === 0) {
-                console.log(res.data);
                 wx.showToast({
                   title: '删除成功',
                   icon: 'success',
@@ -99,9 +108,12 @@ Page({
         }
       })
     } else {
-
+      var prefix = '/pages/goods/goods?id='
+      if(this.data.type == 1){
+        prefix = "/pages/topicDetail/topicDetail?id="
+      }
       wx.navigateTo({
-        url: '/pages/goods/goods?id=' + goodsId,
+        url: prefix + valueId,
       });
     }
   },

litemall-wx/pages/ucenter/collect/collect.wxml

@@ -1,17 +1,30 @@
 <view class="container">
+  <view class="collect-switch">
+    <view class="item {{ type == 0 ? 'active' : ''}}" bindtap="switchTab" data-index='0'>
+      <view class="txt">商品收藏</view>
+    </view>
+    <view class="item {{ type == 1 ? 'active' : ''}}" bindtap="switchTab" data-index='1'>
+      <view class="txt">专题收藏</view>
+    </view>
+  </view>
   <view class="no-collect" wx:if="{{collectList.length <= 0}}">
     <view class="c">
       <text>还没有收藏</text>
     </view>
   </view>
-  <view class="collect-list" wx:else>
-    <view class="item" bindtap="openGoods" bindtouchstart="touchStart" bindtouchend="touchEnd" wx:for="{{collectList}}" wx:key="id" data-index="{{index}}">
+  <view class="{{type==0 ? 'goods-list' : 'topic-list'}}" wx:else>
+    <view class="item" bindtap="openCollect" bindtouchstart="touchStart" bindtouchend="touchEnd" wx:for="{{collectList}}" wx:key="id" data-index="{{index}}">
       <image class="img" src="{{item.picUrl}}"></image>
-      <view class="info">
+      <view class="info" wx:if="{{type==0}}" >
         <view class="name">{{item.name}}</view>
         <view class="subtitle">{{item.brief}}</view>
         <view class="price">￥{{item.retailPrice}}</view>
       </view>
+      <view class="info" wx:if="{{type==1}}">
+        <text class="title">{{item.title}}</text>
+        <text class="desc">{{item.subtitle}}</text>
+        <text class="price">{{item.price}}元起</text>
+      </view>
     </view>
   </view>
 

litemall-wx/pages/ucenter/collect/collect.wxss

@@ -10,6 +10,34 @@ page {
   height: auto;
   overflow: hidden;
 }
+.collect-switch {
+  width: 100%;
+  background: #fff;
+  height: 84rpx;
+}
+
+.collect-switch .item {
+  display: inline-block;
+  height: 82rpx;
+  width: 50%;
+  padding: 0 15rpx;
+  text-align: center;
+}
+
+.collect-switch .item .txt {
+  display: inline-block;
+  height: 82rpx;
+  padding: 0 20rpx;
+  line-height: 82rpx;
+  color: #9a9ba1;
+  font-size: 30rpx;
+  width: 170rpx;
+}
+
+.collect-switch .item.active .txt {
+  color: #ab956d;
+  border-bottom: 4rpx solid #ab956d;
+}
 
 .no-collect {
   width: 100%;
@@ -34,7 +62,8 @@ page {
   color: #999;
 }
 
-.collect-list {
+/*商品收藏列表样式*/
+.goods-list {
   width: 100%;
   height: auto;
   overflow: hidden;
@@ -43,7 +72,7 @@ page {
   border-top: 1px solid #e1e1e1;
 }
 
-.item {
+.goods-list .item {
   height: 212rpx;
   width: 720rpx;
   background: #fff;
@@ -51,17 +80,17 @@ page {
   border-bottom: 1px solid #e1e1e1;
 }
 
-.item:last-child {
+.goods-list .item:last-child {
   border-bottom: 1px solid #fff;
 }
 
-.item .img {
+.goods-list .item .img {
   float: left;
   width: 150rpx;
   height: 150rpx;
 }
 
-.item .info {
+.goods-list .item .info {
   float: right;
   width: 540rpx;
   height: 150rpx;
@@ -71,22 +100,87 @@ page {
   padding-left: 20rpx;
 }
 
-.item .info .name {
+.goods-list .item .info .name {
   font-size: 28rpx;
   color: #333;
   line-height: 40rpx;
 }
 
-.item .info .subtitle {
+.goods-list .item .info .subtitle {
   margin-top: 8rpx;
   font-size: 24rpx;
   color: #888;
   line-height: 40rpx;
 }
 
-.item .info .price {
+.goods-list .item .info .price {
   margin-top: 8rpx;
   font-size: 28rpx;
   color: #333;
   line-height: 40rpx;
 }
+
+/*专题收藏列表样式*/
+
+.topic-list{
+  width: 750rpx;
+  height: 100%;
+  overflow: hidden;
+  background: #f4f4f4;
+}
+
+.topic-list .item{
+  width: 100%;
+  height: 625rpx;
+  overflow: hidden;
+  background: #fff;
+  margin-bottom: 20rpx;
+}
+
+.topic-list .img{
+  width: 100%;
+  height: 415rpx;
+}
+
+.topic-list .info{
+  width: 100%;
+  height: 210rpx;
+  overflow: hidden;
+}
+
+.topic-list .title{
+  display: block;
+  text-align: center;
+  width: 100%;
+  height: 33rpx;
+  line-height: 35rpx;
+  color: #333;
+  overflow: hidden;
+  font-size: 35rpx;
+  margin-top: 30rpx;
+}
+
+.topic-list .desc{
+  display: block;
+  text-align: center;
+  position: relative;
+  width: auto;
+  height: 24rpx;
+  line-height: 24rpx;
+  overflow: hidden;
+  color: #999;
+  font-size: 24rpx;
+  margin-top: 16rpx;
+  margin-bottom: 30rpx;
+}
+
+.topic-list .price{
+  display: block;
+  text-align: center;
+  width: 100%;
+  height: 27rpx;
+  line-height: 27rpx;
+  overflow: hidden;
+  color: #b4282d;
+  font-size: 27rpx;
+}

litemall-wx/pages/ucenter/index/index.wxml

@@ -55,7 +55,7 @@
     </view>
     <view class='user_column_item' bindtap='goCollect'>
       <image class='user_column_item_image' src='/static/images/collect.png'></image>
-      <view class='user_column_item_text'>商品收藏</view>
+      <view class='user_column_item_text'>收藏夹</view>
     </view>
     <view class='user_column_item' bindtap='goFootprint'>
       <image class='user_column_item_image' src='/static/images/footprint.png'></image>