购物车逻辑

src/pages/mall/index.vue

@@ -23,7 +23,7 @@
             <image class='goods-image' :src='item.images' />
             <text class='goods-name'>{{ item.goodsName }}</text>
             <text class='goods-price'>¥{{ item.price }}</text>
-            <image class='add-image' :src='assetsUrl("ic_add_goods.png")' @click.stop='addShoppingCart' />
+            <image class='add-image' :src='assetsUrl("ic_add_goods.png")' @click.stop='addShoppingCart(item)' />
           </view>
         </grid-view>
       </scroll-view>
@@ -31,7 +31,7 @@
 
     <view class='shopping-cart' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
       <image :src='assetsUrl("ic_shopping_cart.png")' />
-      <text v-if='shoppingCartCount>0'>{{ shoppingCartCount }}</text>
+      <text v-if='shoppingCartList.length>0'>{{ shoppingCartList.length }}</text>
     </view>
   </view>
 </template>
@@ -41,11 +41,14 @@ import { assetsUrl } from '@/utils/assets';
 import { goPath } from '@/utils';
 import { getCategoryList, getGoodsList } from '@/api/goods';
 import { CategoryBean, GoodsBean } from '@/api/goods/types';
+import useShoppingCartStore from '@/store/modules/shoppingcart';
+
+const shoppingCart = useShoppingCartStore();
+const { shoppingCartList } = storeToRefs(shoppingCart);
 
 const categoryList = ref<CategoryBean[]>([]);
 const categorySelectedIndex = ref<number>(0);
 const goodsList = ref<GoodsBean[]>([]);
-const shoppingCartCount = ref<number>(0);
 
 onLoad(() => {
   fetchCategoryList();
@@ -73,8 +76,10 @@ const fetchGoodsList = async () => {
   goodsList.value = data.rows;
 };
 
-const addShoppingCart = () => {
-
+const addShoppingCart = (goodsBean: GoodsBean) => {
+  shoppingCart.save({
+    ...goodsBean
+  });
 };
 </script>
 

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 = () => {

src/pages/mall/subs/shoppingcart/index.vue

@@ -6,23 +6,22 @@
 
     <view class='card-view'>
       <scroll-view>
-        <view class='c-flex-column' v-for='(item, index) in [1,2,3,5]' :key='index'>
+        <view class='c-flex-column' v-for='(item, index) in shoppingCartList' :key='index'>
           <view class='c-flex-row'>
             <image v-show='isEditMode' class='checkbox' :src='assetsUrl("ic_checkbox_active_red.png")' />
-            <image class='goods-image' :src='assetsUrl("test_bg.png")' />
+            <image class='goods-image' :src='item.images' />
             <view class='c-flex-column'>
-              <text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装
-              </text>
+              <text>{{item.name}}</text>
               <view class='sku-view'>
                 <text>紫色，120cm x1</text>
                 <image :src='assetsUrl("ic_arrow_down_gray.png")' />
               </view>
-              <text>￥29.90</text>
+              <text>￥{{item.price}}</text>
               <view class='count-change-view c-flex-row'>
                 <view class='count-image' @click.stop='countChange(false)'>
                   <image :src='assetsUrl("ic_reduce.png")' />
                 </view>
-                <text>{{ goodsCount }}</text>
+                <text>{{ item.count || 0 }}</text>
                 <view class='count-image' @click.stop='countChange(true)'>
                   <image :src='assetsUrl("ic_plus.png")' />
                 </view>
@@ -50,10 +49,15 @@
 <script lang='ts' setup>
 
 import { assetsUrl } from '@/utils/assets';
+import useShoppingCartStore from '@/store/modules/shoppingcart';
 
 const isEditMode = ref(false);
 const checkedAll = ref(false);
-const goodsCount = ref(1);
+
+const shoppingCart = useShoppingCartStore();
+const { shoppingCartList } = storeToRefs(shoppingCart);
+
+// const goodsCount = ref(1);
 
 const countChange = (isPlus: Boolean) => {
 
@@ -83,7 +87,7 @@ const settlement = () => {
     margin: 30rpx;
     border-radius: 10rpx;
     background: #FFFFFF;
-    padding: 10rpx 20rpx 20rpx 17rpx;
+    padding: 10rpx 20rpx 120rpx 17rpx;
 
     .c-flex-column:nth-of-type(1) {
       margin: 20rpx 0;