diff --git a/src/coupon-cell/index.js b/src/coupon-cell/index.js
new file mode 100644
index 000000000..346a8ef6a
--- /dev/null
+++ b/src/coupon-cell/index.js
@@ -0,0 +1,62 @@
+import { createNamespace } from '../utils';
+import Cell from '../cell';
+
+const [createComponent, bem, t] = createNamespace('coupon-cell');
+
+function formatValue(props) {
+  const { coupons, chosenCoupon, currency } = props;
+  const coupon = coupons[+chosenCoupon];
+
+  if (coupon) {
+    const value = coupon.value || coupon.denominations || 0;
+    return `-${currency} ${(value / 100).toFixed(2)}`;
+  }
+
+  return coupons.length === 0 ? t('tips') : t('count', coupons.length);
+}
+
+export default createComponent({
+  props: {
+    title: String,
+    coupons: {
+      type: Array,
+      default: () => [],
+    },
+    currency: {
+      type: String,
+      default: '¥',
+    },
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+    chosenCoupon: {
+      type: [Number, String],
+      default: -1,
+    },
+  },
+
+  setup(props) {
+    return () => {
+      const valueClass = props.coupons[+props.chosenCoupon]
+        ? bem('selected')
+        : '';
+      const value = formatValue(props);
+
+      return (
+        <Cell
+          class={bem()}
+          value={value}
+          title={props.title || t('title')}
+          border={props.border}
+          isLink={props.editable}
+          valueClass={valueClass}
+        />
+      );
+    };
+  },
+});