captain-ui/lib/goods-list/components/item.js

有赞vue wap业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _fullfillImage = _interopRequireDefault(require("@youzan/utils/fullfillImage"));

var _buyButton = _interopRequireDefault(require("./buy-button"));

var _cornerMark = _interopRequireDefault(require("./corner-mark"));

var _constants = require("../constants");

var _default2 = {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('a', {
      staticClass: "cap-goods-list__item",
      class: [_vm.layoutClass, _vm.sizeTypeClass, _vm.btnTypeClass, _vm.imageRatioClass, _vm.photoHeight500Class, _vm.imageFillStyleClass, _vm.onlyShowImageClass],
      attrs: {
        "href": _vm.goodsInfo.url
      }
    }, [_c('div', {
      ref: "photo",
      staticClass: "cap-goods-list__photo",
      class: {
        'cap-goods-list__photo--soldout': +_vm.goodsInfo.sold_status === 2 && +_vm.goodsInfo.buy_way !== 0
      }
    }, [_c('img', {
      directives: [{
        name: "lazy",
        rawName: "v-lazy",
        value: _vm.imageUrl,
        expression: "imageUrl"
      }],
      staticClass: "cap-goods-list__img",
      class: [_vm.imgClass],
      attrs: {
        "data-lazy-log": "1",
        "data-lazy-log-id": _vm.goodsInfo.id
      }
    })]), _vm.isShowTitle || _vm.isShowSubTitle || _vm.isShowPrice ? _c('div', {
      staticClass: "cap-goods-list__info",
      class: {
        'has-title': _vm.isShowTitle,
        'has-subtitle': _vm.isShowSubTitle,
        'has-price': _vm.isShowPrice,
        'has-btn': _vm.isShowBuyButton
      }
    }, [_vm.isShowTitle ? _c('h3', {
      staticClass: "title"
    }, [_vm._v("\n      " + _vm._s(_vm.goodsInfo.title) + "\n    ")]) : _vm._e(), _vm.isShowSubTitle ? _c('p', {
      staticClass: "sub-title"
    }, [_vm._v("\n      " + _vm._s(_vm.goodsInfo.sub_title) + "\n    ")]) : _vm._e(), _vm.isShowPrice || _vm.isShowSoldNum ? _c('p', {
      staticClass: "sale-info"
    }, [_vm.isShowPrice ? _c('span', {
      staticClass: "sale-price"
    }, [_vm._v("\n        ¥ " + _vm._s(_vm.goodsInfo.price) + "\n      ")]) : _vm._e(), _vm.isShowSoldNum ? _c('span', {
      staticClass: "sold-num"
    }, [_vm._v("\n        销量：" + _vm._s(_vm.goodsInfo.total_sold_num) + "\n      ")]) : _vm._e()]) : _vm._e()]) : _vm._e(), _vm.isShowBuyButton ? _c('vm-buy-button', {
      attrs: {
        "is-loading": _vm.buyBtnIsLoading,
        "buy-button-type": _vm.itemBuyButtonType,
        "button-text": _vm.buttonText
      },
      on: {
        "click": _vm.handlerBuyButtonClick
      }
    }) : _vm._e(), _vm.showCornerMark ? _c('vm-corner-mark', {
      attrs: {
        "type": _vm.cornerMarkType,
        "image-url": _vm.cornerMarkImage
      }
    }) : _vm._e(), _vm.goodsInfo.is_wish_open ? _c('div', {
      staticClass: "cap-goods-list__wish",
      class: {
        'cap-goods-list__wish--open': _vm.goodsInfo.is_wish_added
      },
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          $event.preventDefault();

          _vm.$emit('wish-btn-click', _vm.goodsInfo, !_vm.goodsInfo.is_wish_added);
        }
      }
    }) : _vm._e()], 1);
  },
  componentName: 'cap-goods-list-item',
  components: {
    'vm-buy-button': _buyButton.default,
    'vm-corner-mark': _cornerMark.default
  },
  props: {
    goodsInfo: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    layout: Number,
    sizeType: Number,
    showBuyButton: Boolean,
    showTitle: Boolean,
    showSubTitle: Boolean,
    showPrice: Boolean,
    showSoldNum: Boolean,
    buyButtonType: Number,
    buyBtnExpress: Boolean,
    itemIndex: Number,
    showCornerMark: Boolean,
    cornerMarkType: Number,
    cornerMarkImage: {
      type: String,
      default: ''
    },
    imageRatio: Number,
    imageFillStyle: Number,
    buttonText: String
  },
  data: function data() {
    return {
      buyBtnIsLoading: false,
      width: null,
      photoSizeInfo: {}
    };
  },
  computed: {
    layoutClass: function layoutClass() {
      var result;

      if (this.layout === 2) {
        var itemSize = this.itemIndex % 3 === 0 ? 'big' : 'small';
        result = ["cap-goods-list__item--" + itemSize, "cap-goods-list__item--hybrid-" + itemSize];
      } else {
        result = ["cap-goods-list__item--" + _constants.layoutMap[this.layout]];
      }

      return result;
    },
    sizeTypeClass: function sizeTypeClass() {
      return "" + _constants.sizeTypeMap[this.sizeType];
    },
    btnTypeClass: function btnTypeClass() {
      // 小图促销样式
      if ((this.layout === 5 || this.layout === 6) && this.buyBtnExpress) {
        return 'cap-goods-list__item--btn2';
      }

      if (this.layout === 1 && this.sizeType === 3) return;
      return "cap-goods-list__item--btn" + this.buyButtonType;
    },
    isShowSoldNum: function isShowSoldNum() {
      return this.showSoldNum && this.goodsInfo.total_sold_num >= 0;
    },
    isShowPrice: function isShowPrice() {
      // 详情列表永远显示价格
      return this.layout === 3 || this.showPrice;
    },
    isShowBuyButton: function isShowBuyButton() {
      var SMALL_LAYOUT = 'three';

      if (SMALL_LAYOUT === _constants.layoutMap[this.layout] && this.buyBtnExpress) {
        return true;
      }

      var notShowBuyButttonLayout = ['big', 'small', 'hybrid', 'three'];

      if (notShowBuyButttonLayout.indexOf(_constants.layoutMap[this.layout]) !== -1 && this.sizeType === 2) {
        return false;
      } // 小图促销样式始终显示按钮


      if (this.layout === 1 && this.sizeType === 3) {
        return true;
      }

      return this.showBuyButton;
    },

    /**
     * 是否显示商品名
     * 小图模式下的极简样式和促销样式不显示title，其他根据配置来判断是否显示
     */
    isShowTitle: function isShowTitle() {
      var layout = this.layout,
          sizeType = this.sizeType;

      if (layout === 1 && sizeType === 3) {
        return false;
      }

      if (layout === 3) {
        return true;
      }

      return this.goodsInfo.title && this.showTitle;
    },
    isShowSubTitle: function isShowSubTitle() {
      var layout = this.layout,
          sizeType = this.sizeType;
      var notShowSubtitleSizeType = [1, 2, 3]; // 一行三个不显示副标题

      if (layout === 5) return false;

      if (layout === 1) {
        // 小图：瀑布流、极简和促销不显示
        if (notShowSubtitleSizeType.indexOf(sizeType) !== -1) {
          return false;
        } // 小图根据showSubTitle来显示，否则两侧高度不一样，布局会乱


        return this.showSubTitle;
      } // 一大两小：小图且极简不显示商品简介


      if (layout === 2 && sizeType === 2) {
        return false;
      } // 详情模式卡片2显示商品简介


      if (layout === 3) {
        if (sizeType === 5) {
          return true;
        }

        return false;
      }

      return this.goodsInfo.sub_title && this.showSubTitle;
    },
    itemBuyButtonType: function itemBuyButtonType() {
      if ((this.layout === 5 || this.layout === 6) && this.buyBtnExpress) return 2;
      return this.layout === 1 && this.sizeType === 3 ? 5 : this.buyButtonType;
    },
    imgClass: function imgClass() {
      // 填充模式
      if (this.imageFillStyle === 1) return;
      var goodsInfo = this.goodsInfo,
          imageRatio = this.imageRatio,
          layout = this.layout,
          sizeType = this.sizeType;
      var ratio = goodsInfo.width / goodsInfo.height; // 小图瀑布流和一大两小的大图和老版没设置显示比例的大图

      if (layout === 1 && sizeType === 1 || layout === 2 && this.itemIndex % 3 === 0 || layout === 0 && !_constants.imageRatioMap[imageRatio]) {
        return;
      } // 大图的3:2比例


      if (imageRatio === 0 && layout === 0) {
        return ratio < 1.5 ? 'large-height' : '';
      }

      return ratio < 1 ? 'large-height' : '';
    },
    imageUrl: function imageUrl() {
      var goodsInfo = this.goodsInfo,
          layout = this.layout,
          itemIndex = this.itemIndex;

      try {
        if (layout === 0 || layout === 2 && itemIndex % 3 === 0) {
          return (0, _fullfillImage.default)(goodsInfo.image_url, '!730x0.jpg');
        }

        return (0, _fullfillImage.default)(goodsInfo.image_url, '!520x0.jpg');
      } catch (e) {
        return goodsInfo.image_url;
      }
    },
    imageRatioClass: function imageRatioClass() {
      var imageRatio = this.imageRatio,
          layout = this.layout;
      if (!_constants.imageRatioMap[imageRatio] || layout !== 0) return '';
      return "cap-goods-list__item--ratio-" + _constants.imageRatioMap[imageRatio];
    },
    photoHeight500Class: function photoHeight500Class() {
      // 填充模式
      if (this.imageFillStyle === 1) return;
      var width = this.width,
          layout = this.layout,
          goodsInfo = this.goodsInfo;

      if (width && (layout === 0 || layout === 2) && goodsInfo.width && goodsInfo.height) {
        var imageHeight = width * goodsInfo.height / goodsInfo.width;
        var imageWidth = _constants.imageMaxHeight * goodsInfo.width / goodsInfo.height; // 如果图片高度大于500且宽度小于当前容器宽度

        if (imageHeight > _constants.imageMaxHeight && imageWidth < width) {
          return "photo-height-" + _constants.imageMaxHeight + "-item";
        }
      }

      return '';
    },
    imageFillStyleClass: function imageFillStyleClass() {
      var imageFillStyle = this.imageFillStyle,
          sizeType = this.sizeType,
          goodsInfo = this.goodsInfo,
          photoSizeInfo = this.photoSizeInfo,
          width = this.width; // 瀑布流情况不处理

      if (!_constants.imageFillStyleMap[imageFillStyle] || sizeType === 1) return;
      var result = ["cap-goods-list__item--" + _constants.imageFillStyleMap[imageFillStyle]]; // 处理填充情况高度为长边的情况

      if (imageFillStyle === 1) {
        var imageHeight;

        if (this.layout !== 3) {
          imageHeight = width * goodsInfo.height / goodsInfo.width;
        } else {
          imageHeight = photoSizeInfo.width * goodsInfo.height / goodsInfo.width;
        }

        if (imageHeight && imageHeight < photoSizeInfo.height) {
          result.push('padding-height');
        }
      }

      return result;
    },
    onlyShowImageClass: function onlyShowImageClass() {
      if (!this.isShowTitle && !this.isShowSubTitle && !this.showPrice) {
        return 'only-image';
      }

      return '';
    }
  },
  mounted: function mounted() {
    var _this = this;

    this.width = this.$el.getBoundingClientRect().width;
    var photoElRect = this.$refs.photo.getBoundingClientRect();
    this.photoSizeInfo = {
      width: photoElRect.width,
      height: photoElRect.height
    };
    this.$on('loading-change', function (params) {
      if (params.id === _this.goodsInfo.id) {
        _this.buyBtnIsLoading = params.loading;
      }
    });
  },
  methods: {
    handlerBuyButtonClick: function handlerBuyButtonClick() {
      if (this.buyBtnIsLoading) {
        return;
      }

      this.$emit('buy-btn-click');
    }
  }
};
exports.default = _default2;