May 07, 2021 Vant
import Vue from 'vue';
import { Sku } from 'vant';
Vue.use(Sku);
<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"
/>
export default {
data() {
return {
show: false,
sku: {
// 数据结构见下方文档
},
goods: {
// 数据结构见下方文档
},
messageConfig: {
// 数据结构见下方文档
}
};
}
}
<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"
/>
<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 slot="sku-header-price" slot-scope="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 slot="sku-actions" slot-scope="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>
Parameters | Description | Type | The default |
---|---|---|---|
v-model | Whether sku is displayed | boolean |
false
|
Sku | Merchandise sku data | object | - |
goods | Product information | object | - |
goods-id | Product id | number | string | - |
price-tag | The label that appears after the price | string | - |
hide-stock | Whether to display the remaining inventory of the item | boolean |
false
|
hide-quota-text | Whether to display a limited purchase prompt | boolean |
false
|
hide-selected-text | Whether to hide the selected prompt | boolean |
false
|
stock-threshold | Inventory threshold. Below this value will highlight the number of inventory | boolean |
50
|
show-add-cart-btn | Whether to display the Add Shopping Cart button | boolean |
true
|
buy-text | Buy button text | string |
立即购买
|
add-cart-text | Add cart button text | string |
加入购物车
|
quota | Limit purchases, 0 means unlimited purchases | number |
0
|
quota-used | The quantity that has been purchased | number |
0
|
reset-stepper-on-hide | Reset the selected number of items when hiding | boolean |
false
|
reset-selected-sku-on-hide | Reset the selected sku when you hide | boolean |
false
|
disable-stepper-input | Whether to disable the stepr input | boolean |
false
|
close-on-click-overlay | Whether to close after tapping the matte layer | boolean |
false
|
stepper-title | Quantity selects the document on the left side of the component | string |
购买数量
|
custom-stepper-config | The custom configuration associated with the stepr | object |
{}
|
message-config | Message-related configuration | object |
{}
|
get-container | Specify the mounted node, using an example | string | () => Element | - |
initial-sku | The sku selected by default, with specific reference to advanced usage | object |
{}
|
show-soldout-sku | Whether to show sold-out sku, the default display is to display the same gray | boolean |
true
|
safe-area-inset-bottom
v2.2.1
|
Whether to turn on the bottom safety zone to fit | boolean |
false
|
start-sale-num
v2.3.0
|
The number of starting sales | number |
1
|
properties
v2.4.2
|
The attribute of the product | array | - |
The name of the event | Description | Callback parameters |
---|---|---|
add-cart | Click to add a shopping cart callback | skuData: object |
buy-clicked | Click to buy a callback | skuData: object |
stepper-change | Triggered when the number of purchases changes | value: number |
sku-selected | Triggered when switching specification classes | { skuValue, selectedSku, selectedSkuComb } |
sku-prop-selected | Triggered when switching product properties | { propValue, selectedProp, selectedSkuComb } |
open-preview | Trigger when you open a preview of the product picture | data: object |
close-preview | Trigger when you close the preview of the product picture | data: object |
Ref allows you to get to the Sku instance and call the instance method, as detailed in the component instance method
The method name | Description | Parameters | Returns a value |
---|---|---|---|
getSkuData | Gets the current skuData | - | skuData |
resetSelectedSku
v2.3.0
|
Reset the selected specification to the initial state | - | - |
By default, the Sku component is divided into chunks that are defined as slots that can be replaced on demand. The block order can be found in the table below:
Name | Description |
---|---|
sku-header | Product information display area, including product pictures, names, prices and other information |
sku-header-price | Custom sku header price display |
sku-header-origin-price | Custom sku header original price display |
sku-header-extra | Extra sku head area |
sku-body-top | Content above the sku showcase, no default presentation, on demand |
sku-group | Merchandise sku display area |
extra-sku-group | Additional merchandise sku display area, generally not available |
sku-stepper | The quantity selection area for goods |
sku-messages | Merchandise message area |
sku-actions | The action button area |
sku: {
// 所有sku规格类目与其值的从属关系,比如商品有颜色和尺码两大类规格,颜色下面又有红色和蓝色两个规格值。
// 可以理解为一个商品可以有多个规格类目,一个规格类目下可以有多个规格值。
tree: [
{
k: '颜色', // skuKeyName:规格类目名称
v: [
{
id: '30349', // skuValueId:规格值 id
name: '红色', // skuValueName:规格值名称
imgUrl: 'https://img.yzcdn.cn/1.jpg', // 规格类目图片,只有第一个规格类目可以定义图片
previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
},
{
id: '1215',
name: '蓝色',
imgUrl: 'https://img.yzcdn.cn/2.jpg',
previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
}
],
k_s: 's1' // skuKeyStr:sku 组合列表(下方 list)中当前类目对应的 key 值,value 值会是从属于当前类目的一个规格值 id
}
],
// 所有 sku 的组合列表,比如红色、M 码为一个 sku 组合,红色、S 码为另一个组合
list: [
{
id: 2259, // skuId,下单时后端需要
price: 100, // 价格(单位分)
s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
s3: '0', // 最多包含3个规格值,为0表示不存在该规格
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 // 是否隐藏剩余库存
}
[ // 商品属性
{
k_id: 123, // 属性id
k: '加料', // 属性名
is_multiple: true, // 是否可多选
v: [
{
id: 1222, // 属性值id
name: '珍珠', // 属性值名
price: 1, // 属性值加价
},
{
id: 1223,
name: '椰果',
price: 1,
}
],
}
]
{
// 键:skuKeyStr(sku 组合列表中当前类目对应的 key 值)
// 值:skuValueId(规格值 id)
s1: '30349',
s2: '1193',
// 初始选中数量
selectedNum: 3,
// 初始选中的商品属性
// 键:属性id
// 值:属性值id列表
selectedProp: {
123: [1222]
}
}
goods: {
// 商品标题
title: '测试商品',
// 默认商品 sku 缩略图
picture: 'https://img.yzcdn.cn/1.jpg'
}
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: {
// 图片上传回调,需要返回一个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',
...
}
}
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
},
}