captain-ui/es/ump-periodbuy/src/components/GoodsItem.js

有赞vue wap业务组件库

var _components;

import fullfillImage from '@youzan/utils/fullfillImage';
import GoodsImg from './GoodsImg';
var IMAGE_MAP = {
  0: '!730x0.jpg',
  1: '!520x0.jpg',
  2: '!290x0.jpg'
};
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _vm.show ? _c('div', {
      staticClass: "cap-goods-item",
      class: ["cap-goods-item--" + _vm.type, {
        'cap-goods-item--no-title': !_vm.showTitle,
        'cap-goods-item--no-btn': !_vm.showBuyBtn,
        'cap-goods-item--soldout': _vm.isSoldOut
      }]
    }, [_c('a', {
      attrs: {
        "href": _vm.goodsUrl
      }
    }, [_c('div', {
      staticClass: "cap-goods-item-picture"
    }, [_c('span', {
      staticClass: "cap-goods-item-picture__icon"
    }), _c('cap-goods-img', {
      attrs: {
        "ratio": _vm.ratio,
        "img-url": _vm.imageUrl,
        "fill-style": _vm.imageFillStyle,
        "goods-id": _vm.goods.id
      }
    })], 1), _c('div', {
      ref: "infoWrap",
      staticClass: "cap-goods-info"
    }, [_vm.showTitle ? _c('div', {
      staticClass: "cap-goods-info__intro"
    }, [_c('h4', {
      staticClass: "cap-goods-info__title"
    }, [_vm._v(_vm._s(_vm.goods.title))]), _vm.showDesc ? _c('p', {
      staticClass: "cap-goods-info__desc"
    }, [_vm._v("\n          " + _vm._s(_vm.goods.description) + "\n        ")]) : _vm._e()]) : _vm._e(), !_vm.showSkuAfterPrice ? _c('span', {
      ref: "sku",
      staticClass: "cap-goods-info__sku",
      style: "width: " + _vm.skuWidth + "px"
    }, [_vm._v("\n        " + _vm._s(_vm.skuContent) + "\n      ")]) : _vm._e(), _c('div', {
      staticClass: "cap-goods-info__bottom"
    }, [_c('div', {
      staticClass: "cap-goods-info__price"
    }, [_c('span', {
      ref: "price"
    }, [_c('span', {
      staticClass: "cap-goods-info__symbol"
    }, [_vm._v("¥")]), _c('span', {
      staticClass: "cap-goods-info__yuan"
    }, [_vm._v(_vm._s(_vm.yuan))]), _c('span', {
      staticClass: "cap-goods-info__cent"
    }, [_vm._v("." + _vm._s(_vm.cent))])]), _vm.showSkuAfterPrice ? _c('span', {
      ref: "sku",
      staticClass: "cap-goods-info__sku",
      style: "width: " + _vm.skuWidth + "px"
    }, [_vm._v("\n            " + _vm._s(_vm.skuContent) + "\n          ")]) : _vm._e()]), _vm.showBuyBtn ? _c('div', {
      ref: "buyBtn",
      class: _vm.btnClass
    }, [_vm._v("\n          " + _vm._s(_vm.btnText) + "\n        ")]) : _vm._e()])])])]) : _vm._e();
  },
  name: 'goods-item',
  components: (_components = {}, _components[GoodsImg.name] = GoodsImg, _components),
  inheritAttrs: false,
  props: {
    goods: {
      type: Object,
      defautl: function defautl() {
        return {};
      }
    },
    showTitle: Number,
    showDesc: Number,
    showBuyBtn: Number,
    buyBtnType: Number,
    hideGoodsEnd: Number,
    isPreview: Boolean,
    baseUrl: String,
    ratio: String,
    imageFillStyle: Number,
    type: String
  },
  data: function data() {
    return {
      skuWidth: ''
    };
  },
  computed: {
    imageUrl: function imageUrl() {
      return fullfillImage(this.goodsInfo.attachmentUrl, IMAGE_MAP[this.size]);
    },
    goodsInfo: function goodsInfo() {
      return this.goods.goodsInfo || {};
    },
    goodsUrl: function goodsUrl() {
      return this.isPreview ? '' : this.baseUrl + "/goods/" + this.goodsInfo.alias;
    },
    show: function show() {
      return !(this.hideGoodsEnd && this.isSoldOut);
    },
    showSkuAfterPrice: function showSkuAfterPrice() {
      return this.type !== 'small' || this.type === 'small' && !this.showTitle;
    },
    minSku: function minSku() {
      if (this.goods.skus && this.goods.skus.length > 0) {
        return this.goods.skus.reduce(function (s, c) {
          return +s.price < +c.price ? s : c;
        });
      }

      return '';
    },
    price: function price() {
      if (this.minSku) {
        return ('' + this.minSku.price / 100).split('.');
      }

      return ['0', '00'];
    },
    yuan: function yuan() {
      return this.price[0];
    },
    cent: function cent() {
      if (this.price[1]) {
        if (this.price[1].length === 1) {
          return this.price[1] + '0';
        }

        return this.price[1];
      }

      return '00';
    },
    skuContent: function skuContent() {
      if (this.minSku) {
        var content = this.minSku.description;

        if (this.type === 'big') {
          return "\uFF08 " + content + " ";
        }

        return content;
      }

      return '';
    },
    isSoldOut: function isSoldOut() {
      return +this.goodsInfo.totalStock === 0;
    },
    btnClass: function btnClass() {
      return ['cap-goods-info__btn', "cap-goods-info__btn--" + this.buyBtnType];
    },
    btnText: function btnText() {
      if (this.isEnd || this.isSoldOut) {
        return '去看看';
      }

      if (this.buyBtnType === 0) {
        return '购买';
      }

      return '立即购买';
    }
  },
  mounted: function mounted() {
    this.calcSkuWidth();
  },
  methods: {
    calcSkuWidth: function calcSkuWidth() {
      if (this.$refs.infoWrap) {
        var wrapWidth = this.$refs.infoWrap.offsetWidth;
        var priceWidth = this.$refs.price.offsetWidth;
        var btnWidth = this.$refs.buyBtn ? this.$refs.buyBtn.offsetWidth : 0;

        if (this.type === 'big') {
          var maxWidth = wrapWidth - priceWidth - btnWidth - 40;
          var skuContentWidth = this.$refs.sku.offsetWidth;
          this.skuWidth = Math.min(skuContentWidth, maxWidth);
        } else if (this.type === 'list') {
          this.skuWidth = wrapWidth - btnWidth - 10;
        } else if (this.type === 'small') {
          if (!this.showTitle && this.showBuyBtn) {
            this.skuWidth = wrapWidth - btnWidth - 30;
          } else if (!this.showBuyBtn && !this.showTitle) {
            this.skuWidth = wrapWidth - priceWidth - 25;
          } else {
            this.skuWidth = wrapWidth - 20;
          }
        }
      }
    }
  }
};