修复sku错误文案显示,增加sku-body-top slot,增加resetSelectedSkuOnHide参数

This commit is contained in:
niunai 2018-01-23 20:15:25 +08:00
parent 439899018c
commit 1c8d77e466
7 changed files with 25 additions and 3 deletions

View File

@ -366,7 +366,7 @@ export default {
extend: null, extend: null,
kdt_id: 55, kdt_id: 55,
discount_price: 0, discount_price: 0,
stock_num: 6, stock_num: 4,
stock_mode: 0, stock_mode: 0,
is_sell: null, is_sell: null,
combin_sku: false, combin_sku: false,
@ -506,7 +506,7 @@ export default {
alias: '2oml0r0n5vytj', alias: '2oml0r0n5vytj',
quota: 15, quota: 15,
is_virtual: '0', is_virtual: '0',
quota_used: 0, quota_used: 1,
goods_info: { goods_info: {
title: 'Goods Name', title: 'Goods Name',
picture: 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg', picture: 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',

View File

@ -11,6 +11,7 @@
:quota="$t('sku').quota" :quota="$t('sku').quota"
:quota-used="$t('sku').quota_used" :quota-used="$t('sku').quota_used"
:reset-stepper-on-hide="true" :reset-stepper-on-hide="true"
:reset-selected-sku-on-hide="true"
:disable-stepper-input="true" :disable-stepper-input="true"
@buy-clicked="handleBuyClicked" @buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked" @add-cart="handleAddCartClicked"

View File

@ -20,6 +20,7 @@ Vue.use(Sku);
:quota="quota" :quota="quota"
:quota-used="quotaUsed" :quota-used="quotaUsed"
:reset-stepper-on-hide="resetStepperOnHide" :reset-stepper-on-hide="resetStepperOnHide"
:reset-selected-sku-on-hide="resetSelectedSkuOnHide"
:disable-stepper-input="disableStepperInput" :disable-stepper-input="disableStepperInput"
@buy-clicked="handleBuyClicked" @buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked" @add-cart="handleAddCartClicked"
@ -70,6 +71,7 @@ Vue.use(Sku);
| quota | Quota (0 as no limit) | `Number` | `0` | - | | quota | Quota (0 as no limit) | `Number` | `0` | - |
| quota-used | Used quota | `Number` | `0` | - | | quota-used | Used quota | `Number` | `0` | - |
| reset-stepper-on-hide | Whether to reset stepper when hide | `Boolean` | `false` | - | | reset-stepper-on-hide | Whether to reset stepper when hide | `Boolean` | `false` | - |
| reset-selected-sku-on-hide | Whether to reset selected sku when hide | `Boolean` | `false` | - |
| disable-stepper-input | Whether to disable stepper input | `Boolean` | `false` | - | | disable-stepper-input | Whether to disable stepper input | `Boolean` | `false` | - |
| stepper-title | Quantity title | `String` | `Quantity` | - | | stepper-title | Quantity title | `String` | `Quantity` | - |
@ -85,6 +87,7 @@ Vue.use(Sku);
| Name | Description | | Name | Description |
|-----------|-----------| |-----------|-----------|
| sku-header | Custom header | | sku-header | Custom header |
| sku-body-top | Custom content before sku-group |
| sku-group | Custom sku | | sku-group | Custom sku |
| extra-sku-group | Extra custom content | | extra-sku-group | Extra custom content |
| sku-stepper | Custom stepper | | sku-stepper | Custom stepper |

View File

@ -20,6 +20,7 @@ Vue.use(Sku);
:quota="quota" :quota="quota"
:quota-used="quotaUsed" :quota-used="quotaUsed"
:reset-stepper-on-hide="resetStepperOnHide" :reset-stepper-on-hide="resetStepperOnHide"
:reset-selected-sku-on-hide="resetSelectedSkuOnHide"
:disable-stepper-input="disableStepperInput" :disable-stepper-input="disableStepperInput"
@buy-clicked="handleBuyClicked" @buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked" @add-cart="handleAddCartClicked"
@ -71,6 +72,7 @@ Vue.use(Sku);
| quota | 限购数(0表示不限购) | `Number` | `0` | - | | quota | 限购数(0表示不限购) | `Number` | `0` | - |
| quota-used | 已经购买过的数量 | `Number` | `0` | - | | quota-used | 已经购买过的数量 | `Number` | `0` | - |
| reset-stepper-on-hide | 窗口隐藏时重置选择的商品数量 | `Boolean` | `false` | - | | reset-stepper-on-hide | 窗口隐藏时重置选择的商品数量 | `Boolean` | `false` | - |
| reset-selected-sku-on-hide | 窗口隐藏时重置已选择的sku | `Boolean` | `false` | - |
| disable-stepper-input | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - | | disable-stepper-input | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - |
| stepper-title | 数量选择组件左侧文案 | `String` | `购买数量` | - | | stepper-title | 数量选择组件左侧文案 | `String` | `购买数量` | - |
@ -88,6 +90,7 @@ Sku 组件默认划分好了若干区块,这些区块都定义成了 slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| |-----------|-----------|
| sku-header | 商品信息展示区,包含商品图片、名称、价格等信息 | | sku-header | 商品信息展示区,包含商品图片、名称、价格等信息 |
| sku-body-top | sku展示区上方的slot无默认展示内容按需使用 |
| sku-group | 商品sku展示区 | | sku-group | 商品sku展示区 |
| extra-sku-group | 额外商品sku展示区一般用不到 | | extra-sku-group | 额外商品sku展示区一般用不到 |
| sku-stepper | 商品数量选择区 | | sku-stepper | 商品数量选择区 |

View File

@ -86,6 +86,7 @@ export default create({
this.limitType = QUOTA_LIMIT; this.limitType = QUOTA_LIMIT;
} else { } else {
limit = this.stock; limit = this.stock;
this.limitType = STOCK_LIMIT;
} }
return limit; return limit;

View File

@ -2,6 +2,7 @@
<popup v-model="show" v-if="!isSkuEmpty" position="bottom" lock-on-scroll prevent-scroll> <popup v-model="show" v-if="!isSkuEmpty" position="bottom" lock-on-scroll prevent-scroll>
<div class="van-sku-container"> <div class="van-sku-container">
<div class="van-sku-layout"> <div class="van-sku-layout">
<!-- sku-header -->
<slot name="sku-header" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb"> <slot name="sku-header" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb">
<sku-header <sku-header
:sku-event-bus="skuEventBus" :sku-event-bus="skuEventBus"
@ -12,6 +13,9 @@
/> />
</slot> </slot>
<div class="van-sku-body" :style="bodyStyle"> <div class="van-sku-body" :style="bodyStyle">
<!-- sku-body-top -->
<slot name="sku-body-top" :selectedSku="selectedSku" :skuEventBus="skuEventBus" />
<!-- sku-group -->
<slot name="sku-group" :selectedSku="selectedSku" :skuEventBus="skuEventBus"> <slot name="sku-group" :selectedSku="selectedSku" :skuEventBus="skuEventBus">
<div v-if="hasSku" class="van-sku-group-container van-hairline--bottom"> <div v-if="hasSku" class="van-sku-group-container van-hairline--bottom">
<div <div
@ -35,7 +39,9 @@
</div> </div>
</div> </div>
</slot> </slot>
<!-- extra-sku-group -->
<slot name="extra-sku-group" :skuEventBus="skuEventBus"/> <slot name="extra-sku-group" :skuEventBus="skuEventBus"/>
<!-- sku-stepper -->
<slot name="sku-stepper" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb" :selectedNum="selectedNum"> <slot name="sku-stepper" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb" :selectedNum="selectedNum">
<sku-stepper <sku-stepper
ref="skuStepper" ref="skuStepper"
@ -51,6 +57,7 @@
:hide-stock="hideStock" :hide-stock="hideStock"
/> />
</slot> </slot>
<!-- sku-messages -->
<slot name="sku-messages"> <slot name="sku-messages">
<sku-messages <sku-messages
ref="skuMessages" ref="skuMessages"
@ -60,6 +67,7 @@
/> />
</slot> </slot>
</div> </div>
<!-- sku-actions -->
<slot name="sku-actions" :skuEventBus="skuEventBus"> <slot name="sku-actions" :skuEventBus="skuEventBus">
<sku-actions <sku-actions
:sku-event-bus="skuEventBus" :sku-event-bus="skuEventBus"
@ -134,6 +142,7 @@ export default create({
default: 200 default: 200
}, },
resetStepperOnHide: Boolean, resetStepperOnHide: Boolean,
resetSelectedSkuOnHide: Boolean,
disableStepperInput: Boolean, disableStepperInput: Boolean,
messagePlaceholderMap: { messagePlaceholderMap: {
type: Object, type: Object,
@ -168,6 +177,10 @@ export default create({
if (this.resetStepperOnHide) { if (this.resetStepperOnHide) {
this.$refs.skuStepper && this.$refs.skuStepper.setCurrentNum(1); this.$refs.skuStepper && this.$refs.skuStepper.setCurrentNum(1);
} }
if (this.resetSelectedSkuOnHide) {
this.resetSelectedSku(this.skuTree);
}
} }
}, },
value(val) { value(val) {

View File

@ -26,7 +26,8 @@ describe('Sku', (done) => {
sku: data.sku, sku: data.sku,
goodsId: data.goods_id, goodsId: data.goods_id,
goods: goods, goods: goods,
resetStepperOnHide: true resetStepperOnHide: true,
resetSelectedSkuOnHide: true
} }
}); });