captain-ui/es/goods-list/components/multi-item.js

有赞vue wap业务组件库

import BuyButton from './buy-button';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('a', {
      staticClass: "cap-goods-list__multi-item",
      attrs: {
        "href": _vm.goodsInfo.url
      }
    }, [_c('h3', {
      staticClass: "title"
    }, [_vm._v("\n    " + _vm._s(_vm.goodsInfo.title) + "\n  ")]), _vm.showSubTitle ? _c('p', {
      staticClass: "sub-title"
    }, [_vm._v("\n    " + _vm._s(_vm.goodsInfo.sub_title) + "\n  ")]) : _vm._e(), _c('div', {
      staticClass: "cap-goods-list__img-list",
      class: {
        'cap-goods-list__img-list--onepic': _vm.imageUrlArr.length === 1,
        'cap-goods-list__img-list--fourpic': _vm.imageUrlArr.length === 4,
        'cap-goods-list__photo--soldout': (+_vm.goodsInfo.sold_status === 2 || +_vm.goodsInfo.total_stock === 0) && +_vm.goodsInfo.buy_way !== 0
      }
    }, [_vm._l(_vm.imageUrlArr, function (imageUrl, index) {
      return _c('div', {
        key: index,
        staticClass: "cap-goods-list__img-wrapper"
      }, [_c('img', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy",
          value: imageUrl,
          expression: "imageUrl"
        }],
        staticClass: "cap-goods-list__img",
        class: [_vm.imgClass],
        attrs: {
          "data-lazy-log": "1",
          "data-lazy-log-id": _vm.goodsInfo.id
        }
      })]);
    }), _vm._l(_vm.skeletonNum, function (skeleton, index) {
      return _c('div', {
        key: "skeleton-" + index,
        staticClass: "cap-goods-list__img-wrapper"
      });
    })], 2), _c('div', {
      staticClass: "cap-goods-list__footer cap-goods-list__info"
    }, [_c('p', {
      staticClass: "sale-info"
    }, [_c('em', [_vm._v("¥ " + _vm._s(_vm.goodsInfo.price))])]), _c('vm-buy-button', {
      attrs: {
        "is-loading": _vm.buyBtnIsLoading,
        "buy-button-type": 1
      },
      on: {
        "click": _vm.handlerBuyButtonClick
      }
    })], 1)]);
  },
  name: 'cap-goods-list-multi-item',
  components: {
    'vm-buy-button': BuyButton
  },
  props: {
    goodsInfo: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    showSubTitle: {
      type: Boolean,
      default: true
    },
    maxImage: {
      type: Number,
      default: 3,
      validator: function validator(val) {
        return val >= 1 && val <= 9;
      }
    }
  },
  data: function data() {
    var imageUrlArr;
    var skeletonNum;

    if (Array.isArray(this.goodsInfo.image_url)) {
      imageUrlArr = this.goodsInfo.image_url.slice(0, this.maxImage);
    } else {
      imageUrlArr = [this.goodsInfo.image_url];
    }

    if (imageUrlArr.length === 5) {
      skeletonNum = 1;
    } else if (imageUrlArr.length > 6) {
      skeletonNum = 9 - imageUrlArr.length;
    }

    return {
      buyBtnIsLoading: false,
      width: null,
      photoSizeInfo: {},
      skeletonNum: skeletonNum,
      imageUrlArr: imageUrlArr
    };
  },
  mounted: function mounted() {
    var _this = this;

    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');
    }
  }
};