[improvement] ContactCard: jsx (#2506)

packages/address-edit/index.js

@@ -257,9 +257,9 @@ export default sfc({
           focused={this.detailFocused}
           value={data.addressDetail}
           error={errorInfo.addressDetail}
-          detail-rows={this.detailRows}
-          search-result={this.searchResult}
-          show-search-result={this.showSearchResult}
+          detailRows={this.detailRows}
+          searchResult={this.searchResult}
+          showSearchResult={this.showSearchResult}
           onFocus={onFocus('addressDetail')}
           onBlur={() => {
             this.detailFocused = false;
@@ -312,14 +312,14 @@ export default sfc({
         <Popup
           v-model={this.showAreaPopup}
           position="bottom"
-          lazy-render={false}
-          get-container="body"
+          lazyRender={false}
+          getContainer="body"
         >
           <Area
             ref="area"
             loading={!this.areaListLoaded}
             value={data.areaCode}
-            area-list={this.areaList}
+            areaList={this.areaList}
             onConfirm={this.onAreaConfirm}
             onCancel={() => {
               this.showAreaPopup = false;

packages/area/index.js

@@ -190,13 +190,13 @@ export default sfc({
       <Picker
         ref="picker"
         class={bem()}
-        show-toolbar
-        value-key="name"
+        showToolbar
+        valueKey="name"
         title={this.title}
         loading={this.loading}
         columns={this.displayColumns}
-        item-height={this.itemHeight}
-        visible-item-count={this.visibleItemCount}
+        itemHeight={this.itemHeight}
+        visibleItemCount={this.visibleItemCount}
         {...{ on: this.listeners }}
       />
     );

packages/contact-card/index.js

@@ -0,0 +1,46 @@
+import { use } from '../utils';
+import Cell from '../cell';
+
+const [sfc, bem, t] = use('contact-card');
+
+export default sfc({
+  props: {
+    tel: String,
+    name: String,
+    addText: String,
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'add'
+    }
+  },
+
+  methods: {
+    onClick(event) {
+      if (this.editable) {
+        this.$emit('click', event);
+      }
+    }
+  },
+
+  render(h) {
+    const { type } = this;
+    return (
+      <Cell
+        center
+        border={false}
+        class={bem([type])}
+        isLink={this.editable}
+        icon={type === 'edit' ? 'contact' : 'add-square'}
+        onClick={this.onClick}
+      >
+        {type === 'add'
+          ? this.addText || t('addText')
+          : [<div>{`${t('name')}：${this.name}`}</div>, <div>{`${t('tel')}：${this.tel}`}</div>]}
+      </Cell>
+    );
+  }
+});

packages/contact-card/index.vue

@@ -1,46 +0,0 @@
-<template>
-  <cell
-    center
-    :border="false"
-    :class="b([type])"
-    :is-link="editable"
-    :icon="type === 'edit' ? 'contact' : 'add-square'"
-    @click="onClick"
-  >
-    <template v-if="type === 'add'">{{ addText || $t('addText') }}</template>
-    <template v-else>
-      <div>{{ $t('name') }}：{{ name }}</div>
-      <div>{{ $t('tel') }}：{{ tel }}</div>
-    </template>
-  </cell>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'contact-card',
-
-  props: {
-    tel: String,
-    name: String,
-    addText: String,
-    editable: {
-      type: Boolean,
-      default: true
-    },
-    type: {
-      type: String,
-      default: 'add'
-    }
-  },
-
-  methods: {
-    onClick(event) {
-      if (this.editable) {
-        this.$emit('click', event);
-      }
-    }
-  }
-});
-</script>