index.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
  2. // Utils
  3. import { createNamespace, isDef } from '../utils';
  4. import { emit, inherit } from '../utils/functional'; // Components
  5. import Tag from '../tag';
  6. import Image from '../image'; // Types
  7. var _createNamespace = createNamespace('card'),
  8. createComponent = _createNamespace[0],
  9. bem = _createNamespace[1];
  10. function Card(h, props, slots, ctx) {
  11. var _slots$priceTop;
  12. var thumb = props.thumb;
  13. var showNum = slots.num || isDef(props.num);
  14. var showPrice = slots.price || isDef(props.price);
  15. var showOriginPrice = slots['origin-price'] || isDef(props.originPrice);
  16. var showBottom = showNum || showPrice || showOriginPrice || slots.bottom;
  17. function onThumbClick(event) {
  18. emit(ctx, 'click-thumb', event);
  19. }
  20. function ThumbTag() {
  21. if (slots.tag || props.tag) {
  22. return h("div", {
  23. "class": bem('tag')
  24. }, [slots.tag ? slots.tag() : h(Tag, {
  25. "attrs": {
  26. "mark": true,
  27. "type": "danger"
  28. }
  29. }, [props.tag])]);
  30. }
  31. }
  32. function Thumb() {
  33. if (slots.thumb || thumb) {
  34. return h("a", {
  35. "attrs": {
  36. "href": props.thumbLink
  37. },
  38. "class": bem('thumb'),
  39. "on": {
  40. "click": onThumbClick
  41. }
  42. }, [slots.thumb ? slots.thumb() : h(Image, {
  43. "attrs": {
  44. "src": thumb,
  45. "width": "100%",
  46. "height": "100%",
  47. "fit": "cover",
  48. "lazy-load": props.lazyLoad
  49. }
  50. }), ThumbTag()]);
  51. }
  52. }
  53. function Title() {
  54. if (slots.title) {
  55. return slots.title();
  56. }
  57. if (props.title) {
  58. return h("div", {
  59. "class": [bem('title'), 'van-multi-ellipsis--l2']
  60. }, [props.title]);
  61. }
  62. }
  63. function Desc() {
  64. if (slots.desc) {
  65. return slots.desc();
  66. }
  67. if (props.desc) {
  68. return h("div", {
  69. "class": [bem('desc'), 'van-ellipsis']
  70. }, [props.desc]);
  71. }
  72. }
  73. function PriceContent() {
  74. var priceArr = props.price.toString().split('.');
  75. return h("div", [h("span", {
  76. "class": bem('price-currency')
  77. }, [props.currency]), h("span", {
  78. "class": bem('price-integer')
  79. }, [priceArr[0]]), ".", h("span", {
  80. "class": bem('price-decimal')
  81. }, [priceArr[1]])]);
  82. }
  83. function Price() {
  84. if (showPrice) {
  85. return h("div", {
  86. "class": bem('price')
  87. }, [slots.price ? slots.price() : PriceContent()]);
  88. }
  89. }
  90. function OriginPrice() {
  91. if (showOriginPrice) {
  92. var slot = slots['origin-price'];
  93. return h("div", {
  94. "class": bem('origin-price')
  95. }, [slot ? slot() : props.currency + " " + props.originPrice]);
  96. }
  97. }
  98. function Num() {
  99. if (showNum) {
  100. return h("div", {
  101. "class": bem('num')
  102. }, [slots.num ? slots.num() : "x" + props.num]);
  103. }
  104. }
  105. function Footer() {
  106. if (slots.footer) {
  107. return h("div", {
  108. "class": bem('footer')
  109. }, [slots.footer()]);
  110. }
  111. }
  112. return h("div", _mergeJSXProps([{
  113. "class": bem()
  114. }, inherit(ctx, true)]), [h("div", {
  115. "class": bem('header')
  116. }, [Thumb(), h("div", {
  117. "class": bem('content', {
  118. centered: props.centered
  119. })
  120. }, [h("div", [Title(), Desc(), slots.tags == null ? void 0 : slots.tags()]), showBottom && h("div", {
  121. "class": "van-card__bottom"
  122. }, [(_slots$priceTop = slots['price-top']) == null ? void 0 : _slots$priceTop.call(slots), Price(), OriginPrice(), Num(), slots.bottom == null ? void 0 : slots.bottom()])])]), Footer()]);
  123. }
  124. Card.props = {
  125. tag: String,
  126. desc: String,
  127. thumb: String,
  128. title: String,
  129. centered: Boolean,
  130. lazyLoad: Boolean,
  131. thumbLink: String,
  132. num: [Number, String],
  133. price: [Number, String],
  134. originPrice: [Number, String],
  135. currency: {
  136. type: String,
  137. default: '¥'
  138. }
  139. };
  140. export default createComponent(Card);