feat(Sku): add properties support (#5525)

src/sku/components/SkuRow.tsx

@@ -11,7 +11,7 @@ export type SkuRowProps = {
   skuRow: SkuTreeItemData;
 };
 
-const [createComponent, bem] = createNamespace('sku-row');
+const [createComponent, bem, t] = createNamespace('sku-row');
 
 function SkuRow(
   h: CreateElement,
@@ -19,9 +19,12 @@ function SkuRow(
   slots: DefaultSlots,
   ctx: RenderContext<SkuRowProps>
 ) {
+  const multipleNode = props.skuRow.is_multiple && (
+    <span class={bem('title-multiple')}>（{t('multiple')}）</span>
+  );
   return (
     <div class={[bem(), BORDER_BOTTOM]} {...inherit(ctx)}>
-      <div class={bem('title')}>{props.skuRow.k}</div>
+      <div class={bem('title')}>{props.skuRow.k}{multipleNode}</div>
       {slots.default && slots.default()}
     </div>
   );

src/sku/components/SkuRowPropItem.js

@@ -0,0 +1,40 @@
+import { createNamespace } from '../../utils';
+
+const [createComponent] = createNamespace('sku-row-prop-item');
+
+export default createComponent({
+  props: {
+    skuValue: Object,
+    skuKeyStr: String,
+    skuEventBus: Object,
+    selectedProp: Object,
+    multiple: Boolean,
+  },
+
+  methods: {
+    onSelect() {
+      this.skuEventBus.$emit('sku:propSelect', {
+        ...this.skuValue,
+        skuKeyStr: this.skuKeyStr,
+        multiple: this.multiple,
+      });
+    },
+  },
+
+  render() {
+    const choosed = this.selectedProp && (this.selectedProp[this.skuKeyStr] || []).indexOf(this.skuValue.id) > -1;
+    return (
+      <span
+        class={[
+          'van-sku-row__item',
+          {
+            'van-sku-row__item--active': choosed,
+          }
+        ]}
+        onClick={this.onSelect}
+      >
+        <span class="van-sku-row__item-name">{this.skuValue.name}</span>
+      </span>
+    );
+  }
+});