Card.mjs 4.1 KB

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