[improvement] Coupon: jsx (#2456)

packages/coupon-cell/index.js

@@ -1,21 +1,9 @@
-<template>
-  <cell
-    :class="b()"
-    :title="title || $t('title')"
-    :value="value"
-    :border="border"
-    :is-link="editable"
-    :value-class="valueClass"
-    @click="$emit('click')"
-  />
-</template>
+import { use } from '../utils';
+import Cell from '../cell';
 
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'coupon-cell',
+const [sfc, bem, t] = use('coupon-cell');
 
+export default sfc({
   model: {
     prop: 'chosenCoupon'
   },
@@ -31,13 +19,13 @@ export default create({
       type: Boolean,
       default: true
     },
-    chosenCoupon: {
-      type: Number,
-      default: -1
-    },
     editable: {
       type: Boolean,
       default: true
+    },
+    chosenCoupon: {
+      type: Number,
+      default: -1
     }
   },
 
@@ -49,12 +37,27 @@ export default create({
         const value = coupon.denominations || coupon.value;
         return `-${this.currency}${(value / 100).toFixed(2)}`;
       }
-      return coupons.length === 0 ? this.$t('tips') : this.$t('count', coupons.length);
+      return coupons.length === 0 ? t('tips') : t('count', coupons.length);
     },
 
     valueClass() {
       return this.coupons[this.chosenCoupon] ? 'van-coupon-cell--selected' : '';
     }
+  },
+
+  render(h) {
+    return (
+      <Cell
+        class={bem()}
+        title={this.title || t('title')}
+        value={this.value}
+        border={this.border}
+        is-link={this.editable}
+        value-class={this.valueClass}
+        onClick={() => {
+          this.$emit('click');
+        }}
+      />
+    );
   }
 });
-</script>

packages/coupon-cell/index.less

@@ -0,0 +1,7 @@
+@import '../style/var';
+
+.van-coupon-cell {
+  &--selected {
+    color: @text-color;
+  }
+}