购物车逻辑完善

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

src/components/sku-dialog.vue

@@ -5,7 +5,7 @@
         <image class='goods-image' :src='bean?.images' />
         <view class='c-flex-column' style='flex: 1'>
           <text class='goods-name'>{{ bean?.name }}</text>
-          <text class='goods-price'>{{ bean?.price||0 }}</text>
+          <text class='goods-price'>{{ bean?.price || 0 }}</text>
         </view>
         <image class='close-image' :src='assetsUrl("ic_close.png")' @click.stop='close' />
       </view>
@@ -48,28 +48,60 @@
 </template>
 
 <script lang='ts' setup>
-import { ref } from 'vue';
+import { PropType, ref } from 'vue';
 import { assetsUrl } from '@/utils/assets';
-import { GoodsBean } from '@/api/goods/types';
+import {showToast} from '@/utils';
+import { GoodsBean, StockBean } from '@/api/goods/types';
 
 const props = defineProps({
-  bean: Object as Proptype<GoodsBean>
+  bean: Object as PropType<GoodsBean>,
+  exists: Object as PropType<StockBean>
 });
-const emits = defineEmits(['confirm']);
 const popupRef = ref();
 const skuColorList = ref<string[]>([]);
 const currentColorIndex = ref(0);
 const currentSizeIndex = ref(0);
 const goodsCount = ref(1);
+let callback: Function;
+
+const show = (fn: Function) => {
+  callback = fn;
+
+  // new Promise((resolve, reject) => {
+  //   props.bean?.stocks?.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
+  //     if(!skuColorList.value.includes(colorName)) {
+  //       skuColorList.value.push(colorName);
+  //     }
+  //   });
+  //   resolve(skuColorList.value);
+  // }).then(res => {
+  //   popupRef.value.open();
+  // });
+
+  if(props?.bean?.stocks?.length == 0) {
+    showToast('暂无库存')
+    return;
+  }
 
-const show = () => {
   props.bean?.stocks?.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
     if(!skuColorList.value.includes(colorName)) {
       skuColorList.value.push(colorName);
     }
   });
 
-  popupRef.value.open();
+
+  setTimeout(() => {
+    popupRef.value.open();
+  }, 200);
+
+  if(props.exists) {
+    const colorIndex = skuColorList.value?.findIndex(res => res === props.exists?.colorName);
+    const sizeIndex = skuSizeList.value?.findIndex(res => res.sizeId === props.exists?.sizeId);
+
+    colorChange(colorIndex || 0);
+    sizeChange(sizeIndex || 0);
+    goodsCount.value = props.exists?.count;
+  }
 };
 
 const skuSizeList = computed(() => {
@@ -93,17 +125,17 @@ const sizeChange = (index: number) => {
 
 const countChange = (isPlus: boolean) => {
   if(isPlus) {
-    goodsCount.value++;
+    goodsCount.value += 1;
   } else {
     if(goodsCount.value > 1) {
-      goodsCount.value--;
+      goodsCount.value -= 1;
     }
   }
 };
 
 const confirm = () => {
-  emits('confirm', {
-    ...skuSizeList.value[currentSizeIndex.value],
+  callback({
+    ...skuSizeList.value![currentSizeIndex.value],
     count: goodsCount.value
   });
   popupRef.value.close();