功能完善

src/components/sku-dialog.vue

@@ -12,7 +12,8 @@
       <view class='sku-view c-flex-column'>
         <view class='sku-title'>颜色</view>
         <view class='sku-color-list c-flex-row'>
-          <view class='sku-item' :class='{"sku-item-active":currentColorIndex==index}'
+          <view class='sku-item'
+                :class='{"sku-item-active":currentColorIndex==index}'
                 v-for='(item, index) in skuColorList' :key='index'
                 @click='colorChange(index)'>
             <text>{{ item }}</text>
@@ -22,11 +23,13 @@
         <view class='sku-title' style='margin-top: 43rpx'>尺码</view>
         <view class='sku-color-list c-flex-row'>
           <view class='sku-item'
-                :class='{"sku-item-active":currentSizeIndex==index,"sku-item-disabled":item.existingNumber<=-1}'
+                v-if='(skuSizeList?.length||0)>0'
+                :class='{"sku-item-active":currentSizeIndex==index,"sku-item-disabled":item.existingNumber<=0}'
                 v-for='(item, index) in skuSizeList' :key='index'
                 @click='sizeChange(index)'>
             <text>{{ item.sizeName }}</text>
           </view>
+          <text v-else style='color: #999999;font-size: 30rpx'>暂无库存</text>
         </view>
 
         <view class='c-flex-row' style='margin-top: 52rpx'>
@@ -41,7 +44,9 @@
             </view>
           </view>
         </view>
-        <button class='primary-button' @click='confirm'>确定</button>
+        <button class='primary-button' :plain='currentSizeIndex<=0' :disabled='currentSizeIndex<=0' @click='confirm'>
+          确定
+        </button>
       </view>
     </view>
   </uni-popup>
@@ -65,7 +70,7 @@ const popupRef = ref();
 const goodsDetailBean = ref<GoodsBean>();
 const skuColorList = ref<string[]>([]);
 const currentColorIndex = ref(0);
-const currentSizeIndex = ref(0);
+const currentSizeIndex = ref(-1);
 const goodsCount = ref(1);
 let callback: Function;
 
@@ -96,25 +101,31 @@ const show = async (goodsId: string, fn: Function) => {
     sizeChange(sizeIndex || 0);
     goodsCount.value = props.exists?.count;
   }
+
+  if(skuSizeList) {
+    // skuSizeList.value![2].existingNumber = 2;
+  }
 };
 
 const skuSizeList = computed(() => {
   const currentColorName = skuColorList.value[currentColorIndex.value];
-  return goodsDetailBean.value?.stocks?.filter((res: { colorName: string }) => {
+  let sizeList = goodsDetailBean.value?.stocks?.filter((res: { colorName: string }) => {
     return res.colorName === currentColorName;
   });
+  currentSizeIndex.value = sizeList?.findIndex(res => res.existingNumber > 0) || 0;
+  return sizeList;
 });
 
-const close = () => {
-  popupRef.value.close();
-};
-
 const colorChange = (index: number) => {
   currentColorIndex.value = index;
 };
 
 const sizeChange = (index: number) => {
-  currentSizeIndex.value = index;
+  if((skuSizeList.value![index].existingNumber || 0) <= 0) {
+    showToast('库存不足');
+  } else {
+    currentSizeIndex.value = index;
+  }
 };
 
 const countChange = (isPlus: boolean) => {
@@ -140,6 +151,10 @@ const confirm = () => {
   popupRef.value.close();
 };
 
+const close = () => {
+  popupRef.value.close();
+};
+
 defineExpose({
   show
 });
@@ -262,6 +277,7 @@ defineExpose({
     .primary-button {
       width: 100%;
       margin-top: 50rpx;
+      border: none;
     }
   }
 }