index.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import { use } from '../utils';
  2. import Checkbox from '../checkbox';
  3. const [sfc, bem, t] = use('coupon');
  4. function padZero(num) {
  5. return (num < 10 ? '0' : '') + num;
  6. }
  7. function getDate(timeStamp) {
  8. const date = new Date(timeStamp * 1000);
  9. return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(date.getDate())}`;
  10. }
  11. function formatDiscount(discount) {
  12. return (discount / 10).toFixed(discount % 10 === 0 ? 0 : 1);
  13. }
  14. function formatAmount(amount) {
  15. return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
  16. }
  17. export default sfc({
  18. props: {
  19. coupon: Object,
  20. chosen: Boolean,
  21. disabled: Boolean,
  22. currency: {
  23. type: String,
  24. default: '¥'
  25. }
  26. },
  27. computed: {
  28. validPeriod() {
  29. return `${t('valid')}:${getDate(this.coupon.startAt)} - ${getDate(this.coupon.endAt)}`;
  30. },
  31. faceAmount() {
  32. const { coupon } = this;
  33. if (coupon.valueDesc) {
  34. return `${coupon.valueDesc}<span>${coupon.unitDesc || ''}</span>`;
  35. }
  36. return coupon.denominations
  37. ? `<span>${this.currency}</span> ${formatAmount(this.coupon.denominations)}`
  38. : coupon.discount
  39. ? t('discount', formatDiscount(this.coupon.discount))
  40. : '';
  41. },
  42. conditionMessage() {
  43. let condition = this.coupon.originCondition;
  44. condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
  45. return condition === 0 ? t('unlimited') : t('condition', condition);
  46. }
  47. },
  48. render(h) {
  49. const { coupon, disabled } = this;
  50. const description = (disabled && coupon.reason) || coupon.description;
  51. return (
  52. <div class={bem({ disabled })}>
  53. <div class={bem('content')}>
  54. <div class={bem('head')}>
  55. <h2 domPropsInnerHTML={this.faceAmount} />
  56. <p>{this.coupon.condition || this.conditionMessage}</p>
  57. </div>
  58. <div class={bem('body')}>
  59. <h2>{coupon.name}</h2>
  60. <p>{this.validPeriod}</p>
  61. {this.chosen && <Checkbox value={true} class={bem('corner')} />}
  62. </div>
  63. </div>
  64. {description && <p class={bem('description')}>{description}</p>}
  65. </div>
  66. );
  67. }
  68. });