购物车逻辑完善

个人信息存储优化
团购下单

src/pages/mall/index.vue

@@ -20,7 +20,7 @@
         <grid-view type='masonry' :cross-axis-count='2'>
           <view v-for='(item, index) in goodsList' :key='index' class='goods-item'
                 @click.stop='goPath(`/pages/mall/subs/goods/detail?goodsId=${item.goodsId}`)'>
-            <image class='goods-image' :src='item.images'  />
+            <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(item)' />
@@ -84,10 +84,6 @@ const randomImageHeight = () => {
   return height;
 };
 
-const getRandomIntegerInRange = (a: number, b: number) => {
-  return Math.floor(Math.random() * (b - a + 1)) + a;
-};
-
 const getRandomFloatInRange = (a: number, b: number) => {
   return Math.random() * (b - a) + a;
 };

src/pages/mall/subs/components/coupon-dialog.vue

@@ -1,13 +1,13 @@
 <template>
-  <uni-popup type='bottom' ref='popupRef' :mask-click='false'>
+  <uni-popup type='bottom' ref='popupRef' :is-mask-click='false'>
     <view class='popup-content c-flex-column'>
       <view class='c-flex-row'>
         <text>优惠券</text>
         <text @click.stop='close'>确定</text>
       </view>
 
-      <scroll-view>
-        <coupon-item v-for='item in coupons' :item='item' />
+      <scroll-view scroll-y>
+        <coupon-item v-for='(item,index) in coupons' :item='item' :key='index' />
       </scroll-view>
     </view>
   </uni-popup>
@@ -17,7 +17,7 @@
 import CouponItem from '../components/coupon-item.vue';
 
 const popupRef = ref();
-const coupons = [{
+const coupons = ref([{
   id: 1,
   title: '优惠券',
   desc: '满100减10',
@@ -67,7 +67,7 @@ const coupons = [{
   useTime: '2024-12-31',
   status: 0,
   useStatus: '未使用'
-}];
+}]);
 
 const show = () => {
   popupRef.value.open();
@@ -86,7 +86,7 @@ defineExpose({
 .popup-content {
   background: #FFFFFF;
   border-radius: 20rpx 20rpx 0 0;
-  padding: 38rpx 45rpx 0 45rpx;
+  padding: 38rpx 45rpx 10rpx 45rpx;
 
   view:nth-of-type(1) {
     display: flex;

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

@@ -15,7 +15,7 @@
     <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>
+        <text>销量{{ goodsBean?.send_num || 0 }}</text>
       </view>
 
       <view class='c-flex-row'>
@@ -90,7 +90,7 @@
       </view>
     </view>
   </view>
-  <sku-dialog ref='skuDialogRef' :bean='goodsBean' @confirm='confirmGoodsSku' />
+  <sku-dialog ref='skuDialogRef' :bean='goodsBean' />
 </template>
 
 <script lang='ts' setup>
@@ -98,17 +98,16 @@ import { assetsUrl } from '@/utils/assets';
 import SkuDialog from '@/components/sku-dialog.vue';
 import { goPath, showToast } from '@/utils';
 import { getGoodsDetail, getGoodsList } from '@/api/goods';
-import { GoodsBean } from '@/api/goods/types';
+import { GoodsBean, StockBean } 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 goodsBean = ref<GoodsBean>();
 const recommendList = ref<GoodsBean[]>();
 
 const skuDialogRef = ref();
-const skuBean = ref();
 
 const bannerList = ref([]);
 const swiperIndex = ref(0);
@@ -136,27 +135,31 @@ const goBack = () => {
   uni.navigateBack();
 };
 
-const showSkuDialog = () => {
-  skuDialogRef.value.show();
-};
-
-const confirmGoodsSku = (e: any) => {
-  skuBean.value = e;
+const showSkuDialog = (fn: Function) => {
+  skuDialogRef.value.show(fn);
 };
 
 const addShoppingCart = () => {
-  shoppingCart.save(
-    {
-      ...goodsBean.value,
-      ...skuBean.value,
-      count: 1
+  showSkuDialog((e: StockBean) => {
+    const index = shoppingCartStore.getSameGoodsIndex(goodsBean.value?.id || '', e.colorId, e.sizeId);
+    if(index >= 0) {
+      shoppingCartStore.updateCount(index, e.count);
+    } else {
+      shoppingCartStore.save(
+        {
+          ...goodsBean.value,
+          checkedStock: e
+        }
+      );
     }
-  );
-  showToast('加入购物车成功');
+    showToast('加入购物车成功');
+  });
 };
 
 const placeOrder = () => {
-  goPath('/pages/mall/subs/order/order-confirm');
+  showSkuDialog((e: StockBean) => {
+    goPath('/pages/mall/subs/order/order-confirm');
+  });
 };
 </script>
 

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

@@ -1,28 +1,36 @@
 <template>
   <view class='content'>
     <view class='c-flex-row'>
-      <text class='manage' @click.stop='isEditMode = !isEditMode'>管理</text>
+      <text class='manage' @click.stop='isEditMode = !isEditMode' :style='isEditMode?"color:#F32B2B":"color:#333333"'>
+        {{ isEditMode ? '退出管理' : '管理' }}
+      </text>
     </view>
 
-    <view class='card-view'>
+    <view class='card-view' v-if='shoppingCartList.length>0'>
       <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' :src='assetsUrl("ic_checkbox_active_red.png")' />
+            <image v-show='isEditMode' 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' />
             <view class='c-flex-column'>
               <text>{{ item.name }}</text>
-              <view class='sku-view'>
-                <text>{{ item?.colorName }}，{{ item?.sizeName }} x{{ item?.count }}</text>
-                <image :src='assetsUrl("ic_arrow_down_gray.png")' />
+              <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>
+                  <image :src='assetsUrl("ic_arrow_down_gray.png")' />
+                </view>
               </view>
               <text style='margin-top: 50rpx'>￥{{ item.price }}</text>
               <view class='count-change-view c-flex-row'>
-                <view class='count-image' @click.stop='countChange(false)'>
+                <view class='count-image' @click.stop='countChange(index,false)'>
                   <image :src='assetsUrl("ic_reduce.png")' />
                 </view>
-                <text>{{ item.count || 0 }}</text>
-                <view class='count-image' @click.stop='countChange(true)'>
+                <text>{{ item?.checkedStock.count || 0 }}</text>
+                <view class='count-image' @click.stop='countChange(index,true)'>
                   <image :src='assetsUrl("ic_plus.png")' />
                 </view>
               </view>
@@ -38,31 +46,88 @@
         <text>全选</text>
       </view>
       <view style='flex: 1' />
-      <text>合计：
-        <text>￥29.90</text>
-      </text>
-      <text class='settlement' @click.stop='settlement'>结算</text>
+
+      <text v-if='isEditMode' class='settlement' @click.stop='deleteShoppingCart'>删除</text>
+      <view v-else class='c-flex-row'>
+        <text>合计：
+          <text>￥{{ totalPayPrice }}</text>
+        </text>
+        <text class='settlement' @click.stop='settlement'>结算</text>
+      </view>
     </view>
   </view>
+  <sku-dialog ref='skuDialogRef' :bean='temporaryGoodsBean' :exists='temporaryStockBean' />
 </template>
 
 <script lang='ts' setup>
 
 import { assetsUrl } from '@/utils/assets';
 import useShoppingCartStore from '@/store/modules/shoppingcart';
+import { goPath } from '@/utils';
+import { GoodsBean, StockBean } from '@/api/goods/types';
+import SkuDialog from '@/components/sku-dialog.vue';
+import { ref } from 'vue';
 
 const isEditMode = ref(false);
 const checkedAll = ref(false);
 
-const shoppingCart = useShoppingCartStore();
-const { shoppingCartList } = storeToRefs(shoppingCart);
+const shoppingCartStore = useShoppingCartStore();
+const { shoppingCartList } = storeToRefs(shoppingCartStore);
 
-const countChange = (isPlus: Boolean) => {
+const skuDialogRef = ref();
+const temporaryGoodsBean = ref<GoodsBean>();
+const temporaryStockBean = ref<StockBean>();
 
+watch(checkedAll, (newValue) => {
+  shoppingCartList.value.forEach(res => {
+    res.checked = newValue;
+  });
+});
+
+const totalPayPrice = computed(() => {
+  return shoppingCartList.value.reduce((a, b) => a + b.price * b.checkedStock.count, 0);
+});
+
+const deleteShoppingCart = () => {
+  shoppingCartStore.deleteIfChecked();
+};
+
+const showSkuDialog = (index: number) => {
+  new Promise((resolve, reject) => {
+    temporaryGoodsBean.value = shoppingCartList.value[index];
+    temporaryStockBean.value = shoppingCartList.value[index].checkedStock;
+    resolve(temporaryGoodsBean.value);
+  }).then(res => {
+    skuDialogRef.value.show((e: StockBean) => {
+      //重新选择sku后判断当前购物中是否存在相同sku的商品
+      const existsIndex = shoppingCartStore.getSameGoodsIndex(temporaryGoodsBean.value?.id || '', e.colorId, e.sizeId);
+      //不存在则更新当前商品sku
+      if(existsIndex < 0) {
+        shoppingCartStore.updateStock(index, e);
+      }
+      //如果已存在，则更新已存在商品数量，并删除当前商品
+      else {
+        shoppingCartStore.updateCount(existsIndex, e.count);
+        if(existsIndex != index) {
+          shoppingCartStore.delete(index);
+        }
+      }
+    });
+  });
+};
+
+const countChange = (index: number, isPlus: Boolean) => {
+  if(isPlus) {
+    shoppingCartStore.updateCount(index, 1);
+  } else {
+    if(shoppingCartList.value[index].checkedStock.count > 1) {
+      shoppingCartStore.updateCount(index, -1);
+    }
+  }
 };
 
 const settlement = () => {
-
+  goPath('/pages/mall/subs/order/order-confirm');
 };
 </script>
 
@@ -82,10 +147,10 @@ const settlement = () => {
   }
 
   .card-view {
-    margin: 30rpx;
+    margin: 30rpx 30rpx 180rpx 30rpx;
     border-radius: 10rpx;
     background: #FFFFFF;
-    padding: 10rpx 20rpx 120rpx 17rpx;
+    padding: 10rpx 20rpx 10rpx 17rpx;
 
     .c-flex-column:nth-of-type(1) {
       margin: 20rpx 0;
@@ -112,16 +177,16 @@ const settlement = () => {
 
         text:nth-of-type(1) {
           font-weight: 400;
-          font-size: 28rpx;
+          font-size: 30rpx;
           color: #333333;
           -webkit-line-clamp: 2;
           text-overflow: ellipsis;
+          overflow: hidden;
         }
 
         .sku-view {
           display: flex;
           flex-direction: row;
-          width: 210rpx;
           position: relative;
           background: #F2F2F2;
           margin-top: 10rpx;
@@ -213,7 +278,6 @@ const settlement = () => {
 
     text:nth-of-type(1) {
       font-size: 30rpx;
-      color: #333333;
 
       text {
         font-weight: bold;