微信小程序项目_秋泊优选62

58、商品详情页面_收藏功能②

商品详情 点击 图标切收藏

    <view class="goods_collect">
    			  <!--isCollect值为true加载icon-shoucang图标，false加载icon-shoucang1图标-->
        <text class="iconfont {{isCollect?'icon-shoucang':'icon-shoucang1'}}"></text>
        <view class="collect_text">收藏</view>
    </view>

修改样式（选中icon-shoucang图标）
pages\goos_detail\index.less

    .goods_collect{
        .icon-shoucang{
            color: var(--themeColor); /*主题颜色*/
        }
    }

给收藏图标绑定点击事件

    <view class="goods_collect" bindtap="handleCollect">
    ...

pages\goos_detail\index.js

  // 点击 商品收藏图标
  handleCollect(){
    let isCollect=false;
    // 1 获取缓存中的商品收藏数组
    let collect=wx.getStorageSync("collect")||[];
    // 2 判断该商品是否被收藏过
    let index=collect.findIndex(v=>v.goods_id===this.GoodsInfo.goods_id);
    // 3 当index!=-1表示已经收藏过
    if(index!==-1){
      // 能找到已经收藏过了在数组中删除该商品
      collect.splice(index,1);
      isCollect=false;
      wx.showToast({
        title: '取消成功',
        icon: 'success',
        // true防止用户 手抖 疯狂点击按钮
        mask: true,
      });
        
    }else{
      // 没有收藏过
      collect.push(this.GoodsInfo);
      isCollect=true;
      wx.showToast({
        title: '收藏成功',
        icon: 'success',
        mask: true,
      });
    }
    // 4 把数组存入到缓存中
    wx.setStorageSync( "collect", collect);
    // 5 修改data中的属性iscollect
    this.setData({isCollect})
  }

选中一个商品 点击收藏——>再换第二个商品 点击收藏