Pārlūkot izejas kodu

✨ 商品收藏:商品详情的底部接入

YunaiV 1 gadu atpakaļ
vecāks
revīzija
9049182843

+ 22 - 24
pages/goods/components/detail/detail-tabbar.vue

@@ -1,3 +1,4 @@
+<!-- 商品详情的底部导航 -->
 <template>
   <su-fixed bottom placeholder bg="bg-white">
     <view class="ui-tabbar-box">
@@ -12,7 +13,7 @@
               class="item-icon"
               :src="sheep.$url.static('/static/img/shop/goods/collect_1.gif')"
               mode="aspectFit"
-            ></image>
+            />
             <view class="item-title">已收藏</view>
           </block>
           <block v-else>
@@ -20,7 +21,7 @@
               class="item-icon"
               :src="sheep.$url.static('/static/img/shop/goods/collect_0.png')"
               mode="aspectFit"
-            ></image>
+            />
             <view class="item-title">收藏</view>
           </block>
         </view>
@@ -33,7 +34,7 @@
             class="item-icon"
             :src="sheep.$url.static('/static/img/shop/goods/message.png')"
             mode="aspectFit"
-          ></image>
+          />
           <view class="item-title">客服</view>
         </view>
         <view
@@ -45,7 +46,7 @@
             class="item-icon"
             :src="sheep.$url.static('/static/img/shop/goods/share.png')"
             mode="aspectFit"
-          ></image>
+          />
           <view class="item-title">分享</view>
         </view>
         <slot></slot>
@@ -63,13 +64,11 @@
    * @property {String} ui 			 			- 自定义样式Class
    * @property {Boolean} noFixed 		 			- 是否定位
    * @property {Boolean} topRadius 		 		- 上圆角
-   *
-   *
    */
-
-  import { computed, reactive } from 'vue';
+  import { reactive } from 'vue';
   import sheep from '@/sheep';
   import { showShareModal } from '@/sheep/hooks/useModal';
+  import FavoriteApi from '@/sheep/api/product/favorite';
 
   // 数据
   const state = reactive({});
@@ -114,25 +113,24 @@
       default: true,
     },
   });
-  const elStyles = computed(() => {
-    return {
-      'border-top-left-radius': props.topRadius + 'rpx',
-      'border-top-right-radius': props.topRadius + 'rpx',
-      overflow: 'hidden',
-    };
-  });
 
-  const tabbarheight = (e) => {
-    uni.setStorageSync('tabbar', e);
-  };
   async function onFavorite() {
-    const { error } = await sheep.$api.user.favorite.do(props.modelValue.id);
-    if (error === 0) {
-      if (props.modelValue.favorite) {
-        props.modelValue.favorite = 0;
-      } else {
-        props.modelValue.favorite = 1;
+    // 情况一:取消收藏
+    if (props.modelValue.favorite) {
+      const { code } = await FavoriteApi.deleteFavorite(props.modelValue.id);
+      if (code !== 0) {
+        return
+      }
+      sheep.$helper.toast('取消收藏');
+      props.modelValue.favorite = false;
+    // 情况二:添加收藏
+    } else {
+      const { code } = await FavoriteApi.createFavorite(props.modelValue.id);
+      if (code !== 0) {
+        return
       }
+      sheep.$helper.toast('收藏成功');
+      props.modelValue.favorite = true;
     }
   }
 

+ 33 - 17
pages/goods/index.vue

@@ -91,11 +91,11 @@
 
 				<!-- 优惠劵弹窗 -->
 				<s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false"
-					@get="onGet" />
+                      @get="onGet" />
 
 				<!-- 满减送/限时折扣活动弹窗 -->
 				<s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel"
-					@close="state.showActivityModel = false" />
+                        @close="state.showActivityModel = false" />
 			</block>
 		</s-layout>
 	</view>
@@ -113,7 +113,8 @@
 	import sheep from '@/sheep';
 	import CouponApi from '@/sheep/api/promotion/coupon';
 	import ActivityApi from '@/sheep/api/promotion/activity';
-	import {
+  import FavoriteApi from '@/sheep/api/product/favorite';
+  import {
 		formatSales,
 		formatGoodsSwiper,
 		fen2yuan,
@@ -127,9 +128,7 @@
 	import detailCommentCard from './components/detail/detail-comment-card.vue';
 	import detailContentCard from './components/detail/detail-content-card.vue';
 	import detailActivityTip from './components/detail/detail-activity-tip.vue';
-	import {
-		isEmpty
-	} from 'lodash';
+	import { isEmpty } from 'lodash';
 
 	onPageScroll(() => {});
 
@@ -153,21 +152,30 @@
 
 	// 添加购物车  TODO 芋艿:待测试
 	function onAddCart(e) {
+    if (!e.id) {
+      sheep.$helper.toast('请选择商品规格');
+      return;
+    }
 		sheep.$store('cart').add(e);
 	}
 
-	// 立即购买  TODO 芋艿:待测试
+	// 立即购买
 	function onBuy(e) {
-		sheep.$router.go('/pages/order/confirm', {
-			data: JSON.stringify({
-				order_type: 'goods',
-				goods_list: [{
-					goods_id: e.goods_id,
-					goods_num: e.goods_num,
-					goods_sku_price_id: e.id,
-				}, ],
-			}),
-		});
+    if (!state.selectedSku.id) {
+      sheep.$helper.toast('请选择商品规格');
+      return;
+    }
+    sheep.$router.go('/pages/order/confirm', {
+      data: JSON.stringify({
+        items: [{
+          skuId: state.selectedSku.id,
+          count: 1
+        }],
+        // TODO 芋艿:后续清理掉这 2 参数
+        deliveryType: 1,
+        pointStatus: false,
+      }),
+    });
 	}
 
 	// 营销活动  TODO 芋艿:待测试
@@ -230,6 +238,14 @@
 			// 加载到商品
 			state.skeletonLoading = false;
 			state.goodsInfo = res.data;
+
+      // 加载是否收藏
+      FavoriteApi.isFavoriteExists(state.goodsId, 'goods').then((res) => {
+        if (res.code !== 0) {
+          return;
+        }
+        state.goodsInfo.favorite = res.data;
+      });
 		});
 
 		// 2. 加载优惠劵信息

+ 20 - 0
sheep/api/product/favorite.js

@@ -9,6 +9,26 @@ const FavoriteApi = {
       params: data
     });
   },
+  // 检查是否收藏过商品
+  isFavoriteExists: (spuId) => {
+    return request({
+      url: '/app-api/product/favorite/exits',
+      method: 'GET',
+      params: {
+        spuId
+      }
+    });
+  },
+  // 添加商品收藏
+  createFavorite: (spuId) => {
+    return request({
+      url: '/app-api/product/favorite/create',
+      method: 'POST',
+      data: {
+        spuId
+      }
+    });
+  },
   // 取消商品收藏
   deleteFavorite: (spuId) => {
     return request({