"use strict";
|
|
exports.__esModule = true;
|
exports.default = exports.bem = void 0;
|
|
var _utils = require("../../utils");
|
|
var _constant = require("../../utils/constant");
|
|
var _relation = require("../../mixins/relation");
|
|
var _bindEvent = require("../../mixins/bind-event");
|
|
// Utils
|
// Mixins
|
var _createNamespace = (0, _utils.createNamespace)('sku-row'),
|
createComponent = _createNamespace[0],
|
bem = _createNamespace[1],
|
t = _createNamespace[2];
|
|
exports.bem = bem;
|
|
var _default = createComponent({
|
mixins: [(0, _relation.ParentMixin)('vanSkuRows'), (0, _bindEvent.BindEventMixin)(function (bind) {
|
if (this.scrollable && this.$refs.scroller) {
|
bind(this.$refs.scroller, 'scroll', this.onScroll);
|
}
|
})],
|
props: {
|
skuRow: Object
|
},
|
data: function data() {
|
return {
|
progress: 0
|
};
|
},
|
computed: {
|
scrollable: function scrollable() {
|
return this.skuRow.largeImageMode && this.skuRow.v.length > 6;
|
}
|
},
|
methods: {
|
onScroll: function onScroll() {
|
var _this$$refs = this.$refs,
|
scroller = _this$$refs.scroller,
|
row = _this$$refs.row;
|
var distance = row.offsetWidth - scroller.offsetWidth;
|
this.progress = scroller.scrollLeft / distance;
|
},
|
genTitle: function genTitle() {
|
var h = this.$createElement;
|
return h("div", {
|
"class": bem('title')
|
}, [this.skuRow.k, this.skuRow.is_multiple && h("span", {
|
"class": bem('title-multiple')
|
}, ["\uFF08", t('multiple'), "\uFF09"])]);
|
},
|
genIndicator: function genIndicator() {
|
var h = this.$createElement;
|
|
if (this.scrollable) {
|
var style = {
|
transform: "translate3d(" + this.progress * 20 + "px, 0, 0)"
|
};
|
return h("div", {
|
"class": bem('indicator-wrapper')
|
}, [h("div", {
|
"class": bem('indicator')
|
}, [h("div", {
|
"class": bem('indicator-slider'),
|
"style": style
|
})])]);
|
}
|
},
|
genContent: function genContent() {
|
var h = this.$createElement;
|
var nodes = this.slots();
|
|
if (this.skuRow.largeImageMode) {
|
var top = [];
|
var bottom = [];
|
nodes.forEach(function (node, index) {
|
var group = Math.floor(index / 3) % 2 === 0 ? top : bottom;
|
group.push(node);
|
});
|
return h("div", {
|
"class": bem('scroller'),
|
"ref": "scroller"
|
}, [h("div", {
|
"class": bem('row'),
|
"ref": "row"
|
}, [top]), bottom.length ? h("div", {
|
"class": bem('row')
|
}, [bottom]) : null]);
|
}
|
|
return nodes;
|
},
|
centerItem: function centerItem(selectSkuId) {
|
if (!this.skuRow.largeImageMode || !selectSkuId) {
|
return;
|
}
|
|
var _this$children = this.children,
|
children = _this$children === void 0 ? [] : _this$children;
|
var _this$$refs2 = this.$refs,
|
scroller = _this$$refs2.scroller,
|
row = _this$$refs2.row;
|
var child = children.find(function (it) {
|
return +it.skuValue.id === +selectSkuId;
|
});
|
|
if (scroller && row && child && child.$el) {
|
var target = child.$el;
|
var to = target.offsetLeft - (scroller.offsetWidth - target.offsetWidth) / 2;
|
scroller.scrollLeft = to;
|
}
|
}
|
},
|
render: function render() {
|
var h = arguments[0];
|
return h("div", {
|
"class": [bem(), _constant.BORDER_BOTTOM]
|
}, [this.genTitle(), this.genContent(), this.genIndicator()]);
|
}
|
});
|
|
exports.default = _default;
|
