captain-ui
Version:
有赞vue wap业务组件库
338 lines (301 loc) • 9.16 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
require("vant/es/cell/style");
var _cell = _interopRequireDefault(require("vant/es/cell"));
require("vant/es/cell-group/style");
var _cellGroup = _interopRequireDefault(require("vant/es/cell-group"));
var _item = _interopRequireDefault(require("./components/item"));
var _multiItem = _interopRequireDefault(require("./components/multi-item"));
var _emitter = _interopRequireDefault(require("../common/mixins/emitter"));
var _constants = require("./constants");
var _components;
var _default2 = {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "cap-goods-list"
}, [_vm.layout === 1 && _vm.sizeType === 1 || _vm.width >= 540 && _vm.layout === 0 ? [_c('div', {
staticClass: "cap-goods-list__container cap-goods-list__container--waterfall",
class: [_vm.waterfallSizeClass]
}, _vm._l(_vm.waterfallListParts, function (part, index) {
return _c('ul', {
key: index,
staticClass: "cap-goods-list__items"
}, _vm._l(part, function (item) {
return _c('li', {
key: item.id,
staticClass: "cap-goods-list__item-wrapper"
}, [_c('vm-item', {
attrs: {
"layout": _vm.layout,
"goods-info": item,
"size-type": _vm.sizeType,
"show-buy-button": _vm.showBuyButton,
"show-title": _vm.showTitle,
"show-sub-title": false,
"show-price": _vm.showPrice,
"show-corner-mark": _vm.showCornerMark,
"corner-mark-type": _vm.cornerMarkType,
"corner-mark-image": _vm.cornerMarkImage,
"buy-button-type": _vm.buyButtonType,
"buy-btn-express": _vm.buyBtnExpress,
"image-ratio": _vm.imageRatio,
"button-text": _vm.buttonText
},
on: {
"buy-btn-click": function buyBtnClick($event) {
_vm.handleBuyBtnClick(item);
},
"wish-btn-click": _vm.handleWishBtnClick
}
})], 1);
}), 0);
}), 0)] : _vm.sizeType === 4 ? [_c('ul', {
staticClass: "cap-goods-list__container--multi"
}, _vm._l(_vm.list, function (item, index) {
return _c('li', {
key: index,
staticClass: "cap-goods-list__wrapper cap-goods-list__wrapper--multi"
}, [_c('vm-multi-item', {
attrs: {
"goods-info": item,
"show-sub-title": _vm.showSubTitle,
"max-image": _vm.maxImage
},
on: {
"buy-btn-click": function buyBtnClick($event) {
_vm.handleBuyBtnClick(item);
}
}
})], 1);
}), 0)] : [_c('ul', {
staticClass: "cap-goods-list__container",
class: [_vm.layoutClass, _vm.widthClass, _vm.sizeTypeClass, _vm.nowrapClass]
}, _vm._l(_vm.list, function (item, index) {
return _c('li', {
key: index,
staticClass: "cap-goods-list__wrapper",
class: {
'cap-goods-list__wrapper--hybrid-big': _vm.layout === 2 && index % 3 === 0,
'cap-goods-list__wrapper--hybrid-small': _vm.layout === 2 && index % 3 !== 0
}
}, [_c('vm-item', {
attrs: {
"layout": _vm.layout,
"goods-info": item,
"size-type": _vm.sizeType,
"show-buy-button": _vm.showBuyButton,
"show-title": _vm.showTitle,
"show-sub-title": _vm.showSubTitle,
"show-sold-num": _vm.showSoldNum,
"show-price": _vm.showPrice,
"buy-button-type": _vm.buyButtonType,
"buy-btn-express": _vm.buyBtnExpress,
"item-index": index,
"show-corner-mark": _vm.showCornerMark,
"corner-mark-type": _vm.cornerMarkType,
"corner-mark-image": _vm.cornerMarkImage,
"image-ratio": _vm.imageRatio,
"image-fill-style": _vm.imageFillStyle,
"button-text": _vm.buttonText
},
on: {
"buy-btn-click": function buyBtnClick($event) {
_vm.handleBuyBtnClick(item);
},
"wish-btn-click": _vm.handleWishBtnClick
}
})], 1);
}), 0)]], 2);
},
name: 'cap-goods-list',
components: (_components = {}, _components[_cellGroup.default.name] = _cellGroup.default, _components[_cell.default.name] = _cell.default, _components['vm-item'] = _item.default, _components['vm-multi-item'] = _multiItem.default, _components),
mixins: [_emitter.default],
props: {
list: {
type: Array,
default: function _default() {
return [];
}
},
/**
* 列表样式：
* 0: 大图，1: 小图， 2: 一大两小， 3: 详细列表，5: 一行三个，6: 左右滑动
*/
layout: {
type: Number,
default: 0
},
/**
* 0: 卡片样式，1: 瀑布流， 2: 极简样式， 3: 促销， 4: 多图商品
*/
sizeType: {
type: Number,
default: 0
},
/**
* 是否显示商品名
*/
showTitle: {
type: Boolean,
default: true
},
/**
* 是否显示商品简介
*/
showSubTitle: Boolean,
/**
* 是否显示价格
*/
showPrice: {
type: Boolean,
default: true
},
/**
* 是否显示购买按钮
*/
showBuyButton: {
type: Boolean,
default: true
},
/**
* 购买按钮样式
*/
buyButtonType: {
type: Number,
default: 1
},
buyBtnExpress: {
type: Boolean,
default: false
},
showSoldNum: {
type: Boolean,
default: false
},
/**
* 是否显示角标
*/
showCornerMark: Boolean,
/**
* 角标样式（0: 新品, 1: 热卖, 2: NEW, 3: HOT）
*/
cornerMarkType: {
type: Number,
default: 0
},
/**
* 自定义角标图片
*/
cornerMarkImage: {
type: String,
default: ''
},
/**
* 图片显示比例，只有大图样式才有
*/
imageRatio: Number,
/**
* 图片显示模式（1: 填充，2: 留白）
*/
imageFillStyle: {
type: Number,
default: 2
},
/**
* 自定义购买按钮文案
*/
buttonText: String,
/**
* 最多显示的图片数量
*/
maxImage: {
type: Number,
default: 3
}
},
data: function data() {
return {
width: 0
};
},
computed: {
waterfallListParts: function waterfallListParts() {
var width = this.width;
var layout = this.layout;
var sizeType = this.sizeType;
var isSmallWaterfall = layout === 1 && sizeType === 1;
var list = this.list; // 小图瀑布流布局且大于540时，分三列
// 宽度大于540时，大图布局分两列瀑布流
if (width >= 540 && isSmallWaterfall) {
return this.splitArrayByRow(list, 3);
}
if (width >= 540 && layout === 0 || width < 540 && isSmallWaterfall) {
return this.splitArrayByRow(list, 2);
}
return null;
},
waterfallSizeClass: function waterfallSizeClass() {
var waterfallListParts = this.waterfallListParts || [];
return "cap-goods-list__container--waterfall-" + waterfallListParts.length;
},
layoutClass: function layoutClass() {
var layout = this.layout || 0;
return "cap-goods-list__container--" + _constants.layoutMap[layout];
},
widthClass: function widthClass() {
if (this.width >= 540) {
return 'cap-goods-list__container--540';
}
return '';
},
sizeTypeClass: function sizeTypeClass() {
return "cap-goods-list__container--" + _constants.sizeTypeMap[this.sizeType];
},
nowrapClass: function nowrapClass() {
return this.layout === 6 ? 'nowrap' : '';
}
},
mounted: function mounted() {
this.width = this.$el.getBoundingClientRect().width;
},
methods: {
/**
* 将数组根据rowNum进行几等分
*/
splitArrayByRow: function splitArrayByRow(arr, rowNum) {
var result = [];
for (var i = 0; i < arr.length; i += rowNum) {
for (var j = 0; j < rowNum; j++) {
if (!result[j]) {
result[j] = [];
}
if (arr[i + j]) {
result[j].push(arr[i + j]);
}
}
}
return result;
},
handleBuyBtnClick: function handleBuyBtnClick(goodsInfo) {
this.$emit('buy-btn-click', goodsInfo);
},
handleWishBtnClick: function handleWishBtnClick(goodsInfo, isAdded) {
this.$emit('wish-btn-click', goodsInfo, isAdded);
},
/**
* 根据goods_id来设置按钮loading状态
*/
setBuyBtnLoading: function setBuyBtnLoading(id, loading) {
this.broadcast('cap-goods-list-item', 'loading-change', {
id: id,
loading: loading
});
}
}
};
exports.default = _default2;