优化

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='assetsUrl("test_bg.png")' />
+        <image class='goods-image' :src='bean?.images' />
         <view class='c-flex-column' style='flex: 1'>
-          <text class='goods-name'>女童夏装套装洋气装短袖阔…</text>
-          <text class='goods-price'>29.90</text>
+          <text class='goods-name'>{{ bean.name }}…</text>
+          <text class='goods-price'>{{ bean?.price }}</text>
         </view>
         <image class='close-image' :src='assetsUrl("ic_close.png")' @click.stop='close' />
       </view>
@@ -48,10 +48,15 @@
 </template>
 
 <script lang='ts' setup>
+import { Proptype, ref } from 'vue';
 import { assetsUrl } from '@/utils/assets';
+import { GoodsBean } from '@/api/goods/types';
 
+const props = defineProps({
+  bean: Object as Proptype<GoodsBean>
+});
 const popupRef = ref();
-const skuColorList = ref(['黑色', '白色']);
+const skuColorList = ref<string[]>([]);
 const currentColorIndex = ref(0);
 const skuSizeList = ref(['120cm', '130cm', '140cm', '150cm', '160cm', '170cm']);
 const currentSizeIndex = ref(0);
@@ -59,6 +64,22 @@ const goodsCount = ref(1);
 
 const show = () => {
   popupRef.value.open();
+  // props.bean.stocks.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
+  //   if(skuColorList.value.includes(colorName)) {
+  //     skuColorList.value.push(colorName);
+  //   }
+  // });
+
+  props.bean.stocks?.reduce((a: any[], b: { colorId: string, colorName: any; }) => {
+    if(a.find(e => e.colorId === b.colorId)) {
+      return a;
+    }
+    a.push(b);
+    return a;
+  }, []).map((res: { colorName: any; }) =>
+    ({
+      colorName: res.colorName
+    }));
 };
 
 const close = () => {