【微信小程序】黑马优购--10商品收藏模块

12.商品收藏模块

12.1商品详情页面加载获取收藏数据

 在wxml中加判断改为图标

  <view class="goods_collect">
    <text class="iconfont {
  {isCollect?'icon-shoucang':'icon-shoucang1'}}"></text>
    <view class="collect_text">收藏</view>
  </view>

在js中 

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    goodsObj:{},
    // 商品是否被收藏过
    isCollect:false 
  },
  // 商品对象
  GoodsInfo:{},
 
  /* 商品收藏
     1.页面onshow的时候加载缓存中的商品收藏的数据（onshow不同于onload，无法在形参上接收options参数）
     2.判断当前商品是不是被收藏
       1 是 改变页面的图标
       2 不是 什么也不用做
     3.点击商品收藏按钮
       1 判断该商品是否存在于缓存数组中
       2 已经存在 把该商品删除
       3 没有存在 把商品添加到收藏数组中 存入到缓存中即可  
  */
  onShow(){
    // 1 获取当前小程序的页面栈-数组 长度最大是10页面
    let pages=getCurrentPages();
    // 2 数组中索引最大的页面就是当前页面
    let currentPage=pages[pages.length-1];
    let options= currentPage.options; 
    const {goods_id}=options;
    this.getGoodsDetail(goods_id);
  },
 
  // 获取商品详情数据
  async getGoodsDetail(goods_id){
    const goodsObj= await request({url:"/goods/detail",data:{goods_id}});
    // console.log(res);
    this.GoodsInfo=goodsObj;
    // 获取缓存中的商品收藏数组
    let collect=wx.getStorageSync('collect')||[];
    // 判断当前商品是否被收藏 some接收回调函数，只要返回一个true，整个表达式就为true
    let isCollect=collect.some(v=>v.data.message.goods_id===this.GoodsInfo.data.message.goods_id)
    this.setData({