购物车逻辑

src/pages/mall/subs/goods/detail.vue

@@ -12,7 +12,7 @@
       </view>
     </view>
 
-    <view class='goods-info-view c-flex-column'>
+    <view class='goods-info-view c-flex-column' style='margin-right: 10rpx'>
       <view class='c-flex-row'>
         <text class='goods-price accent-text-color'>{{ goodsBean?.price || 0 }}</text>
         <text>销量2653</text>
@@ -78,7 +78,7 @@
         <view class='small-button-item'>
           <view class='shoppingcart-count' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
             <image :src='assetsUrl("ic_goods_shoppingcart.png")' />
-            <text>0</text>
+            <text v-if='shoppingCartList.length>0'>{{ shoppingCartList.length }}</text>
           </view>
           <text>购物车</text>
         </view>
@@ -90,20 +90,25 @@
       </view>
     </view>
   </view>
-  <sku-dialog ref='skuDialogRef' @bean='goodsBean' />
+  <sku-dialog ref='skuDialogRef' :bean='goodsBean' @confirm='confirmGoodsSku' />
 </template>
 
 <script lang='ts' setup>
 import { assetsUrl } from '@/utils/assets';
 import SkuDialog from '@/components/sku-dialog.vue';
-import { goPath } from '@/utils';
+import { goPath, showToast } from '@/utils';
 import { getGoodsDetail, getGoodsList } from '@/api/goods';
 import { GoodsBean } from '@/api/goods/types';
+import useShoppingCartStore from '@/store/modules/shoppingcart';
+
+const shoppingCart = useShoppingCartStore();
+const { shoppingCartList } = storeToRefs(shoppingCart);
 
 const goodsBean = ref<GoodsBean>();
 const recommendList = ref<GoodsBean[]>();
 
 const skuDialogRef = ref();
+const skuBean = ref();
 
 const bannerList = ref([]);
 const swiperIndex = ref(0);
@@ -115,7 +120,7 @@ onLoad(async (e: any) => {
     pageSize: 10,
     bean: {
       keyword: '',
-      typeIds: ['519334122586648576']
+      typeIds: ['1724629185362591745']
     }
   });
   recommendList.value = rows;
@@ -133,11 +138,18 @@ const showSkuDialog = () => {
   skuDialogRef.value.show();
 };
 
+const confirmGoodsSku = (e: any) => {
+  skuBean.value = e;
+};
+
 const addShoppingCart = () => {
-  uni.showToast({
-    title: '加入购物车成功',
-    icon: 'none'
-  });
+  shoppingCart.save(
+    {
+      ...goodsBean.value,
+      ...skuBean.value
+    }
+  );
+  showToast('加入购物车成功');
 };
 
 const placeOrder = () => {