From 3958a4248446dd51e49e68433aee9b6c5542c168 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 1 Feb 2019 21:50:47 +0800
Subject: [PATCH] [improvement] Sku: jsx (#2666)

---
 packages/sku/{Sku.vue => Sku.js}              | 283 ++++++++----------
 packages/sku/components/SkuActions.js         |  32 ++
 packages/sku/components/SkuActions.vue        |  35 ---
 packages/sku/components/SkuHeader.js          |  61 ++++
 packages/sku/components/SkuHeader.vue         |  68 -----
 packages/sku/components/SkuImgUploader.js     | 103 +++++++
 packages/sku/components/SkuImgUploader.vue    | 104 -------
 .../{SkuMessages.vue => SkuMessages.js}       |  91 +++---
 packages/sku/components/SkuRow.js             |  18 ++
 packages/sku/components/SkuRow.vue            |  18 --
 packages/sku/components/SkuRowItem.js         |  53 ++++
 packages/sku/components/SkuRowItem.vue        |  52 ----
 .../{SkuStepper.vue => SkuStepper.js}         |  66 ++--
 13 files changed, 458 insertions(+), 526 deletions(-)
 rename packages/sku/{Sku.vue => Sku.js} (68%)
 create mode 100644 packages/sku/components/SkuActions.js
 delete mode 100644 packages/sku/components/SkuActions.vue
 create mode 100644 packages/sku/components/SkuHeader.js
 delete mode 100644 packages/sku/components/SkuHeader.vue
 create mode 100644 packages/sku/components/SkuImgUploader.js
 delete mode 100644 packages/sku/components/SkuImgUploader.vue
 rename packages/sku/components/{SkuMessages.vue => SkuMessages.js} (68%)
 create mode 100644 packages/sku/components/SkuRow.js
 delete mode 100644 packages/sku/components/SkuRow.vue
 create mode 100644 packages/sku/components/SkuRowItem.js
 delete mode 100644 packages/sku/components/SkuRowItem.vue
 rename packages/sku/components/{SkuStepper.vue => SkuStepper.js} (75%)

diff --git a/packages/sku/Sku.vue b/packages/sku/Sku.js
similarity index 68%
rename from packages/sku/Sku.vue
rename to packages/sku/Sku.js
index 89839256d..aefceefb4 100644
--- a/packages/sku/Sku.vue
+++ b/packages/sku/Sku.js
@@ -1,132 +1,3 @@
-<template>
-  <popup
-    v-if="!isSkuEmpty"
-    v-model="show"
-    position="bottom"
-    class="van-sku-container"
-    :close-on-click-overlay="closeOnClickOverlay"
-    :get-container="getContainer"
-  >
-    <!-- sku-header -->
-    <slot
-      name="sku-header"
-      :sku-event-bus="skuEventBus"
-      :selected-sku="selectedSku"
-      :selected-sku-comb="selectedSkuComb"
-    >
-      <sku-header
-        :sku-event-bus="skuEventBus"
-        :selected-sku="selectedSku"
-        :goods="goods"
-        :sku="sku"
-      >
-        <slot
-          name="sku-header-price"
-          :price="price"
-          :selected-sku-comb="selectedSkuComb"
-        >
-          <div class="van-sku__goods-price">
-            <span class="van-sku__price-symbol">￥</span>
-            <span
-              v-text="price"
-              class="van-sku__price-num"
-            />
-          </div>
-        </slot>
-      </sku-header>
-    </slot>
-    <div
-      class="van-sku-body"
-      :style="bodyStyle"
-    >
-      <!-- sku-body-top -->
-      <slot
-        name="sku-body-top"
-        :selected-sku="selectedSku"
-        :sku-event-bus="skuEventBus"
-      />
-      <!-- sku-group -->
-      <slot
-        name="sku-group"
-        :selected-sku="selectedSku"
-        :sku-event-bus="skuEventBus"
-      >
-        <div
-          v-if="hasSku"
-          :class="skuGroupClass"
-        >
-          <sku-row
-            v-for="(skuTreeItem, index) in skuTree"
-            :key="index"
-            :sku-row="skuTreeItem"
-          >
-            <sku-row-item
-              v-for="(skuValue, valueIndex) in skuTreeItem.v"
-              :key="valueIndex"
-              :sku-key-str="skuTreeItem.k_s"
-              :sku-value="skuValue"
-              :sku-event-bus="skuEventBus"
-              :selected-sku="selectedSku"
-              :sku-list="sku.list"
-            />
-          </sku-row>
-        </div>
-      </slot>
-      <!-- extra-sku-group -->
-      <slot
-        name="extra-sku-group"
-        :sku-event-bus="skuEventBus"
-      />
-      <!-- sku-stepper -->
-      <slot
-        name="sku-stepper"
-        :sku-event-bus="skuEventBus"
-        :selected-sku="selectedSku"
-        :selected-sku-comb="selectedSkuComb"
-        :selected-num="selectedNum"
-      >
-        <sku-stepper
-          ref="skuStepper"
-          :sku-event-bus="skuEventBus"
-          :selected-sku="selectedSku"
-          :selected-sku-comb="selectedSkuComb"
-          :selected-num="selectedNum"
-          :stepper-title="stepperTitle"
-          :sku-stock-num="sku.stock_num"
-          :hide-quota-text="hideQuotaText"
-          :quota="quota"
-          :quota-used="quotaUsed"
-          :disable-stepper-input="disableStepperInput"
-          :hide-stock="hideStock"
-          :custom-stepper-config="customStepperConfig"
-          @change="$emit('stepper-change', $event)"
-        />
-      </slot>
-      <!-- sku-messages -->
-      <slot name="sku-messages">
-        <sku-messages
-          ref="skuMessages"
-          :goods-id="goodsId"
-          :message-config="messageConfig"
-          :messages="sku.messages"
-        />
-      </slot>
-    </div>
-    <!-- sku-actions -->
-    <slot
-      name="sku-actions"
-      :sku-event-bus="skuEventBus"
-    >
-      <sku-actions
-        :sku-event-bus="skuEventBus"
-        :buy-text="buyText"
-        :show-add-cart-btn="showAddCartBtn"
-      />
-    </slot>
-  </popup>
-</template>
-
-<script>
 /* eslint-disable camelcase */
 import Vue from 'vue';
 import Popup from '../popup';
@@ -138,30 +9,14 @@ import SkuRowItem from './components/SkuRowItem';
 import SkuStepper from './components/SkuStepper';
 import SkuMessages from './components/SkuMessages';
 import SkuActions from './components/SkuActions';
-import {
-  isAllSelected,
-  isSkuChoosable,
-  getSkuComb,
-  getSelectedSkuValues
-} from './utils/skuHelper';
+import { isAllSelected, isSkuChoosable, getSkuComb, getSelectedSkuValues } from './utils/skuHelper';
 import { LIMIT_TYPE, UNSELECTED_SKU_VALUE_ID } from './constants';
-import create from '../utils/create';
+import { use, useSlots } from '../utils';
 
+const [sfc] = use('sku');
 const { QUOTA_LIMIT } = LIMIT_TYPE;
 
-export default create({
-  name: 'sku',
-
-  components: {
-    Popup,
-    SkuHeader,
-    SkuRow,
-    SkuRowItem,
-    SkuStepper,
-    SkuMessages,
-    SkuActions
-  },
-
+export default sfc({
   props: {
     sku: Object,
     goods: Object,
@@ -221,10 +76,7 @@ export default create({
     show(val) {
       this.$emit('input', val);
       if (!val) {
-        const selectedSkuValues = getSelectedSkuValues(
-          this.sku.tree,
-          this.selectedSku
-        );
+        const selectedSkuValues = getSelectedSkuValues(this.sku.tree, this.selectedSku);
 
         this.$emit('sku-close', {
           selectedSkuValues,
@@ -374,15 +226,11 @@ export default create({
     },
 
     getSkuCartMessages() {
-      return this.$refs.skuMessages
-        ? this.$refs.skuMessages.getCartMessages()
-        : {};
+      return this.$refs.skuMessages ? this.$refs.skuMessages.getCartMessages() : {};
     },
 
     validateSkuMessages() {
-      return this.$refs.skuMessages
-        ? this.$refs.skuMessages.validateMessages()
-        : '';
+      return this.$refs.skuMessages ? this.$refs.skuMessages.validateMessages() : '';
     },
 
     validateSku() {
@@ -493,6 +341,121 @@ export default create({
         cartMessages: this.getSkuCartMessages()
       };
     }
+  },
+
+  render(h) {
+    if (this.isSkuEmpty) {
+      return;
+    }
+
+    const {
+      sku,
+      goods,
+      price,
+      skuEventBus,
+      selectedSku,
+      selectedNum,
+      stepperTitle,
+      hideQuotaText,
+      selectedSkuComb
+    } = this;
+
+    const slotsProps = {
+      price,
+      selectedNum,
+      skuEventBus,
+      selectedSku,
+      selectedSkuComb
+    };
+    const slots = name => useSlots(this)(name, slotsProps);
+
+    const Header = slots('sku-header') || (
+      <SkuHeader sku={sku} goods={goods} skuEventBus={skuEventBus} selectedSku={selectedSku}>
+        {slots('sku-header-price') || (
+          <div class="van-sku__goods-price">
+            <span class="van-sku__price-symbol">￥</span>
+            <span class="van-sku__price-num">{price}</span>
+          </div>
+        )}
+      </SkuHeader>
+    );
+
+    const Group =
+      slots('sku-group') ||
+      (this.hasSku && (
+        <div class={this.skuGroupClass}>
+          {this.skuTree.map(skuTreeItem => (
+            <SkuRow skuRow={skuTreeItem}>
+              {skuTreeItem.v.map(skuValue => (
+                <SkuRowItem
+                  skuList={sku.list}
+                  skuValue={skuValue}
+                  selectedSku={selectedSku}
+                  skuEventBus={skuEventBus}
+                  skuKeyStr={skuTreeItem.k_s}
+                />
+              ))}
+            </SkuRow>
+          ))}
+        </div>
+      ));
+
+    const Stepper = slots('sku-stepper') || (
+      <SkuStepper
+        ref="skuStepper"
+        quota={this.quota}
+        hideStock={this.hideStock}
+        quotaUsed={this.quotaUsed}
+        skuEventBus={skuEventBus}
+        selectedNum={selectedNum}
+        selectedSku={selectedSku}
+        stepperTitle={stepperTitle}
+        skuStockNum={sku.stock_num}
+        hideQuotaText={hideQuotaText}
+        selectedSkuComb={selectedSkuComb}
+        disableStepperInput={this.disableStepperInput}
+        customStepperConfig={this.customStepperConfig}
+        onChange={event => {
+          this.$emit('stepper-change', event);
+        }}
+      />
+    );
+
+    const Messages = slots('sku-messages') || (
+      <SkuMessages
+        ref="skuMessages"
+        goodsId={this.goodsId}
+        messageConfig={this.messageConfig}
+        messages={sku.messages}
+      />
+    );
+
+    const Actions = slots('sku-actions') || (
+      <SkuActions
+        buyText={this.buyText}
+        skuEventBus={skuEventBus}
+        showAddCartBtn={this.showAddCartBtn}
+      />
+    );
+
+    return (
+      <Popup
+        vModel={this.show}
+        position="bottom"
+        class="van-sku-container"
+        getContainer={this.getContainer}
+        closeOnClickOverlay={this.closeOnClickOverlay}
+      >
+        {Header}
+        <div class="van-sku-body" style={this.bodyStyle}>
+          {slots('sku-body-top')}
+          {Group}
+          {slots('extra-sku-group')}
+          {Stepper}
+          {Messages}
+        </div>
+        {Actions}
+      </Popup>
+    );
   }
 });
-</script>
diff --git a/packages/sku/components/SkuActions.js b/packages/sku/components/SkuActions.js
new file mode 100644
index 000000000..3de4f0404
--- /dev/null
+++ b/packages/sku/components/SkuActions.js
@@ -0,0 +1,32 @@
+import { use } from '../../utils';
+import Button from '../../button';
+
+const [sfc, bem] = use('sku-actions');
+
+export default sfc({
+  props: {
+    buyText: String,
+    skuEventBus: Object,
+    showAddCartBtn: Boolean
+  },
+
+  render(h) {
+    const emit = name => () => {
+      this.skuEventBus.$emit('sku:addCart');
+    };
+
+    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>
+    );
+  }
+});
diff --git a/packages/sku/components/SkuActions.vue b/packages/sku/components/SkuActions.vue
deleted file mode 100644
index 8ed477bb6..000000000
--- a/packages/sku/components/SkuActions.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div :class="b()">
-    <van-button
-      v-if="showAddCartBtn"
-      bottom-action
-      text="加入购物车"
-      @click="skuEventBus.$emit('sku:addCart')"
-    />
-    <van-button
-      type="primary"
-      bottom-action
-      :text="buyText || '立即购买'"
-      @click="skuEventBus.$emit('sku:buy')"
-    />
-  </div>
-</template>
-
-<script>
-import VanButton from '../../button';
-import create from '../../utils/create';
-
-export default create({
-  name: 'sku-actions',
-
-  components: {
-    VanButton
-  },
-
-  props: {
-    buyText: String,
-    skuEventBus: Object,
-    showAddCartBtn: Boolean
-  }
-});
-</script>
diff --git a/packages/sku/components/SkuHeader.js b/packages/sku/components/SkuHeader.js
new file mode 100644
index 000000000..e58647f28
--- /dev/null
+++ b/packages/sku/components/SkuHeader.js
@@ -0,0 +1,61 @@
+import { use } from '../../utils';
+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;
+
+      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);
+    }
+  },
+
+  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.default}
+          <Icon
+            name="close"
+            class="van-sku__close-icon"
+            onClick={() => {
+              this.skuEventBus.$emit('sku:close');
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+});
diff --git a/packages/sku/components/SkuHeader.vue b/packages/sku/components/SkuHeader.vue
deleted file mode 100644
index 2015c3a38..000000000
--- a/packages/sku/components/SkuHeader.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div
-    :class="b()"
-    class="van-hairline--bottom"
-  >
-    <div
-      :class="b('img-wrap')"
-      @click="previewImage"
-    >
-      <img :src="goodsImg">
-    </div>
-    <div :class="b('goods-info')">
-      <div
-        v-text="goods.title"
-        class="van-sku__goods-name van-ellipsis"
-      />
-      <!-- price display area -->
-      <slot />
-      <icon
-        name="close"
-        class="van-sku__close-icon"
-        @click="skuEventBus.$emit('sku:close')"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import create from '../../utils/create';
-
-export default create({
-  name: 'sku-header',
-
-  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那类sku上
-      const treeItem = this.sku.tree.filter(item => item.k_s === 's1')[0] || {};
-
-      if (!treeItem.v) return;
-
-      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);
-    }
-  }
-});
-</script>
diff --git a/packages/sku/components/SkuImgUploader.js b/packages/sku/components/SkuImgUploader.js
new file mode 100644
index 000000000..a9200b2e5
--- /dev/null
+++ b/packages/sku/components/SkuImgUploader.js
@@ -0,0 +1,103 @@
+import { use } from '../../utils';
+import Icon from '../../icon';
+import Loading from '../../loading';
+import Uploader from '../../uploader';
+
+const [sfc, bem] = use('sku-img-uploader');
+
+export default sfc({
+  props: {
+    value: String,
+    uploadImg: Function,
+    maxSize: {
+      type: Number,
+      default: 6
+    }
+  },
+
+  data() {
+    return {
+      // 正在上传的图片 base64
+      paddingImg: ''
+    };
+  },
+
+  computed: {
+    imgList() {
+      return this.value && !this.paddingImg ? [this.value] : [];
+    }
+  },
+
+  methods: {
+    afterReadFile(file) {
+      // 上传文件
+      this.paddingImg = file.content;
+      this.uploadImg(file.file, file.content)
+        .then(img => {
+          this.$emit('input', img);
+          this.$nextTick(() => {
+            this.paddingImg = '';
+          });
+        })
+        .catch(() => {
+          this.paddingImg = '';
+        });
+    },
+
+    onOversize() {
+      this.$toast(`最大可上传图片为${this.maxSize}MB，请尝试压缩图片尺寸`);
+    }
+  },
+
+  render(h) {
+    const { imgList, paddingImg } = this;
+
+    const ImageList = (paddingImg || imgList.length > 0) && (
+      <div class="van-clearfix">
+        {imgList.map(img => (
+          <div class={bem('img')}>
+            <img src={img} />
+            <Icon
+              name="clear"
+              class={bem('delete')}
+              onClick={() => {
+                this.$emit('input', '');
+              }}
+            />
+          </div>
+        ))}
+        {paddingImg && (
+          <div class={bem('img')}>
+            <img src={paddingImg} />
+            <Loading type="spinner" class={bem('uploading')} />
+          </div>
+        )}
+      </div>
+    );
+
+    return (
+      <div class={bem()}>
+        <Uploader
+          disabled={!!paddingImg}
+          afterRead={this.afterReadFile}
+          maxSize={this.maxSize * 1024 * 1024}
+          onOversize={this.onOversize}
+        >
+          <div class={bem('header')}>
+            {paddingImg ? (
+              <div>正在上传...</div>
+            ) : (
+              [
+                <Icon name="photograph" />,
+                <span class="label">{this.value ? '重拍' : '拍照'} 或 </span>,
+                <Icon name="photo" />,
+                <span class="label">{this.value ? '重新选择照片' : '选择照片'}</span>
+              ]
+            )}
+          </div>
+        </Uploader>
+        {ImageList}
+      </div>
+    );
+  }
+});
diff --git a/packages/sku/components/SkuImgUploader.vue b/packages/sku/components/SkuImgUploader.vue
deleted file mode 100644
index 5e56301f0..000000000
--- a/packages/sku/components/SkuImgUploader.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <div :class="b()">
-    <!-- 头部 -->
-    <van-uploader
-      :disabled="!!paddingImg"
-      :after-read="afterReadFile"
-      :max-size="maxSize * 1024 * 1024"
-      @oversize="onOversize"
-    >
-      <div :class="b('header')">
-        <div v-if="paddingImg">正在上传...</div>
-        <template v-else>
-          <icon name="photograph" />
-          <span class="label">{{ value ? '重拍' : '拍照' }}</span> 或
-          <icon name="photo" />
-          <span class="label">{{ value ? '重新选择照片' : '选择照片' }}</span>
-        </template>
-      </div>
-    </van-uploader>
-    <!-- 图片列表区域 -->
-    <div
-      v-if="paddingImg || imgList.length > 0"
-      class="van-clearfix"
-    >
-      <!-- 已有的图片,图片右上角显示删除按钮 -->
-      <div
-        v-for="img in imgList"
-        :class="b('img')"
-      >
-        <img :src="img">
-        <icon
-          name="clear"
-          :class="b('delete')"
-          @click="$emit('input', '')"
-        />
-      </div>
-      <!-- 正在上传的图片,有上传等待提示 -->
-      <div
-        v-if="paddingImg"
-        :class="b('img')"
-      >
-        <img :src="paddingImg">
-        <loading
-          type="spinner"
-          :class="b('uploading')"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import VanUploader from '../../uploader';
-import create from '../../utils/create';
-
-export default create({
-  name: 'sku-img-uploader',
-
-  components: {
-    VanUploader
-  },
-
-  props: {
-    value: String,
-    uploadImg: Function,
-    maxSize: {
-      type: Number,
-      default: 6
-    }
-  },
-
-  data() {
-    return {
-      // 正在上传的图片base 64
-      paddingImg: ''
-    };
-  },
-
-  computed: {
-    imgList() {
-      return this.value && !this.paddingImg ? [this.value] : [];
-    }
-  },
-
-  methods: {
-    afterReadFile(file) {
-      // 上传文件
-      this.paddingImg = file.content;
-      this.uploadImg(file.file, file.content).then(img => {
-        this.$emit('input', img);
-        this.$nextTick(() => {
-          this.paddingImg = '';
-        });
-      }).catch(() => {
-        this.paddingImg = '';
-      });
-    },
-
-    onOversize() {
-      this.$toast(`最大可上传图片为${this.maxSize}MB，请尝试压缩图片尺寸`);
-    }
-  }
-});
-</script>
diff --git a/packages/sku/components/SkuMessages.vue b/packages/sku/components/SkuMessages.js
similarity index 68%
rename from packages/sku/components/SkuMessages.vue
rename to packages/sku/components/SkuMessages.js
index bc9538b8d..89aac5dca 100644
--- a/packages/sku/components/SkuMessages.vue
+++ b/packages/sku/components/SkuMessages.js
@@ -1,41 +1,13 @@
-<template>
-  <cell-group :class="b()">
-    <template v-for="(message, index) in messages">
-      <cell
-        v-if="message.type === 'image'"
-        :class="b('image-cell')"
-        label="仅限一张"
-        :key="`${goodsId}-${index}`"
-        :required="message.required == '1'"
-        :title="message.name"
-      >
-        <sku-img-uploader
-          v-model="messageValues[index].value"
-          :upload-img="messageConfig.uploadImg"
-          :max-size="messageConfig.uploadMaxSize"
-        />
-      </cell>
-      <field
-        v-else
-        v-model="messageValues[index].value"
-        maxlength="200"
-        :key="`${goodsId}-${index}`"
-        :required="message.required == '1'"
-        :label="message.name"
-        :placeholder="getPlaceholder(message)"
-        :type="getType(message)"
-      />
-    </template>
-  </cell-group>
-</template>
-
-<script>
-import create from '../../utils/create';
+import { use } from '../../utils';
+import Cell from '../../cell';
+import CellGroup from '../../cell-group';
 import Field from '../../field';
 import validateEmail from '../../utils/validate/email';
 import validateNumber from '../../utils/validate/number';
 import SkuImgUploader from './SkuImgUploader';
 
+const [sfc, bem] = use('sku-messages');
+
 const PLACEHOLDER = {
   id_no: '输入身份证号码',
   text: '输入文本',
@@ -47,14 +19,7 @@ const PLACEHOLDER = {
   mobile: '输入手机号码'
 };
 
-export default create({
-  name: 'sku-messages',
-
-  components: {
-    SkuImgUploader,
-    Field
-  },
-
+export default sfc({
   props: {
     messages: Array,
     messageConfig: Object,
@@ -73,12 +38,6 @@ export default create({
     }
   },
 
-  computed: {
-    messagePlaceholderMap() {
-      return this.messageConfig.placeholderMap || {};
-    }
-  },
-
   methods: {
     resetMessageValues(messages) {
       return (messages || []).map(() => ({ value: '' }));
@@ -125,7 +84,8 @@ export default create({
 
     getPlaceholder(message) {
       const type = +message.multiple === 1 ? 'textarea' : message.type;
-      return this.messagePlaceholderMap[type] || PLACEHOLDER[type];
+      const map = this.messageConfig.placeholderMap || {};
+      return map[type] || PLACEHOLDER[type];
     },
 
     validateMessages() {
@@ -137,7 +97,7 @@ export default create({
 
         if (value === '') {
           // 必填字段的校验
-          if (message.required == '1') { // eslint-disable-line
+          if (String(message.required) === '1') { // eslint-disable-line
             const textType = message.type === 'image'
               ? '请上传'
               : '请填写';
@@ -159,6 +119,37 @@ export default create({
         }
       }
     }
+  },
+
+  render(h) {
+    return (
+      <CellGroup class={bem()}>
+        {this.messages.map((message, index) => (message.type === 'image' ? (
+          <Cell
+            class={bem('image-cell')}
+            label="仅限一张"
+            title={message.name}
+            key={`${this.goodsId}-${index}`}
+            required={String(message.required) === '1'}
+          >
+            <SkuImgUploader
+              vModel={this.messageValues[index].value}
+              uploadImg={this.messageConfig.uploadImg}
+              maxSize={this.messageConfig.uploadMaxSize}
+            />
+          </Cell>
+        ) : (
+          <Field
+            vModel={this.messageValues[index].value}
+            maxlength="200"
+            label={message.name}
+            key={`${this.goodsId}-${index}`}
+            required={String(message.required) === '1'}
+            placeholder={this.getPlaceholder(message)}
+            type={this.getType(message)}
+          />
+        )))}
+      </CellGroup>
+    );
   }
 });
-</script>
diff --git a/packages/sku/components/SkuRow.js b/packages/sku/components/SkuRow.js
new file mode 100644
index 000000000..76abaa881
--- /dev/null
+++ b/packages/sku/components/SkuRow.js
@@ -0,0 +1,18 @@
+import { use } from '../../utils';
+
+const [sfc, bem] = use('sku-row');
+
+export default sfc({
+  props: {
+    skuRow: Object
+  },
+
+  render(h) {
+    return (
+      <div class={bem()}>
+        <div class={bem('title')}>{this.skuRow.k}：</div>
+        {this.$slots.default}
+      </div>
+    );
+  }
+});
diff --git a/packages/sku/components/SkuRow.vue b/packages/sku/components/SkuRow.vue
deleted file mode 100644
index 7e238a644..000000000
--- a/packages/sku/components/SkuRow.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div :class="b()">
-    <div :class="b('title')">{{ skuRow.k }}：</div>
-    <slot />
-  </div>
-</template>
-
-<script>
-import create from '../../utils/create';
-
-export default create({
-  name: 'sku-row',
-
-  props: {
-    skuRow: Object
-  }
-});
-</script>
diff --git a/packages/sku/components/SkuRowItem.js b/packages/sku/components/SkuRowItem.js
new file mode 100644
index 000000000..88e8df0ca
--- /dev/null
+++ b/packages/sku/components/SkuRowItem.js
@@ -0,0 +1,53 @@
+import { use } from '../../utils';
+import { isSkuChoosable } from '../utils/skuHelper';
+
+const [sfc] = use('sku-row-item');
+
+export default sfc({
+  props: {
+    skuList: Array,
+    skuValue: Object,
+    skuKeyStr: String,
+    skuEventBus: Object,
+    selectedSku: Object
+  },
+
+  computed: {
+    choosable() {
+      return isSkuChoosable(this.skuList, this.selectedSku, {
+        key: this.skuKeyStr,
+        valueId: this.skuValue.id
+      });
+    }
+  },
+
+  methods: {
+    onSelect() {
+      if (this.choosable) {
+        this.skuEventBus.$emit('sku:select', {
+          ...this.skuValue,
+          skuKeyStr: this.skuKeyStr
+        });
+      }
+    }
+  },
+
+  render(h) {
+    const choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr];
+
+    return (
+      <span
+        class={[
+          'van-sku-row__item',
+          {
+            'van-sku-row__item--active': choosed,
+            'van-sku-row__item--disabled': !this.choosable
+          }
+        ]}
+        onClick={this.onSelect}
+      >
+        {this.skuValue.name}
+      </span>
+    );
+  }
+});
diff --git a/packages/sku/components/SkuRowItem.vue b/packages/sku/components/SkuRowItem.vue
deleted file mode 100644
index ac68dd206..000000000
--- a/packages/sku/components/SkuRowItem.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <span
-    v-text="skuValue.name"
-    class="van-sku-row__item"
-    :class="{
-      'van-sku-row__item--active': isChoosed,
-      'van-sku-row__item--disabled': !isChoosable
-    }"
-    @click="onSelect"
-  />
-</template>
-
-<script>
-import create from '../../utils/create';
-import { isSkuChoosable } from '../utils/skuHelper';
-
-export default create({
-  name: 'sku-row-item',
-
-  props: {
-    skuEventBus: Object,
-    skuValue: Object,
-    skuList: Array,
-    selectedSku: Object,
-    skuKeyStr: String
-  },
-
-  computed: {
-    isChoosed() {
-      return this.skuValue.id === this.selectedSku[this.skuKeyStr];
-    },
-
-    isChoosable() {
-      return isSkuChoosable(this.skuList, this.selectedSku, {
-        key: this.skuKeyStr,
-        valueId: this.skuValue.id
-      });
-    }
-  },
-
-  methods: {
-    onSelect() {
-      if (this.isChoosable) {
-        this.skuEventBus.$emit('sku:select', {
-          ...this.skuValue,
-          skuKeyStr: this.skuKeyStr
-        });
-      }
-    }
-  }
-});
-</script>
diff --git a/packages/sku/components/SkuStepper.vue b/packages/sku/components/SkuStepper.js
similarity index 75%
rename from packages/sku/components/SkuStepper.vue
rename to packages/sku/components/SkuStepper.js
index 8497768fc..b2b593407 100644
--- a/packages/sku/components/SkuStepper.vue
+++ b/packages/sku/components/SkuStepper.js
@@ -1,55 +1,22 @@
-<template>
-  <div class="van-sku-stepper-stock">
-    <div class="van-sku-stepper-container">
-      <div class="van-sku__stepper-title">{{ stepperTitle || '购买数量' }}：</div>
-      <stepper
-        class="van-sku__stepper"
-        v-model="currentNum"
-        :min="1"
-        :max="stepperLimit"
-        :disable-input="disableStepperInput"
-        @overlimit="onOverLimit"
-        @change="onChange"
-      />
-    </div>
-    <div
-      v-if="!hideStock"
-      v-text="stockText"
-      class="van-sku__stock"
-    />
-    <div
-      v-if="!hideQuotaText && quotaText"
-      v-text="quotaText"
-      class="van-sku__quota"
-    />
-  </div>
-</template>
-
-<script>
-import create from '../../utils/create';
+import { use } from '../../utils';
 import Stepper from '../../stepper';
 import { LIMIT_TYPE } from '../constants';
 
+const [sfc] = use('sku-stepper');
 const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
 
-export default create({
-  name: 'sku-stepper',
-
-  components: {
-    Stepper
-  },
-
+export default sfc({
   props: {
     quota: Number,
-    hideQuotaText: Boolean,
     quotaUsed: Number,
     hideStock: Boolean,
     skuEventBus: Object,
     skuStockNum: Number,
     selectedSku: Object,
-    selectedSkuComb: Object,
     selectedNum: Number,
     stepperTitle: String,
+    hideQuotaText: Boolean,
+    selectedSkuComb: Object,
     disableStepperInput: Boolean,
     customStepperConfig: Object
   },
@@ -142,6 +109,27 @@ export default create({
       handleStepperChange && handleStepperChange(currentValue);
       this.$emit('change', currentValue);
     }
+  },
+
+  render(h) {
+    return (
+      <div class="van-sku-stepper-stock">
+        <div class="van-sku-stepper-container">
+          <div class="van-sku__stepper-title">{this.stepperTitle || '购买数量'}：</div>
+          <Stepper
+            vModel={this.currentNum}
+            class="van-sku__stepper"
+            max={this.stepperLimit}
+            disableInput={this.disableStepperInput}
+            onOverlimit={this.onOverLimit}
+            onChange={this.onChange}
+          />
+        </div>
+        {!this.hideStock && <div class="van-sku__stock">{this.stockText}</div>}
+        {!this.hideQuotaText && this.quotaText && (
+          <div class="van-sku__quota">{this.quotaText}</div>
+        )}
+      </div>
+    );
   }
 });
-</script>