购物车逻辑完善

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

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;
   }
 }