[improvement] Sku: partial functional (#2756)

packages/sku/components/SkuActions.js

@@ -1,32 +1,33 @@
 import { use } from '../../utils';
+import { inherit } from '../../utils/functional';
 import Button from '../../button';
 
 const [sfc, bem] = use('sku-actions');
 
-export default sfc({
-  props: {
-    buyText: String,
-    skuEventBus: Object,
-    showAddCartBtn: Boolean
-  },
+function SkuActions(h, props, slots, ctx) {
+  const emit = name => () => {
+    props.skuEventBus.$emit(name);
+  };
 
-  render(h) {
-    const emit = name => () => {
-      this.skuEventBus.$emit(name);
-    };
+  return (
+    <div class={bem()} {...inherit(ctx)}>
+      {props.showAddCartBtn && (
+        <Button bottomAction text="加入购物车" onClick={emit('sku:addCart')} />
+      )}
+      <Button
+        type="primary"
+        bottomAction
+        text={props.buyText || '立即购买'}
+        onClick={emit('sku:buy')}
+      />
+    </div>
+  );
+}
 
-    return (
-      <div class={bem()}>
-        {this.showAddCartBtn && (
-          <Button bottomAction text="加入购物车" onClick={emit('sku:addCart')} />
-        )}
-        <Button
-          type="primary"
-          bottomAction
-          text={this.buyText || '立即购买'}
-          onClick={emit('sku:buy')}
-        />
-      </div>
-    );
-  }
-});
+SkuActions.props = {
+  buyText: String,
+  skuEventBus: Object,
+  showAddCartBtn: Boolean
+};
+
+export default sfc(SkuActions);

packages/sku/components/SkuHeader.js

@@ -1,61 +1,57 @@
 import { use } from '../../utils';
+import { inherit } from '../../utils/functional';
 import Icon from '../../icon';
 
 const [sfc, bem] = use('sku-header');
 
-export default sfc({
-  props: {
-    sku: Object,
-    goods: Object,
-    skuEventBus: Object,
-    selectedSku: Object
-  },
-
-  computed: {
-    goodsImg() {
-      const s1Id = this.selectedSku.s1;
-      const skuImg = this.getSkuImg(s1Id);
-      // 优先使用选中 sku 的图片
-      return skuImg || this.goods.picture;
-    }
-  },
-
-  methods: {
-    getSkuImg(id) {
-      if (!id) return;
-
-      // skuImg 挂载在 skuTree 中 s1 上
-      const treeItem = this.sku.tree.filter(item => item.k_s === 's1')[0] || {};
-
-      if (!treeItem.v) return;
+function getSkuImg(sku, selectedSku) {
+  const id = selectedSku.s1;
 
+  if (id) {
+    // skuImg 挂载在 skuTree 中 s1 上
+    const treeItem = sku.tree.filter(item => item.k_s === 's1')[0] || {};
+    if (treeItem.v) {
       const matchedSku = treeItem.v.filter(skuValue => skuValue.id === id)[0];
-      if (matchedSku) return matchedSku.imgUrl || matchedSku.img_url;
-    },
-
-    previewImage() {
-      this.skuEventBus.$emit('sku:previewImage', this.goodsImg);
+      if (matchedSku) {
+        return matchedSku.imgUrl || matchedSku.img_url;
+      }
     }
-  },
-
-  render(h) {
-    return (
-      <div class={[bem(), 'van-hairline--bottom']}>
-        <div class={bem('img-wrap')} onClick={this.previewImage}>
-          <img src={this.goodsImg} />
-        </div>
-        <div class={bem('goods-info')}>
-          <div class="van-sku__goods-name van-ellipsis">{this.goods.title}</div>
-          {this.slots()}
-          <Icon
-            name="close"
-            class="van-sku__close-icon"
-            onClick={() => {
-              this.skuEventBus.$emit('sku:close');
-            }}
-          />
-        </div>
-      </div>
-    );
   }
-});
+}
+
+function SkuHeader(h, props, slots, ctx) {
+  const { sku, goods, skuEventBus, selectedSku } = props;
+  const goodsImg = getSkuImg(sku, selectedSku) || goods.picture;
+
+  const previewImage = () => {
+    skuEventBus.$emit('sku:previewImage', goodsImg);
+  };
+
+  return (
+    <div class={[bem(), 'van-hairline--bottom']} {...inherit(ctx)}>
+      <div class={bem('img-wrap')} onClick={previewImage}>
+        <img src={goodsImg} />
+      </div>
+      <div class={bem('goods-info')}>
+        <div class="van-sku__goods-name van-ellipsis">{goods.title}</div>
+        {slots.default && slots.default()}
+        <Icon
+          name="close"
+          class="van-sku__close-icon"
+          onClick={() => {
+            skuEventBus.$emit('sku:close');
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+SkuHeader.props = {
+  sku: Object,
+  goods: Object,
+  skuEventBus: Object,
+  selectedSku: Object
+};
+
+export default sfc(SkuHeader);

packages/sku/components/SkuRow.js

@@ -1,18 +1,19 @@
 import { use } from '../../utils';
+import { inherit } from '../../utils/functional';
 
 const [sfc, bem] = use('sku-row');
 
-export default sfc({
-  props: {
-    skuRow: Object
-  },
+function SkuRow(h, props, slots, ctx) {
+  return (
+    <div class={bem()} {...inherit(ctx)}>
+      <div class={bem('title')}>{props.skuRow.k}：</div>
+      {slots.default && slots.default()}
+    </div>
+  );
+}
 
-  render(h) {
-    return (
-      <div class={bem()}>
-        <div class={bem('title')}>{this.skuRow.k}：</div>
-        {this.slots()}
-      </div>
-    );
-  }
-});
+SkuRow.props = {
+  skuRow: Object
+};
+
+export default sfc(SkuRow);