mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-23 23:19:15 +08:00
chore: temporaily remove sku
This commit is contained in:
chenjiahan
parent
63bd4700ab
commit
1e2f55db5a
@ -1,397 +0,0 @@
|
|||||||
# Sku
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Sku } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Sku);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Basic Usage
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-sku
|
|
||||||
v-model="show"
|
|
||||||
:sku="sku"
|
|
||||||
:goods="goods"
|
|
||||||
:goods-id="goodsId"
|
|
||||||
:hide-stock="sku.hide_stock"
|
|
||||||
:quota="quota"
|
|
||||||
:quota-used="quotaUsed"
|
|
||||||
:reset-stepper-on-hide="resetStepperOnHide"
|
|
||||||
:reset-selected-sku-on-hide="resetSelectedSkuOnHide"
|
|
||||||
:disable-stepper-input="disableStepperInput"
|
|
||||||
:message-config="messageConfig"
|
|
||||||
@buy-clicked="onBuyClicked"
|
|
||||||
@add-cart="onAddCartClicked"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
sku: {},
|
|
||||||
goods: {},
|
|
||||||
messageConfig: {},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom Stepper
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-sku
|
|
||||||
v-model="show"
|
|
||||||
:sku="sku"
|
|
||||||
:goods="goods"
|
|
||||||
:goods-id="goodsId"
|
|
||||||
:hide-stock="sku.hide_stock"
|
|
||||||
:quota="quota"
|
|
||||||
:quota-used="quotaUsed"
|
|
||||||
:custom-stepper-config="customStepperConfig"
|
|
||||||
@buy-clicked="onBuyClicked"
|
|
||||||
@add-cart="onAddCartClicked"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom By Slot
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-sku
|
|
||||||
v-model="show"
|
|
||||||
stepper-title="Stepper title"
|
|
||||||
:sku="sku"
|
|
||||||
:goods="goods"
|
|
||||||
:goods-id="goodsId"
|
|
||||||
:hide-stock="sku.hide_stock"
|
|
||||||
:quota="quota"
|
|
||||||
:quota-used="quotaUsed"
|
|
||||||
show-add-cart-btn
|
|
||||||
reset-stepper-on-hide
|
|
||||||
:initial-sku="initialSku"
|
|
||||||
@buy-clicked="onBuyClicked"
|
|
||||||
@add-cart="onAddCartClicked"
|
|
||||||
>
|
|
||||||
<!-- custom sku-header-price -->
|
|
||||||
<template #sku-header-price="props">
|
|
||||||
<div class="van-sku__goods-price">
|
|
||||||
<span class="van-sku__price-symbol">￥</span
|
|
||||||
><span class="van-sku__price-num">{{ props.price }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- custom sku actions -->
|
|
||||||
<template #sku-actions="props">
|
|
||||||
<div class="van-sku-actions">
|
|
||||||
<van-button square size="large" type="warning" @click="onPointClicked">
|
|
||||||
Button
|
|
||||||
</van-button>
|
|
||||||
<!-- trigger sku inner event -->
|
|
||||||
<van-button
|
|
||||||
square
|
|
||||||
size="large"
|
|
||||||
type="danger"
|
|
||||||
@click="props.skuEventBus.$emit('sku:buy')"
|
|
||||||
>
|
|
||||||
Button
|
|
||||||
</van-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</van-sku>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| v-model | Whether to show sku | _boolean_ | `false` |
|
|
||||||
| sku | Sku data | _object_ | - |
|
|
||||||
| goods | Goods info | _object_ | - |
|
|
||||||
| goods-id | Goods id | `string | _number_ | - |
|
|
||||||
| price-tag | Tag behind the price | _string_ | - |
|
|
||||||
| hide-stock | Whether to hide stock | _boolean_ | `false` |
|
|
||||||
| hide-quota-text | Whether to hide quota text | _boolean_ | `false` |
|
|
||||||
| hide-selected-text | Whether to hide selected text | _boolean_ | `false` |
|
|
||||||
| stock-threshold | stock threshold | _boolean_ | `50` |
|
|
||||||
| show-add-cart-btn | Whether to show cart button | _boolean_ | `true` |
|
|
||||||
| buy-text | Buy button text | _string_ | - | - |
|
|
||||||
| add-cart-text | Add cart button text | _string_ | - | - |
|
|
||||||
| quota | Quota (0 as no limit) | _number_ | `0` |
|
|
||||||
| quota-used | Used quota | _number_ | `0` |
|
|
||||||
| 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` |
|
|
||||||
| close-on-click-overlay | Whether to close sku popup when click overlay | _boolean_ | `true` |
|
|
||||||
| stepper-title | Quantity title | _string_ | `Quantity` |
|
|
||||||
| custom-stepper-config | Custom stepper related config | _object_ | `{}` |
|
|
||||||
| message-config | Message related config | _object_ | `{}` |
|
|
||||||
| get-container | Return the mount node for sku | _string \| () => Element_ | - |
|
|
||||||
| safe-area-inset-bottom `v2.2.1` | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
|
|
||||||
| start-sale-num `v2.3.0` | Minimum quantity | _number_ | `1` |
|
|
||||||
| properties `v2.4.2` | Goods properties | _array_ | - |
|
|
||||||
| preview-on-click-image `v2.5.2` | Whether to preview image when click goods image | _boolean_ | `true` |
|
|
||||||
| show-header-image `v2.9.0` | Whether to display header image | _boolean_ | `true` |
|
|
||||||
| lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Event | Description | Arguments |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| add-cart | Triggered when click cart button | data: object |
|
|
||||||
| buy-clicked | Triggered when click buy button | data: object |
|
|
||||||
| stepper-change | Triggered when stepper value changed | value: number |
|
|
||||||
| sku-selected | Triggered when select sku | { skuValue, selectedSku, selectedSkuComb } |
|
|
||||||
| sku-prop-selected | Triggered when select property | { propValue, selectedProp, selectedSkuComb } |
|
|
||||||
| open-preview | Triggered when open image preview | data: object |
|
|
||||||
| close-preview | Triggered when close image preview | data: object |
|
|
||||||
| sku-reset `v2.8.1` | Triggered when reset sku and property | { selectedSku, selectedProp, selectedSkuComb } |
|
|
||||||
|
|
||||||
### Methods
|
|
||||||
|
|
||||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Sku instance and call instance methods
|
|
||||||
|
|
||||||
| Name | Description | Attribute | Return value |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| getSkuData | Get current skuData | - | skuData |
|
|
||||||
| resetSelectedSku `v2.3.0` | Reset selected sku to initial sku | - | - |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| Name | Description |
|
|
||||||
| ------------------------------- | --------------------------------- |
|
|
||||||
| sku-header | Custom header |
|
|
||||||
| sku-header-price | Custom header price area |
|
|
||||||
| sku-header-origin-price | Custom header origin price area |
|
|
||||||
| sku-header-extra | Extra header area |
|
|
||||||
| sku-header-image-extra `v2.5.2` | Custom header image extra area |
|
|
||||||
| sku-body-top | Custom content before sku-group |
|
|
||||||
| sku-group | Custom sku |
|
|
||||||
| extra-sku-group | Extra custom content |
|
|
||||||
| sku-stepper | Custom stepper |
|
|
||||||
| sku-messages | Custom messages |
|
|
||||||
| sku-actions-top `v2.4.7` | Custom content before sku-actions |
|
|
||||||
| sku-actions | Custom button actions |
|
|
||||||
|
|
||||||
### Sku Data Structure
|
|
||||||
|
|
||||||
```js
|
|
||||||
sku: {
|
|
||||||
tree: [
|
|
||||||
{
|
|
||||||
k: 'Color',
|
|
||||||
k_s: 's1',
|
|
||||||
v: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: 'Red',
|
|
||||||
imgUrl: 'https://img.yzcdn.cn/1.jpg',
|
|
||||||
previewImgUrl: 'https://img.yzcdn.cn/1p.jpg',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: 'Blue',
|
|
||||||
imgUrl: 'https://img.yzcdn.cn/2.jpg',
|
|
||||||
previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
|
|
||||||
}
|
|
||||||
],
|
|
||||||
largeImageMode: true, // whether to enable large image mode
|
|
||||||
}
|
|
||||||
],
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
id: 2259,
|
|
||||||
s1: '1',
|
|
||||||
s2: '1',
|
|
||||||
price: 100,
|
|
||||||
stock_num: 110
|
|
||||||
}
|
|
||||||
],
|
|
||||||
price: '1.00',
|
|
||||||
stock_num: 227,
|
|
||||||
collection_id: 2261,
|
|
||||||
none_sku: false,
|
|
||||||
messages: [
|
|
||||||
{
|
|
||||||
datetime: '0',
|
|
||||||
multiple: '0',
|
|
||||||
name: 'Message',
|
|
||||||
type: 'text',
|
|
||||||
required: '1'，
|
|
||||||
placeholder: ''
|
|
||||||
}
|
|
||||||
],
|
|
||||||
hide_stock: false,
|
|
||||||
properties: [
|
|
||||||
{
|
|
||||||
k_id: 123,
|
|
||||||
k: 'More',
|
|
||||||
is_multiple: true,
|
|
||||||
v: [
|
|
||||||
{
|
|
||||||
id: 1222,
|
|
||||||
name: 'Tea',
|
|
||||||
price: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1223,
|
|
||||||
name: 'Water',
|
|
||||||
price: 1,
|
|
||||||
}
|
|
||||||
],
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### properties Data Structure
|
|
||||||
|
|
||||||
```js
|
|
||||||
[
|
|
||||||
{
|
|
||||||
k_id: 123,
|
|
||||||
k: 'More',
|
|
||||||
is_multiple: true,
|
|
||||||
v: [
|
|
||||||
{
|
|
||||||
id: 1222,
|
|
||||||
name: 'Tea',
|
|
||||||
price: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1223,
|
|
||||||
name: 'Water',
|
|
||||||
price: 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
### initialSku Data Structure
|
|
||||||
|
|
||||||
```js
|
|
||||||
{
|
|
||||||
// Key：skuKeyStr
|
|
||||||
// Value：skuValueId
|
|
||||||
s1: '30349',
|
|
||||||
s2: '1193',
|
|
||||||
selectedNum: 3,
|
|
||||||
selectedProp: {
|
|
||||||
123: [1222]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Goods Data Structure
|
|
||||||
|
|
||||||
```js
|
|
||||||
goods: {
|
|
||||||
picture: 'https://img.yzcdn.cn/1.jpg';
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### customStepperConfig Data Structure
|
|
||||||
|
|
||||||
```js
|
|
||||||
customStepperConfig: {
|
|
||||||
// custom quota text
|
|
||||||
quotaText: 'only 5 can buy',
|
|
||||||
// custom callback when over limit
|
|
||||||
handleOverLimit: (data) => {
|
|
||||||
const { action, limitType, quota, quotaUsed, startSaleNum } = data;
|
|
||||||
|
|
||||||
if (action === 'minus') {
|
|
||||||
Toast(`at least select ${startSaleNum > 1 ? startSaleNum : 'one'}`);
|
|
||||||
} else if (action === 'plus') {
|
|
||||||
// const { LIMIT_TYPE } = Sku.skuConstants;
|
|
||||||
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
|
|
||||||
let msg = `Buy up to ${quota}`;
|
|
||||||
if (quotaUsed > 0) msg += `，you already buy ${quotaUsed}`;
|
|
||||||
Toast(msg);
|
|
||||||
} else {
|
|
||||||
Toast('not enough stock');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// custom callback when stepper value change
|
|
||||||
handleStepperChange: currentValue => {},
|
|
||||||
// stock
|
|
||||||
stockNum: 1999,
|
|
||||||
// stock fomatter
|
|
||||||
stockFormatter: stockNum => {},
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### messageConfig Data Structure
|
|
||||||
|
|
||||||
```js
|
|
||||||
messageConfig: {
|
|
||||||
// the upload image callback
|
|
||||||
uploadImg: () => {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// max file size (MB)
|
|
||||||
uploadMaxSize: 3,
|
|
||||||
// placeholder config
|
|
||||||
placeholderMap: {
|
|
||||||
text: 'xxx',
|
|
||||||
tel: 'xxx',
|
|
||||||
...
|
|
||||||
},
|
|
||||||
// Key：message name
|
|
||||||
// Value：message value
|
|
||||||
initialMessages: {
|
|
||||||
message: 'message value'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Events Params Data Structure
|
|
||||||
|
|
||||||
```js
|
|
||||||
skuData: {
|
|
||||||
goodsId: '946755',
|
|
||||||
messages: {
|
|
||||||
message_0: '12',
|
|
||||||
message_1: ''
|
|
||||||
},
|
|
||||||
cartMessages: {
|
|
||||||
'Message 1': 'xxxx'
|
|
||||||
},
|
|
||||||
selectedNum: 1,
|
|
||||||
selectedSkuComb: {
|
|
||||||
id: 2257,
|
|
||||||
price: 100,
|
|
||||||
s1: '30349',
|
|
||||||
s2: '1193',
|
|
||||||
s3: '0',
|
|
||||||
stock_num: 111,
|
|
||||||
properties: [
|
|
||||||
{
|
|
||||||
k_id: 123,
|
|
||||||
k: 'More',
|
|
||||||
is_multiple: true,
|
|
||||||
v: [
|
|
||||||
{
|
|
||||||
id: 1223,
|
|
||||||
name: 'Water',
|
|
||||||
price: 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
property_price: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
@ -1,401 +0,0 @@
|
|||||||
# Sku 商品规格
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Sku } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Sku);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-sku
|
|
||||||
v-model="show"
|
|
||||||
:sku="sku"
|
|
||||||
:goods="goods"
|
|
||||||
:goods-id="goodsId"
|
|
||||||
:quota="quota"
|
|
||||||
:quota-used="quotaUsed"
|
|
||||||
:hide-stock="sku.hide_stock"
|
|
||||||
:message-config="messageConfig"
|
|
||||||
@buy-clicked="onBuyClicked"
|
|
||||||
@add-cart="onAddCartClicked"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
sku: {
|
|
||||||
// 数据结构见下方文档
|
|
||||||
},
|
|
||||||
goods: {
|
|
||||||
// 数据结构见下方文档
|
|
||||||
},
|
|
||||||
messageConfig: {
|
|
||||||
// 数据结构见下方文档
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义步进器
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-sku
|
|
||||||
v-model="show"
|
|
||||||
:sku="sku"
|
|
||||||
:goods="goods"
|
|
||||||
:goods-id="goodsId"
|
|
||||||
:quota="quota"
|
|
||||||
:quota-used="quotaUsed"
|
|
||||||
:hide-stock="sku.hide_stock"
|
|
||||||
:custom-stepper-config="customStepperConfig"
|
|
||||||
@buy-clicked="onBuyClicked"
|
|
||||||
@add-cart="onAddCartClicked"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 通过插槽定制
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-sku
|
|
||||||
v-model="show"
|
|
||||||
stepper-title="我要买"
|
|
||||||
:sku="sku"
|
|
||||||
:goods="goods"
|
|
||||||
:goods-id="goodsId"
|
|
||||||
:quota="quota"
|
|
||||||
:quota-used="quotaUsed"
|
|
||||||
:hide-stock="sku.hide_stock"
|
|
||||||
show-add-cart-btn
|
|
||||||
reset-stepper-on-hide
|
|
||||||
:initial-sku="initialSku"
|
|
||||||
@buy-clicked="onBuyClicked"
|
|
||||||
@add-cart="onAddCartClicked"
|
|
||||||
>
|
|
||||||
<!-- 自定义 sku-header-price -->
|
|
||||||
<template #sku-header-price="props">
|
|
||||||
<div class="van-sku__goods-price">
|
|
||||||
<span class="van-sku__price-symbol">￥</span
|
|
||||||
><span class="van-sku__price-num">{{ props.price }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义 sku actions -->
|
|
||||||
<template #sku-actions="props">
|
|
||||||
<div class="van-sku-actions">
|
|
||||||
<van-button square size="large" type="warning" @click="onPointClicked">
|
|
||||||
积分兑换
|
|
||||||
</van-button>
|
|
||||||
<!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
|
|
||||||
<van-button
|
|
||||||
square
|
|
||||||
size="large"
|
|
||||||
type="danger"
|
|
||||||
@click="props.skuEventBus.$emit('sku:buy')"
|
|
||||||
>
|
|
||||||
买买买
|
|
||||||
</van-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</van-sku>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| v-model | 是否显示商品规格弹窗 | _boolean_ | `false` |
|
|
||||||
| sku | 商品 sku 数据 | _object_ | - |
|
|
||||||
| goods | 商品信息 | _object_ | - |
|
|
||||||
| goods-id | 商品 id | _number \| string_ | - |
|
|
||||||
| price-tag | 显示在价格后面的标签 | _string_ | - |
|
|
||||||
| hide-stock | 是否显示商品剩余库存 | _boolean_ | `false` |
|
|
||||||
| hide-quota-text | 是否显示限购提示 | _boolean_ | `false` |
|
|
||||||
| hide-selected-text | 是否隐藏已选提示 | _boolean_ | `false` |
|
|
||||||
| stock-threshold | 库存阈值。低于这个值会把库存数高亮显示 | _boolean_ | `50` |
|
|
||||||
| show-add-cart-btn | 是否显示加入购物车按钮 | _boolean_ | `true` |
|
|
||||||
| buy-text | 购买按钮文字 | _string_ | `立即购买` |
|
|
||||||
| add-cart-text | 加入购物车按钮文字 | _string_ | `加入购物车` |
|
|
||||||
| quota | 限购数，0 表示不限购 | _number_ | `0` |
|
|
||||||
| quota-used | 已经购买过的数量 | _number_ | `0` |
|
|
||||||
| reset-stepper-on-hide | 隐藏时重置选择的商品数量 | _boolean_ | `false` |
|
|
||||||
| reset-selected-sku-on-hide | 隐藏时重置已选择的 sku | _boolean_ | `false` |
|
|
||||||
| disable-stepper-input | 是否禁用步进器输入 | _boolean_ | `false` |
|
|
||||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
|
|
||||||
| stepper-title | 数量选择组件左侧文案 | _string_ | `购买数量` |
|
|
||||||
| custom-stepper-config | 步进器相关自定义配置 | _object_ | `{}` |
|
|
||||||
| message-config | 留言相关配置 | _object_ | `{}` |
|
|
||||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
|
||||||
| initial-sku | 默认选中的 sku，具体参考高级用法 | _object_ | `{}` |
|
|
||||||
| show-soldout-sku | 是否展示售罄的 sku，默认展示并置灰 | _boolean_ | `true` |
|
|
||||||
| safe-area-inset-bottom `v2.2.1` | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
|
|
||||||
| start-sale-num `v2.3.0` | 起售数量 | _number_ | `1` |
|
|
||||||
| properties `v2.4.2` | 商品属性 | _array_ | - |
|
|
||||||
| preview-on-click-image `v2.5.2` | 是否在点击商品图片时自动预览 | _boolean_ | `true` |
|
|
||||||
| show-header-image `v2.9.0` | 是否展示头部图片 | _boolean_ | `true` |
|
|
||||||
| lazy-load `v2.9.0` | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| add-cart | 点击添加购物车回调 | skuData: object |
|
|
||||||
| buy-clicked | 点击购买回调 | skuData: object |
|
|
||||||
| stepper-change | 购买数量变化时触发 | value: number |
|
|
||||||
| sku-selected | 切换规格类目时触发 | { skuValue, selectedSku, selectedSkuComb } |
|
|
||||||
| sku-prop-selected | 切换商品属性时触发 | { propValue, selectedProp, selectedSkuComb } |
|
|
||||||
| open-preview | 打开商品图片预览时触发 | data: object |
|
|
||||||
| close-preview | 关闭商品图片预览时触发 | data: object |
|
|
||||||
| sku-reset `v2.8.1` | 规格和属性被重置时触发 | { selectedSku, selectedProp, selectedSkuComb } |
|
|
||||||
|
|
||||||
### 方法
|
|
||||||
|
|
||||||
通过 ref 可以获取到 Sku 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
|
||||||
|
|
||||||
| 方法名 | 说明 | 参数 | 返回值 |
|
|
||||||
| ------------------------- | ---------------------- | ---- | ------- |
|
|
||||||
| getSkuData | 获取当前 skuData | - | skuData |
|
|
||||||
| resetSelectedSku `v2.3.0` | 重置选中规格到初始状态 | - | - |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
Sku 组件默认划分好了若干区块，这些区块都定义成了插槽，可以按需进行替换。区块顺序见下表：
|
|
||||||
|
|
||||||
| 名称 | 说明 |
|
|
||||||
| --- | --- |
|
|
||||||
| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
|
|
||||||
| sku-header-price | 自定义 sku 头部价格展示 |
|
|
||||||
| sku-header-origin-price | 自定义 sku 头部原价展示 |
|
|
||||||
| sku-header-extra | 额外 sku 头部区域 |
|
|
||||||
| sku-header-image-extra `v2.5.2` | 自定义 sku 头部图片额外的展示 |
|
|
||||||
| sku-body-top | sku 展示区上方的内容，无默认展示内容，按需使用 |
|
|
||||||
| sku-group | 商品 sku 展示区 |
|
|
||||||
| extra-sku-group | 额外商品 sku 展示区，一般用不到 |
|
|
||||||
| sku-stepper | 商品数量选择区 |
|
|
||||||
| sku-messages | 商品留言区 |
|
|
||||||
| sku-actions-top `v2.4.7` | 操作按钮区顶部内容，无默认展示内容，按需使用 |
|
|
||||||
| sku-actions | 操作按钮区 |
|
|
||||||
|
|
||||||
### sku 对象结构
|
|
||||||
|
|
||||||
```js
|
|
||||||
sku: {
|
|
||||||
// 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
|
|
||||||
// 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
|
|
||||||
tree: [
|
|
||||||
{
|
|
||||||
k: '颜色', // skuKeyName：规格类目名称
|
|
||||||
k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
|
|
||||||
v: [
|
|
||||||
{
|
|
||||||
id: '1', // skuValueId：规格值 id
|
|
||||||
name: '红色', // skuValueName：规格值名称
|
|
||||||
imgUrl: 'https://img.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
|
|
||||||
previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: '蓝色',
|
|
||||||
imgUrl: 'https://img.yzcdn.cn/2.jpg',
|
|
||||||
previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
|
|
||||||
}
|
|
||||||
],
|
|
||||||
largeImageMode: true, // 是否展示大图模式
|
|
||||||
}
|
|
||||||
],
|
|
||||||
// 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
id: 2259, // skuId
|
|
||||||
s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
|
|
||||||
s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
|
|
||||||
price: 100, // 价格（单位分）
|
|
||||||
stock_num: 110 // 当前 sku 组合对应的库存
|
|
||||||
}
|
|
||||||
],
|
|
||||||
price: '1.00', // 默认价格（单位元）
|
|
||||||
stock_num: 227, // 商品总库存
|
|
||||||
collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
|
|
||||||
none_sku: false, // 是否无规格商品
|
|
||||||
messages: [
|
|
||||||
{
|
|
||||||
// 商品留言
|
|
||||||
datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
|
|
||||||
multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
|
|
||||||
name: '留言', // 留言名称
|
|
||||||
type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
|
|
||||||
required: '1', // 是否必填 '1' 表示必填
|
|
||||||
placeholder: '' // 可选值，占位文本
|
|
||||||
}
|
|
||||||
],
|
|
||||||
hide_stock: false // 是否隐藏剩余库存
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### properties 对象结构
|
|
||||||
|
|
||||||
```js
|
|
||||||
[
|
|
||||||
// 商品属性
|
|
||||||
{
|
|
||||||
k_id: 123, // 属性id
|
|
||||||
k: '加料', // 属性名
|
|
||||||
is_multiple: true, // 是否可多选
|
|
||||||
v: [
|
|
||||||
{
|
|
||||||
id: 1222, // 属性值id
|
|
||||||
name: '珍珠', // 属性值名
|
|
||||||
price: 1, // 属性值加价
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1223,
|
|
||||||
name: '椰果',
|
|
||||||
price: 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
### initialSku 对象结构
|
|
||||||
|
|
||||||
```js
|
|
||||||
{
|
|
||||||
// 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
|
|
||||||
// 值：skuValueId（规格值 id）
|
|
||||||
s1: '1',
|
|
||||||
s2: '1',
|
|
||||||
// 初始选中数量
|
|
||||||
selectedNum: 3,
|
|
||||||
// 初始选中的商品属性
|
|
||||||
// 键：属性id
|
|
||||||
// 值：属性值id列表
|
|
||||||
selectedProp: {
|
|
||||||
123: [1222]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### goods 对象结构
|
|
||||||
|
|
||||||
```js
|
|
||||||
goods: {
|
|
||||||
// 默认商品 sku 缩略图
|
|
||||||
picture: 'https://img.yzcdn.cn/1.jpg';
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### customStepperConfig 对象结构
|
|
||||||
|
|
||||||
```js
|
|
||||||
customStepperConfig: {
|
|
||||||
// 自定义限购文案
|
|
||||||
quotaText: '每次限购xxx件',
|
|
||||||
// 自定义步进器超过限制时的回调
|
|
||||||
handleOverLimit: (data) => {
|
|
||||||
const { action, limitType, quota, quotaUsed, startSaleNum } = data;
|
|
||||||
|
|
||||||
if (action === 'minus') {
|
|
||||||
Toast(startSaleNum > 1 ? `${startSaleNum}件起售` : '至少选择一件商品');
|
|
||||||
} else if (action === 'plus') {
|
|
||||||
// const { LIMIT_TYPE } = Sku.skuConstants;
|
|
||||||
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
|
|
||||||
let msg = `单次限购${quota}件`;
|
|
||||||
if (quotaUsed > 0) msg += `，你已购买${quotaUsed}`;
|
|
||||||
Toast(msg);
|
|
||||||
} else {
|
|
||||||
Toast('库存不够了');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 步进器变化的回调
|
|
||||||
handleStepperChange: currentValue => {},
|
|
||||||
// 库存
|
|
||||||
stockNum: 1999,
|
|
||||||
// 格式化库存
|
|
||||||
stockFormatter: stockNum => {},
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### messageConfig 对象结构
|
|
||||||
|
|
||||||
```js
|
|
||||||
messageConfig: {
|
|
||||||
// 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
|
|
||||||
uploadImg: () => {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 最大上传体积 (MB)
|
|
||||||
uploadMaxSize: 3,
|
|
||||||
// placeholder 配置
|
|
||||||
placeholderMap: {
|
|
||||||
text: 'xxx',
|
|
||||||
tel: 'xxx',
|
|
||||||
...
|
|
||||||
},
|
|
||||||
// 初始留言信息
|
|
||||||
// 键：留言 name
|
|
||||||
// 值：留言内容
|
|
||||||
initialMessages: {
|
|
||||||
留言: '留言信息'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 添加购物车和点击购买回调函数接收的 skuData 对象结构
|
|
||||||
|
|
||||||
```js
|
|
||||||
skuData: {
|
|
||||||
// 商品 id
|
|
||||||
goodsId: '946755',
|
|
||||||
// 留言信息
|
|
||||||
messages: {
|
|
||||||
message_0: '12',
|
|
||||||
message_1: ''
|
|
||||||
},
|
|
||||||
// 另一种格式的留言，key 不同
|
|
||||||
cartMessages: {
|
|
||||||
'留言1': 'xxxx'
|
|
||||||
},
|
|
||||||
// 选择的商品数量
|
|
||||||
selectedNum: 1,
|
|
||||||
// 选择的 sku 组合
|
|
||||||
selectedSkuComb: {
|
|
||||||
id: 2257,
|
|
||||||
price: 100,
|
|
||||||
s1: '30349',
|
|
||||||
s2: '1193',
|
|
||||||
s3: '0',
|
|
||||||
stock_num: 111,
|
|
||||||
properties: [
|
|
||||||
{
|
|
||||||
k_id: 123,
|
|
||||||
k: '加料',
|
|
||||||
is_multiple: true,
|
|
||||||
v: [
|
|
||||||
{
|
|
||||||
id: 1223,
|
|
||||||
name: '椰果',
|
|
||||||
price: 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
property_price: 1
|
|
||||||
},
|
|
||||||
}
|
|
||||||
```
|
|
||||||
807
src/sku/Sku.js
807
src/sku/Sku.js
@ -1,807 +0,0 @@
|
|||||||
import Vue from 'vue';
|
|
||||||
import Popup from '../popup';
|
|
||||||
import Toast from '../toast';
|
|
||||||
import ImagePreview from '../image-preview';
|
|
||||||
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,
|
|
||||||
getSelectedPropValues,
|
|
||||||
getSelectedProperties,
|
|
||||||
} from './utils/sku-helper';
|
|
||||||
import { LIMIT_TYPE, UNSELECTED_SKU_VALUE_ID } from './constants';
|
|
||||||
|
|
||||||
const namespace = createNamespace('sku');
|
|
||||||
const [createComponent, bem, t] = namespace;
|
|
||||||
const { QUOTA_LIMIT } = LIMIT_TYPE;
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
props: {
|
|
||||||
sku: Object,
|
|
||||||
goods: Object,
|
|
||||||
value: Boolean,
|
|
||||||
buyText: String,
|
|
||||||
goodsId: [Number, String],
|
|
||||||
priceTag: String,
|
|
||||||
lazyLoad: Boolean,
|
|
||||||
hideStock: Boolean,
|
|
||||||
properties: Array,
|
|
||||||
addCartText: String,
|
|
||||||
stepperTitle: String,
|
|
||||||
getContainer: [String, Function],
|
|
||||||
hideQuotaText: Boolean,
|
|
||||||
hideSelectedText: Boolean,
|
|
||||||
resetStepperOnHide: Boolean,
|
|
||||||
customSkuValidator: Function,
|
|
||||||
disableStepperInput: Boolean,
|
|
||||||
resetSelectedSkuOnHide: Boolean,
|
|
||||||
quota: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
quotaUsed: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
startSaleNum: {
|
|
||||||
type: Number,
|
|
||||||
default: 1,
|
|
||||||
},
|
|
||||||
initialSku: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
stockThreshold: {
|
|
||||||
type: Number,
|
|
||||||
default: 50,
|
|
||||||
},
|
|
||||||
showSoldoutSku: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
showAddCartBtn: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
customStepperConfig: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
showHeaderImage: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
previewOnClickImage: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
safeAreaInsetBottom: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
closeOnClickOverlay: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
bodyOffsetTop: {
|
|
||||||
type: Number,
|
|
||||||
default: 200,
|
|
||||||
},
|
|
||||||
messageConfig: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({
|
|
||||||
initialMessages: {},
|
|
||||||
placeholderMap: {},
|
|
||||||
uploadImg: () => Promise.resolve(),
|
|
||||||
uploadMaxSize: 5,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
selectedSku: {},
|
|
||||||
selectedProp: {},
|
|
||||||
selectedNum: 1,
|
|
||||||
show: this.value,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
show(val) {
|
|
||||||
this.$emit('input', val);
|
|
||||||
|
|
||||||
if (!val) {
|
|
||||||
this.$emit('sku-close', {
|
|
||||||
selectedSkuValues: this.selectedSkuValues,
|
|
||||||
selectedNum: this.selectedNum,
|
|
||||||
selectedSkuComb: this.selectedSkuComb,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.resetStepperOnHide) {
|
|
||||||
this.resetStepper();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.resetSelectedSkuOnHide) {
|
|
||||||
this.resetSelectedSku();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
value(val) {
|
|
||||||
this.show = val;
|
|
||||||
},
|
|
||||||
|
|
||||||
skuTree: 'resetSelectedSku',
|
|
||||||
|
|
||||||
initialSku() {
|
|
||||||
this.resetStepper();
|
|
||||||
this.resetSelectedSku();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
skuGroupClass() {
|
|
||||||
return [
|
|
||||||
'van-sku-group-container',
|
|
||||||
{
|
|
||||||
'van-sku-group-container--hide-soldout': !this.showSoldoutSku,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
},
|
|
||||||
|
|
||||||
bodyStyle() {
|
|
||||||
if (this.$isServer) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const maxHeight = window.innerHeight - this.bodyOffsetTop;
|
|
||||||
|
|
||||||
return {
|
|
||||||
maxHeight: maxHeight + 'px',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
isSkuCombSelected() {
|
|
||||||
// SKU 未选完
|
|
||||||
if (this.hasSku && !isAllSelected(this.skuTree, this.selectedSku)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 属性未全选
|
|
||||||
return !this.propList.some(
|
|
||||||
(it) => (this.selectedProp[it.k_id] || []).length < 1
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
isSkuEmpty() {
|
|
||||||
return Object.keys(this.sku).length === 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
hasSku() {
|
|
||||||
return !this.sku.none_sku;
|
|
||||||
},
|
|
||||||
|
|
||||||
hasSkuOrAttr() {
|
|
||||||
return this.hasSku || this.propList.length > 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
selectedSkuComb() {
|
|
||||||
let skuComb = null;
|
|
||||||
if (this.isSkuCombSelected) {
|
|
||||||
if (this.hasSku) {
|
|
||||||
skuComb = getSkuComb(this.skuList, 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 = getSelectedProperties(
|
|
||||||
this.propList,
|
|
||||||
this.selectedProp
|
|
||||||
);
|
|
||||||
skuComb.property_price = this.selectedPropValues.reduce(
|
|
||||||
(acc, cur) => acc + (cur.price || 0),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return skuComb;
|
|
||||||
},
|
|
||||||
|
|
||||||
selectedSkuValues() {
|
|
||||||
return getSelectedSkuValues(this.skuTree, this.selectedSku);
|
|
||||||
},
|
|
||||||
|
|
||||||
selectedPropValues() {
|
|
||||||
return getSelectedPropValues(this.propList, this.selectedProp);
|
|
||||||
},
|
|
||||||
|
|
||||||
price() {
|
|
||||||
if (this.selectedSkuComb) {
|
|
||||||
return (
|
|
||||||
(this.selectedSkuComb.price + this.selectedSkuComb.property_price) /
|
|
||||||
100
|
|
||||||
).toFixed(2);
|
|
||||||
}
|
|
||||||
// sku.price是一个格式化好的价格区间
|
|
||||||
return this.sku.price;
|
|
||||||
},
|
|
||||||
|
|
||||||
originPrice() {
|
|
||||||
if (this.selectedSkuComb && this.selectedSkuComb.origin_price) {
|
|
||||||
return (
|
|
||||||
(this.selectedSkuComb.origin_price +
|
|
||||||
this.selectedSkuComb.property_price) /
|
|
||||||
100
|
|
||||||
).toFixed(2);
|
|
||||||
}
|
|
||||||
return this.sku.origin_price;
|
|
||||||
},
|
|
||||||
|
|
||||||
skuTree() {
|
|
||||||
return this.sku.tree || [];
|
|
||||||
},
|
|
||||||
|
|
||||||
skuList() {
|
|
||||||
return this.sku.list || [];
|
|
||||||
},
|
|
||||||
|
|
||||||
propList() {
|
|
||||||
return this.properties || [];
|
|
||||||
},
|
|
||||||
|
|
||||||
imageList() {
|
|
||||||
const imageList = [this.goods.picture];
|
|
||||||
|
|
||||||
if (this.skuTree.length > 0) {
|
|
||||||
this.skuTree.forEach((treeItem) => {
|
|
||||||
if (!treeItem.v) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
treeItem.v.forEach((vItem) => {
|
|
||||||
const imgUrl = vItem.previewImgUrl || vItem.imgUrl || vItem.img_url;
|
|
||||||
|
|
||||||
if (imgUrl && imageList.indexOf(imgUrl) === -1) {
|
|
||||||
imageList.push(imgUrl);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return imageList;
|
|
||||||
},
|
|
||||||
|
|
||||||
stock() {
|
|
||||||
const { stockNum } = this.customStepperConfig;
|
|
||||||
if (stockNum !== undefined) {
|
|
||||||
return stockNum;
|
|
||||||
}
|
|
||||||
if (this.selectedSkuComb) {
|
|
||||||
return this.selectedSkuComb.stock_num;
|
|
||||||
}
|
|
||||||
return this.sku.stock_num;
|
|
||||||
},
|
|
||||||
|
|
||||||
stockText() {
|
|
||||||
const { stockFormatter } = this.customStepperConfig;
|
|
||||||
if (stockFormatter) {
|
|
||||||
return stockFormatter(this.stock);
|
|
||||||
}
|
|
||||||
|
|
||||||
return [
|
|
||||||
`${t('stock')} `,
|
|
||||||
<span
|
|
||||||
class={bem('stock-num', {
|
|
||||||
highlight: this.stock < this.stockThreshold,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{this.stock}
|
|
||||||
</span>,
|
|
||||||
` ${t('stockUnit')}`,
|
|
||||||
];
|
|
||||||
},
|
|
||||||
|
|
||||||
selectedText() {
|
|
||||||
if (this.selectedSkuComb) {
|
|
||||||
const values = this.selectedSkuValues.concat(this.selectedPropValues);
|
|
||||||
return `${t('selected')} ${values.map((item) => item.name).join(' ')}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const unselectedSku = this.skuTree
|
|
||||||
.filter(
|
|
||||||
(item) => this.selectedSku[item.k_s] === UNSELECTED_SKU_VALUE_ID
|
|
||||||
)
|
|
||||||
.map((item) => item.k);
|
|
||||||
|
|
||||||
const unselectedProp = this.propList
|
|
||||||
.filter((item) => (this.selectedProp[item.k_id] || []).length < 1)
|
|
||||||
.map((item) => item.k);
|
|
||||||
|
|
||||||
return `${t('select')} ${unselectedSku.concat(unselectedProp).join(' ')}`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
const skuEventBus = new Vue();
|
|
||||||
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);
|
|
||||||
skuEventBus.$on('sku:stepperState', this.onStepperState);
|
|
||||||
skuEventBus.$on('sku:addCart', this.onAddCart);
|
|
||||||
skuEventBus.$on('sku:buy', this.onBuy);
|
|
||||||
|
|
||||||
this.resetStepper();
|
|
||||||
this.resetSelectedSku();
|
|
||||||
|
|
||||||
// 组件初始化后的钩子，抛出skuEventBus
|
|
||||||
this.$emit('after-sku-create', skuEventBus);
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
resetStepper() {
|
|
||||||
const { skuStepper } = this.$refs;
|
|
||||||
const { selectedNum } = this.initialSku;
|
|
||||||
const num = isDef(selectedNum) ? selectedNum : this.startSaleNum;
|
|
||||||
// 用来缓存不合法的情况
|
|
||||||
this.stepperError = null;
|
|
||||||
|
|
||||||
if (skuStepper) {
|
|
||||||
skuStepper.setCurrentNum(num);
|
|
||||||
} else {
|
|
||||||
// 当首次加载（skuStepper 为空）时，传入数量如果不合法，可能会存在问题
|
|
||||||
this.selectedNum = num;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// @exposed-api
|
|
||||||
resetSelectedSku() {
|
|
||||||
this.selectedSku = {};
|
|
||||||
|
|
||||||
// 重置 selectedSku
|
|
||||||
this.skuTree.forEach((item) => {
|
|
||||||
this.selectedSku[item.k_s] = UNSELECTED_SKU_VALUE_ID;
|
|
||||||
});
|
|
||||||
this.skuTree.forEach((item) => {
|
|
||||||
const key = item.k_s;
|
|
||||||
// 规格值只有1个时，优先判断
|
|
||||||
const valueId =
|
|
||||||
item.v.length === 1 ? item.v[0].id : this.initialSku[key];
|
|
||||||
if (
|
|
||||||
valueId &&
|
|
||||||
isSkuChoosable(this.skuList, this.selectedSku, { key, valueId })
|
|
||||||
) {
|
|
||||||
this.selectedSku[key] = valueId;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const skuValues = this.selectedSkuValues;
|
|
||||||
|
|
||||||
if (skuValues.length > 0) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$emit('sku-selected', {
|
|
||||||
skuValue: skuValues[skuValues.length - 1],
|
|
||||||
selectedSku: this.selectedSku,
|
|
||||||
selectedSkuComb: this.selectedSkuComb,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重置商品属性
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 抛出重置事件
|
|
||||||
this.$emit('sku-reset', {
|
|
||||||
selectedSku: this.selectedSku,
|
|
||||||
selectedProp: this.selectedProp,
|
|
||||||
selectedSkuComb: this.selectedSkuComb,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.centerInitialSku();
|
|
||||||
},
|
|
||||||
|
|
||||||
getSkuMessages() {
|
|
||||||
return this.$refs.skuMessages ? this.$refs.skuMessages.getMessages() : {};
|
|
||||||
},
|
|
||||||
|
|
||||||
getSkuCartMessages() {
|
|
||||||
return this.$refs.skuMessages
|
|
||||||
? this.$refs.skuMessages.getCartMessages()
|
|
||||||
: {};
|
|
||||||
},
|
|
||||||
|
|
||||||
validateSkuMessages() {
|
|
||||||
return this.$refs.skuMessages
|
|
||||||
? this.$refs.skuMessages.validateMessages()
|
|
||||||
: '';
|
|
||||||
},
|
|
||||||
|
|
||||||
validateSku() {
|
|
||||||
if (this.selectedNum === 0) {
|
|
||||||
return t('unavailable');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.isSkuCombSelected) {
|
|
||||||
return this.validateSkuMessages();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 自定义sku校验
|
|
||||||
if (this.customSkuValidator) {
|
|
||||||
const err = this.customSkuValidator(this);
|
|
||||||
if (err) return err;
|
|
||||||
}
|
|
||||||
|
|
||||||
return t('selectSku');
|
|
||||||
},
|
|
||||||
|
|
||||||
onSelect(skuValue) {
|
|
||||||
// 点击已选中的sku时则取消选中
|
|
||||||
this.selectedSku =
|
|
||||||
this.selectedSku[skuValue.skuKeyStr] === skuValue.id
|
|
||||||
? {
|
|
||||||
...this.selectedSku,
|
|
||||||
[skuValue.skuKeyStr]: UNSELECTED_SKU_VALUE_ID,
|
|
||||||
}
|
|
||||||
: { ...this.selectedSku, [skuValue.skuKeyStr]: skuValue.id };
|
|
||||||
|
|
||||||
this.$emit('sku-selected', {
|
|
||||||
skuValue,
|
|
||||||
selectedSku: this.selectedSku,
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onNumChange(num) {
|
|
||||||
this.selectedNum = num;
|
|
||||||
},
|
|
||||||
|
|
||||||
onPreviewImage(selectedValue) {
|
|
||||||
const { imageList } = this;
|
|
||||||
let index = 0;
|
|
||||||
let indexImage = imageList[0];
|
|
||||||
if (selectedValue && selectedValue.imgUrl) {
|
|
||||||
this.imageList.some((image, pos) => {
|
|
||||||
if (image === selectedValue.imgUrl) {
|
|
||||||
index = pos;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
indexImage = selectedValue.imgUrl;
|
|
||||||
}
|
|
||||||
const params = {
|
|
||||||
...selectedValue,
|
|
||||||
index,
|
|
||||||
imageList: this.imageList,
|
|
||||||
indexImage,
|
|
||||||
};
|
|
||||||
|
|
||||||
this.$emit('open-preview', params);
|
|
||||||
|
|
||||||
if (!this.previewOnClickImage) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
ImagePreview({
|
|
||||||
images: this.imageList,
|
|
||||||
startPosition: index,
|
|
||||||
onClose: () => {
|
|
||||||
this.$emit('close-preview', params);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onOverLimit(data) {
|
|
||||||
const { action, limitType, quota, quotaUsed } = data;
|
|
||||||
const { handleOverLimit } = this.customStepperConfig;
|
|
||||||
|
|
||||||
if (handleOverLimit) {
|
|
||||||
handleOverLimit(data);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (action === 'minus') {
|
|
||||||
if (this.startSaleNum > 1) {
|
|
||||||
Toast(t('minusStartTip', this.startSaleNum));
|
|
||||||
} else {
|
|
||||||
Toast(t('minusTip'));
|
|
||||||
}
|
|
||||||
} else if (action === 'plus') {
|
|
||||||
if (limitType === QUOTA_LIMIT) {
|
|
||||||
if (quotaUsed > 0) {
|
|
||||||
Toast(t('quotaUsedTip', quota, quotaUsed));
|
|
||||||
} else {
|
|
||||||
Toast(t('quotaTip', quota));
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
Toast(t('soldout'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onStepperState(data) {
|
|
||||||
this.stepperError = data.valid
|
|
||||||
? null
|
|
||||||
: {
|
|
||||||
...data,
|
|
||||||
action: 'plus',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
onAddCart() {
|
|
||||||
this.onBuyOrAddCart('add-cart');
|
|
||||||
},
|
|
||||||
|
|
||||||
onBuy() {
|
|
||||||
this.onBuyOrAddCart('buy-clicked');
|
|
||||||
},
|
|
||||||
|
|
||||||
onBuyOrAddCart(type) {
|
|
||||||
// sku 不符合购买条件
|
|
||||||
if (this.stepperError) {
|
|
||||||
return this.onOverLimit(this.stepperError);
|
|
||||||
}
|
|
||||||
|
|
||||||
const error = this.validateSku();
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
Toast(error);
|
|
||||||
} else {
|
|
||||||
this.$emit(type, this.getSkuData());
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// @exposed-api
|
|
||||||
getSkuData() {
|
|
||||||
return {
|
|
||||||
goodsId: this.goodsId,
|
|
||||||
messages: this.getSkuMessages(),
|
|
||||||
selectedNum: this.selectedNum,
|
|
||||||
cartMessages: this.getSkuCartMessages(),
|
|
||||||
selectedSkuComb: this.selectedSkuComb,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
// 当 popup 完全打开后执行
|
|
||||||
onOpened() {
|
|
||||||
this.centerInitialSku();
|
|
||||||
},
|
|
||||||
|
|
||||||
centerInitialSku() {
|
|
||||||
(this.$refs.skuRows || []).forEach((it) => {
|
|
||||||
const { k_s } = it.skuRow || {};
|
|
||||||
it.centerItem(this.initialSku[k_s]);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (this.isSkuEmpty) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const {
|
|
||||||
sku,
|
|
||||||
skuList,
|
|
||||||
goods,
|
|
||||||
price,
|
|
||||||
lazyLoad,
|
|
||||||
originPrice,
|
|
||||||
skuEventBus,
|
|
||||||
selectedSku,
|
|
||||||
selectedProp,
|
|
||||||
selectedNum,
|
|
||||||
stepperTitle,
|
|
||||||
selectedSkuComb,
|
|
||||||
showHeaderImage,
|
|
||||||
} = this;
|
|
||||||
|
|
||||||
const slotsProps = {
|
|
||||||
price,
|
|
||||||
originPrice,
|
|
||||||
selectedNum,
|
|
||||||
skuEventBus,
|
|
||||||
selectedSku,
|
|
||||||
selectedSkuComb,
|
|
||||||
};
|
|
||||||
|
|
||||||
const slots = (name) => this.slots(name, slotsProps);
|
|
||||||
|
|
||||||
const Header = slots('sku-header') || (
|
|
||||||
<SkuHeader
|
|
||||||
sku={sku}
|
|
||||||
goods={goods}
|
|
||||||
skuEventBus={skuEventBus}
|
|
||||||
selectedSku={selectedSku}
|
|
||||||
showHeaderImage={showHeaderImage}
|
|
||||||
>
|
|
||||||
<template slot="sku-header-image-extra">
|
|
||||||
{slots('sku-header-image-extra')}
|
|
||||||
</template>
|
|
||||||
{slots('sku-header-price') || (
|
|
||||||
<div class="van-sku__goods-price">
|
|
||||||
<span class="van-sku__price-symbol">￥</span>
|
|
||||||
<span class="van-sku__price-num">{price}</span>
|
|
||||||
{this.priceTag && (
|
|
||||||
<span class="van-sku__price-tag">{this.priceTag}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{slots('sku-header-origin-price') ||
|
|
||||||
(originPrice && (
|
|
||||||
<SkuHeaderItem>
|
|
||||||
{t('originPrice')} ￥{originPrice}
|
|
||||||
</SkuHeaderItem>
|
|
||||||
))}
|
|
||||||
{!this.hideStock && (
|
|
||||||
<SkuHeaderItem>
|
|
||||||
<span class="van-sku__stock">{this.stockText}</span>
|
|
||||||
</SkuHeaderItem>
|
|
||||||
)}
|
|
||||||
{this.hasSkuOrAttr && !this.hideSelectedText && (
|
|
||||||
<SkuHeaderItem>{this.selectedText}</SkuHeaderItem>
|
|
||||||
)}
|
|
||||||
{slots('sku-header-extra')}
|
|
||||||
</SkuHeader>
|
|
||||||
);
|
|
||||||
|
|
||||||
const Group =
|
|
||||||
slots('sku-group') ||
|
|
||||||
(this.hasSkuOrAttr && (
|
|
||||||
<div class={this.skuGroupClass}>
|
|
||||||
{this.skuTree.map((skuTreeItem) => (
|
|
||||||
<SkuRow skuRow={skuTreeItem} ref="skuRows" refInFor>
|
|
||||||
{skuTreeItem.v.map((skuValue) => (
|
|
||||||
<SkuRowItem
|
|
||||||
skuList={skuList}
|
|
||||||
lazyLoad={lazyLoad}
|
|
||||||
skuValue={skuValue}
|
|
||||||
skuKeyStr={skuTreeItem.k_s}
|
|
||||||
selectedSku={selectedSku}
|
|
||||||
skuEventBus={skuEventBus}
|
|
||||||
largeImageMode={skuTreeItem.largeImageMode}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</SkuRow>
|
|
||||||
))}
|
|
||||||
{this.propList.map((skuTreeItem) => (
|
|
||||||
<SkuRow skuRow={skuTreeItem}>
|
|
||||||
{skuTreeItem.v.map((skuValue) => (
|
|
||||||
<SkuRowPropItem
|
|
||||||
skuValue={skuValue}
|
|
||||||
skuKeyStr={skuTreeItem.k_id + ''}
|
|
||||||
selectedProp={selectedProp}
|
|
||||||
skuEventBus={skuEventBus}
|
|
||||||
multiple={skuTreeItem.is_multiple}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</SkuRow>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
));
|
|
||||||
|
|
||||||
const Stepper = slots('sku-stepper') || (
|
|
||||||
<SkuStepper
|
|
||||||
ref="skuStepper"
|
|
||||||
stock={this.stock}
|
|
||||||
quota={this.quota}
|
|
||||||
quotaUsed={this.quotaUsed}
|
|
||||||
startSaleNum={this.startSaleNum}
|
|
||||||
skuEventBus={skuEventBus}
|
|
||||||
selectedNum={selectedNum}
|
|
||||||
stepperTitle={stepperTitle}
|
|
||||||
skuStockNum={sku.stock_num}
|
|
||||||
disableStepperInput={this.disableStepperInput}
|
|
||||||
customStepperConfig={this.customStepperConfig}
|
|
||||||
hideQuotaText={this.hideQuotaText}
|
|
||||||
onChange={(event) => {
|
|
||||||
this.$emit('stepper-change', event);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const Messages = slots('sku-messages') || (
|
|
||||||
<SkuMessages
|
|
||||||
ref="skuMessages"
|
|
||||||
goodsId={this.goodsId}
|
|
||||||
messageConfig={this.messageConfig}
|
|
||||||
messages={sku.messages}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const Actions = slots('sku-actions') || (
|
|
||||||
<SkuActions
|
|
||||||
buyText={this.buyText}
|
|
||||||
skuEventBus={skuEventBus}
|
|
||||||
addCartText={this.addCartText}
|
|
||||||
showAddCartBtn={this.showAddCartBtn}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Popup
|
|
||||||
vModel={this.show}
|
|
||||||
round
|
|
||||||
closeable
|
|
||||||
position="bottom"
|
|
||||||
class="van-sku-container"
|
|
||||||
getContainer={this.getContainer}
|
|
||||||
closeOnClickOverlay={this.closeOnClickOverlay}
|
|
||||||
safeAreaInsetBottom={this.safeAreaInsetBottom}
|
|
||||||
onOpened={this.onOpened}
|
|
||||||
>
|
|
||||||
{Header}
|
|
||||||
<div class="van-sku-body" style={this.bodyStyle}>
|
|
||||||
{slots('sku-body-top')}
|
|
||||||
{Group}
|
|
||||||
{slots('extra-sku-group')}
|
|
||||||
{Stepper}
|
|
||||||
{Messages}
|
|
||||||
</div>
|
|
||||||
{slots('sku-actions-top')}
|
|
||||||
{Actions}
|
|
||||||
</Popup>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
// Utils
|
|
||||||
import { createNamespace } from '../../utils';
|
|
||||||
import { inherit } from '../../utils/functional';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import Button from '../../button';
|
|
||||||
|
|
||||||
// Types
|
|
||||||
import { DefaultSlots } from '../../utils/types';
|
|
||||||
import Vue, { CreateElement, RenderContext } from 'vue/types';
|
|
||||||
|
|
||||||
export type SkuActionsProps = {
|
|
||||||
buyText?: string;
|
|
||||||
skuEventBus: Vue;
|
|
||||||
addCartText?: string;
|
|
||||||
showAddCartBtn?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const [createComponent, bem, t] = createNamespace('sku-actions');
|
|
||||||
|
|
||||||
function SkuActions(
|
|
||||||
h: CreateElement,
|
|
||||||
props: SkuActionsProps,
|
|
||||||
slots: DefaultSlots,
|
|
||||||
ctx: RenderContext<SkuActionsProps>
|
|
||||||
) {
|
|
||||||
const createEmitter = (name: string) => () => {
|
|
||||||
props.skuEventBus.$emit(name);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class={bem()} {...inherit(ctx)}>
|
|
||||||
{props.showAddCartBtn && (
|
|
||||||
<Button
|
|
||||||
size="large"
|
|
||||||
type="warning"
|
|
||||||
text={props.addCartText || t('addCart')}
|
|
||||||
onClick={createEmitter('sku:addCart')}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
size="large"
|
|
||||||
type="danger"
|
|
||||||
text={props.buyText || t('buy')}
|
|
||||||
onClick={createEmitter('sku:buy')}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
SkuActions.props = {
|
|
||||||
buyText: String,
|
|
||||||
addCartText: String,
|
|
||||||
skuEventBus: Object,
|
|
||||||
showAddCartBtn: Boolean,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default createComponent<SkuActionsProps>(SkuActions);
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
// Utils
|
|
||||||
import { createNamespace } from '../../utils';
|
|
||||||
import { stringToDate, dateToString } from '../utils/time-helper';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import Popup from '../../popup';
|
|
||||||
import DateTimePicker from '../../datetime-picker';
|
|
||||||
import Field from '../../field';
|
|
||||||
|
|
||||||
const namespace = createNamespace('sku-datetime-field');
|
|
||||||
const createComponent = namespace[0];
|
|
||||||
const t = namespace[2];
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
props: {
|
|
||||||
value: String,
|
|
||||||
label: String,
|
|
||||||
required: Boolean,
|
|
||||||
placeholder: String,
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'date',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showDatePicker: false,
|
|
||||||
currentDate: this.type === 'time' ? '' : new Date(),
|
|
||||||
minDate: new Date(new Date().getFullYear() - 60, 0, 1),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
value(val) {
|
|
||||||
switch (this.type) {
|
|
||||||
case 'time':
|
|
||||||
this.currentDate = val;
|
|
||||||
break;
|
|
||||||
case 'date':
|
|
||||||
case 'datetime':
|
|
||||||
this.currentDate = stringToDate(val) || new Date();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
title() {
|
|
||||||
return t(`title.${this.type}`);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onClick() {
|
|
||||||
this.showDatePicker = true;
|
|
||||||
},
|
|
||||||
onConfirm(val) {
|
|
||||||
let data = val;
|
|
||||||
if (this.type !== 'time') {
|
|
||||||
data = dateToString(val, this.type);
|
|
||||||
}
|
|
||||||
this.$emit('input', data);
|
|
||||||
this.showDatePicker = false;
|
|
||||||
},
|
|
||||||
onCancel() {
|
|
||||||
this.showDatePicker = false;
|
|
||||||
},
|
|
||||||
formatter(type, val) {
|
|
||||||
const word = t(`format.${type}`);
|
|
||||||
return `${val}${word}`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Field
|
|
||||||
readonly
|
|
||||||
is-link
|
|
||||||
center
|
|
||||||
value={this.value}
|
|
||||||
label={this.label}
|
|
||||||
required={this.required}
|
|
||||||
placeholder={this.placeholder}
|
|
||||||
onClick={this.onClick}
|
|
||||||
>
|
|
||||||
<Popup
|
|
||||||
vModel={this.showDatePicker}
|
|
||||||
round
|
|
||||||
slot="extra"
|
|
||||||
position="bottom"
|
|
||||||
getContainer="body"
|
|
||||||
>
|
|
||||||
<DateTimePicker
|
|
||||||
type={this.type}
|
|
||||||
title={this.title}
|
|
||||||
value={this.currentDate}
|
|
||||||
minDate={this.minDate}
|
|
||||||
formatter={this.formatter}
|
|
||||||
onCancel={this.onCancel}
|
|
||||||
onConfirm={this.onConfirm}
|
|
||||||
/>
|
|
||||||
</Popup>
|
|
||||||
</Field>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
// Utils
|
|
||||||
import { createNamespace } from '../../utils';
|
|
||||||
import { inherit } from '../../utils/functional';
|
|
||||||
import { BORDER_BOTTOM } from '../../utils/constant';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import Image from '../../image';
|
|
||||||
|
|
||||||
// Types
|
|
||||||
import Vue, { CreateElement, RenderContext } from 'vue/types';
|
|
||||||
import { DefaultSlots, ScopedSlot } from '../../utils/types';
|
|
||||||
import { SkuData, SkuGoodsData, SelectedSkuData } from '../../../types/sku';
|
|
||||||
|
|
||||||
export type SkuHeaderProps = {
|
|
||||||
sku: SkuData;
|
|
||||||
goods: SkuGoodsData;
|
|
||||||
skuEventBus: Vue;
|
|
||||||
selectedSku: SelectedSkuData;
|
|
||||||
showHeaderImage: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type SkuHeaderSlots = DefaultSlots & {
|
|
||||||
'sku-header-image-extra'?: ScopedSlot;
|
|
||||||
};
|
|
||||||
|
|
||||||
type SelectedValueType = {
|
|
||||||
ks: string;
|
|
||||||
imgUrl: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('sku-header');
|
|
||||||
|
|
||||||
function getSkuImgValue(
|
|
||||||
sku: SkuData,
|
|
||||||
selectedSku: SelectedSkuData
|
|
||||||
): SelectedValueType | undefined {
|
|
||||||
let imgValue;
|
|
||||||
|
|
||||||
sku.tree.some((item) => {
|
|
||||||
const id = selectedSku[item.k_s];
|
|
||||||
|
|
||||||
if (id && item.v) {
|
|
||||||
const matchedSku =
|
|
||||||
item.v.filter((skuValue) => skuValue.id === id)[0] || {};
|
|
||||||
|
|
||||||
const img =
|
|
||||||
matchedSku.previewImgUrl || matchedSku.imgUrl || matchedSku.img_url;
|
|
||||||
if (img) {
|
|
||||||
imgValue = {
|
|
||||||
...matchedSku,
|
|
||||||
ks: item.k_s,
|
|
||||||
imgUrl: img,
|
|
||||||
};
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return imgValue;
|
|
||||||
}
|
|
||||||
|
|
||||||
function SkuHeader(
|
|
||||||
h: CreateElement,
|
|
||||||
props: SkuHeaderProps,
|
|
||||||
slots: SkuHeaderSlots,
|
|
||||||
ctx: RenderContext<SkuHeaderProps>
|
|
||||||
) {
|
|
||||||
const {
|
|
||||||
sku,
|
|
||||||
goods,
|
|
||||||
skuEventBus,
|
|
||||||
selectedSku,
|
|
||||||
showHeaderImage = true,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const selectedValue = getSkuImgValue(sku, selectedSku);
|
|
||||||
const imgUrl = selectedValue ? selectedValue.imgUrl : goods.picture;
|
|
||||||
|
|
||||||
const previewImage = () => {
|
|
||||||
skuEventBus.$emit('sku:previewImage', selectedValue);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class={[bem(), BORDER_BOTTOM]} {...inherit(ctx)}>
|
|
||||||
{showHeaderImage && (
|
|
||||||
<Image
|
|
||||||
fit="cover"
|
|
||||||
src={imgUrl}
|
|
||||||
class={bem('img-wrap')}
|
|
||||||
onClick={previewImage}
|
|
||||||
>
|
|
||||||
{slots['sku-header-image-extra']?.()}
|
|
||||||
</Image>
|
|
||||||
)}
|
|
||||||
<div class={bem('goods-info')}>{slots.default?.()}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
SkuHeader.props = {
|
|
||||||
sku: Object,
|
|
||||||
goods: Object,
|
|
||||||
skuEventBus: Object,
|
|
||||||
selectedSku: Object,
|
|
||||||
showHeaderImage: Boolean,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default createComponent<SkuHeaderProps>(SkuHeader);
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
// Utils
|
|
||||||
import { createNamespace } from '../../utils';
|
|
||||||
import { inherit } from '../../utils/functional';
|
|
||||||
|
|
||||||
// Types
|
|
||||||
import { CreateElement, RenderContext } from 'vue/types';
|
|
||||||
import { DefaultSlots } from '../../utils/types';
|
|
||||||
|
|
||||||
export type SkuHeaderItemProps = {};
|
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('sku-header-item');
|
|
||||||
|
|
||||||
function SkuHeader(
|
|
||||||
h: CreateElement,
|
|
||||||
props: SkuHeaderItemProps,
|
|
||||||
slots: DefaultSlots,
|
|
||||||
ctx: RenderContext<SkuHeaderItemProps>
|
|
||||||
) {
|
|
||||||
return (
|
|
||||||
<div class={bem()} {...inherit(ctx)}>
|
|
||||||
{slots.default && slots.default()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default createComponent<SkuHeaderItemProps>(SkuHeader);
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
// Utils
|
|
||||||
import { createNamespace } from '../../utils';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import Uploader from '../../uploader';
|
|
||||||
|
|
||||||
const namespace = createNamespace('sku-img-uploader');
|
|
||||||
const createComponent = namespace[0];
|
|
||||||
const t = namespace[2];
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
props: {
|
|
||||||
value: String,
|
|
||||||
uploadImg: Function,
|
|
||||||
maxSize: {
|
|
||||||
type: Number,
|
|
||||||
default: 6,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
fileList: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
value(val) {
|
|
||||||
if (val) {
|
|
||||||
this.fileList = [{ url: val, isImage: true }];
|
|
||||||
} else {
|
|
||||||
this.fileList = [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
afterReadFile(file) {
|
|
||||||
file.status = 'uploading';
|
|
||||||
file.message = t('uploading');
|
|
||||||
this.uploadImg(file.file, file.content)
|
|
||||||
.then((img) => {
|
|
||||||
file.status = 'done';
|
|
||||||
this.$emit('input', img);
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
file.status = 'failed';
|
|
||||||
file.message = t('fail');
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onOversize() {
|
|
||||||
this.$toast(t('oversize', this.maxSize));
|
|
||||||
},
|
|
||||||
|
|
||||||
onDelete() {
|
|
||||||
this.$emit('input', '');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Uploader
|
|
||||||
vModel={this.fileList}
|
|
||||||
maxCount={1}
|
|
||||||
afterRead={this.afterReadFile}
|
|
||||||
maxSize={this.maxSize * 1024 * 1024}
|
|
||||||
onOversize={this.onOversize}
|
|
||||||
onDelete={this.onDelete}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,184 +0,0 @@
|
|||||||
// Utils
|
|
||||||
import { createNamespace } from '../../utils';
|
|
||||||
import { isEmail } from '../../utils/validate/email';
|
|
||||||
import { isNumeric } from '../../utils/validate/number';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import Cell from '../../cell';
|
|
||||||
import Field from '../../field';
|
|
||||||
import SkuImgUploader from './SkuImgUploader';
|
|
||||||
import SkuDateTimeField from './SkuDateTimeField';
|
|
||||||
|
|
||||||
const [createComponent, bem, t] = createNamespace('sku-messages');
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
props: {
|
|
||||||
messageConfig: Object,
|
|
||||||
goodsId: [Number, String],
|
|
||||||
messages: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
messageValues: this.resetMessageValues(this.messages),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
messages(val) {
|
|
||||||
this.messageValues = this.resetMessageValues(val);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
resetMessageValues(messages) {
|
|
||||||
const { messageConfig } = this;
|
|
||||||
const { initialMessages = {} } = messageConfig;
|
|
||||||
return (messages || []).map((message) => ({
|
|
||||||
value: initialMessages[message.name] || '',
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
getType(message) {
|
|
||||||
if (+message.multiple === 1) {
|
|
||||||
return 'textarea';
|
|
||||||
}
|
|
||||||
if (message.type === 'id_no') {
|
|
||||||
return 'text';
|
|
||||||
}
|
|
||||||
return message.datetime > 0 ? 'datetime' : message.type;
|
|
||||||
},
|
|
||||||
|
|
||||||
getMessages() {
|
|
||||||
const messages = {};
|
|
||||||
|
|
||||||
this.messageValues.forEach((item, index) => {
|
|
||||||
messages[`message_${index}`] = item.value;
|
|
||||||
});
|
|
||||||
|
|
||||||
return messages;
|
|
||||||
},
|
|
||||||
|
|
||||||
getCartMessages() {
|
|
||||||
const messages = {};
|
|
||||||
|
|
||||||
this.messageValues.forEach((item, index) => {
|
|
||||||
const message = this.messages[index];
|
|
||||||
messages[message.name] = item.value;
|
|
||||||
});
|
|
||||||
|
|
||||||
return messages;
|
|
||||||
},
|
|
||||||
|
|
||||||
getPlaceholder(message) {
|
|
||||||
const type = +message.multiple === 1 ? 'textarea' : message.type;
|
|
||||||
const map = this.messageConfig.placeholderMap || {};
|
|
||||||
return message.placeholder || map[type] || t(`placeholder.${type}`);
|
|
||||||
},
|
|
||||||
|
|
||||||
validateMessages() {
|
|
||||||
const values = this.messageValues;
|
|
||||||
|
|
||||||
for (let i = 0; i < values.length; i++) {
|
|
||||||
const { value } = values[i];
|
|
||||||
const message = this.messages[i];
|
|
||||||
|
|
||||||
if (value === '') {
|
|
||||||
// 必填字段的校验
|
|
||||||
if (String(message.required) === '1') {
|
|
||||||
const textType = t(message.type === 'image' ? 'upload' : 'fill');
|
|
||||||
return textType + message.name;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (message.type === 'tel' && !isNumeric(value)) {
|
|
||||||
return t('invalid.tel');
|
|
||||||
}
|
|
||||||
if (message.type === 'mobile' && !/^\d{6,20}$/.test(value)) {
|
|
||||||
return t('invalid.mobile');
|
|
||||||
}
|
|
||||||
if (message.type === 'email' && !isEmail(value)) {
|
|
||||||
return t('invalid.email');
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
message.type === 'id_no' &&
|
|
||||||
(value.length < 15 || value.length > 18)
|
|
||||||
) {
|
|
||||||
return t('invalid.id_no');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* The phone number copied from IOS mobile phone address book
|
|
||||||
* will add spaces and invisible Unicode characters
|
|
||||||
* which cannot pass the /^\d+$/ verification
|
|
||||||
* so keep numbers and dots
|
|
||||||
*/
|
|
||||||
getFormatter(message) {
|
|
||||||
return function formatter(value) {
|
|
||||||
if (message.type === 'mobile' || message.type === 'tel') {
|
|
||||||
return value.replace(/[^\d.]/g, '');
|
|
||||||
}
|
|
||||||
|
|
||||||
return value;
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
genMessage(message, index) {
|
|
||||||
if (message.type === 'image') {
|
|
||||||
return (
|
|
||||||
<Cell
|
|
||||||
key={`${this.goodsId}-${index}`}
|
|
||||||
title={message.name}
|
|
||||||
class={bem('image-cell')}
|
|
||||||
required={String(message.required) === '1'}
|
|
||||||
valueClass={bem('image-cell-value')}
|
|
||||||
>
|
|
||||||
<SkuImgUploader
|
|
||||||
vModel={this.messageValues[index].value}
|
|
||||||
maxSize={this.messageConfig.uploadMaxSize}
|
|
||||||
uploadImg={this.messageConfig.uploadImg}
|
|
||||||
/>
|
|
||||||
<div class={bem('image-cell-label')}>{t('imageLabel')}</div>
|
|
||||||
</Cell>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 时间和日期使用的vant选择器
|
|
||||||
const isDateOrTime = ['date', 'time'].indexOf(message.type) > -1;
|
|
||||||
if (isDateOrTime) {
|
|
||||||
return (
|
|
||||||
<SkuDateTimeField
|
|
||||||
vModel={this.messageValues[index].value}
|
|
||||||
label={message.name}
|
|
||||||
key={`${this.goodsId}-${index}`}
|
|
||||||
required={String(message.required) === '1'}
|
|
||||||
placeholder={this.getPlaceholder(message)}
|
|
||||||
type={this.getType(message)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Field
|
|
||||||
vModel={this.messageValues[index].value}
|
|
||||||
maxlength="200"
|
|
||||||
center={!message.multiple}
|
|
||||||
label={message.name}
|
|
||||||
key={`${this.goodsId}-${index}`}
|
|
||||||
required={String(message.required) === '1'}
|
|
||||||
placeholder={this.getPlaceholder(message)}
|
|
||||||
type={this.getType(message)}
|
|
||||||
formatter={this.getFormatter(message)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return <div class={bem()}>{this.messages.map(this.genMessage)}</div>;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,122 +0,0 @@
|
|||||||
// Utils
|
|
||||||
import { createNamespace } from '../../utils';
|
|
||||||
import { BORDER_BOTTOM } from '../../utils/constant';
|
|
||||||
// Mixins
|
|
||||||
import { ParentMixin } from '../../mixins/relation';
|
|
||||||
import { BindEventMixin } from '../../mixins/bind-event';
|
|
||||||
|
|
||||||
const [createComponent, bem, t] = createNamespace('sku-row');
|
|
||||||
|
|
||||||
export { bem };
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
mixins: [
|
|
||||||
ParentMixin('vanSkuRows'),
|
|
||||||
BindEventMixin(function (bind) {
|
|
||||||
if (this.scrollable && this.$refs.scroller) {
|
|
||||||
bind(this.$refs.scroller, 'scroll', this.onScroll);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
|
|
||||||
props: {
|
|
||||||
skuRow: Object,
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
progress: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
scrollable() {
|
|
||||||
return this.skuRow.largeImageMode && this.skuRow.v.length > 6;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onScroll() {
|
|
||||||
const { scroller, row } = this.$refs;
|
|
||||||
const distance = row.offsetWidth - scroller.offsetWidth;
|
|
||||||
this.progress = scroller.scrollLeft / distance;
|
|
||||||
},
|
|
||||||
|
|
||||||
genTitle() {
|
|
||||||
return (
|
|
||||||
<div class={bem('title')}>
|
|
||||||
{this.skuRow.k}
|
|
||||||
{this.skuRow.is_multiple && (
|
|
||||||
<span class={bem('title-multiple')}>（{t('multiple')}）</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
genIndicator() {
|
|
||||||
if (this.scrollable) {
|
|
||||||
const style = {
|
|
||||||
transform: `translate3d(${this.progress * 20}px, 0, 0)`,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class={bem('indicator-wrapper')}>
|
|
||||||
<div class={bem('indicator')}>
|
|
||||||
<div class={bem('indicator-slider')} style={style} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
genContent() {
|
|
||||||
const nodes = this.slots();
|
|
||||||
|
|
||||||
if (this.skuRow.largeImageMode) {
|
|
||||||
const top = [];
|
|
||||||
const bottom = [];
|
|
||||||
|
|
||||||
nodes.forEach((node, index) => {
|
|
||||||
const group = Math.floor(index / 3) % 2 === 0 ? top : bottom;
|
|
||||||
group.push(node);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class={bem('scroller')} ref="scroller">
|
|
||||||
<div class={bem('row')} ref="row">
|
|
||||||
{top}
|
|
||||||
</div>
|
|
||||||
{bottom.length ? <div class={bem('row')}>{bottom}</div> : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return nodes;
|
|
||||||
},
|
|
||||||
|
|
||||||
centerItem(selectSkuId) {
|
|
||||||
if (!this.skuRow.largeImageMode || !selectSkuId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { children = [] } = this;
|
|
||||||
const { scroller, row } = this.$refs;
|
|
||||||
const child = children.find((it) => +it.skuValue.id === +selectSkuId);
|
|
||||||
if (scroller && row && child && child.$el) {
|
|
||||||
const target = child.$el;
|
|
||||||
const to =
|
|
||||||
target.offsetLeft - (scroller.offsetWidth - target.offsetWidth) / 2;
|
|
||||||
scroller.scrollLeft = to;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div class={[bem(), BORDER_BOTTOM]}>
|
|
||||||
{this.genTitle()}
|
|
||||||
{this.genContent()}
|
|
||||||
{this.genIndicator()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
import { bem } from './SkuRow';
|
|
||||||
import { createNamespace } from '../../utils';
|
|
||||||
import { isSkuChoosable } from '../utils/sku-helper';
|
|
||||||
import { ChildrenMixin } from '../../mixins/relation';
|
|
||||||
import Image from '../../image';
|
|
||||||
|
|
||||||
const [createComponent] = createNamespace('sku-row-item');
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
mixins: [ChildrenMixin('vanSkuRows')],
|
|
||||||
|
|
||||||
props: {
|
|
||||||
lazyLoad: Boolean,
|
|
||||||
skuValue: Object,
|
|
||||||
skuKeyStr: String,
|
|
||||||
skuEventBus: Object,
|
|
||||||
selectedSku: Object,
|
|
||||||
largeImageMode: Boolean,
|
|
||||||
skuList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
imgUrl() {
|
|
||||||
const url = this.skuValue.imgUrl || this.skuValue.img_url;
|
|
||||||
return this.largeImageMode
|
|
||||||
? url ||
|
|
||||||
'https://img.yzcdn.cn/upload_files/2020/06/24/FmKWDg0bN9rMcTp9ne8MXiQWGtLn.png'
|
|
||||||
: url;
|
|
||||||
},
|
|
||||||
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onPreviewImg(event) {
|
|
||||||
event.stopPropagation();
|
|
||||||
const { skuValue, skuKeyStr } = this;
|
|
||||||
this.skuEventBus.$emit('sku:previewImage', {
|
|
||||||
...skuValue,
|
|
||||||
ks: skuKeyStr,
|
|
||||||
imgUrl: skuValue.imgUrl || skuValue.img_url,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
genImage(classPrefix) {
|
|
||||||
if (this.imgUrl) {
|
|
||||||
return (
|
|
||||||
<Image
|
|
||||||
fit="cover"
|
|
||||||
src={this.imgUrl}
|
|
||||||
class={`${classPrefix}-img`}
|
|
||||||
lazyLoad={this.lazyLoad}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr];
|
|
||||||
const classPrefix = this.largeImageMode ? bem('image-item') : bem('item');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
class={[
|
|
||||||
classPrefix,
|
|
||||||
choosed ? `${classPrefix}--active` : '',
|
|
||||||
!this.choosable ? `${classPrefix}--disabled` : '',
|
|
||||||
]}
|
|
||||||
onClick={this.onSelect}
|
|
||||||
>
|
|
||||||
{this.genImage(classPrefix)}
|
|
||||||
<div class={`${classPrefix}-name`}>
|
|
||||||
{this.largeImageMode ? (
|
|
||||||
<span class={{ 'van-multi-ellipsis--l2': this.largeImageMode }}>
|
|
||||||
{this.skuValue.name}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
this.skuValue.name
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{this.largeImageMode && (
|
|
||||||
<img
|
|
||||||
class={`${classPrefix}-img-icon`}
|
|
||||||
src="https://img.yzcdn.cn/upload_files/2020/07/02/Fu4_ya0l0aAt4Mv4PL9jzPzfZnDX.png"
|
|
||||||
onClick={this.onPreviewImg}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
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,
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
choosed() {
|
|
||||||
const { selectedProp, skuKeyStr, skuValue } = this;
|
|
||||||
|
|
||||||
if (selectedProp && selectedProp[skuKeyStr]) {
|
|
||||||
return selectedProp[skuKeyStr].indexOf(skuValue.id) > -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onSelect() {
|
|
||||||
this.skuEventBus.$emit('sku:propSelect', {
|
|
||||||
...this.skuValue,
|
|
||||||
skuKeyStr: this.skuKeyStr,
|
|
||||||
multiple: this.multiple,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
class={[
|
|
||||||
'van-sku-row__item',
|
|
||||||
{ 'van-sku-row__item--active': this.choosed },
|
|
||||||
]}
|
|
||||||
onClick={this.onSelect}
|
|
||||||
>
|
|
||||||
<span class="van-sku-row__item-name">{this.skuValue.name}</span>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,178 +0,0 @@
|
|||||||
import { createNamespace } from '../../utils';
|
|
||||||
import { LIMIT_TYPE } from '../constants';
|
|
||||||
import Stepper from '../../stepper';
|
|
||||||
|
|
||||||
const namespace = createNamespace('sku-stepper');
|
|
||||||
const createComponent = namespace[0];
|
|
||||||
const t = namespace[2];
|
|
||||||
const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
props: {
|
|
||||||
stock: Number,
|
|
||||||
skuEventBus: Object,
|
|
||||||
skuStockNum: Number,
|
|
||||||
selectedNum: Number,
|
|
||||||
stepperTitle: String,
|
|
||||||
disableStepperInput: Boolean,
|
|
||||||
customStepperConfig: Object,
|
|
||||||
hideQuotaText: Boolean,
|
|
||||||
quota: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
quotaUsed: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
startSaleNum: {
|
|
||||||
type: Number,
|
|
||||||
default: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
currentNum: this.selectedNum,
|
|
||||||
// 购买限制类型: 限购/库存
|
|
||||||
limitType: STOCK_LIMIT,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
currentNum(num) {
|
|
||||||
const intValue = parseInt(num, 10);
|
|
||||||
if (intValue >= this.stepperMinLimit && intValue <= this.stepperLimit) {
|
|
||||||
this.skuEventBus.$emit('sku:numChange', intValue);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
stepperLimit(limit) {
|
|
||||||
if (limit < this.currentNum && this.stepperMinLimit <= limit) {
|
|
||||||
this.currentNum = limit;
|
|
||||||
}
|
|
||||||
this.checkState(this.stepperMinLimit, limit);
|
|
||||||
},
|
|
||||||
|
|
||||||
stepperMinLimit(start) {
|
|
||||||
if (start > this.currentNum || start > this.stepperLimit) {
|
|
||||||
this.currentNum = start;
|
|
||||||
}
|
|
||||||
this.checkState(start, this.stepperLimit);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
stepperLimit() {
|
|
||||||
const quotaLimit = this.quota - this.quotaUsed;
|
|
||||||
let limit;
|
|
||||||
|
|
||||||
// 无限购时直接取库存，有限购时取限购数和库存数中小的那个
|
|
||||||
if (this.quota > 0 && quotaLimit <= this.stock) {
|
|
||||||
// 修正负的limit
|
|
||||||
limit = quotaLimit < 0 ? 0 : quotaLimit;
|
|
||||||
this.limitType = QUOTA_LIMIT;
|
|
||||||
} else {
|
|
||||||
limit = this.stock;
|
|
||||||
this.limitType = STOCK_LIMIT;
|
|
||||||
}
|
|
||||||
|
|
||||||
return limit;
|
|
||||||
},
|
|
||||||
stepperMinLimit() {
|
|
||||||
return this.startSaleNum < 1 ? 1 : this.startSaleNum;
|
|
||||||
},
|
|
||||||
quotaText() {
|
|
||||||
const { quotaText, hideQuotaText } = this.customStepperConfig;
|
|
||||||
if (hideQuotaText) return '';
|
|
||||||
|
|
||||||
let text = '';
|
|
||||||
|
|
||||||
if (quotaText) {
|
|
||||||
text = quotaText;
|
|
||||||
} else {
|
|
||||||
const textArr = [];
|
|
||||||
if (this.startSaleNum > 1) {
|
|
||||||
textArr.push(t('quotaStart', this.startSaleNum));
|
|
||||||
}
|
|
||||||
if (this.quota > 0) {
|
|
||||||
textArr.push(t('quotaLimit', this.quota));
|
|
||||||
}
|
|
||||||
text = textArr.join(t('comma'));
|
|
||||||
}
|
|
||||||
|
|
||||||
return text;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.checkState(this.stepperMinLimit, this.stepperLimit);
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
setCurrentNum(num) {
|
|
||||||
this.currentNum = num;
|
|
||||||
this.checkState(this.stepperMinLimit, this.stepperLimit);
|
|
||||||
},
|
|
||||||
|
|
||||||
onOverLimit(action) {
|
|
||||||
this.skuEventBus.$emit('sku:overLimit', {
|
|
||||||
action,
|
|
||||||
limitType: this.limitType,
|
|
||||||
quota: this.quota,
|
|
||||||
quotaUsed: this.quotaUsed,
|
|
||||||
startSaleNum: this.startSaleNum,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(currentValue) {
|
|
||||||
const intValue = parseInt(currentValue, 10);
|
|
||||||
const { handleStepperChange } = this.customStepperConfig;
|
|
||||||
handleStepperChange && handleStepperChange(intValue);
|
|
||||||
this.$emit('change', intValue);
|
|
||||||
},
|
|
||||||
|
|
||||||
checkState(min, max) {
|
|
||||||
// 如果选择小于起售，则强制变为起售
|
|
||||||
if (this.currentNum < min || min > max) {
|
|
||||||
this.currentNum = min;
|
|
||||||
} else if (this.currentNum > max) {
|
|
||||||
// 当前选择数量大于最大可选时，需要重置已选数量
|
|
||||||
this.currentNum = max;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.skuEventBus.$emit('sku:stepperState', {
|
|
||||||
valid: min <= max,
|
|
||||||
min,
|
|
||||||
max,
|
|
||||||
limitType: this.limitType,
|
|
||||||
quota: this.quota,
|
|
||||||
quotaUsed: this.quotaUsed,
|
|
||||||
startSaleNum: this.startSaleNum,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div class="van-sku-stepper-stock">
|
|
||||||
<div class="van-sku__stepper-title">
|
|
||||||
{this.stepperTitle || t('num')}
|
|
||||||
</div>
|
|
||||||
<Stepper
|
|
||||||
vModel={this.currentNum}
|
|
||||||
integer
|
|
||||||
class="van-sku__stepper"
|
|
||||||
min={this.stepperMinLimit}
|
|
||||||
max={this.stepperLimit}
|
|
||||||
disableInput={this.disableStepperInput}
|
|
||||||
onOverlimit={this.onOverLimit}
|
|
||||||
onChange={this.onChange}
|
|
||||||
/>
|
|
||||||
{!this.hideQuotaText && this.quotaText && (
|
|
||||||
<span class="van-sku__stepper-quota">({this.quotaText})</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
export const LIMIT_TYPE = {
|
|
||||||
QUOTA_LIMIT: 0,
|
|
||||||
STOCK_LIMIT: 1,
|
|
||||||
};
|
|
||||||
|
|
||||||
export const UNSELECTED_SKU_VALUE_ID = '';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
LIMIT_TYPE,
|
|
||||||
UNSELECTED_SKU_VALUE_ID,
|
|
||||||
};
|
|
||||||
@ -1,193 +0,0 @@
|
|||||||
export function getSkuData(largeImageMode = false) {
|
|
||||||
return {
|
|
||||||
goods_id: '1',
|
|
||||||
quota: 5,
|
|
||||||
quota_used: 0,
|
|
||||||
start_sale_num: 2,
|
|
||||||
goods_info: {
|
|
||||||
price: 1,
|
|
||||||
title: '测试商品',
|
|
||||||
picture: 'https://b.yzcdn.cn/vant/sku/shoes-1.png',
|
|
||||||
},
|
|
||||||
sku: {
|
|
||||||
price: '1.00',
|
|
||||||
stock_num: 227,
|
|
||||||
none_sku: false,
|
|
||||||
hide_stock: false,
|
|
||||||
collection_id: 2261,
|
|
||||||
tree: [
|
|
||||||
{
|
|
||||||
k: '颜色',
|
|
||||||
k_s: 's1',
|
|
||||||
k_id: '1',
|
|
||||||
v: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: '粉色',
|
|
||||||
imgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-1.png',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: '黄色',
|
|
||||||
imgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-2.png',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: '蓝色',
|
|
||||||
imgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-3.png',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
largeImageMode,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
k: '尺寸',
|
|
||||||
k_s: 's2',
|
|
||||||
k_id: '2',
|
|
||||||
v: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: '大',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: '小',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
id: 2259,
|
|
||||||
s1: '2',
|
|
||||||
s2: '1',
|
|
||||||
price: 100,
|
|
||||||
discount: 100,
|
|
||||||
stock_num: 110,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2260,
|
|
||||||
s1: '3',
|
|
||||||
s2: '1',
|
|
||||||
price: 100,
|
|
||||||
discount: 100,
|
|
||||||
stock_num: 99,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2257,
|
|
||||||
s1: '1',
|
|
||||||
s2: '1',
|
|
||||||
price: 100,
|
|
||||||
discount: 100,
|
|
||||||
stock_num: 111,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2258,
|
|
||||||
s1: '1',
|
|
||||||
s2: '2',
|
|
||||||
price: 100,
|
|
||||||
discount: 100,
|
|
||||||
stock_num: 6,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
messages: [
|
|
||||||
{
|
|
||||||
datetime: '0',
|
|
||||||
disable: false,
|
|
||||||
multiple: '0',
|
|
||||||
name: '留言1',
|
|
||||||
type: 'text',
|
|
||||||
required: '1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
datetime: '0',
|
|
||||||
disable: false,
|
|
||||||
multiple: 0,
|
|
||||||
name: '留言2',
|
|
||||||
type: 'id_no',
|
|
||||||
required: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
datetime: '0',
|
|
||||||
disable: false,
|
|
||||||
multiple: 0,
|
|
||||||
name: '留言3',
|
|
||||||
type: 'image',
|
|
||||||
required: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
datetime: '0',
|
|
||||||
disable: false,
|
|
||||||
multiple: 1,
|
|
||||||
name: '留言4',
|
|
||||||
type: 'text',
|
|
||||||
required: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
datetime: '0',
|
|
||||||
disable: false,
|
|
||||||
name: '数字',
|
|
||||||
multiple: 0,
|
|
||||||
type: 'tel',
|
|
||||||
required: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
datetime: '0',
|
|
||||||
disable: false,
|
|
||||||
name: '邮件',
|
|
||||||
multiple: 0,
|
|
||||||
type: 'email',
|
|
||||||
required: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
datetime: '0',
|
|
||||||
disable: false,
|
|
||||||
name: '日期',
|
|
||||||
multiple: 0,
|
|
||||||
type: 'date',
|
|
||||||
required: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
datetime: '0',
|
|
||||||
disable: false,
|
|
||||||
name: '时间',
|
|
||||||
multiple: 0,
|
|
||||||
type: 'time',
|
|
||||||
required: 0,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
properties: [
|
|
||||||
{
|
|
||||||
k: '加料',
|
|
||||||
k_id: 124,
|
|
||||||
is_multiple: true,
|
|
||||||
v: [
|
|
||||||
{
|
|
||||||
id: 1224,
|
|
||||||
name: '布丁',
|
|
||||||
price: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1225,
|
|
||||||
name: '波霸',
|
|
||||||
price: 4,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1226,
|
|
||||||
name: '珍珠',
|
|
||||||
price: 5,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const initialSku = {
|
|
||||||
s1: '1',
|
|
||||||
s2: '1',
|
|
||||||
selectedNum: 3,
|
|
||||||
selectedProp: {
|
|
||||||
124: [1225, 1226],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,277 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<demo-block :title="t('basicUsage')">
|
|
||||||
<div class="sku-container">
|
|
||||||
<van-sku
|
|
||||||
v-model="showBase"
|
|
||||||
:sku="skuData.sku"
|
|
||||||
:quota="skuData.quota"
|
|
||||||
:goods="skuData.goods_info"
|
|
||||||
:goods-id="skuData.goods_id"
|
|
||||||
:quota-used="skuData.quota_used"
|
|
||||||
:properties="skuData.properties"
|
|
||||||
:hide-stock="skuData.sku.hide_stock"
|
|
||||||
:message-config="messageConfig"
|
|
||||||
:start-sale-num="skuData.start_sale_num"
|
|
||||||
:custom-sku-validator="customSkuValidator"
|
|
||||||
disable-stepper-input
|
|
||||||
reset-stepper-on-hide
|
|
||||||
safe-area-inset-bottom
|
|
||||||
reset-selected-sku-on-hide
|
|
||||||
@buy-clicked="onBuyClicked"
|
|
||||||
@add-cart="onAddCartClicked"
|
|
||||||
/>
|
|
||||||
<van-button block type="primary" @click="showBase = true">
|
|
||||||
{{ t('basicUsage') }}
|
|
||||||
</van-button>
|
|
||||||
</div>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('customStepper')">
|
|
||||||
<div class="sku-container">
|
|
||||||
<van-sku
|
|
||||||
v-model="showStepper"
|
|
||||||
:sku="skuData.sku"
|
|
||||||
:quota="skuData.quota"
|
|
||||||
:goods="skuData.goods_info"
|
|
||||||
:goods-id="skuData.goods_id"
|
|
||||||
:quota-used="skuData.quota_used"
|
|
||||||
:properties="skuData.properties"
|
|
||||||
:hide-stock="skuData.sku.hide_stock"
|
|
||||||
:start-sale-num="skuData.start_sale_num"
|
|
||||||
:message-config="messageConfig"
|
|
||||||
:custom-stepper-config="customStepperConfig"
|
|
||||||
hide-quota-text
|
|
||||||
safe-area-inset-bottom
|
|
||||||
@buy-clicked="onBuyClicked"
|
|
||||||
@add-cart="onAddCartClicked"
|
|
||||||
/>
|
|
||||||
<van-button block type="primary" @click="showStepper = true">
|
|
||||||
{{ t('customStepper') }}
|
|
||||||
</van-button>
|
|
||||||
</div>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('hideSoldoutSku')">
|
|
||||||
<div class="sku-container">
|
|
||||||
<van-sku
|
|
||||||
v-model="showSoldout"
|
|
||||||
:sku="skuData.sku"
|
|
||||||
:quota="skuData.quota"
|
|
||||||
:goods="skuData.goods_info"
|
|
||||||
:goods-id="skuData.goods_id"
|
|
||||||
:quota-used="skuData.quota_used"
|
|
||||||
:properties="skuData.properties"
|
|
||||||
:hide-stock="skuData.sku.hide_stock"
|
|
||||||
:message-config="messageConfig"
|
|
||||||
:start-sale-num="skuData.start_sale_num"
|
|
||||||
:show-soldout-sku="false"
|
|
||||||
:custom-stepper-config="customStepperConfig"
|
|
||||||
hide-quota-text
|
|
||||||
safe-area-inset-bottom
|
|
||||||
@buy-clicked="onBuyClicked"
|
|
||||||
@add-cart="onAddCartClicked"
|
|
||||||
/>
|
|
||||||
<van-button block type="primary" @click="showSoldout = true">
|
|
||||||
{{ t('hideSoldoutSku') }}
|
|
||||||
</van-button>
|
|
||||||
</div>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('largeImageMode')">
|
|
||||||
<div class="sku-container">
|
|
||||||
<van-sku
|
|
||||||
v-model="showLargePicturePreview"
|
|
||||||
:sku="skuData2.sku"
|
|
||||||
:quota="skuData2.quota"
|
|
||||||
:goods="skuData2.goods_info"
|
|
||||||
:goods-id="skuData2.goods_id"
|
|
||||||
:hide-stock="skuData2.sku.hide_stock"
|
|
||||||
:properties="skuData2.properties"
|
|
||||||
:quota-used="skuData2.quota_used"
|
|
||||||
:message-config="messageConfig"
|
|
||||||
:start-sale-num="skuData2.start_sale_num"
|
|
||||||
:show-header-image="false"
|
|
||||||
:custom-sku-validator="customSkuValidator"
|
|
||||||
disable-stepper-input
|
|
||||||
reset-stepper-on-hide
|
|
||||||
safe-area-inset-bottom
|
|
||||||
reset-selected-sku-on-hide
|
|
||||||
@buy-clicked="onBuyClicked"
|
|
||||||
@add-cart="onAddCartClicked"
|
|
||||||
>
|
|
||||||
</van-sku>
|
|
||||||
<van-button
|
|
||||||
block
|
|
||||||
type="primary"
|
|
||||||
@click="showLargePicturePreview = true"
|
|
||||||
>
|
|
||||||
{{ t('largeImageMode') }}
|
|
||||||
</van-button>
|
|
||||||
</div>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('customBySlot')">
|
|
||||||
<div class="sku-container">
|
|
||||||
<van-sku
|
|
||||||
v-model="showCustom"
|
|
||||||
:stepper-title="t('stepperTitle')"
|
|
||||||
:sku="skuData.sku"
|
|
||||||
:goods="skuData.goods_info"
|
|
||||||
:goods-id="skuData.goods_id"
|
|
||||||
:hide-stock="skuData.sku.hide_stock"
|
|
||||||
:quota="skuData.quota"
|
|
||||||
:quota-used="skuData.quota_used"
|
|
||||||
:start-sale-num="skuData.start_sale_num"
|
|
||||||
:properties="skuData.properties"
|
|
||||||
show-add-cart-btn
|
|
||||||
reset-stepper-on-hide
|
|
||||||
safe-area-inset-bottom
|
|
||||||
:initial-sku="initialSku"
|
|
||||||
:message-config="messageConfig"
|
|
||||||
@buy-clicked="onBuyClicked"
|
|
||||||
@add-cart="onAddCartClicked"
|
|
||||||
>
|
|
||||||
<template #sku-header-price="{ price }">
|
|
||||||
<div class="van-sku__goods-price">
|
|
||||||
<span class="van-sku__price-symbol">￥</span>
|
|
||||||
<span class="van-sku__price-num">{{ price }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #sku-actions-top>
|
|
||||||
<div class="van-sku-header-item text-center">
|
|
||||||
{{ t('actionsTop') }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #sku-actions="{ skuEventBus }">
|
|
||||||
<div class="van-sku-actions">
|
|
||||||
<van-button
|
|
||||||
square
|
|
||||||
size="large"
|
|
||||||
type="warning"
|
|
||||||
@click="onPointClicked"
|
|
||||||
>
|
|
||||||
{{ t('button1') }}
|
|
||||||
</van-button>
|
|
||||||
<van-button
|
|
||||||
square
|
|
||||||
size="large"
|
|
||||||
type="danger"
|
|
||||||
@click="skuEventBus.$emit('sku:buy')"
|
|
||||||
>
|
|
||||||
{{ t('button2') }}
|
|
||||||
</van-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</van-sku>
|
|
||||||
<van-button block type="primary" @click="showCustom = true">
|
|
||||||
{{ t('customBySlot') }}
|
|
||||||
</van-button>
|
|
||||||
</div>
|
|
||||||
</demo-block>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { initialSku, getSkuData } from './data';
|
|
||||||
import { LIMIT_TYPE } from '../constants';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
button1: '积分兑换',
|
|
||||||
button2: '买买买',
|
|
||||||
actionsTop: '商品不多，赶快购买吧',
|
|
||||||
stepperTitle: '我要买',
|
|
||||||
customBySlot: '通过插槽定制',
|
|
||||||
customStepper: '自定义步进器',
|
|
||||||
hideSoldoutSku: '隐藏售罄规格',
|
|
||||||
largeImageMode: '大图预览模式',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
button1: 'Button',
|
|
||||||
button2: 'Button',
|
|
||||||
actionsTop: 'Action top info',
|
|
||||||
customBySlot: 'Custom By Slot',
|
|
||||||
stepperTitle: 'Stepper title',
|
|
||||||
customStepper: 'Custom Stepper',
|
|
||||||
hideSoldoutSku: 'Hide Soldout Sku',
|
|
||||||
largeImageMode: 'Large Image Mode',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
this.skuData = getSkuData();
|
|
||||||
this.skuData2 = getSkuData(true);
|
|
||||||
this.initialSku = initialSku;
|
|
||||||
|
|
||||||
return {
|
|
||||||
showBase: false,
|
|
||||||
showCustom: false,
|
|
||||||
showStepper: false,
|
|
||||||
showSoldout: false,
|
|
||||||
showLargePicturePreview: false,
|
|
||||||
customSkuValidator: () => '请选择xxx',
|
|
||||||
customStepperConfig: {
|
|
||||||
quotaText: '单次限购100件',
|
|
||||||
stockFormatter: (stock) => `剩余${stock}`,
|
|
||||||
handleOverLimit: (data) => {
|
|
||||||
const { action, limitType, quota, startSaleNum = 1 } = data;
|
|
||||||
|
|
||||||
if (action === 'minus') {
|
|
||||||
this.$toast(
|
|
||||||
startSaleNum > 1 ? `${startSaleNum}件起售` : '至少选择一件商品'
|
|
||||||
);
|
|
||||||
} else if (action === 'plus') {
|
|
||||||
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
|
|
||||||
this.$toast(`限购${quota}件`);
|
|
||||||
} else {
|
|
||||||
this.$toast('库存不够了');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
messageConfig: {
|
|
||||||
initialMessages: {
|
|
||||||
留言1: '商品留言',
|
|
||||||
},
|
|
||||||
uploadImg: (file, img) =>
|
|
||||||
new Promise((resolve) => {
|
|
||||||
setTimeout(() => resolve(img), 1000);
|
|
||||||
}),
|
|
||||||
uploadMaxSize: 3,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onBuyClicked(data) {
|
|
||||||
this.$toast('buy:' + JSON.stringify(data));
|
|
||||||
},
|
|
||||||
|
|
||||||
onAddCartClicked(data) {
|
|
||||||
this.$toast('add cart:' + JSON.stringify(data));
|
|
||||||
},
|
|
||||||
|
|
||||||
onPointClicked() {
|
|
||||||
this.$toast('积分兑换');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../style/var';
|
|
||||||
|
|
||||||
.demo-sku {
|
|
||||||
background-color: @white;
|
|
||||||
|
|
||||||
.sku-container {
|
|
||||||
padding: 0 @padding-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
// Utils
|
|
||||||
import lang from './lang';
|
|
||||||
import constants from './constants';
|
|
||||||
import skuHelper from './utils/sku-helper';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import Sku from './Sku';
|
|
||||||
import Locale from '../locale';
|
|
||||||
import SkuActions from './components/SkuActions';
|
|
||||||
import SkuHeader from './components/SkuHeader';
|
|
||||||
import SkuHeaderItem from './components/SkuHeaderItem';
|
|
||||||
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';
|
|
||||||
|
|
||||||
Locale.add(lang);
|
|
||||||
|
|
||||||
Sku.SkuActions = SkuActions;
|
|
||||||
Sku.SkuHeader = SkuHeader;
|
|
||||||
Sku.SkuHeaderItem = SkuHeaderItem;
|
|
||||||
Sku.SkuMessages = SkuMessages;
|
|
||||||
Sku.SkuStepper = SkuStepper;
|
|
||||||
Sku.SkuRow = SkuRow;
|
|
||||||
Sku.SkuRowItem = SkuRowItem;
|
|
||||||
Sku.SkuRowPropItem = SkuRowPropItem;
|
|
||||||
Sku.skuHelper = skuHelper;
|
|
||||||
Sku.skuConstants = constants;
|
|
||||||
|
|
||||||
export default Sku;
|
|
||||||
@ -1,373 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
@import '../style/mixins/clearfix';
|
|
||||||
|
|
||||||
.van-sku {
|
|
||||||
&-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
min-height: 50%;
|
|
||||||
max-height: 80%;
|
|
||||||
overflow-y: visible;
|
|
||||||
font-size: @font-size-md;
|
|
||||||
background: @white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-body {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
min-height: 44px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-header {
|
|
||||||
display: flex;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin: 0 @padding-md;
|
|
||||||
|
|
||||||
&__img-wrap {
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
margin: @padding-sm @padding-sm @padding-sm 0;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: @border-radius-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__goods-info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding: @padding-sm 20px @padding-sm 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-header-item {
|
|
||||||
margin-top: @padding-xs;
|
|
||||||
color: @gray-6;
|
|
||||||
font-size: @font-size-sm;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__price-symbol {
|
|
||||||
font-size: @font-size-lg;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__price-num {
|
|
||||||
font-weight: @font-weight-bold;
|
|
||||||
font-size: 22px;
|
|
||||||
vertical-align: bottom;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__goods-price {
|
|
||||||
// for price align
|
|
||||||
margin-left: -2px;
|
|
||||||
color: @red;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__price-tag {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: @padding-xs;
|
|
||||||
padding: 0 5px;
|
|
||||||
overflow: hidden;
|
|
||||||
color: @red;
|
|
||||||
font-size: @font-size-sm;
|
|
||||||
line-height: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: currentColor;
|
|
||||||
opacity: 0.1;
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-group-container {
|
|
||||||
padding-top: @padding-sm;
|
|
||||||
|
|
||||||
&--hide-soldout {
|
|
||||||
.van-sku-row__item--disabled {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* sku row */
|
|
||||||
&-row {
|
|
||||||
margin: 0 @padding-md @padding-sm;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__item,
|
|
||||||
&__image-item {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
color: @text-color;
|
|
||||||
border-radius: @border-radius-md;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: @sku-item-background-color;
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
&--active {
|
|
||||||
color: @red;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: currentColor;
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__item {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-width: 40px;
|
|
||||||
margin: 0 @padding-sm @padding-sm 0;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
&-img {
|
|
||||||
z-index: 1;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin: 4px 0 4px 4px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: @border-radius-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-name {
|
|
||||||
z-index: 1;
|
|
||||||
padding: @padding-xs;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--disabled {
|
|
||||||
color: @gray-5;
|
|
||||||
background: @active-color;
|
|
||||||
cursor: not-allowed;
|
|
||||||
|
|
||||||
.van-sku-row__item-img {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__image {
|
|
||||||
margin-right: 0;
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 110px;
|
|
||||||
margin: 0 4px 4px 0;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 110px;
|
|
||||||
|
|
||||||
&-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 3;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-name {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 40px;
|
|
||||||
padding: @padding-base;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
|
|
||||||
span {
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--active {
|
|
||||||
border-color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--disabled {
|
|
||||||
color: @gray-5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
z-index: 2;
|
|
||||||
background: @active-color;
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
padding-bottom: @padding-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title-multiple {
|
|
||||||
color: @gray-6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__scroller {
|
|
||||||
margin: 0 -@padding-md;
|
|
||||||
overflow-x: scroll;
|
|
||||||
overflow-y: hidden;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__row {
|
|
||||||
display: inline-flex;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
padding: 0 @padding-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indicator {
|
|
||||||
width: 40px;
|
|
||||||
height: 4px;
|
|
||||||
background: @gray-3;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
padding-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-slider {
|
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: @red;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-stepper-stock {
|
|
||||||
padding: @padding-sm @padding-md;
|
|
||||||
overflow: hidden;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__stepper {
|
|
||||||
float: right;
|
|
||||||
padding-left: @padding-base;
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-quota {
|
|
||||||
float: right;
|
|
||||||
color: @red;
|
|
||||||
font-size: @font-size-sm;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__stock {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: @padding-xs;
|
|
||||||
color: @gray-6;
|
|
||||||
font-size: @font-size-sm;
|
|
||||||
|
|
||||||
&-num--highlight {
|
|
||||||
color: @red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-messages {
|
|
||||||
padding-bottom: @padding-xl;
|
|
||||||
|
|
||||||
&__image-cell {
|
|
||||||
.van-cell__title {
|
|
||||||
max-width: @field-label-width;
|
|
||||||
margin-right: @field-label-margin-right;
|
|
||||||
color: @field-label-color;
|
|
||||||
text-align: left;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-cell__value {
|
|
||||||
overflow: visible;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-label {
|
|
||||||
color: @cell-label-color;
|
|
||||||
font-size: @cell-label-font-size;
|
|
||||||
line-height: @cell-label-line-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: @padding-xs @padding-md;
|
|
||||||
|
|
||||||
.van-button {
|
|
||||||
height: 40px;
|
|
||||||
font-weight: @font-weight-bold;
|
|
||||||
font-size: @font-size-md;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:first-of-type {
|
|
||||||
border-top-left-radius: 20px;
|
|
||||||
border-bottom-left-radius: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
border-top-right-radius: 20px;
|
|
||||||
border-bottom-right-radius: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--warning {
|
|
||||||
background: @gradient-orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--danger {
|
|
||||||
background: @gradient-red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
/**
|
|
||||||
* Sku only provide zh-CN lang by default
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
'zh-CN': {
|
|
||||||
vanSku: {
|
|
||||||
select: '请选择',
|
|
||||||
selected: '已选',
|
|
||||||
selectSku: '请先选择商品规格',
|
|
||||||
soldout: '库存不足',
|
|
||||||
originPrice: '原价',
|
|
||||||
minusTip: '至少选择一件',
|
|
||||||
minusStartTip: (start: number) => `${start}件起售`,
|
|
||||||
unavailable: '商品已经无法购买啦',
|
|
||||||
stock: '剩余',
|
|
||||||
stockUnit: '件',
|
|
||||||
quotaTip: (quota: number) => `每人限购${quota}件`,
|
|
||||||
quotaUsedTip: (quota: number, count: number) =>
|
|
||||||
`每人限购${quota}件，你已购买${count}件`,
|
|
||||||
},
|
|
||||||
vanSkuActions: {
|
|
||||||
buy: '立即购买',
|
|
||||||
addCart: '加入购物车',
|
|
||||||
},
|
|
||||||
vanSkuImgUploader: {
|
|
||||||
oversize: (maxSize: number) =>
|
|
||||||
`最大可上传图片为${maxSize}MB，请尝试压缩图片尺寸`,
|
|
||||||
fail: '上传失败',
|
|
||||||
uploading: '上传中...',
|
|
||||||
},
|
|
||||||
vanSkuStepper: {
|
|
||||||
quotaLimit: (quota: number) => `限购${quota}件`,
|
|
||||||
quotaStart: (start: number) => `${start}件起售`,
|
|
||||||
comma: '，',
|
|
||||||
num: '购买数量',
|
|
||||||
},
|
|
||||||
vanSkuMessages: {
|
|
||||||
fill: '请填写',
|
|
||||||
upload: '请上传',
|
|
||||||
imageLabel: '仅限一张',
|
|
||||||
invalid: {
|
|
||||||
tel: '请填写正确的数字格式留言',
|
|
||||||
mobile: '手机号长度为6-20位数字',
|
|
||||||
email: '请填写正确的邮箱',
|
|
||||||
id_no: '请填写正确的身份证号码',
|
|
||||||
},
|
|
||||||
placeholder: {
|
|
||||||
id_no: '请填写身份证号',
|
|
||||||
text: '请填写留言',
|
|
||||||
tel: '请填写数字',
|
|
||||||
email: '请填写邮箱',
|
|
||||||
date: '请选择日期',
|
|
||||||
time: '请选择时间',
|
|
||||||
textarea: '请填写留言',
|
|
||||||
mobile: '请填写手机号',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
vanSkuRow: {
|
|
||||||
multiple: '可多选',
|
|
||||||
},
|
|
||||||
vanSkuDatetimeField: {
|
|
||||||
title: {
|
|
||||||
date: '选择年月日',
|
|
||||||
time: '选择时间',
|
|
||||||
datetime: '选择日期时间',
|
|
||||||
},
|
|
||||||
format: {
|
|
||||||
year: '年',
|
|
||||||
month: '月',
|
|
||||||
day: '日',
|
|
||||||
hour: '时',
|
|
||||||
minute: '分',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="sku-container">
|
|
||||||
<!----> <button class="van-button van-button--primary van-button--normal van-button--block">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">
|
|
||||||
基础用法
|
|
||||||
</span></div>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="sku-container">
|
|
||||||
<!----> <button class="van-button van-button--primary van-button--normal van-button--block">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">
|
|
||||||
自定义步进器
|
|
||||||
</span></div>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="sku-container">
|
|
||||||
<!----> <button class="van-button van-button--primary van-button--normal van-button--block">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">
|
|
||||||
隐藏售罄规格
|
|
||||||
</span></div>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="sku-container">
|
|
||||||
<!----> <button class="van-button van-button--primary van-button--normal van-button--block">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">
|
|
||||||
大图预览模式
|
|
||||||
</span></div>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="sku-container">
|
|
||||||
<!----> <button class="van-button van-button--primary van-button--normal van-button--block">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">
|
|
||||||
通过插槽定制
|
|
||||||
</span></div>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import Demo from '../demo';
|
|
||||||
import { snapshotDemo } from '../../../test/demo';
|
|
||||||
|
|
||||||
snapshotDemo(Demo);
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
import { mount } from '../../../test';
|
|
||||||
import Sku from '..';
|
|
||||||
import { getSkuData, initialSku } from '../demo/data';
|
|
||||||
import { stringToDate, dateToString } from '../utils/time-helper';
|
|
||||||
|
|
||||||
const skuData = getSkuData();
|
|
||||||
|
|
||||||
test('resetSelectedSku method', () => {
|
|
||||||
skuData.sku.messages = [];
|
|
||||||
|
|
||||||
const wrapper = mount(Sku, {
|
|
||||||
propsData: {
|
|
||||||
value: true,
|
|
||||||
initialSku,
|
|
||||||
sku: skuData.sku,
|
|
||||||
quota: skuData.quota,
|
|
||||||
goods: skuData.goods_info,
|
|
||||||
goodsId: skuData.goods_id,
|
|
||||||
quotaUsed: skuData.quota_used,
|
|
||||||
hideStock: skuData.sku.hide_stock,
|
|
||||||
startSaleNum: skuData.start_sale_num,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('.van-button--danger').trigger('click');
|
|
||||||
expect(wrapper.emitted('buy-clicked').length).toEqual(1);
|
|
||||||
|
|
||||||
wrapper.setProps({ initialSku: {} });
|
|
||||||
wrapper.vm.resetSelectedSku();
|
|
||||||
|
|
||||||
wrapper.find('.van-button--danger').trigger('click');
|
|
||||||
expect(wrapper.emitted('buy-clicked').length).toEqual(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('message formatter', () => {
|
|
||||||
const skuData = getSkuData();
|
|
||||||
|
|
||||||
skuData.sku.messages = skuData.sku.messages.filter(
|
|
||||||
message => message.type === 'tel'
|
|
||||||
);
|
|
||||||
|
|
||||||
const wrapper = mount(Sku, {
|
|
||||||
propsData: {
|
|
||||||
value: true,
|
|
||||||
initialSku,
|
|
||||||
sku: skuData.sku,
|
|
||||||
quota: skuData.quota,
|
|
||||||
goods: skuData.goods_info,
|
|
||||||
goodsId: skuData.goods_id,
|
|
||||||
quotaUsed: skuData.quota_used,
|
|
||||||
hideStock: skuData.sku.hide_stock,
|
|
||||||
startSaleNum: skuData.start_sale_num,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const input = wrapper.find('input');
|
|
||||||
const correctValue = '15000000000';
|
|
||||||
|
|
||||||
// \u202c
|
|
||||||
input.element.value = '15000000000';
|
|
||||||
input.trigger('input');
|
|
||||||
|
|
||||||
expect(input.element.value).toEqual(correctValue);
|
|
||||||
|
|
||||||
// \u0020
|
|
||||||
input.element.value = '150 0000 0000';
|
|
||||||
input.trigger('input');
|
|
||||||
|
|
||||||
expect(input.element.value).toEqual(correctValue);
|
|
||||||
|
|
||||||
// /[a-zA-z]/
|
|
||||||
input.element.value = 'a-zA-z';
|
|
||||||
input.trigger('input');
|
|
||||||
|
|
||||||
expect(input.element.value).toEqual('');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('stringToDate', () => {
|
|
||||||
expect(dateToString(stringToDate(''))).toEqual('');
|
|
||||||
expect(dateToString(stringToDate('2020-07-01'))).toEqual('2020-07-01');
|
|
||||||
expect(dateToString(stringToDate('2020-07-01 22:44'), 'datetime')).toEqual(
|
|
||||||
'2020-07-01 22:44'
|
|
||||||
);
|
|
||||||
expect(dateToString(stringToDate('2020-12-31 23:59'), 'datetime')).toEqual(
|
|
||||||
'2020-12-31 23:59'
|
|
||||||
);
|
|
||||||
});
|
|
||||||
@ -1,158 +0,0 @@
|
|||||||
import { UNSELECTED_SKU_VALUE_ID } from '../constants';
|
|
||||||
|
|
||||||
/*
|
|
||||||
normalize sku tree
|
|
||||||
|
|
||||||
[
|
|
||||||
{
|
|
||||||
count: 2,
|
|
||||||
k: "品种", // 规格名称 skuKeyName
|
|
||||||
k_id: "1200", // skuKeyId
|
|
||||||
k_s: "s1" // skuKeyStr
|
|
||||||
v: [ // skuValues
|
|
||||||
{ // skuValue
|
|
||||||
id: "1201", // skuValueId
|
|
||||||
name: "萌" // 具体的规格值 skuValueName
|
|
||||||
}, {
|
|
||||||
id: "973",
|
|
||||||
name: "帅"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
...
|
|
||||||
]
|
|
||||||
|
|
|
||||||
v
|
|
||||||
{
|
|
||||||
s1: [{
|
|
||||||
id: "1201",
|
|
||||||
name: "萌"
|
|
||||||
}, {
|
|
||||||
id: "973",
|
|
||||||
name: "帅"
|
|
||||||
}],
|
|
||||||
...
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
export const normalizeSkuTree = (skuTree) => {
|
|
||||||
const normalizedTree = {};
|
|
||||||
skuTree.forEach((treeItem) => {
|
|
||||||
normalizedTree[treeItem.k_s] = treeItem.v;
|
|
||||||
});
|
|
||||||
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值不为空的值
|
|
||||||
const selected = Object.keys(selectedSku).filter(
|
|
||||||
(skuKeyStr) => selectedSku[skuKeyStr] !== UNSELECTED_SKU_VALUE_ID
|
|
||||||
);
|
|
||||||
return skuTree.length === selected.length;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 根据已选择的 sku 获取 skuComb
|
|
||||||
export const getSkuComb = (skuList, selectedSku) => {
|
|
||||||
const skuComb = skuList.filter((item) =>
|
|
||||||
Object.keys(selectedSku).every(
|
|
||||||
(skuKeyStr) => String(item[skuKeyStr]) === String(selectedSku[skuKeyStr])
|
|
||||||
)
|
|
||||||
);
|
|
||||||
return skuComb[0];
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取已选择的sku名称
|
|
||||||
export const getSelectedSkuValues = (skuTree, selectedSku) => {
|
|
||||||
const normalizedTree = normalizeSkuTree(skuTree);
|
|
||||||
return Object.keys(selectedSku).reduce((selectedValues, skuKeyStr) => {
|
|
||||||
const skuValues = normalizedTree[skuKeyStr];
|
|
||||||
const skuValueId = selectedSku[skuKeyStr];
|
|
||||||
|
|
||||||
if (skuValueId !== UNSELECTED_SKU_VALUE_ID) {
|
|
||||||
const skuValue = skuValues.filter((value) => value.id === skuValueId)[0];
|
|
||||||
skuValue && selectedValues.push(skuValue);
|
|
||||||
}
|
|
||||||
return selectedValues;
|
|
||||||
}, []);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 判断sku是否可选
|
|
||||||
export const isSkuChoosable = (skuList, selectedSku, skuToChoose) => {
|
|
||||||
const { key, valueId } = skuToChoose;
|
|
||||||
|
|
||||||
// 先假设sku已选中，拼入已选中sku对象中
|
|
||||||
const matchedSku = {
|
|
||||||
...selectedSku,
|
|
||||||
[key]: valueId,
|
|
||||||
};
|
|
||||||
|
|
||||||
// 再判断剩余sku是否全部不可选，若不可选则当前sku不可选中
|
|
||||||
const skusToCheck = Object.keys(matchedSku).filter(
|
|
||||||
(skuKey) => matchedSku[skuKey] !== UNSELECTED_SKU_VALUE_ID
|
|
||||||
);
|
|
||||||
|
|
||||||
const filteredSku = skuList.filter((sku) =>
|
|
||||||
skusToCheck.every(
|
|
||||||
(skuKey) => String(matchedSku[skuKey]) === String(sku[skuKey])
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
const stock = filteredSku.reduce((total, sku) => {
|
|
||||||
total += sku.stock_num;
|
|
||||||
return total;
|
|
||||||
}, 0);
|
|
||||||
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 const getSelectedProperties = (propList, selectedProp) => {
|
|
||||||
const list = [];
|
|
||||||
(propList || []).forEach((prop) => {
|
|
||||||
if (selectedProp[prop.k_id] && selectedProp[prop.k_id].length > 0) {
|
|
||||||
const v = [];
|
|
||||||
prop.v.forEach((it) => {
|
|
||||||
if (selectedProp[prop.k_id].indexOf(it.id) > -1) {
|
|
||||||
v.push({ ...it });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
list.push({
|
|
||||||
...prop,
|
|
||||||
v,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return list;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
normalizeSkuTree,
|
|
||||||
getSkuComb,
|
|
||||||
getSelectedSkuValues,
|
|
||||||
isAllSelected,
|
|
||||||
isSkuChoosable,
|
|
||||||
getSelectedPropValues,
|
|
||||||
getSelectedProperties,
|
|
||||||
};
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import { padZero } from '../../utils/format/string';
|
|
||||||
|
|
||||||
// 字符串转 Date
|
|
||||||
// 只处理 YYYY-MM-DD 或者 YYYY-MM-DD HH:MM 格式
|
|
||||||
export function stringToDate(timeString) {
|
|
||||||
if (!timeString) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return new Date(timeString.replace(/-/g, '/'));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Date 转字符串
|
|
||||||
// type: date or datetime
|
|
||||||
export function dateToString(date, type = 'date') {
|
|
||||||
if (!date) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
const year = date.getFullYear();
|
|
||||||
const month = date.getMonth() + 1;
|
|
||||||
const day = date.getDate();
|
|
||||||
let timeString = `${year}-${padZero(month)}-${padZero(day)}`;
|
|
||||||
if (type === 'datetime') {
|
|
||||||
const hours = date.getHours();
|
|
||||||
const minute = date.getMinutes();
|
|
||||||
timeString += ` ${padZero(hours)}:${padZero(minute)}`;
|
|
||||||
}
|
|
||||||
return timeString;
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user