[improvement] Coupon: jsx (#2456)

packages/coupon/index.js

@@ -0,0 +1,74 @@
+import { use } from '../utils';
+import Checkbox from '../checkbox';
+
+const [sfc, bem, t] = use('coupon');
+
+function padZero(num) {
+  return (num < 10 ? '0' : '') + num;
+}
+
+function getDate(timeStamp) {
+  const date = new Date(timeStamp * 1000);
+  return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(date.getDate())}`;
+}
+
+function formatDiscount(discount) {
+  return (discount / 10).toFixed(discount % 10 === 0 ? 0 : 1);
+}
+
+function formatAmount(amount) {
+  return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
+}
+
+export default sfc({
+  props: {
+    coupon: Object,
+    chosen: Boolean,
+    disabled: Boolean,
+    currency: {
+      type: String,
+      default: '¥'
+    }
+  },
+
+  computed: {
+    validPeriod() {
+      return `${t('valid')}：${getDate(this.coupon.startAt)} - ${getDate(this.coupon.endAt)}`;
+    },
+
+    faceAmount() {
+      return this.coupon.denominations
+        ? `<span>${this.currency}</span> ${formatAmount(this.coupon.denominations)}`
+        : this.coupon.discount
+          ? t('discount', formatDiscount(this.coupon.discount))
+          : '';
+    },
+
+    conditionMessage() {
+      let condition = this.coupon.originCondition;
+      condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
+      return condition === 0 ? t('unlimited') : t('condition', condition);
+    }
+  },
+
+  render(h) {
+    const { coupon, disabled } = this;
+
+    return (
+      <div class={bem({ disabled: this.disabled })}>
+        <div class={bem('content')}>
+          <div class={bem('head')}>
+            <h2 domPropsInnerHTML={this.faceAmount} />
+            <p>{this.conditionMessage}</p>
+          </div>
+          <div class={bem('body')}>
+            <h2>{coupon.name}</h2>
+            <p>{this.validPeriod}</p>
+            {this.chosen && <Checkbox value={true} class={bem('corner')} />}
+          </div>
+        </div>
+        {(disabled && coupon.reason) && <p class={bem('reason')}>{coupon.reason}</p>}
+      </div>
+    );
+  }
+});

packages/coupon/index.less

@@ -0,0 +1,96 @@
+@import '../style/var';
+@import '../style/mixins/ellipsis';
+
+.van-coupon {
+  overflow: hidden;
+  border-radius: 4px;
+  margin: 0 15px 15px;
+  background-color: @white;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+
+  &:active {
+    background-color: @active-color;
+  }
+
+  &__content {
+    display: flex;
+    height: 100px;
+    padding: 24px 0 0 15px;
+    box-sizing: border-box;
+  }
+
+  p,
+  h2 {
+    margin: 0;
+
+    .ellipsis();
+  }
+
+  h2 {
+    height: 34px;
+    font-weight: 500;
+    line-height: 34px;
+  }
+
+  p {
+    font-size: 12px;
+    line-height: 16px;
+    color: @gray-dark;
+  }
+
+  &__head {
+    min-width: 90px;
+
+    h2 {
+      color: @red;
+      font-size: 24px;
+
+      span {
+        font-size: 50%;
+      }
+    }
+  }
+
+  &__body {
+    flex: 1;
+    position: relative;
+    border-radius: 0 4px 4px 0;
+
+    h2 {
+      font-size: 16px;
+    }
+  }
+
+  &__corner {
+    top: 16px;
+    right: 15px;
+    position: absolute;
+
+    .van-icon {
+      border-color: @red;
+      background-color: @red;
+    }
+  }
+
+  &__reason {
+    padding: 7px 15px;
+    border-top: 1px dashed @border-color;
+    background-color: @background-color-light;
+  }
+
+  &--disabled {
+    &:active {
+      background-color: @white;
+    }
+
+    .van-coupon-item__content {
+      height: 90px;
+    }
+
+    p,
+    h2,
+    span {
+      color: @gray-dark;
+    }
+  }
+}