收藏功能

src/pages/goods_detail/goods_detail.vue

@@ -14,7 +14,7 @@
         <view class="iconfont icon-zhuanfa  open_type_button_wrap">
           <button class="open_type_button" open-type="share">分享按钮</button>
         </view>
-        <view class="iconfont icon-shoucang1"></view>
+        <view class="iconfont icon-shoucang1" @tap="collectHandle" :class="isCollect?'icon-shoucang':'icon-shoucang1'"></view>
       </view>
       <view class="title">
         {{goods_name}}
@@ -40,7 +40,7 @@
         <view class="iconfont icon-gouwuche"></view>
         <text class="icon_btn_text">购物车</text>
       </navigator>
-      <view class="button">加入购物车</view>
+      <view class="button" @tap="addToCartHandle">加入购物车</view>
       <view class="button">立即购买</view>
     </view>
 
@@ -56,14 +56,19 @@ export default {
       goods_name: "商品名称",
       goods_price: "0",
       goods_introduce: "",
+      isCollect: false
     }
   },
   onLoad( {goods_id} ){
     console.log(goods_id)
     this.goods_id = goods_id
     this.getGoodsDetail()
+    // 页面加载的时候，查找本地存储当前商品是否已经被收藏了
+    const collectList = uni.getStorageSync("collectList") || [];
+    this.isCollect = collectList.some((item) => item.goods_id === goods_id)
   },
   methods: {
+    // 获取商品信息
     async getGoodsDetail(){
       const { pics, goods_name, goods_price, goods_introduce  } = (await this.$u.api.getGoodsDetail({ goods_id: this.goods_id })).message
       this.pics = pics
@@ -81,10 +86,46 @@ export default {
         this.goods_introduce = htmlStr
       }
     },
+
+    // 大图预览
     showBigImgHandle(current){
       const urls = this.pics.map(item => item.pics_big)
       uni.previewImage({ urls, current })
       //Array.<string>  数组内是字符串格式
+    },
+
+    // 收藏. 本地存储
+    collectHandle(){
+       const goodsObj = {
+        goods_id: this.goods_id,
+        goods_small_logo: this.goods_small_logo,
+        goods_price: this.goods_price,
+        goods_name: this.goods_name,
+      }
+      // 从本地读取
+      const collectList = uni.getStorageSync("collectList") || [];
+      const index = collectList.findIndex(
+        (item) => item.goods_id === this.goods_id
+      )
+      if(index === -1) {
+        // 未存在便添加
+        collectList.push(goodsObj)
+      }else{
+        // 已存在便删除
+        // splice() 方法用于添加或删除数组中的元素
+        // 第一个参数表示从哪开始, 第二个参数表示删除几个
+        // 会改变原数组
+        collectList.splice(index, 1)
+      }
+      // 更新本地存储
+      uni.setStorageSync("collectList", collectList)
+      // 状态翻转
+      this.isCollect = !this.isCollect
+    },
+
+    // 添加到购物车
+    addToCartHandle(){
+      console.log('加入购物车')
     }
   },
 
@@ -106,6 +147,9 @@ export default {
 }
 .info {
   padding: 20rpx 30rpx;
+    .icon-shoucang {
+      color: #fcaa23;
+    }
   .info_head {
     display: flex;
     .price {