diff --git a/packages/sku/Sku.vue b/packages/sku/Sku.js similarity index 68% rename from packages/sku/Sku.vue rename to packages/sku/Sku.js index 89839256d..aefceefb4 100644 --- a/packages/sku/Sku.vue +++ b/packages/sku/Sku.js @@ -1,132 +1,3 @@ - - - diff --git a/packages/sku/components/SkuActions.js b/packages/sku/components/SkuActions.js new file mode 100644 index 000000000..3de4f0404 --- /dev/null +++ b/packages/sku/components/SkuActions.js @@ -0,0 +1,32 @@ +import { use } from '../../utils'; +import Button from '../../button'; + +const [sfc, bem] = use('sku-actions'); + +export default sfc({ + props: { + buyText: String, + skuEventBus: Object, + showAddCartBtn: Boolean + }, + + render(h) { + const emit = name => () => { + this.skuEventBus.$emit('sku:addCart'); + }; + + return ( +
+ {this.showAddCartBtn && ( +
+ ); + } +}); diff --git a/packages/sku/components/SkuActions.vue b/packages/sku/components/SkuActions.vue deleted file mode 100644 index 8ed477bb6..000000000 --- a/packages/sku/components/SkuActions.vue +++ /dev/null @@ -1,35 +0,0 @@ - - - diff --git a/packages/sku/components/SkuHeader.js b/packages/sku/components/SkuHeader.js new file mode 100644 index 000000000..e58647f28 --- /dev/null +++ b/packages/sku/components/SkuHeader.js @@ -0,0 +1,61 @@ +import { use } from '../../utils'; +import Icon from '../../icon'; + +const [sfc, bem] = use('sku-header'); + +export default sfc({ + props: { + sku: Object, + goods: Object, + skuEventBus: Object, + selectedSku: Object + }, + + computed: { + goodsImg() { + const s1Id = this.selectedSku.s1; + const skuImg = this.getSkuImg(s1Id); + // 优先使用选中 sku 的图片 + return skuImg || this.goods.picture; + } + }, + + methods: { + getSkuImg(id) { + if (!id) return; + + // skuImg 挂载在 skuTree 中 s1 上 + const treeItem = this.sku.tree.filter(item => item.k_s === 's1')[0] || {}; + + if (!treeItem.v) return; + + const matchedSku = treeItem.v.filter(skuValue => skuValue.id === id)[0]; + if (matchedSku) return matchedSku.imgUrl || matchedSku.img_url; + }, + + previewImage() { + this.skuEventBus.$emit('sku:previewImage', this.goodsImg); + } + }, + + render(h) { + return ( +
+
+ +
+
+
{this.goods.title}
+ {this.$slots.default} + { + this.skuEventBus.$emit('sku:close'); + }} + /> +
+
+ ); + } +}); diff --git a/packages/sku/components/SkuHeader.vue b/packages/sku/components/SkuHeader.vue deleted file mode 100644 index 2015c3a38..000000000 --- a/packages/sku/components/SkuHeader.vue +++ /dev/null @@ -1,68 +0,0 @@ - - - diff --git a/packages/sku/components/SkuImgUploader.js b/packages/sku/components/SkuImgUploader.js new file mode 100644 index 000000000..a9200b2e5 --- /dev/null +++ b/packages/sku/components/SkuImgUploader.js @@ -0,0 +1,103 @@ +import { use } from '../../utils'; +import Icon from '../../icon'; +import Loading from '../../loading'; +import Uploader from '../../uploader'; + +const [sfc, bem] = use('sku-img-uploader'); + +export default sfc({ + props: { + value: String, + uploadImg: Function, + maxSize: { + type: Number, + default: 6 + } + }, + + data() { + return { + // 正在上传的图片 base64 + paddingImg: '' + }; + }, + + computed: { + imgList() { + return this.value && !this.paddingImg ? [this.value] : []; + } + }, + + methods: { + afterReadFile(file) { + // 上传文件 + this.paddingImg = file.content; + this.uploadImg(file.file, file.content) + .then(img => { + this.$emit('input', img); + this.$nextTick(() => { + this.paddingImg = ''; + }); + }) + .catch(() => { + this.paddingImg = ''; + }); + }, + + onOversize() { + this.$toast(`最大可上传图片为${this.maxSize}MB，请尝试压缩图片尺寸`); + } + }, + + render(h) { + const { imgList, paddingImg } = this; + + const ImageList = (paddingImg || imgList.length > 0) && ( +
+ {imgList.map(img => ( +
+ + { + this.$emit('input', ''); + }} + /> +
+ ))} + {paddingImg && ( +
+ + +
+ )} +
+ ); + + return ( +
+ +
+ {paddingImg ? ( +
正在上传...
+ ) : ( + [ + , + {this.value ? '重拍' : '拍照'} 或 , + , + {this.value ? '重新选择照片' : '选择照片'} + ] + )} +
+ + {ImageList} +
+ ); + } +}); diff --git a/packages/sku/components/SkuImgUploader.vue b/packages/sku/components/SkuImgUploader.vue deleted file mode 100644 index 5e56301f0..000000000 --- a/packages/sku/components/SkuImgUploader.vue +++ /dev/null @@ -1,104 +0,0 @@ - - - diff --git a/packages/sku/components/SkuMessages.vue b/packages/sku/components/SkuMessages.js similarity index 68% rename from packages/sku/components/SkuMessages.vue rename to packages/sku/components/SkuMessages.js index bc9538b8d..89aac5dca 100644 --- a/packages/sku/components/SkuMessages.vue +++ b/packages/sku/components/SkuMessages.js @@ -1,41 +1,13 @@ - - - diff --git a/packages/sku/components/SkuRow.js b/packages/sku/components/SkuRow.js new file mode 100644 index 000000000..76abaa881 --- /dev/null +++ b/packages/sku/components/SkuRow.js @@ -0,0 +1,18 @@ +import { use } from '../../utils'; + +const [sfc, bem] = use('sku-row'); + +export default sfc({ + props: { + skuRow: Object + }, + + render(h) { + return ( +
+
{this.skuRow.k}：
+ {this.$slots.default} +
+ ); + } +}); diff --git a/packages/sku/components/SkuRow.vue b/packages/sku/components/SkuRow.vue deleted file mode 100644 index 7e238a644..000000000 --- a/packages/sku/components/SkuRow.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/packages/sku/components/SkuRowItem.js b/packages/sku/components/SkuRowItem.js new file mode 100644 index 000000000..88e8df0ca --- /dev/null +++ b/packages/sku/components/SkuRowItem.js @@ -0,0 +1,53 @@ +import { use } from '../../utils'; +import { isSkuChoosable } from '../utils/skuHelper'; + +const [sfc] = use('sku-row-item'); + +export default sfc({ + props: { + skuList: Array, + skuValue: Object, + skuKeyStr: String, + skuEventBus: Object, + selectedSku: Object + }, + + computed: { + choosable() { + return isSkuChoosable(this.skuList, this.selectedSku, { + key: this.skuKeyStr, + valueId: this.skuValue.id + }); + } + }, + + methods: { + onSelect() { + if (this.choosable) { + this.skuEventBus.$emit('sku:select', { + ...this.skuValue, + skuKeyStr: this.skuKeyStr + }); + } + } + }, + + render(h) { + const choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr]; + + return ( + + {this.skuValue.name} + + ); + } +}); diff --git a/packages/sku/components/SkuRowItem.vue b/packages/sku/components/SkuRowItem.vue deleted file mode 100644 index ac68dd206..000000000 --- a/packages/sku/components/SkuRowItem.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - diff --git a/packages/sku/components/SkuStepper.vue b/packages/sku/components/SkuStepper.js similarity index 75% rename from packages/sku/components/SkuStepper.vue rename to packages/sku/components/SkuStepper.js index 8497768fc..b2b593407 100644 --- a/packages/sku/components/SkuStepper.vue +++ b/packages/sku/components/SkuStepper.js @@ -1,55 +1,22 @@ - - -