captain-ui/lib/ump-timelimited-discount/components/goods.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 _index = _interopRequireDefault(require("../../countdown/index"));

var _goodsImg = _interopRequireDefault(require("./goodsImg"));

var _constant = require("../constant");

var _components;

var IMAGE_MAP = {
  0: '!730x0.jpg',
  1: '!520x0.jpg',
  2: '!290x0.jpg'
};
var _default = {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('a', {
      class: ['cap-ump-limitdiscount-goods', {
        'cap-ump-limitdiscount-goods--soldout': !_vm.hasStock,
        'cap-ump-limitdiscount-goods--end': _vm.isEnd,
        'cap-ump-limitdiscount-goods--not-start': _vm.isNotStart
      }],
      attrs: {
        "href": _vm.goodsUrl
      }
    }, [_c('div', {
      staticClass: "cap-ump-limitdiscount-goods__header"
    }, [_c('cap-ump-limitdiscount-goods-img', {
      attrs: {
        "ratio": _vm.ratio,
        "img-url": _vm.imageUrl,
        "size": _vm.size,
        "fill-style": _vm.imageFillStyle,
        "goods-id": _vm.goods.itemId,
        "show-mask": (!_vm.hasStock || _vm.isEnd) && !_vm.isPreview
      }
    }), _c('div', {
      staticClass: "cap-ump-limitdiscount-goods__tag-info"
    }, [_vm.isShowActivityTag ? _c('span', {
      staticClass: "cap-ump-limitdiscount-goods__tag"
    }, [_vm._v("\n        " + _vm._s(_vm.goods.description || '限时折扣') + "\n      ")]) : _vm._e(), _vm.isShowCountdown ? _c('div', {
      staticClass: "cap-ump-limitdiscount-goods__tag-countdown"
    }, [_c('span', {
      staticClass: "cap-ump-limitdiscount-goods__countdown-text"
    }, [_vm._v(_vm._s(_vm.countdownText))]), _c('cap-countdown', {
      staticClass: "cap-ump-limitdiscount-goods__countdown",
      attrs: {
        "time-style": "white",
        "prevent-init": _vm.preventCountdownInit,
        "time-separator": _vm.timeSeparator,
        "start": _vm.goods.startAt,
        "end": _vm.goods.endAt,
        "hide-zero-day": ""
      },
      on: {
        "timechange": _vm.handleTimeChange,
        "countdown-started": _vm.handleCountdownStart,
        "countdown-ended": _vm.handleCountdownEnd
      }
    })], 1) : _vm._e()])], 1), _c('div', {
      staticClass: "cap-ump-limitdiscount-goods__content"
    }, [_vm.showTitle ? _c('h3', {
      staticClass: "cap-ump-limitdiscount-goods__title"
    }, [_c('span', {
      staticClass: "cap-ump-limitdiscount-goods__discount"
    }, [_vm._v(_vm._s(_vm.discount))]), _vm._v("\n      " + _vm._s(_vm.goods.title) + "\n    ")]) : _vm._e(), _vm.showSalesDetail ? _c('div', {
      staticClass: "cap-ump-limitdiscount-goods__sales-wrap"
    }, [_c('div', {
      staticClass: "cap-ump-limitdiscount-goods__bar"
    }, [_c('div', {
      staticClass: "cap-ump-limitdiscount-goods__bar-inner",
      style: "width: " + _vm.salePercent + "%"
    })]), _c('div', {
      staticClass: "cap-ump-limitdiscount-goods__sales-info"
    }, [_c('p', {
      staticClass: "cap-ump-limitdiscount-goods__sales"
    }, [_vm._v("已抢 " + _vm._s(_vm.goods.totalSoldNum) + " 件")]), _vm.showStockNum ? _c('p', {
      staticClass: "cap-ump-limitdiscount-goods__rest"
    }, [_vm._v("\n          仅剩"), _c('span', {
      staticClass: "cap-ump-limitdiscount-goods__rest-num"
    }, [_vm._v(_vm._s(_vm.goods.stockNum))]), _vm._v("件\n        ")]) : _vm._e()])]) : _vm._e(), _c('div', {
      staticClass: "cap-ump-limitdiscount-goods__detail"
    }, [_c('div', {
      staticClass: "cap-ump-limitdiscount-goods__price"
    }, [_c('span', {
      staticClass: "cap-ump-limitdiscount-goods__price-symbol"
    }, [_vm._v("¥")]), _c('span', {
      staticClass: "cap-ump-limitdiscount-goods__price-yuan"
    }, [_vm._v(_vm._s(_vm.price.yuan))]), _c('span', {
      staticClass: "cap-ump-limitdiscount-goods__price-cent"
    }, [_vm._v(_vm._s(_vm.price.cent))])]), _c('div', {
      staticClass: "cap-ump-limitdiscount-goods__origin-price"
    }, [_c('span', {
      staticClass: "cap-ump-limitdiscount-goods__origin-price-symbol"
    }, [_vm._v("¥")]), _vm._v(_vm._s(_vm.goods.price) + "\n      ")])]), _vm.isShowMicroCountdown ? _c('cap-countdown', {
      staticClass: "cap-ump-limitdiscount-goods__countdown--mirco",
      attrs: {
        "time-style": "white",
        "prevent-init": _vm.preventCountdownInit,
        "time-separator": _vm.timeSeparator,
        "start": _vm.goods.startAt,
        "end": _vm.goods.endAt
      },
      on: {
        "timechange": _vm.handleTimeChange,
        "countdown-started": _vm.handleCountdownStart,
        "countdown-ended": _vm.handleCountdownEnd
      }
    }) : _vm._e(), _c('div', {
      staticClass: "cap-ump-limitdiscount-goods__bottom"
    }, [_vm.isShowStockNum ? _c('div', {
      staticClass: "cap-ump-limitdiscount-goods__rest"
    }, [_vm._v("\n        仅剩 "), _c('span', {
      staticClass: "cap-ump-limitdiscount-goods__rest-num"
    }, [_vm._v(_vm._s(_vm.goods.stockNum))]), _vm._v(" 件\n      ")]) : _vm._e(), _vm.showBuyBtn ? _c('div', {
      staticClass: "cap-ump-limitdiscount-goods__action"
    }, [_vm._v("\n        " + _vm._s(_vm.btnText) + "\n      ")]) : _vm._e()])], 1)]);
  },
  name: 'cap-ump-limitdiscount-goods',
  components: (_components = {}, _components[_index.default.name] = _index.default, _components[_goodsImg.default.name] = _goodsImg.default, _components),
  props: {
    ratio: String,
    size: Number,
    goods: Object,
    activityStatus: Number,
    showBuyBtn: Number,
    showTitle: Number,
    showTimeLimit: Number,
    showStockNum: Number,
    showCountdown: Number,
    imageFillStyle: Number,
    isPreview: Boolean
  },
  data: function data() {
    return {
      leftDay: null,
      status: this.activityStatus,
      timeSeparator: ['天', '时', '分', '秒']
    };
  },
  computed: {
    imageUrl: function imageUrl() {
      return (0, _fullfillImage.default)(this.goods.imageUrl, IMAGE_MAP[this.size]);
    },
    canSell: function canSell() {
      return !this.isEnd && !this.isNotStart && this.hasStock;
    },
    preventCountdownInit: function preventCountdownInit() {
      return this.isPreview || this.isEnd || !this.hasStock;
    },
    goodsUrl: function goodsUrl() {
      return this.isPreview ? '' : this.goods.kdtUrl;
    },
    hasStock: function hasStock() {
      return this.goods.stockNum > 0;
    },
    showSalesDetail: function showSalesDetail() {
      return this.size !== _constant.SIZE.small && (this.isPreview || this.canSell) && this.showTimeLimit;
    },
    salePercent: function salePercent() {
      var _this$goods = this.goods,
          totalSoldNum = _this$goods.totalSoldNum,
          stockNum = _this$goods.stockNum;
      return Math.ceil(totalSoldNum / (totalSoldNum + stockNum) * 100);
    },
    countdownText: function countdownText() {
      if (this.isNotStart) {
        return '距开抢还剩：';
      }

      if (this.isEnd) {
        return '';
      }

      if ([_constant.SIZE.list, _constant.SIZE.small].indexOf(this.size) > -1) {
        return this.leftDay === 0 ? '仅剩' : '';
      }

      return '距结束还剩：';
    },
    isNotStart: function isNotStart() {
      return this.status === _constant.ACTIVITY_STATUS.notStart;
    },
    isEnd: function isEnd() {
      return this.status === _constant.ACTIVITY_STATUS.end;
    },
    isShowActivityTag: function isShowActivityTag() {
      return this.size === _constant.SIZE.big;
    },
    isShowCountdown: function isShowCountdown() {
      return this.showCountdown && !this.isShowMicroCountdown && (this.size === _constant.SIZE.big || this.hasStock && !this.isEnd && this.size !== _constant.SIZE.big);
    },
    isShowMicroCountdown: function isShowMicroCountdown() {
      return this.showCountdown && this.size === _constant.SIZE.list && this.isNotStart;
    },
    isShowStockNum: function isShowStockNum() {
      return this.showStockNum && this.size === _constant.SIZE.small && this.canSell;
    },
    discount: function discount() {
      if (+this.goods.discountType === _constant.DISCOUNT_TYPE.discount) {
        return this.goods.discountValue + "\u6298";
      }

      if (+this.goods.discountType === _constant.DISCOUNT_TYPE.amount) {
        return "\u51CF" + this.goods.discountValue + "\u5143";
      }

      return '';
    },
    price: function price() {
      var _this$goods$discountP = this.goods.discountPrice.match(/(\d+)(\.\d+)/),
          yuan = _this$goods$discountP[1],
          cent = _this$goods$discountP[2];

      return {
        yuan: yuan,
        cent: cent
      };
    },
    btnText: function btnText() {
      if (this.isNotStart) {
        return '即将开抢';
      }

      if (this.isEnd || !this.hasStock) {
        return '去看看';
      }

      return '立即抢购';
    }
  },
  methods: {
    handleTimeChange: function handleTimeChange(val) {
      this.leftDay = val.day;
    },
    handleCountdownStart: function handleCountdownStart() {
      this.status = _constant.ACTIVITY_STATUS.start;
    },
    handleCountdownEnd: function handleCountdownEnd() {
      this.status = _constant.ACTIVITY_STATUS.end;
    }
  }
};
exports.default = _default;