SkuRowItem.js 2.9 KB

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