From 589d66d68a904523f514b47b17e2871a963d0ae5 Mon Sep 17 00:00:00 2001 From: Waiter Date: Thu, 9 Jan 2020 16:49:55 +0800 Subject: [PATCH] feat(Sku): add properties support (#5525) --- src/sku/Sku.js | 130 ++++++++++++++++++++++----- src/sku/components/SkuRow.tsx | 7 +- src/sku/components/SkuRowPropItem.js | 40 +++++++++ src/sku/demo/data.ts | 62 ++++++++++++- src/sku/index.js | 2 + src/sku/index.less | 4 + src/sku/lang.ts | 5 +- src/sku/utils/skuHelper.js | 25 +++++- types/sku.d.ts | 14 +++ 9 files changed, 261 insertions(+), 28 deletions(-) create mode 100644 src/sku/components/SkuRowPropItem.js diff --git a/src/sku/Sku.js b/src/sku/Sku.js index c11a344c9..406f00094 100644 --- a/src/sku/Sku.js +++ b/src/sku/Sku.js @@ -6,11 +6,12 @@ import SkuHeader from './components/SkuHeader'; import SkuHeaderItem from './components/SkuHeaderItem'; import SkuRow from './components/SkuRow'; import SkuRowItem from './components/SkuRowItem'; +import SkuRowPropItem from './components/SkuRowPropItem'; import SkuStepper from './components/SkuStepper'; import SkuMessages from './components/SkuMessages'; import SkuActions from './components/SkuActions'; import { createNamespace, isDef } from '../utils'; -import { isAllSelected, isSkuChoosable, getSkuComb, getSelectedSkuValues } from './utils/skuHelper'; +import { isAllSelected, isSkuChoosable, getSkuComb, getSelectedSkuValues, getSelectedPropValues } from './utils/skuHelper'; import { LIMIT_TYPE, UNSELECTED_SKU_VALUE_ID } from './constants'; const namespace = createNamespace('sku'); @@ -86,6 +87,7 @@ export default createComponent({ data() { return { selectedSku: {}, + selectedProp: {}, selectedNum: 1, show: this.value }; @@ -147,7 +149,15 @@ export default createComponent({ }, isSkuCombSelected() { - return isAllSelected(this.sku.tree, this.selectedSku); + // SKU 未选完 + if (this.hasSku && !isAllSelected(this.skuTree, this.selectedSku)) { + return false; + } + // 属性未全选 + if (this.propList.some(it => (this.selectedProp[it.k_id] || []).length < 1)) { + return false; + } + return true; }, isSkuEmpty() { @@ -158,27 +168,41 @@ export default createComponent({ return !this.sku.none_sku; }, + hasSkuOrAttr() { + return this.hasSku || this.propList.length > 0; + }, + selectedSkuComb() { - if (!this.hasSku) { - return { - id: this.sku.collection_id, - price: Math.round(this.sku.price * 100), - stock_num: this.sku.stock_num - }; - } + let skuComb = null; if (this.isSkuCombSelected) { - return getSkuComb(this.sku.list, this.selectedSku); + if (this.hasSku) { + skuComb = getSkuComb(this.sku.list, this.selectedSku); + } else { + skuComb = { + id: this.sku.collection_id, + price: Math.round(this.sku.price * 100), + stock_num: this.sku.stock_num + }; + } + if (skuComb) { + skuComb.properties = this.selectedPropValues; + skuComb.property_price = this.selectedPropValues.reduce((acc, cur) => acc + (cur.price || 0), 0); + } } - return null; + return skuComb; }, selectedSkuValues() { return getSelectedSkuValues(this.skuTree, this.selectedSku); }, + selectedPropValues() { + return getSelectedPropValues(this.propList, this.selectedProp); + }, + price() { if (this.selectedSkuComb) { - return (this.selectedSkuComb.price / 100).toFixed(2); + return ((this.selectedSkuComb.price + this.selectedSkuComb.property_price) / 100).toFixed(2); } // sku.price是一个格式化好的价格区间 return this.sku.price; @@ -186,7 +210,7 @@ export default createComponent({ originPrice() { if (this.selectedSkuComb && this.selectedSkuComb.origin_price) { - return (this.selectedSkuComb.origin_price / 100).toFixed(2); + return ((this.selectedSkuComb.origin_price + this.selectedSkuComb.property_price) / 100).toFixed(2); } return this.sku.origin_price; }, @@ -195,6 +219,10 @@ export default createComponent({ return this.sku.tree || []; }, + propList() { + return this.sku.properties || []; + }, + imageList() { const imageList = [this.goods.picture]; @@ -242,15 +270,18 @@ export default createComponent({ selectedText() { if (this.selectedSkuComb) { - return `${t('selected')} ${this.selectedSkuValues.map(item => item.name).join('；')}`; + const values = this.selectedSkuValues.concat(this.selectedPropValues); + return `${t('selected')} ${values.map(item => item.name).join('；')}`; } - const unselected = this.skuTree + const unselectedSku = this.skuTree .filter(item => this.selectedSku[item.k_s] === UNSELECTED_SKU_VALUE_ID) - .map(item => item.k) - .join('；'); + .map(item => item.k); + const unselectedProp = this.propList + .filter(item => (this.selectedProp[item.k_id] || []).length < 1) + .map(item => item.k); - return `${t('select')} ${unselected}`; + return `${t('select')} ${unselectedSku.concat(unselectedProp).join('；')}`; } }, @@ -259,6 +290,7 @@ export default createComponent({ this.skuEventBus = skuEventBus; skuEventBus.$on('sku:select', this.onSelect); + skuEventBus.$on('sku:propSelect', this.onPropSelect); skuEventBus.$on('sku:numChange', this.onNumChange); skuEventBus.$on('sku:previewImage', this.onPreviewImage); skuEventBus.$on('sku:overLimit', this.onOverLimit); @@ -321,6 +353,27 @@ export default createComponent({ }); }); } + + // 重置商品属性 + this.selectedProp = {}; + const { selectedProp = {} } = this.initialSku; + // 只有一个属性值时，默认选中，且选中外部传入信息 + this.propList.forEach(item => { + if (item.v && item.v.length === 1) { + this.selectedProp[item.k_id] = [item.v[0].id]; + } else if (selectedProp[item.k_id]) { + this.selectedProp[item.k_id] = selectedProp[item.k_id]; + } + }); + + const propValues = this.selectedPropValues; + if (propValues.length > 0) { + this.$emit('sku-prop-selected', { + propValue: propValues[propValues.length - 1], + selectedProp: this.selectedProp, + selectedSkuComb: this.selectedSkuComb, + }); + } }, getSkuMessages() { @@ -363,7 +416,28 @@ export default createComponent({ this.$emit('sku-selected', { skuValue, selectedSku: this.selectedSku, - selectedSkuComb: this.selectedSkuComb + selectedSkuComb: this.selectedSkuComb, + }); + }, + + onPropSelect(propValue) { + const arr = this.selectedProp[propValue.skuKeyStr] || []; + const pos = arr.indexOf(propValue.id); + if (pos > -1) { + arr.splice(pos, 1); + } else if (propValue.multiple) { + arr.push(propValue.id); + } else { + arr.splice(0, 1, propValue.id); + } + this.selectedProp = { + ...this.selectedProp, + [propValue.skuKeyStr]: arr, + }; + this.$emit('sku-prop-selected', { + propValue, + selectedProp: this.selectedProp, + selectedSkuComb: this.selectedSkuComb, }); }, @@ -476,6 +550,7 @@ export default createComponent({ originPrice, skuEventBus, selectedSku, + selectedProp, selectedNum, stepperTitle, selectedSkuComb @@ -510,7 +585,7 @@ export default createComponent({ {this.stockText} )} - {this.hasSku && !this.hideSelectedText && ( + {this.hasSkuOrAttr && !this.hideSelectedText && ( {this.selectedText} )} {slots('sku-header-extra')} @@ -519,7 +594,7 @@ export default createComponent({ const Group = slots('sku-group') || - (this.hasSku && ( + (this.hasSkuOrAttr && (
{this.skuTree.map(skuTreeItem => ( @@ -534,6 +609,19 @@ export default createComponent({ ))} ))} + {this.propList.map(skuTreeItem => ( + + {skuTreeItem.v.map(skuValue => ( + + ))} + + ))}
)); diff --git a/src/sku/components/SkuRow.tsx b/src/sku/components/SkuRow.tsx index 213c35221..ae3445966 100644 --- a/src/sku/components/SkuRow.tsx +++ b/src/sku/components/SkuRow.tsx @@ -11,7 +11,7 @@ export type SkuRowProps = { skuRow: SkuTreeItemData; }; -const [createComponent, bem] = createNamespace('sku-row'); +const [createComponent, bem, t] = createNamespace('sku-row'); function SkuRow( h: CreateElement, @@ -19,9 +19,12 @@ function SkuRow( slots: DefaultSlots, ctx: RenderContext ) { + const multipleNode = props.skuRow.is_multiple && ( + （{t('multiple')}） + ); return (
-
{props.skuRow.k}
+
{props.skuRow.k}{multipleNode}
{slots.default && slots.default()}
); diff --git a/src/sku/components/SkuRowPropItem.js b/src/sku/components/SkuRowPropItem.js new file mode 100644 index 000000000..48920c2a2 --- /dev/null +++ b/src/sku/components/SkuRowPropItem.js @@ -0,0 +1,40 @@ +import { createNamespace } from '../../utils'; + +const [createComponent] = createNamespace('sku-row-prop-item'); + +export default createComponent({ + props: { + skuValue: Object, + skuKeyStr: String, + skuEventBus: Object, + selectedProp: Object, + multiple: Boolean, + }, + + methods: { + onSelect() { + this.skuEventBus.$emit('sku:propSelect', { + ...this.skuValue, + skuKeyStr: this.skuKeyStr, + multiple: this.multiple, + }); + }, + }, + + render() { + const choosed = this.selectedProp && (this.selectedProp[this.skuKeyStr] || []).indexOf(this.skuValue.id) > -1; + return ( + + {this.skuValue.name} + + ); + } +}); diff --git a/src/sku/demo/data.ts b/src/sku/demo/data.ts index 22594d2a8..e8447c84e 100644 --- a/src/sku/demo/data.ts +++ b/src/sku/demo/data.ts @@ -178,12 +178,68 @@ export const skuData = { type: 'time', required: 0 } - ] - } + ], + properties: [ + { + k_id: 123, + k: '加冰', + v: [ + { + id: 1222, + name: '少冰', + price: 1, + }, + { + id: 1223, + name: '去冰', + price: 1, + } + ], + }, + { + k_id: 133, + k: '不知道', + v: [ + { + id: 1244, + name: '什么', + price: 9, + } + ], + }, + { + k_id: 124, + k: '加料', + is_multiple: true, + v: [ + { + id: 1224, + name: '布丁', + price: 3, + }, + { + id: 1225, + name: '波霸', + price: 4, + }, + { + id: 1226, + name: '珍珠', + price: 5, + } + ], + } + ], + }, }; export const initialSku = { s1: '30349', s2: '1193', - selectedNum: 3 + selectedNum: 3, + selectedProp: { + 123: [1222], + 133: [1244], + 124: [1225, 1226], + }, }; diff --git a/src/sku/index.js b/src/sku/index.js index e94c5b981..cd1ea96e6 100644 --- a/src/sku/index.js +++ b/src/sku/index.js @@ -8,6 +8,7 @@ import SkuMessages from './components/SkuMessages'; import SkuStepper from './components/SkuStepper'; import SkuRow from './components/SkuRow'; import SkuRowItem from './components/SkuRowItem'; +import SkuRowPropItem from './components/SkuRowPropItem'; import skuHelper from './utils/skuHelper'; import constants from './constants'; @@ -20,6 +21,7 @@ Sku.SkuMessages = SkuMessages; Sku.SkuStepper = SkuStepper; Sku.SkuRow = SkuRow; Sku.SkuRowItem = SkuRowItem; +Sku.SkuRowPropItem = SkuRowPropItem; Sku.skuHelper = skuHelper; Sku.skuConstants = constants; diff --git a/src/sku/index.less b/src/sku/index.less index 21dd53483..e1086d8e4 100644 --- a/src/sku/index.less +++ b/src/sku/index.less @@ -130,6 +130,10 @@ padding-bottom: @padding-sm; } + &__title-multiple { + color: @gray-6; + } + &__item { position: relative; display: inline-flex; diff --git a/src/sku/lang.ts b/src/sku/lang.ts index 90b5c1c1a..7c68e4a39 100644 --- a/src/sku/lang.ts +++ b/src/sku/lang.ts @@ -52,6 +52,9 @@ export default { textarea: '点击填写段落文本', mobile: '输入手机号码' } - } + }, + vanSkuRow: { + multiple: '可多选', + }, } }; diff --git a/src/sku/utils/skuHelper.js b/src/sku/utils/skuHelper.js index b2d9f99ff..4dcbaca60 100644 --- a/src/sku/utils/skuHelper.js +++ b/src/sku/utils/skuHelper.js @@ -42,6 +42,18 @@ export const normalizeSkuTree = skuTree => { return normalizedTree; }; +export const normalizePropList = propList => { + const normalizedProp = {}; + propList.forEach(item => { + const itemObj = {}; + item.v.forEach(it => { + itemObj[it.id] = it; + }); + normalizedProp[item.k_id] = itemObj; + }); + return normalizedProp; +}; + // 判断是否所有的sku都已经选中 export const isAllSelected = (skuTree, selectedSku) => { // 筛选selectedSku对象中key值不为空的值 @@ -104,10 +116,21 @@ export const isSkuChoosable = (skuList, selectedSku, skuToChoose) => { return stock > 0; }; +export const getSelectedPropValues = (propList, selectedProp) => { + const normalizeProp = normalizePropList(propList); + return Object.keys(selectedProp).reduce((acc, cur) => { + selectedProp[cur].forEach(it => { + acc.push(normalizeProp[cur][it]); + }); + return acc; + }, []); +}; + export default { normalizeSkuTree, getSkuComb, getSelectedSkuValues, isAllSelected, - isSkuChoosable + isSkuChoosable, + getSelectedPropValues, }; diff --git a/types/sku.d.ts b/types/sku.d.ts index 7bbf15d6c..d197d9c1f 100644 --- a/types/sku.d.ts +++ b/types/sku.d.ts @@ -10,6 +10,7 @@ export type SkuData = { tree: SkuTreeItemData[]; list: SkuListItemData[]; messages: SkuMessageData[]; + properties: SkuPropItemData[]; }; export type SkuTreeItemData = { @@ -26,6 +27,19 @@ export type SkuTreeItemValueData = { previewImgUrl?: string; }; +export type SkuPropItemData = { + k: string; + v: SkuPropItemValueData[]; + k_id: number; + is_multiple?: boolean; +}; + +export type SkuPropItemValueData = { + id: string; + name: string; + price?: number; +}; + export type SkuListItemData = { id: number; s1: string;