购物车逻辑完善

个人信息存储优化
团购支付

src/pages/mall/index.vue

@@ -31,21 +31,24 @@
 
     <view class='shopping-cart' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
       <image :src='assetsUrl("ic_shopping_cart.png")' />
-      <text v-if='shoppingCartList.length>0'>{{ shoppingCartList.length }}</text>
+      <text v-if='shoppingCartList.length>0'>{{ shoppingCartList?.length }}</text>
     </view>
   </view>
+  <sku-dialog ref='skuDialogRef' />
 </template>
 
 <script setup lang='ts'>
+import SkuDialog from '@/components/sku-dialog.vue';
 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 shoppingCartStore = useShoppingCartStore();
+const { shoppingCartList } = storeToRefs(shoppingCartStore);
 
+const skuDialogRef = ref();
 const categoryList = ref<CategoryBean[]>([]);
 const categorySelectedIndex = ref<number>(0);
 const goodsList = ref<GoodsBean[]>([]);
@@ -89,10 +92,8 @@ const getRandomFloatInRange = (a: number, b: number) => {
 };
 
 const addShoppingCart = (goodsBean: GoodsBean) => {
-  shoppingCart.save({
-    ...goodsBean,
-    name: goodsBean.goodsName,
-    count: 1
+  skuDialogRef.value.show(goodsBean.goodsId, (e: GoodsBean) => {
+    shoppingCartStore.save(e);
   });
 };
 </script>

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

@@ -32,7 +32,7 @@
         <text>选择</text>
         <text>规格 颜色/尺码</text>
         <image :src='assetsUrl("ic_arrow_right_gray.png")' />
-        <text>共1种颜色可选</text>
+        <text>共{{ getStockColorCount }}种颜色可选</text>
       </view>
       <view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx;display: none' />
       <view class='c-flex-row' style='display: none' @click.stop='showSkuDialog'>
@@ -127,6 +127,12 @@ onLoad(async (e: any) => {
   recommendList.value = rows;
 });
 
+const getStockColorCount = computed(() => {
+  const list = Array.from(new Set(goodsBean.value?.stocks?.map(item => item.colorName)))
+    .map(colorName => goodsBean.value?.stocks?.find(item => item.colorName === colorName)!);
+  return list.length;
+});
+
 const swiperChange = (e: any) => {
   swiperIndex.value = e.detail.current;
 };
@@ -136,21 +142,16 @@ const goBack = () => {
 };
 
 const showSkuDialog = (fn: Function) => {
-  skuDialogRef.value.show(fn);
+  skuDialogRef.value.show(goodsBean.value?.id, fn);
 };
 
 const addShoppingCart = () => {
-  showSkuDialog((e: StockBean) => {
-    const index = shoppingCartStore.getSameGoodsIndex(goodsBean.value?.id || '', e.colorId, e.sizeId);
+  showSkuDialog((e: GoodsBean) => {
+    const index = shoppingCartStore.getSameGoodsIndex(goodsBean.value?.id || '', e.checkedStock?.colorId, e.checkedStock?.sizeId);
     if(index >= 0) {
-      shoppingCartStore.updateCount(index, e.count);
+      shoppingCartStore.updateCount(index, e.checkedStock?.count);
     } else {
-      shoppingCartStore.save(
-        {
-          ...goodsBean.value,
-          checkedStock: e
-        }
-      );
+      shoppingCartStore.save(e);
     }
     showToast('加入购物车成功');
   });
@@ -260,13 +261,13 @@ const placeOrder = () => {
 
 .goods-sku-view {
   background: #FFFFFF;
-  padding: 0 30rpx;
+  padding: 20rpx 30rpx;
   margin-top: 20rpx;
 
   view:nth-of-type(n+1) {
     position: relative;
     align-items: center;
-    height: 105rpx;
+    height: 85rpx;
 
     text:nth-of-type(1) {
       width: 100rpx;
@@ -292,14 +293,14 @@ const placeOrder = () => {
       font-size: 24rpx;
       color: #999999;
       position: absolute;
-      top: 80rpx;
+      top: 50rpx;
       left: 100rpx;
     }
   }
 
   view:nth-of-type(1) {
     align-items: flex-start;
-    padding-top: 20rpx;
+    //padding-top: 20rpx;
   }
 }
 

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

@@ -10,7 +10,7 @@
       <scroll-view>
         <view class='c-flex-column' v-for='(item, index) in shoppingCartList' :key='index'>
           <view class='c-flex-row'>
-            <image v-show='isEditMode' class='checkbox'
+            <image class='checkbox'
                    :src='assetsUrl(item.checked?"ic_checkbox_active_red.png":"ic_checkbox_normal.png")'
                    @click.stop='item.checked=!item.checked' />
             <image class='goods-image' :src='item.images' />
@@ -18,8 +18,8 @@
               <text>{{ item.name }}</text>
               <view class='c-flex-row'>
                 <view class='sku-view' @click.stop='showSkuDialog(index)'>
-                  <text>{{ item?.checkedStock.colorName }}，{{ item?.checkedStock.sizeName }}
-                    x{{ item?.checkedStock.count }}
+                  <text>{{ item?.checkedStock?.colorName }}，{{ item?.checkedStock?.sizeName }}
+                    x{{ item?.checkedStock?.count }}
                   </text>
                   <image :src='assetsUrl("ic_arrow_down_gray.png")' />
                 </view>
@@ -29,7 +29,7 @@
                 <view class='count-image' @click.stop='countChange(index,false)'>
                   <image :src='assetsUrl("ic_reduce.png")' />
                 </view>
-                <text>{{ item?.checkedStock.count || 0 }}</text>
+                <text>{{ item?.checkedStock?.count || 0 }}</text>
                 <view class='count-image' @click.stop='countChange(index,true)'>
                   <image :src='assetsUrl("ic_plus.png")' />
                 </view>
@@ -85,7 +85,7 @@ watch(checkedAll, (newValue) => {
 });
 
 const totalPayPrice = computed(() => {
-  return shoppingCartList.value.reduce((a, b) => a + b.price * b.checkedStock.count, 0);
+  return shoppingCartList.value.filter(res => res.checked).reduce((a, b) => a + b.price * b.checkedStock.count, 0);
 });
 
 const deleteShoppingCart = () => {
@@ -93,21 +93,21 @@ const deleteShoppingCart = () => {
 };
 
 const showSkuDialog = (index: number) => {
-  new Promise((resolve, reject) => {
+  new Promise((resolve, _) => {
     temporaryGoodsBean.value = shoppingCartList.value[index];
     temporaryStockBean.value = shoppingCartList.value[index].checkedStock;
     resolve(temporaryGoodsBean.value);
-  }).then(res => {
-    skuDialogRef.value.show((e: StockBean) => {
+  }).then((res: any) => {
+    skuDialogRef.value.show(res.id, (e: GoodsBean) => {
       //重新选择sku后判断当前购物中是否存在相同sku的商品
-      const existsIndex = shoppingCartStore.getSameGoodsIndex(temporaryGoodsBean.value?.id || '', e.colorId, e.sizeId);
+      const existsIndex = shoppingCartStore.getSameGoodsIndex(res?.id || '', e.checkedStock.colorId, e.checkedStock.sizeId);
       //不存在则更新当前商品sku
       if(existsIndex < 0) {
-        shoppingCartStore.updateStock(index, e);
+        shoppingCartStore.updateStock(index, e.checkedStock);
       }
       //如果已存在，则更新已存在商品数量，并删除当前商品
       else {
-        shoppingCartStore.updateCount(existsIndex, e.count);
+        shoppingCartStore.updateCount(existsIndex, e.checkedStock.count - (temporaryGoodsBean?.value?.checkedStock?.count || 0));
         if(existsIndex != index) {
           shoppingCartStore.delete(index);
         }