captain-ui/es/ump-groupon/components/GrouponGoods.js

有赞vue wap业务组件库

var _components;

import each from 'lodash/each';
import fullfillImage from '@youzan/utils/fullfillImage';
import GoodsImg from './goodsImg';
import { SIZE, SHOW_BUY_BTN, SHOW_TITLE, SHOW_GROUP_NUMS } from '../constants';
var IMAGE_MAP = {
  0: '!730x0.jpg',
  1: '!520x0.jpg',
  2: '!290x0.jpg'
};

var centToYuan = function centToYuan(money) {
  return (money / 100).toFixed(2);
};

export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('li', {
      staticClass: "cap-ump-groupon-goods",
      class: _vm.goodsClass
    }, [_c('a', {
      attrs: {
        "href": _vm.goodsUrl
      }
    }, [_c('div', {
      staticClass: "cap-ump-groupon-goods__header"
    }, [_c('cap-goods-img', {
      attrs: {
        "ratio": _vm.ratio,
        "img-url": _vm.imageUrl,
        "fill-style": _vm.imageFillStyle,
        "goods-id": _vm.goodsInfo.id
      }
    }), _vm.isShowGrouponNum ? _c('div', {
      staticClass: "cap-ump-groupon-goods__groupon-nums"
    }, [_vm._v("\n        " + _vm._s(_vm.goods.groupNums) + "人已团\n      ")]) : _vm._e(), _vm.goods.imageIcon ? _c('i', {
      staticClass: "cap-ump-groupon-goods__image-icon",
      style: _vm.imageIconStyle
    }) : _vm._e()], 1), _c('div', {
      staticClass: "cap-ump-groupon-goods__body",
      class: _vm.goodsBodyClass
    }, [_vm.isShowTitle ? _c('div', {
      staticClass: "cap-ump-groupon-goods__title"
    }, [_vm._v("\n        " + _vm._s(_vm.goods.title) + "\n      ")]) : _vm._e(), _c('div', {
      staticClass: "cap-ump-groupon-goods__goods-info"
    }, [_c('p', {
      staticClass: "cap-ump-groupon-goods__activity-tag"
    }, [_vm._v(_vm._s(_vm.goods.conditionNum + _vm.activityTagText))]), _c('div', {
      staticClass: "cap-ump-groupon-goods__groupon-price"
    }, [_c('span', {
      staticClass: "cap-ump-groupon-goods__groupon-price-symbol"
    }, [_vm._v("¥")]), _c('span', {
      staticClass: "cap-ump-groupon-goods__groupon-price-yuan"
    }, [_vm._v(_vm._s(_vm.minActivityPriceObj.yuan))]), _c('span', {
      staticClass: "cap-ump-groupon-goods__groupon-price-cent"
    }, [_vm._v(_vm._s(_vm.minActivityPriceObj.cent))])]), _c('div', {
      staticClass: "cap-ump-groupon-goods__origin-price"
    }, [_vm._v("\n          单买价\n          "), _c('span', {
      staticClass: "cap-ump-groupon-goods__origin-price-symbol"
    }, [_vm._v("¥")]), _c('span', {
      staticClass: "cap-ump-groupon-goods__origin-price-value"
    }, [_vm._v(_vm._s(_vm.minOriginPrice))])])]), _vm.isShowBuyBtn ? _c('div', {
      staticClass: "cap-ump-groupon-goods__action"
    }, [_vm._v("\n        " + _vm._s(_vm.buttonText) + "\n      ")]) : _vm._e()])])]);
  },
  name: 'cap-ump-groupon-goods',
  components: (_components = {}, _components[GoodsImg.name] = GoodsImg, _components),
  props: {
    goods: Object,
    size: Number,
    showBuyBtn: Number,
    buyBtnType: Number,
    showTitle: Number,
    showGrouponNum: Number,
    isPreview: Boolean,
    imageFillStyle: Number,
    ratio: String
  },
  data: function data() {
    return {
      isEnd: this.goods.isEnd && !this.isPreview
    };
  },
  computed: {
    imageIconStyle: function imageIconStyle() {
      return {
        backgroundImage: "url(\"" + fullfillImage(this.goods.imageIcon) + "\")"
      };
    },
    imageUrl: function imageUrl() {
      return fullfillImage(this.goods.thumbUrl, IMAGE_MAP[this.size]);
    },
    goodsUrl: function goodsUrl() {
      return this.goods.goodsUrl || 'javascript: void(0);';
    },
    goodsClass: function goodsClass() {
      return {
        'cap-ump-groupon-goods--soldout': !this.hasStock,
        'cap-ump-groupon-goods--end': this.isEnd
      };
    },
    goodsBodyClass: function goodsBodyClass() {
      var _ref;

      return _ref = {}, _ref["cap-ump-groupon-goods__body--btn-" + this.buyBtnType] = true, _ref['cap-ump-groupon-goods__body--no-btn'] = !this.isShowBuyBtn, _ref;
    },
    goodsInfo: function goodsInfo() {
      return this.goods.goodsInfo || {};
    },
    minActivityPrice: function minActivityPrice() {
      var min = this.getMinPrice(this.goods.skuPrices);
      return centToYuan(min);
    },
    minActivityPriceObj: function minActivityPriceObj() {
      var _this$minActivityPric = this.minActivityPrice.match(/(\d+)(\.\d+)/),
          yuan = _this$minActivityPric[1],
          cent = _this$minActivityPric[2];

      return {
        yuan: yuan,
        cent: cent
      };
    },
    minOriginPrice: function minOriginPrice() {
      var min = this.getMinPrice(this.goods.originSkuPrice);
      return centToYuan(min);
    },
    hasStock: function hasStock() {
      return this.goodsInfo.totalStock > 0 || this.isPreview;
    },
    buttonText: function buttonText() {
      return this.hasStock ? '去开团' : '去看看';
    },
    activityTagText: function activityTagText() {
      return this.size === SIZE.SMALL ? '人团' : '人拼团价';
    },
    isShowTitle: function isShowTitle() {
      return this.showTitle === SHOW_TITLE.SHOW;
    },
    isShowBuyBtn: function isShowBuyBtn() {
      return this.showBuyBtn === SHOW_BUY_BTN.SHOW && this.size !== SIZE.SMALL;
    },
    isShowGrouponNum: function isShowGrouponNum() {
      return this.showGrouponNum && this.showGrouponNum === SHOW_GROUP_NUMS.SHOW && this.goods.groupNums > 0;
    }
  },
  methods: {
    getMinPrice: function getMinPrice(collection) {
      var min = Infinity;
      each(collection, function (price) {
        min = Math.min(min, price);
      });
      return min;
    }
  }
};