[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({
+function SkuActions(h, props, slots, ctx) {
-  props: {
-    buyText: String,
-    skuEventBus: Object,
-    showAddCartBtn: Boolean
-  },
-
-  render(h) {
   const emit = name => () => {
-      this.skuEventBus.$emit(name);
+    props.skuEventBus.$emit(name);
   };
 
   return (
-      <div class={bem()}>
+    <div class={bem()} {...inherit(ctx)}>
-        {this.showAddCartBtn && (
+      {props.showAddCartBtn && (
         <Button bottomAction text="加入购物车" onClick={emit('sku:addCart')} />
       )}
       <Button
         type="primary"
         bottomAction
-          text={this.buyText || '立即购买'}
+        text={props.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({
+function getSkuImg(sku, selectedSku) {
-  props: {
+  const id = selectedSku.s1;
-    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;
 
+  if (id) {
     // skuImg 挂载在 skuTree 中 s1 上
-      const treeItem = this.sku.tree.filter(item => item.k_s === 's1')[0] || {};
+    const treeItem = sku.tree.filter(item => item.k_s === 's1')[0] || {};
-
+    if (treeItem.v) {
-      if (!treeItem.v) return;
-
       const matchedSku = treeItem.v.filter(skuValue => skuValue.id === id)[0];
-      if (matchedSku) return matchedSku.imgUrl || matchedSku.img_url;
+      if (matchedSku) {
-    },
+        return matchedSku.imgUrl || matchedSku.img_url;
-
+      }
-    previewImage() {
+    }
-      this.skuEventBus.$emit('sku:previewImage', this.goodsImg);
+  }
 }
-  },
 
-  render(h) {
+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']}>
+    <div class={[bem(), 'van-hairline--bottom']} {...inherit(ctx)}>
-        <div class={bem('img-wrap')} onClick={this.previewImage}>
+      <div class={bem('img-wrap')} onClick={previewImage}>
-          <img src={this.goodsImg} />
+        <img src={goodsImg} />
       </div>
       <div class={bem('goods-info')}>
-          <div class="van-sku__goods-name van-ellipsis">{this.goods.title}</div>
+        <div class="van-sku__goods-name van-ellipsis">{goods.title}</div>
-          {this.slots()}
+        {slots.default && slots.default()}
         <Icon
           name="close"
           class="van-sku__close-icon"
           onClick={() => {
-              this.skuEventBus.$emit('sku:close');
+            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({
+function SkuRow(h, props, slots, ctx) {
-  props: {
-    skuRow: Object
-  },
-
-  render(h) {
   return (
-      <div class={bem()}>
+    <div class={bem()} {...inherit(ctx)}>
-        <div class={bem('title')}>{this.skuRow.k}：</div>
+      <div class={bem('title')}>{props.skuRow.k}：</div>
-        {this.slots()}
+      {slots.default && slots.default()}
     </div>
   );
 }
-});
+
+SkuRow.props = {
+  skuRow: Object
+};
+
+export default sfc(SkuRow);