SkuRowItem.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  6. var _SkuRow = require("./SkuRow");
  7. var _utils = require("../../utils");
  8. var _skuHelper = require("../utils/sku-helper");
  9. var _relation = require("../../mixins/relation");
  10. var _icon = _interopRequireDefault(require("../../icon"));
  11. var _image = _interopRequireDefault(require("../../image"));
  12. var _createNamespace = (0, _utils.createNamespace)('sku-row-item'),
  13. createComponent = _createNamespace[0];
  14. var _default2 = createComponent({
  15. mixins: [(0, _relation.ChildrenMixin)('vanSkuRows')],
  16. props: {
  17. lazyLoad: Boolean,
  18. skuValue: Object,
  19. skuKeyStr: String,
  20. skuEventBus: Object,
  21. selectedSku: Object,
  22. largeImageMode: Boolean,
  23. disableSoldoutSku: Boolean,
  24. skuList: {
  25. type: Array,
  26. default: function _default() {
  27. return [];
  28. }
  29. }
  30. },
  31. computed: {
  32. imgUrl: function imgUrl() {
  33. var url = this.skuValue.imgUrl || this.skuValue.img_url;
  34. return this.largeImageMode ? url || 'https://img01.yzcdn.cn/upload_files/2020/06/24/FmKWDg0bN9rMcTp9ne8MXiQWGtLn.png' : url;
  35. },
  36. choosable: function choosable() {
  37. if (!this.disableSoldoutSku) {
  38. return true;
  39. }
  40. return (0, _skuHelper.isSkuChoosable)(this.skuList, this.selectedSku, {
  41. key: this.skuKeyStr,
  42. valueId: this.skuValue.id
  43. });
  44. }
  45. },
  46. methods: {
  47. onSelect: function onSelect() {
  48. if (this.choosable) {
  49. this.skuEventBus.$emit('sku:select', (0, _extends2.default)({}, this.skuValue, {
  50. skuKeyStr: this.skuKeyStr
  51. }));
  52. }
  53. },
  54. onPreviewImg: function onPreviewImg(event) {
  55. event.stopPropagation();
  56. var skuValue = this.skuValue,
  57. skuKeyStr = this.skuKeyStr;
  58. this.skuEventBus.$emit('sku:previewImage', (0, _extends2.default)({}, skuValue, {
  59. ks: skuKeyStr,
  60. imgUrl: skuValue.imgUrl || skuValue.img_url
  61. }));
  62. },
  63. genImage: function genImage(classPrefix) {
  64. var h = this.$createElement;
  65. if (this.imgUrl) {
  66. return h(_image.default, {
  67. "attrs": {
  68. "fit": "cover",
  69. "src": this.imgUrl,
  70. "lazyLoad": this.lazyLoad
  71. },
  72. "class": classPrefix + "-img"
  73. });
  74. }
  75. }
  76. },
  77. render: function render() {
  78. var h = arguments[0];
  79. var choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr];
  80. var classPrefix = this.largeImageMode ? (0, _SkuRow.bem)('image-item') : (0, _SkuRow.bem)('item');
  81. return h("span", {
  82. "class": [classPrefix, choosed ? classPrefix + "--active" : '', !this.choosable ? classPrefix + "--disabled" : ''],
  83. "on": {
  84. "click": this.onSelect
  85. }
  86. }, [this.genImage(classPrefix), h("div", {
  87. "class": classPrefix + "-name"
  88. }, [this.largeImageMode ? h("span", {
  89. "class": {
  90. 'van-multi-ellipsis--l2': this.largeImageMode
  91. }
  92. }, [this.skuValue.name]) : this.skuValue.name]), this.largeImageMode && h(_icon.default, {
  93. "attrs": {
  94. "name": "enlarge"
  95. },
  96. "class": classPrefix + "-img-icon",
  97. "on": {
  98. "click": this.onPreviewImg
  99. }
  100. })]);
  101. }
  102. });
  103. exports.default = _default2;