[improvement] rename packages dir to src (#3659)

src/coupon/index.js

@@ -0,0 +1,87 @@
+import { createNamespace } from '../utils';
+import { RED } from '../utils/color';
+import { padZero } from '../utils/format/string';
+import Checkbox from '../checkbox';
+
+const [createComponent, bem, t] = createNamespace('coupon');
+
+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 createComponent({
+  props: {
+    coupon: Object,
+    chosen: Boolean,
+    disabled: Boolean,
+    currency: {
+      type: String,
+      default: '¥'
+    }
+  },
+
+  computed: {
+    validPeriod() {
+      const { startAt, endAt } = this.coupon;
+      return `${t('valid')}：${getDate(startAt)} - ${getDate(endAt)}`;
+    },
+
+    faceAmount() {
+      const { coupon } = this;
+
+      if (coupon.valueDesc) {
+        return `${coupon.valueDesc}<span>${coupon.unitDesc || ''}</span>`;
+      }
+
+      if (coupon.denominations) {
+        return `<span>${this.currency}</span> ${formatAmount(this.coupon.denominations)}`;
+      }
+
+      if (coupon.discount) {
+        return t('discount', formatDiscount(this.coupon.discount));
+      }
+
+      return '';
+    },
+
+    conditionMessage() {
+      const condition = formatAmount(this.coupon.originCondition);
+      return condition === '0' ? t('unlimited') : t('condition', condition);
+    }
+  },
+
+  render(h) {
+    const { coupon, disabled } = this;
+    const description = (disabled && coupon.reason) || coupon.description;
+
+    return (
+      <div class={bem({ disabled })}>
+        <div class={bem('content')}>
+          <div class={bem('head')}>
+            <h2 class={bem('amount')} domPropsInnerHTML={this.faceAmount} />
+            <p>{this.coupon.condition || this.conditionMessage}</p>
+          </div>
+          <div class={bem('body')}>
+            <h2 class={bem('name')}>{coupon.name}</h2>
+            <p>{this.validPeriod}</p>
+            {this.chosen && (
+              <Checkbox value={true} class={bem('corner')} checked-color={RED} />
+            )}
+          </div>
+        </div>
+        {description && <p class={bem('description')}>{description}</p>}
+      </div>
+    );
+  }
+});

src/coupon/index.less

@@ -0,0 +1,101 @@
+@import '../style/var';
+@import '../style/mixins/ellipsis';
+
+.van-coupon {
+  margin: @coupon-margin;
+  overflow: hidden;
+  background-color: @coupon-background-color;
+  border-radius: @coupon-border-radius;
+  box-shadow: @coupon-box-shadow;
+
+  &:active {
+    background-color: @coupon-active-background-color;
+  }
+
+  &__content {
+    display: flex;
+    box-sizing: border-box;
+    height: @coupon-content-height;
+    padding: @coupon-content-padding;
+  }
+
+  p,
+  h2 {
+    margin: 0;
+
+    .ellipsis();
+  }
+
+  h2 {
+    height: 34px;
+    font-weight: 500;
+    line-height: 34px;
+  }
+
+  p {
+    color: @gray-dark;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &__head {
+    position: relative;
+    min-width: @coupon-head-width;
+    padding-right: 10px;
+
+    p {
+      white-space: pre-wrap;
+    }
+  }
+
+  &__amount {
+    color: @coupon-amount-color;
+    font-size: @coupon-amount-font-size;
+
+    span {
+      font-size: @coupon-currency-font-size;
+
+      &:not(:empty) {
+        margin-left: 2px;
+      }
+    }
+  }
+
+  &__body {
+    position: relative;
+    flex: 1;
+    border-radius: 0 @coupon-border-radius @coupon-border-radius 0;
+  }
+
+  &__name {
+    font-size: @coupon-name-font-size;
+  }
+
+  &__corner {
+    position: absolute;
+    top: 16px;
+    right: 15px;
+  }
+
+  &__description {
+    padding: @coupon-description-padding;
+    background-color: @coupon-description-background-color;
+    border-top: 1px dashed @coupon-description-border-color;
+  }
+
+  &--disabled {
+    &:active {
+      background-color: @coupon-background-color;
+    }
+
+    .van-coupon-item__content {
+      height: @coupon-content-height - 10px;
+    }
+
+    p,
+    h2,
+    span {
+      color: @coupon-disabled-text-color;
+    }
+  }
+}

src/coupon/shared.ts

@@ -0,0 +1,14 @@
+export type Coupon = {
+  id: string;
+  name: string;
+  endAt: number;
+  value: number;
+  startAt: number;
+  reason?: string;
+  discount?: number;
+  unitDesc?: string;
+  condition?: string;
+  valueDesc?: string;
+  description: string;
+  denominations?: number;
+};