Card.mjs 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import { defineComponent, createVNode as _createVNode, Fragment as _Fragment, createTextVNode as _createTextVNode } from "vue";
  2. import { isDef, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
  3. import { Tag } from "../tag/index.mjs";
  4. import { Image } from "../image/index.mjs";
  5. const [name, bem] = createNamespace("card");
  6. const cardProps = {
  7. tag: String,
  8. num: numericProp,
  9. desc: String,
  10. thumb: String,
  11. title: String,
  12. price: numericProp,
  13. centered: Boolean,
  14. lazyLoad: Boolean,
  15. currency: makeStringProp("\xA5"),
  16. thumbLink: String,
  17. originPrice: numericProp
  18. };
  19. var stdin_default = defineComponent({
  20. name,
  21. props: cardProps,
  22. emits: ["clickThumb"],
  23. setup(props, {
  24. slots,
  25. emit
  26. }) {
  27. const renderTitle = () => {
  28. if (slots.title) {
  29. return slots.title();
  30. }
  31. if (props.title) {
  32. return _createVNode("div", {
  33. "class": [bem("title"), "van-multi-ellipsis--l2"]
  34. }, [props.title]);
  35. }
  36. };
  37. const renderThumbTag = () => {
  38. if (slots.tag || props.tag) {
  39. return _createVNode("div", {
  40. "class": bem("tag")
  41. }, [slots.tag ? slots.tag() : _createVNode(Tag, {
  42. "mark": true,
  43. "type": "primary"
  44. }, {
  45. default: () => [props.tag]
  46. })]);
  47. }
  48. };
  49. const renderThumbImage = () => {
  50. if (slots.thumb) {
  51. return slots.thumb();
  52. }
  53. return _createVNode(Image, {
  54. "src": props.thumb,
  55. "fit": "cover",
  56. "width": "100%",
  57. "height": "100%",
  58. "lazyLoad": props.lazyLoad
  59. }, null);
  60. };
  61. const renderThumb = () => {
  62. if (slots.thumb || props.thumb) {
  63. return _createVNode("a", {
  64. "href": props.thumbLink,
  65. "class": bem("thumb"),
  66. "onClick": (event) => emit("clickThumb", event)
  67. }, [renderThumbImage(), renderThumbTag()]);
  68. }
  69. };
  70. const renderDesc = () => {
  71. if (slots.desc) {
  72. return slots.desc();
  73. }
  74. if (props.desc) {
  75. return _createVNode("div", {
  76. "class": [bem("desc"), "van-ellipsis"]
  77. }, [props.desc]);
  78. }
  79. };
  80. const renderPriceText = () => {
  81. const priceArr = props.price.toString().split(".");
  82. return _createVNode("div", null, [_createVNode("span", {
  83. "class": bem("price-currency")
  84. }, [props.currency]), _createVNode("span", {
  85. "class": bem("price-integer")
  86. }, [priceArr[0]]), priceArr.length > 1 && _createVNode(_Fragment, null, [_createTextVNode("."), _createVNode("span", {
  87. "class": bem("price-decimal")
  88. }, [priceArr[1]])])]);
  89. };
  90. return () => {
  91. var _a, _b, _c;
  92. const showNum = slots.num || isDef(props.num);
  93. const showPrice = slots.price || isDef(props.price);
  94. const showOriginPrice = slots["origin-price"] || isDef(props.originPrice);
  95. const showBottom = showNum || showPrice || showOriginPrice || slots.bottom;
  96. const Price = showPrice && _createVNode("div", {
  97. "class": bem("price")
  98. }, [slots.price ? slots.price() : renderPriceText()]);
  99. const OriginPrice = showOriginPrice && _createVNode("div", {
  100. "class": bem("origin-price")
  101. }, [slots["origin-price"] ? slots["origin-price"]() : `${props.currency} ${props.originPrice}`]);
  102. const Num = showNum && _createVNode("div", {
  103. "class": bem("num")
  104. }, [slots.num ? slots.num() : `x${props.num}`]);
  105. const Footer = slots.footer && _createVNode("div", {
  106. "class": bem("footer")
  107. }, [slots.footer()]);
  108. const Bottom = showBottom && _createVNode("div", {
  109. "class": bem("bottom")
  110. }, [(_a = slots["price-top"]) == null ? void 0 : _a.call(slots), Price, OriginPrice, Num, (_b = slots.bottom) == null ? void 0 : _b.call(slots)]);
  111. return _createVNode("div", {
  112. "class": bem()
  113. }, [_createVNode("div", {
  114. "class": bem("header")
  115. }, [renderThumb(), _createVNode("div", {
  116. "class": bem("content", {
  117. centered: props.centered
  118. })
  119. }, [_createVNode("div", null, [renderTitle(), renderDesc(), (_c = slots.tags) == null ? void 0 : _c.call(slots)]), Bottom])]), Footer]);
  120. };
  121. }
  122. });
  123. export {
  124. cardProps,
  125. stdin_default as default
  126. };