diff --git a/packages/sku/components/SkuActions.js b/packages/sku/components/SkuActions.js index 6b329bb7e..3a4be09ee 100644 --- a/packages/sku/components/SkuActions.js +++ b/packages/sku/components/SkuActions.js @@ -1,32 +1,33 @@ import { use } from '../../utils'; +import { inherit } from '../../utils/functional'; import Button from '../../button'; const [sfc, bem] = use('sku-actions'); -export default sfc({ - props: { - buyText: String, - skuEventBus: Object, - showAddCartBtn: Boolean - }, +function SkuActions(h, props, slots, ctx) { + const emit = name => () => { + props.skuEventBus.$emit(name); + }; - render(h) { - const emit = name => () => { - this.skuEventBus.$emit(name); - }; + return ( + <div class={bem()} {...inherit(ctx)}> + {props.showAddCartBtn && ( + <Button bottomAction text="加入购物车" onClick={emit('sku:addCart')} /> + )} + <Button + type="primary" + bottomAction + text={props.buyText || '立即购买'} + onClick={emit('sku:buy')} + /> + </div> + ); +} - return ( - <div class={bem()}> - {this.showAddCartBtn && ( - <Button bottomAction text="加入购物车" onClick={emit('sku:addCart')} /> - )} - <Button - type="primary" - bottomAction - text={this.buyText || '立即购买'} - onClick={emit('sku:buy')} - /> - </div> - ); - } -}); +SkuActions.props = { + buyText: String, + skuEventBus: Object, + showAddCartBtn: Boolean +}; + +export default sfc(SkuActions); diff --git a/packages/sku/components/SkuHeader.js b/packages/sku/components/SkuHeader.js index 76566f75e..771ed39a7 100644 --- a/packages/sku/components/SkuHeader.js +++ b/packages/sku/components/SkuHeader.js @@ -1,61 +1,57 @@ import { use } from '../../utils'; +import { inherit } from '../../utils/functional'; 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; +function getSkuImg(sku, selectedSku) { + const id = selectedSku.s1; + if (id) { + // skuImg 挂载在 skuTree 中 s1 上 + const treeItem = sku.tree.filter(item => item.k_s === 's1')[0] || {}; + if (treeItem.v) { 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); + if (matchedSku) { + return matchedSku.imgUrl || matchedSku.img_url; + } } - }, - - render(h) { - return ( - <div class={[bem(), 'van-hairline--bottom']}> - <div class={bem('img-wrap')} onClick={this.previewImage}> - <img src={this.goodsImg} /> - </div> - <div class={bem('goods-info')}> - <div class="van-sku__goods-name van-ellipsis">{this.goods.title}</div> - {this.slots()} - <Icon - name="close" - class="van-sku__close-icon" - onClick={() => { - this.skuEventBus.$emit('sku:close'); - }} - /> - </div> - </div> - ); } -}); +} + +function SkuHeader(h, props, slots, ctx) { + const { sku, goods, skuEventBus, selectedSku } = props; + const goodsImg = getSkuImg(sku, selectedSku) || goods.picture; + + const previewImage = () => { + skuEventBus.$emit('sku:previewImage', goodsImg); + }; + + return ( + <div class={[bem(), 'van-hairline--bottom']} {...inherit(ctx)}> + <div class={bem('img-wrap')} onClick={previewImage}> + <img src={goodsImg} /> + </div> + <div class={bem('goods-info')}> + <div class="van-sku__goods-name van-ellipsis">{goods.title}</div> + {slots.default && slots.default()} + <Icon + name="close" + class="van-sku__close-icon" + onClick={() => { + skuEventBus.$emit('sku:close'); + }} + /> + </div> + </div> + ); +} + +SkuHeader.props = { + sku: Object, + goods: Object, + skuEventBus: Object, + selectedSku: Object +}; + +export default sfc(SkuHeader); diff --git a/packages/sku/components/SkuRow.js b/packages/sku/components/SkuRow.js index ec38fc7fa..0d0f6edb5 100644 --- a/packages/sku/components/SkuRow.js +++ b/packages/sku/components/SkuRow.js @@ -1,18 +1,19 @@ import { use } from '../../utils'; +import { inherit } from '../../utils/functional'; const [sfc, bem] = use('sku-row'); -export default sfc({ - props: { - skuRow: Object - }, +function SkuRow(h, props, slots, ctx) { + return ( + <div class={bem()} {...inherit(ctx)}> + <div class={bem('title')}>{props.skuRow.k}:</div> + {slots.default && slots.default()} + </div> + ); +} - render(h) { - return ( - <div class={bem()}> - <div class={bem('title')}>{this.skuRow.k}:</div> - {this.slots()} - </div> - ); - } -}); +SkuRow.props = { + skuRow: Object +}; + +export default sfc(SkuRow);