购物车逻辑完善

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

src/components/sku-dialog.vue

@@ -2,10 +2,10 @@
   <uni-popup ref='popupRef' type='bottom' :mask-click='false' @touchmove.stop.prevent=''>
     <view class='content'>
       <view class='c-flex-row' style='align-items: flex-start'>
-        <image class='goods-image' :src='bean?.images' />
+        <image class='goods-image' :src='goodsDetailBean?.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-name'>{{ goodsDetailBean?.name }}</text>
+          <text class='goods-price'>{{ flashPrice > 0 ? `${flashPrice}` : `${goodsDetailBean?.price}` || 0 }}</text>
         </view>
         <image class='close-image' :src='assetsUrl("ic_close.png")' @click.stop='close' />
       </view>
@@ -50,46 +50,40 @@
 <script lang='ts' setup>
 import { PropType, ref } from 'vue';
 import { assetsUrl } from '@/utils/assets';
-import {showToast} from '@/utils';
+import { showToast } from '@/utils';
+import { getGoodsDetail } from '@/api/goods';
 import { GoodsBean, StockBean } from '@/api/goods/types';
 
 const props = defineProps({
-  bean: Object as PropType<GoodsBean>,
+  flashPrice: {
+    type: Number,
+    default: -1
+  },
   exists: Object as PropType<StockBean>
 });
 const popupRef = ref();
+const goodsDetailBean = ref<GoodsBean>();
 const skuColorList = ref<string[]>([]);
 const currentColorIndex = ref(0);
 const currentSizeIndex = ref(0);
 const goodsCount = ref(1);
 let callback: Function;
 
-const show = (fn: Function) => {
+const show = async (goodsId: string, 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('暂无库存')
+  goodsDetailBean.value = await getGoodsDetail(goodsId);
+  if(goodsDetailBean.value?.stocks?.length == 0) {
+    showToast('暂无库存');
     return;
   }
 
-  props.bean?.stocks?.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
+  goodsDetailBean.value?.stocks?.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
     if(!skuColorList.value.includes(colorName)) {
       skuColorList.value.push(colorName);
     }
   });
 
-
   setTimeout(() => {
     popupRef.value.open();
   }, 200);
@@ -106,7 +100,7 @@ const show = (fn: Function) => {
 
 const skuSizeList = computed(() => {
   const currentColorName = skuColorList.value[currentColorIndex.value];
-  return props.bean?.stocks?.filter((res: { colorName: string }) => {
+  return goodsDetailBean.value?.stocks?.filter((res: { colorName: string }) => {
     return res.colorName === currentColorName;
   });
 });
@@ -134,10 +128,15 @@ const countChange = (isPlus: boolean) => {
 };
 
 const confirm = () => {
-  callback({
-    ...skuSizeList.value![currentSizeIndex.value],
-    count: goodsCount.value
-  });
+  if(callback instanceof Function) {
+    callback({
+      ...goodsDetailBean.value,
+      checkedStock: {
+        ...skuSizeList.value![currentSizeIndex.value],
+        count: goodsCount.value
+      }
+    });
+  }
   popupRef.value.close();
 };
 
@@ -262,7 +261,7 @@ defineExpose({
 
     .primary-button {
       width: 100%;
-      margin-top: 100rpx;
+      margin-top: 50rpx;
     }
   }
 }