mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Improvement] Sku: support i18n (#439)
This commit is contained in:
neverland
GitHub
parent
2db9b12816
commit
f43b496333
@ -1,236 +1,517 @@
|
||||
/* eslint-disable */
|
||||
var _global = {
|
||||
"kdt_id": 55,
|
||||
"user_id": 4674509,
|
||||
"offline_id": 0,
|
||||
"activity_alias": "",
|
||||
"sku": {
|
||||
"tree": [{
|
||||
"k": "\u989c\u8272",
|
||||
"k_id": "1",
|
||||
"v": [{
|
||||
"id": "30349",
|
||||
"name": "\u5929\u84dd\u8272",
|
||||
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg"
|
||||
}],
|
||||
"k_s": "s1",
|
||||
"count": 2
|
||||
}, {
|
||||
"k": "\u5c3a\u5bf8",
|
||||
"k_id": "2",
|
||||
"v": [{
|
||||
"id": "1193",
|
||||
"name": "1"
|
||||
}, {
|
||||
"id": "1194",
|
||||
"name": "2"
|
||||
}],
|
||||
"k_s": "s2",
|
||||
"count": 2
|
||||
}],
|
||||
"list": [{
|
||||
"id": 2259,
|
||||
"price": 100,
|
||||
"discount": 100,
|
||||
"code": "",
|
||||
"s1": "1215",
|
||||
"s2": "1193",
|
||||
"s3": "0",
|
||||
"s4": "0",
|
||||
"s5": "0",
|
||||
"extend": null,
|
||||
"kdt_id": 55,
|
||||
"discount_price": 0,
|
||||
"stock_num": 110,
|
||||
"stock_mode": 0,
|
||||
"is_sell": null,
|
||||
"combin_sku": false,
|
||||
"goods_id": 946755
|
||||
}, {
|
||||
"id": 2260,
|
||||
"price": 100,
|
||||
"discount": 100,
|
||||
"code": "",
|
||||
"s1": "1215",
|
||||
"s2": "1194",
|
||||
"s3": "0",
|
||||
"s4": "0",
|
||||
"s5": "0",
|
||||
"extend": null,
|
||||
"kdt_id": 55,
|
||||
"discount_price": 0,
|
||||
"stock_num": 0,
|
||||
"stock_mode": 0,
|
||||
"is_sell": null,
|
||||
"combin_sku": false,
|
||||
"goods_id": 946755
|
||||
}, {
|
||||
"id": 2257,
|
||||
"price": 100,
|
||||
"discount": 100,
|
||||
"code": "",
|
||||
"s1": "30349",
|
||||
"s2": "1193",
|
||||
"s3": "0",
|
||||
"s4": "0",
|
||||
"s5": "0",
|
||||
"extend": null,
|
||||
"kdt_id": 55,
|
||||
"discount_price": 0,
|
||||
"stock_num": 111,
|
||||
"stock_mode": 0,
|
||||
"is_sell": null,
|
||||
"combin_sku": false,
|
||||
"goods_id": 946755
|
||||
}, {
|
||||
"id": 2258,
|
||||
"price": 100,
|
||||
"discount": 100,
|
||||
"code": "",
|
||||
"s1": "30349",
|
||||
"s2": "1194",
|
||||
"s3": "0",
|
||||
"s4": "0",
|
||||
"s5": "0",
|
||||
"extend": null,
|
||||
"kdt_id": 55,
|
||||
"discount_price": 0,
|
||||
"stock_num": 6,
|
||||
"stock_mode": 0,
|
||||
"is_sell": null,
|
||||
"combin_sku": false,
|
||||
"goods_id": 946755
|
||||
}],
|
||||
"price": "1.00",
|
||||
"stock_num": 227,
|
||||
"collection_id": 2261,
|
||||
"collection_price": 0,
|
||||
"none_sku": false,
|
||||
"sold_num": 0,
|
||||
"min_price": "1.00",
|
||||
"max_price": "1.00",
|
||||
"messages": [{
|
||||
"datetime": "0",
|
||||
"disable_multiple": false,
|
||||
"disable": false,
|
||||
"multiple": "0",
|
||||
"name": "\u7559\u8a001",
|
||||
"disable_required": false,
|
||||
"disable_edit_name": false,
|
||||
"type": "text",
|
||||
"disable_delete": false,
|
||||
"disable_type": false,
|
||||
"required": "1"
|
||||
}, {
|
||||
"datetime": "0",
|
||||
"disable_multiple": false,
|
||||
"disable": false,
|
||||
"multiple": 0,
|
||||
"name": "\u7559\u8a002",
|
||||
"disable_required": false,
|
||||
"disable_edit_name": false,
|
||||
"type": "id_no",
|
||||
"disable_delete": false,
|
||||
"disable_type": false,
|
||||
"required": 0
|
||||
}, {
|
||||
"datetime": "0",
|
||||
"disable_multiple": false,
|
||||
"disable": false,
|
||||
"multiple": 0,
|
||||
"name": "\u7559\u8a003",
|
||||
"disable_required": false,
|
||||
"disable_edit_name": false,
|
||||
"type": "image",
|
||||
"disable_delete": false,
|
||||
"disable_type": false,
|
||||
"required": 0
|
||||
}, {
|
||||
"datetime": "0",
|
||||
"disable_multiple": false,
|
||||
"disable": false,
|
||||
"multiple": 1,
|
||||
"name": "\u7559\u8a004",
|
||||
"disable_required": false,
|
||||
"disable_edit_name": false,
|
||||
"type": "text",
|
||||
"disable_delete": false,
|
||||
"disable_type": false,
|
||||
"required": 0
|
||||
}, {
|
||||
"datetime": "0",
|
||||
"disable_multiple": false,
|
||||
"disable": false,
|
||||
"name": "\u6570\u5b57",
|
||||
"multiple": 0,
|
||||
"disable_required": false,
|
||||
"disable_edit_name": false,
|
||||
"type": "tel",
|
||||
"disable_delete": false,
|
||||
"disable_type": false,
|
||||
"required": 0
|
||||
}, {
|
||||
"datetime": "0",
|
||||
"disable_multiple": false,
|
||||
"disable": false,
|
||||
"name": "\u90ae\u4ef6",
|
||||
"multiple": 0,
|
||||
"disable_required": false,
|
||||
"disable_edit_name": false,
|
||||
"type": "email",
|
||||
"disable_delete": false,
|
||||
"disable_type": false,
|
||||
"required": 0
|
||||
}, {
|
||||
"datetime": "0",
|
||||
"disable_multiple": false,
|
||||
"disable": false,
|
||||
"name": "\u65e5\u671f",
|
||||
"multiple": 0,
|
||||
"disable_required": false,
|
||||
"disable_edit_name": false,
|
||||
"type": "date",
|
||||
"disable_delete": false,
|
||||
"disable_type": false,
|
||||
"required": 0
|
||||
}, {
|
||||
"datetime": "0",
|
||||
"disable_multiple": false,
|
||||
"disable": false,
|
||||
"name": "\u65f6\u95f4\u542b\u65e5\u671f",
|
||||
"multiple": 0,
|
||||
"disable_required": false,
|
||||
"disable_edit_name": false,
|
||||
"type": "time",
|
||||
"disable_delete": false,
|
||||
"disable_type": false,
|
||||
"required": 0
|
||||
}, {
|
||||
"datetime": "0",
|
||||
"disable_multiple": false,
|
||||
"disable": false,
|
||||
"name": "\u65f6\u95f4",
|
||||
"multiple": 0,
|
||||
"disable_required": false,
|
||||
"disable_edit_name": false,
|
||||
"type": "time",
|
||||
"disable_delete": false,
|
||||
"disable_type": false,
|
||||
"required": 0
|
||||
}],
|
||||
"hide_stock": false
|
||||
export default {
|
||||
'zh-CN': {
|
||||
kdt_id: 55,
|
||||
user_id: 4674509,
|
||||
offline_id: 0,
|
||||
activity_alias: '',
|
||||
sku: {
|
||||
tree: [
|
||||
{
|
||||
k: '颜色',
|
||||
k_id: '1',
|
||||
v: [
|
||||
{
|
||||
id: '30349',
|
||||
name: '天蓝色',
|
||||
imgUrl:
|
||||
'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
|
||||
}
|
||||
],
|
||||
k_s: 's1',
|
||||
count: 2
|
||||
},
|
||||
{
|
||||
k: '尺寸',
|
||||
k_id: '2',
|
||||
v: [
|
||||
{
|
||||
id: '1193',
|
||||
name: '1'
|
||||
},
|
||||
{
|
||||
id: '1194',
|
||||
name: '2'
|
||||
}
|
||||
],
|
||||
k_s: 's2',
|
||||
count: 2
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 2259,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 110,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2260,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 0,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2257,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 111,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2258,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 6,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
}
|
||||
],
|
||||
price: '1.00',
|
||||
stock_num: 227,
|
||||
collection_id: 2261,
|
||||
collection_price: 0,
|
||||
none_sku: false,
|
||||
sold_num: 0,
|
||||
min_price: '1.00',
|
||||
max_price: '1.00',
|
||||
messages: [
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: '0',
|
||||
name: '留言1',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'text',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: '1'
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: '留言2',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'id_no',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: '留言3',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'image',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 1,
|
||||
name: '留言4',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'text',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: '数字',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'tel',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: '邮件',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'email',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: '日期',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'date',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: '时间含日期',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'time',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: '时间',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'time',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
}
|
||||
],
|
||||
hide_stock: false
|
||||
},
|
||||
"goods_id": "946755",
|
||||
"alias": "2oml0r0n5vytj",
|
||||
"quota": 15,
|
||||
"is_virtual": "0",
|
||||
"quota_used": 0,
|
||||
"goods_info": {
|
||||
"title": "测试商品",
|
||||
"picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/jpg"],
|
||||
"price": 1,
|
||||
"origin": ""
|
||||
goods_id: '946755',
|
||||
alias: '2oml0r0n5vytj',
|
||||
quota: 15,
|
||||
is_virtual: '0',
|
||||
quota_used: 0,
|
||||
goods_info: {
|
||||
title: '测试商品',
|
||||
picture: 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
|
||||
price: 1,
|
||||
origin: ''
|
||||
}
|
||||
},
|
||||
'en-US': {
|
||||
kdt_id: 55,
|
||||
user_id: 4674509,
|
||||
offline_id: 0,
|
||||
activity_alias: '',
|
||||
sku: {
|
||||
tree: [
|
||||
{
|
||||
k: 'Color',
|
||||
k_id: '1',
|
||||
v: [
|
||||
{
|
||||
id: '30349',
|
||||
name: 'Blue',
|
||||
imgUrl:
|
||||
'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
|
||||
}
|
||||
],
|
||||
k_s: 's1',
|
||||
count: 2
|
||||
},
|
||||
{
|
||||
k: 'Size',
|
||||
k_id: '2',
|
||||
v: [
|
||||
{
|
||||
id: '1193',
|
||||
name: '1'
|
||||
},
|
||||
{
|
||||
id: '1194',
|
||||
name: '2'
|
||||
}
|
||||
],
|
||||
k_s: 's2',
|
||||
count: 2
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 2259,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 110,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2260,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 0,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2257,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 111,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2258,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 6,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
}
|
||||
],
|
||||
price: '1.00',
|
||||
stock_num: 227,
|
||||
collection_id: 2261,
|
||||
collection_price: 0,
|
||||
none_sku: false,
|
||||
sold_num: 0,
|
||||
min_price: '1.00',
|
||||
max_price: '1.00',
|
||||
messages: [
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: '0',
|
||||
name: 'Messsage 1',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'text',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: '1'
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: 'Messsage 2',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'id_no',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: 'Messsage 3',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'image',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 1,
|
||||
name: 'Messsage 4',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'text',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: 'Number',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'tel',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: 'Email',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'email',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: 'Date',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'date',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: 'Datetime',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'time',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: 'Time',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'time',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
}
|
||||
],
|
||||
hide_stock: false
|
||||
},
|
||||
goods_id: '946755',
|
||||
alias: '2oml0r0n5vytj',
|
||||
quota: 15,
|
||||
is_virtual: '0',
|
||||
quota_used: 0,
|
||||
goods_info: {
|
||||
title: 'Goods Name',
|
||||
picture: 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
|
||||
price: 1,
|
||||
origin: ''
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default _global;
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showBase"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
:goodsId="goodsId"
|
||||
:hideStock="sku.hide_stock"
|
||||
:quota="quota"
|
||||
:quotaUsed="quotaUsed"
|
||||
:resetStepperOnHide="resetStepperOnHide"
|
||||
:disableStepperInput="disableStepperInput"
|
||||
:sku="$t('sku').sku"
|
||||
:goods="$t('sku').goods_info"
|
||||
:goodsId="$t('sku').goods_id"
|
||||
:hideStock="$t('sku').sku.hide_stock"
|
||||
:quota="$t('sku').quota"
|
||||
:quotaUsed="$t('sku').quota_used"
|
||||
:resetStepperOnHide="true"
|
||||
:disableStepperInput="true"
|
||||
@buy-clicked="handleBuyClicked"
|
||||
@add-cart="handleAddCartClicked"
|
||||
>
|
||||
</van-sku>
|
||||
<van-button type="primary" @click="showBase = true" block>基础用法</van-button>
|
||||
<van-button type="primary" @click="showBase = true" block>{{ $t('basicUsage') }}</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
@ -24,31 +24,28 @@
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showCustomAction"
|
||||
stepperTitle="我要买"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
:goodsId="goodsId"
|
||||
:hideStock="sku.hide_stock"
|
||||
:stepperTitle="$t('stepperTitle')"
|
||||
:sku="$t('sku').sku"
|
||||
:goods="$t('sku').goods_info"
|
||||
:goodsId="$t('sku').goods_id"
|
||||
:hideStock="$t('sku').sku.hide_stock"
|
||||
:showAddCartBtn="true"
|
||||
:quota="quota"
|
||||
:quotaUsed="quotaUsed"
|
||||
:quota="$t('sku').quota"
|
||||
:quotaUsed="$t('sku').quota_used"
|
||||
:resetStepperOnHide="true"
|
||||
:initialSku="initialSku"
|
||||
@buy-clicked="handleBuyClicked"
|
||||
@add-cart="handleAddCartClicked"
|
||||
>
|
||||
<!-- 隐藏sku messages -->
|
||||
<template slot="sku-messages"></template>
|
||||
<!-- 自定义sku actions -->
|
||||
<template slot="sku-actions" slot-scope="props">
|
||||
<div class="van-sku-actions">
|
||||
<van-button bottomAction @click="handlePointClicked">积分兑换</van-button>
|
||||
<!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
|
||||
<van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
|
||||
<van-button bottomAction @click="handlePointClicked">{{ $t('button1') }}</van-button>
|
||||
<van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">{{ $t('button2') }}</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-sku>
|
||||
<van-button type="primary" @click="showCustomAction = true" block>自定义sku actions</van-button>
|
||||
<van-button type="primary" @click="showCustomAction = true" block>{{ $t('advancedUsage') }}</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
@ -57,16 +54,19 @@
|
||||
<script>
|
||||
import data from '../mock/sku';
|
||||
|
||||
const goods = data.goods_info;
|
||||
goods.picture = goods.picture[0];
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
sku: data['zh-CN'],
|
||||
stepperTitle: '我要买',
|
||||
button1: '积分兑换',
|
||||
button2: '买买买'
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
sku: data['en-US'],
|
||||
stepperTitle: 'Stepper title',
|
||||
button1: 'Button',
|
||||
button2: 'Button'
|
||||
}
|
||||
},
|
||||
|
||||
@ -74,13 +74,6 @@ export default {
|
||||
return {
|
||||
showBase: false,
|
||||
showCustomAction: false,
|
||||
sku: data.sku,
|
||||
goods: goods,
|
||||
goodsId: data.goods_id,
|
||||
quota: data.quota,
|
||||
quotaUsed: data.quota_used,
|
||||
disableStepperInput: true,
|
||||
resetStepperOnHide: true,
|
||||
initialSku: {
|
||||
s1: '30349',
|
||||
s2: '1193'
|
||||
|
||||
@ -26,12 +26,12 @@ Vue.use(Sku);
|
||||
/>
|
||||
```
|
||||
|
||||
#### 自定义 sku slot 区块
|
||||
#### Advanced Usage
|
||||
|
||||
```html
|
||||
<van-sku
|
||||
v-model="showCustomAction"
|
||||
stepperTitle="我要买"
|
||||
stepperTitle="Stepper title"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
:goodsId="goodsId"
|
||||
@ -44,14 +44,14 @@ Vue.use(Sku);
|
||||
@buy-clicked="handleBuyClicked"
|
||||
@add-cart="handleAddCartClicked"
|
||||
>
|
||||
<!-- 隐藏sku messages -->
|
||||
<!-- hide sku messages -->
|
||||
<template slot="sku-messages"></template>
|
||||
<!-- 自定义sku actions -->
|
||||
<!-- custom sku actions -->
|
||||
<template slot="sku-actions" slot-scope="props">
|
||||
<div class="van-sku-actions">
|
||||
<van-button bottomAction @click="handlePointClicked">积分兑换</van-button>
|
||||
<!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
|
||||
<van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
|
||||
<van-button bottomAction @click="handlePointClicked">Button</van-button>
|
||||
<!-- trigger sku inner event -->
|
||||
<van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">Button</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-sku>
|
||||
@ -59,113 +59,116 @@ Vue.use(Sku);
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | 必须 |
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 是否显示sku | Boolean | false | 是 |
|
||||
| sku | 商品sku数据 | Object | - | 是 |
|
||||
| goods | 商品信息 | Object | - | 是 |
|
||||
| goodsId | 商品id | String/Number | - | 是 |
|
||||
| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 |
|
||||
| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 |
|
||||
| quota | 限购数(0表示不限购) | Number | 0 | 否 |
|
||||
| quotaUsed | 已经购买过的数量 | Number | 0 | 否 |
|
||||
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 |
|
||||
| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
|
||||
| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 |
|
||||
| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 |
|
||||
| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 |
|
||||
| v-model | Whether to show sku | `Boolean` | `false` | - |
|
||||
| sku | Sku data | `Object` | - | - |
|
||||
| goods | Goods info | `Object` | - | - |
|
||||
| goodsId | Goods id | `String | Number` | - | - |
|
||||
| hideStock | Whether to hide stock | `Boolean` | `false` | - |
|
||||
| showAddCartBtn | Whether to show cart button | `Boolean` | `true` | - |
|
||||
| quota | Quota (0 as no limit) | `Number` | `0` | - |
|
||||
| quotaUsed | Used quota | `Number` | `0` | - |
|
||||
| resetStepperOnHide | Whether to reset stepper when hide | `Boolean` | `false` | - |
|
||||
| disableStepperInput | Whether to disable stepper input | `Boolean` | `false` | - |
|
||||
| stepperTitle | Quantity title | `String` | `Quantity` | - |
|
||||
|
||||
### slots
|
||||
sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
|
||||
### Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| add-cart | Triggered when click cart button | data: Object |
|
||||
| buy-clicked | Triggered when click buy button | data: Object |
|
||||
|
||||
### Slot
|
||||
|
||||
| Name | Description |
|
||||
|-----------|-----------|
|
||||
| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
|
||||
| sku-group | 商品sku展示区 |
|
||||
| extra-sku-group | 额外商品sku展示区，一般用不到 |
|
||||
| sku-stepper | 商品数量选择区 |
|
||||
| sku-messages | 商品留言区 |
|
||||
| sku-actions | 操作按钮区 |
|
||||
| sku-header | Custom header |
|
||||
| sku-group | Custom sku |
|
||||
| extra-sku-group | Extra custom content |
|
||||
| sku-stepper | Custom stepper |
|
||||
| sku-messages | Custom messages |
|
||||
| sku-actions | Custom button actions |
|
||||
|
||||
#### Data Structure
|
||||
#### sku对象结构
|
||||
#### Sku Data Structure
|
||||
```javascript
|
||||
"sku": {
|
||||
// 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
|
||||
// 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
|
||||
"tree": [{
|
||||
"k": "颜色", // skuKeyName：规格类目名称
|
||||
"v": [{
|
||||
"id": "30349", // skuValueId：规格值id
|
||||
"name": "红色", // skuValueName：规格值名称
|
||||
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg" // 规格类目图片，只有第一个规格类目可以定义图片
|
||||
}, {
|
||||
"id": "1215",
|
||||
"name": "蓝色",
|
||||
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg"
|
||||
}],
|
||||
"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”表示必填
|
||||
}, ...],
|
||||
"hide_stock": false // 是否隐藏剩余库存
|
||||
},
|
||||
sku: {
|
||||
tree: [
|
||||
{
|
||||
k: 'Color',
|
||||
v: [
|
||||
{
|
||||
id: '30349',
|
||||
name: 'Red',
|
||||
imgUrl: 'https://img.yzcdn.cn/1.jpg'
|
||||
},
|
||||
{
|
||||
id: '1215',
|
||||
name: 'Blue',
|
||||
imgUrl: 'https://img.yzcdn.cn/2.jpg'
|
||||
}
|
||||
],
|
||||
k_s: 's1'
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 2259,
|
||||
price: 100,
|
||||
s1: '1215',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
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'
|
||||
}
|
||||
],
|
||||
hide_stock: false
|
||||
}
|
||||
```
|
||||
|
||||
#### goods对象结构
|
||||
#### Goods Data Structure
|
||||
|
||||
```javascript
|
||||
"goods": {
|
||||
// 商品标题
|
||||
"title": "测试商品",
|
||||
// 默认商品sku缩略图
|
||||
"picture": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"
|
||||
},
|
||||
goods: {
|
||||
title: 'Title',
|
||||
picture: 'https://img.yzcdn.cn/1.jpg'
|
||||
}
|
||||
```
|
||||
|
||||
#### 添加购物车和点击购买回调函数接收的skuData对象结构
|
||||
#### Event Params Data Structure
|
||||
|
||||
```javascript
|
||||
skuData: {
|
||||
// 商品id
|
||||
goodsId:"946755",
|
||||
// 留言信息
|
||||
goodsId: '946755',
|
||||
messages: {
|
||||
message_0:"12",
|
||||
message_1:"",
|
||||
... // 有几个留言就有几条
|
||||
message_0: '12',
|
||||
message_1: ''
|
||||
},
|
||||
// 另一种格式的留言，key不同
|
||||
cartMessages: {
|
||||
'留言1': 'xxxx',
|
||||
... // key是message的name
|
||||
'Message 1': 'xxxx'
|
||||
},
|
||||
// 选择的商品数量
|
||||
selectedNum:1,
|
||||
// 选择的sku组合
|
||||
selectedNum: 1,
|
||||
selectedSkuComb: {
|
||||
id:2257,
|
||||
price:100,
|
||||
s1:"30349",
|
||||
s2:"1193",
|
||||
s3:"0",
|
||||
stock_num:111
|
||||
id: 2257,
|
||||
price: 100,
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
stock_num: 111
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -26,7 +26,7 @@ Vue.use(Sku);
|
||||
/>
|
||||
```
|
||||
|
||||
#### 自定义 sku slot 区块
|
||||
#### 高级用法
|
||||
|
||||
```html
|
||||
<van-sku
|
||||
@ -44,13 +44,13 @@ Vue.use(Sku);
|
||||
@buy-clicked="handleBuyClicked"
|
||||
@add-cart="handleAddCartClicked"
|
||||
>
|
||||
<!-- 隐藏sku messages -->
|
||||
<!-- 隐藏 sku messages -->
|
||||
<template slot="sku-messages"></template>
|
||||
<!-- 自定义sku actions -->
|
||||
<!-- 自定义 sku actions -->
|
||||
<template slot="sku-actions" slot-scope="props">
|
||||
<div class="van-sku-actions">
|
||||
<van-button bottomAction @click="handlePointClicked">积分兑换</van-button>
|
||||
<!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
|
||||
<!-- 直接触发 sku 内部事件，通过内部事件执行 handleBuyClicked 回调 -->
|
||||
<van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
|
||||
</div>
|
||||
</template>
|
||||
@ -60,26 +60,32 @@ Vue.use(Sku);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 是否显示sku | Boolean | false | 是 |
|
||||
| sku | 商品sku数据 | Object | - | 是 |
|
||||
| goods | 商品信息 | Object | - | 是 |
|
||||
| goodsId | 商品id | String/Number | - | 是 |
|
||||
| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 |
|
||||
| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 |
|
||||
| quota | 限购数(0表示不限购) | Number | 0 | 否 |
|
||||
| quotaUsed | 已经购买过的数量 | Number | 0 | 否 |
|
||||
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 |
|
||||
| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
|
||||
| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 |
|
||||
| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 |
|
||||
| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 |
|
||||
| v-model | 是否显示sku | `Boolean` | `false` | - |
|
||||
| sku | 商品sku数据 | `Object` | - | - |
|
||||
| goods | 商品信息 | `Object` | - | - |
|
||||
| goodsId | 商品id | `String | Number` | - | - |
|
||||
| hideStock | 是否显示商品剩余库存 | `Boolean` | `false` | - |
|
||||
| showAddCartBtn | 是否显示加入购物车按钮 | `Boolean` | `true` | - |
|
||||
| quota | 限购数(0表示不限购) | `Number` | `0` | - |
|
||||
| quotaUsed | 已经购买过的数量 | `Number` | `0` | - |
|
||||
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | `Boolean` | `false` | - |
|
||||
| disableStepperInput | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - |
|
||||
| stepperTitle | 数量选择组件左侧文案 | `String` | `购买数量` | - |
|
||||
|
||||
### slots
|
||||
sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
|
||||
### Event
|
||||
|
||||
| Name | 说明 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| add-cart | 点击添加购物车回调 | skuData: Object |
|
||||
| buy-clicked | 点击购买回调 | skuData: Object |
|
||||
|
||||
|
||||
### Slot
|
||||
Sku 组件默认划分好了若干区块，这些区块都定义成了 slot，可以按需进行替换。区块顺序见下表：
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
|
||||
| sku-group | 商品sku展示区 |
|
||||
@ -91,82 +97,90 @@ sku组件默认划分好了若干区块，这些区块都定义成了slot，可
|
||||
### 数据结构
|
||||
#### sku对象结构
|
||||
```javascript
|
||||
"sku": {
|
||||
// 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
|
||||
// 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
|
||||
"tree": [{
|
||||
"k": "颜色", // skuKeyName：规格类目名称
|
||||
"v": [{
|
||||
"id": "30349", // skuValueId：规格值id
|
||||
"name": "红色", // skuValueName：规格值名称
|
||||
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg" // 规格类目图片，只有第一个规格类目可以定义图片
|
||||
}, {
|
||||
"id": "1215",
|
||||
"name": "蓝色",
|
||||
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg"
|
||||
}],
|
||||
"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”表示必填
|
||||
}, ...],
|
||||
"hide_stock": false // 是否隐藏剩余库存
|
||||
},
|
||||
sku: {
|
||||
// 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
|
||||
// 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
|
||||
tree: [
|
||||
{
|
||||
k: '颜色', // skuKeyName：规格类目名称
|
||||
v: [
|
||||
{
|
||||
id: '30349', // skuValueId：规格值 id
|
||||
name: '红色', // skuValueName：规格值名称
|
||||
imgUrl: 'https://img.yzcdn.cn/1.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
|
||||
},
|
||||
{
|
||||
id: '1215',
|
||||
name: '蓝色',
|
||||
imgUrl: 'https://img.yzcdn.cn/2.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' 表示必填
|
||||
}
|
||||
],
|
||||
hide_stock: false // 是否隐藏剩余库存
|
||||
}
|
||||
```
|
||||
|
||||
#### goods对象结构
|
||||
#### goods 对象结构
|
||||
```javascript
|
||||
"goods": {
|
||||
// 商品标题
|
||||
"title": "测试商品",
|
||||
// 默认商品sku缩略图
|
||||
"picture": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"
|
||||
},
|
||||
goods: {
|
||||
// 商品标题
|
||||
title: '测试商品',
|
||||
// 默认商品 sku 缩略图
|
||||
picture: 'https://img.yzcdn.cn/1.jpg'
|
||||
}
|
||||
```
|
||||
|
||||
#### 添加购物车和点击购买回调函数接收的skuData对象结构
|
||||
#### 添加购物车和点击购买回调函数接收的 skuData 对象结构
|
||||
```javascript
|
||||
skuData: {
|
||||
// 商品id
|
||||
goodsId:"946755",
|
||||
// 商品 id
|
||||
goodsId: '946755',
|
||||
// 留言信息
|
||||
messages: {
|
||||
message_0:"12",
|
||||
message_1:"",
|
||||
... // 有几个留言就有几条
|
||||
message_0: '12',
|
||||
message_1: ''
|
||||
},
|
||||
// 另一种格式的留言，key不同
|
||||
// 另一种格式的留言，key 不同
|
||||
cartMessages: {
|
||||
'留言1': 'xxxx',
|
||||
... // key是message的name
|
||||
'留言1': 'xxxx'
|
||||
},
|
||||
// 选择的商品数量
|
||||
selectedNum:1,
|
||||
// 选择的sku组合
|
||||
selectedNum: 1,
|
||||
// 选择的 sku 组合
|
||||
selectedSkuComb: {
|
||||
id:2257,
|
||||
price:100,
|
||||
s1:"30349",
|
||||
s2:"1193",
|
||||
s3:"0",
|
||||
stock_num:111
|
||||
id: 2257,
|
||||
price: 100,
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
stock_num: 111
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -93,5 +93,38 @@ export default {
|
||||
vanAddressList: {
|
||||
address: 'Address',
|
||||
add: 'Add new address'
|
||||
},
|
||||
vanSku: {
|
||||
unavailable: 'The product is no longer available for purchase',
|
||||
spec: 'Please select the full specification',
|
||||
least: 'Choose at least one',
|
||||
quota: quota => `Buy up to ${quota} items`,
|
||||
inventory: 'Inventory shortage',
|
||||
purchase: count => `You have purchased ${count} items`
|
||||
},
|
||||
vanSkuActions: {
|
||||
cart: 'Add to cart',
|
||||
buy: 'Buy'
|
||||
},
|
||||
vanSkuMessages: {
|
||||
fill: 'Please fill',
|
||||
number: 'Please fill in the correct number format message',
|
||||
email: 'Please fill in the correct email message',
|
||||
idcard: 'Please fill in the correct ID number message',
|
||||
overlimit: 'not more than 200 words',
|
||||
placeholder: {
|
||||
'id_no': 'Idcard Number',
|
||||
text: 'Text',
|
||||
tel: 'Number',
|
||||
email: 'Email',
|
||||
date: 'Date',
|
||||
time: 'Time',
|
||||
textarea: 'Text'
|
||||
}
|
||||
},
|
||||
vanSkuStepper: {
|
||||
title: 'Quantity',
|
||||
remain: count => `Remain ${count} items`,
|
||||
quota: quota => `Buy up to ${quota} items`
|
||||
}
|
||||
};
|
||||
|
||||
@ -97,5 +97,38 @@ export default {
|
||||
vanAddressList: {
|
||||
address: '收货地址',
|
||||
add: '新增收货地址'
|
||||
},
|
||||
vanSku: {
|
||||
unavailable: '商品已经无法购买啦',
|
||||
spec: '请选择完整的规格',
|
||||
least: '至少选择一件',
|
||||
quota: quota => `限购${quota}件`,
|
||||
inventory: '库存不足',
|
||||
purchase: count => `您已购买${count}件`
|
||||
},
|
||||
vanSkuActions: {
|
||||
cart: '加入购物车',
|
||||
buy: '立即购买'
|
||||
},
|
||||
vanSkuMessages: {
|
||||
fill: '请填写',
|
||||
number: '请填写正确的数字格式留言',
|
||||
email: '请填写正确的邮箱',
|
||||
'id_no': '请填写正确的身份证号码',
|
||||
overlimit: '写的太多了，不要超过200字',
|
||||
placeholder: {
|
||||
'id_no': '输入18位身份证号码',
|
||||
text: '输入文本',
|
||||
tel: '输入数字',
|
||||
email: '输入邮箱',
|
||||
date: '点击选择日期',
|
||||
time: '点击选择时间',
|
||||
textarea: '点击填写段落文本'
|
||||
}
|
||||
},
|
||||
vanSkuStepper: {
|
||||
title: '购买数量',
|
||||
remain: count => `剩余${count}件`,
|
||||
quota: quota => `每人限购${quota}件`
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<div class="van-sku-actions">
|
||||
<van-button v-if="showAddCartBtn" bottomAction @click="onAddCartClicked">加入购物车</van-button>
|
||||
<van-button type="primary" bottomAction @click="onBuyClicked">{{ buyText }}</van-button>
|
||||
<van-button v-if="showAddCartBtn" bottomAction @click="onAddCartClicked">{{ $t('cart') }}</van-button>
|
||||
<van-button type="primary" bottomAction @click="onBuyClicked">{{ buyText || $t('buy') }}</van-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VanButton from '../../button';
|
||||
import { create } from '../../utils';
|
||||
|
||||
export default {
|
||||
export default create({
|
||||
name: 'van-sku-actions',
|
||||
|
||||
components: {
|
||||
@ -16,12 +17,9 @@ export default {
|
||||
},
|
||||
|
||||
props: {
|
||||
buyText: String,
|
||||
skuEventBus: Object,
|
||||
showAddCartBtn: Boolean,
|
||||
buyText: {
|
||||
type: String,
|
||||
default: '立即购买'
|
||||
}
|
||||
showAddCartBtn: Boolean
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -32,5 +30,5 @@ export default {
|
||||
this.skuEventBus.$emit('sku:buy');
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -12,7 +12,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { create } from '../../utils';
|
||||
|
||||
export default create({
|
||||
name: 'van-sku-header',
|
||||
|
||||
props: {
|
||||
@ -62,5 +64,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
:key="`${goodsId}-${index}`"
|
||||
:required="message.required == '1'"
|
||||
:label="message.name"
|
||||
:placeholder="placeholderMap.textarea"
|
||||
:placeholder="getPlaceholder('textarea')"
|
||||
type="textarea"
|
||||
v-model="messageValues[index]">
|
||||
</field>
|
||||
@ -14,7 +14,7 @@
|
||||
:key="`${goodsId}-${index}`"
|
||||
:required="message.required == '1'"
|
||||
:label="message.name"
|
||||
:placeholder="placeholderMap[message.type]"
|
||||
:placeholder="getPlaceholder(message.type)"
|
||||
:type="getType(message)"
|
||||
v-model="messageValues[index]">
|
||||
</field>
|
||||
@ -23,13 +23,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { create } from '../../utils';
|
||||
import Field from '../../field';
|
||||
import CellGroup from '../../cell-group';
|
||||
import validateEmail from '../../utils/validate/email';
|
||||
import validateNumber from '../../utils/validate/number';
|
||||
import { DEFAULT_PLACEHOLDER_MAP } from '../constants';
|
||||
|
||||
export default {
|
||||
export default create({
|
||||
name: 'van-sku-messages',
|
||||
|
||||
components: {
|
||||
@ -43,12 +43,6 @@ export default {
|
||||
goodsId: [Number, String]
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
placeholderMap: Object.assign({}, DEFAULT_PLACEHOLDER_MAP, this.messagePlaceholderMap)
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
internalMessages() {
|
||||
if (Object.prototype.toString.call(this.messages) === '[object Array]') {
|
||||
@ -56,6 +50,7 @@ export default {
|
||||
}
|
||||
return [];
|
||||
},
|
||||
|
||||
messageValues() {
|
||||
const messageValues = [];
|
||||
this.internalMessages.forEach((message, index) => {
|
||||
@ -71,6 +66,7 @@ export default {
|
||||
if (type === 'id_no') return 'text';
|
||||
return datetime > 0 ? 'datetime-local' : type;
|
||||
},
|
||||
|
||||
getMessages() {
|
||||
const messages = {};
|
||||
|
||||
@ -83,6 +79,7 @@ export default {
|
||||
|
||||
return messages;
|
||||
},
|
||||
|
||||
getCartMessages() {
|
||||
const messages = {};
|
||||
|
||||
@ -96,6 +93,11 @@ export default {
|
||||
|
||||
return messages;
|
||||
},
|
||||
|
||||
getPlaceholder(key) {
|
||||
return this.messagePlaceholderMap[key] || this.$t(`placeholder.${key}`);
|
||||
},
|
||||
|
||||
validateMessages() {
|
||||
const values = this.messageValues;
|
||||
|
||||
@ -109,27 +111,26 @@ export default {
|
||||
if (message.type === 'image') {
|
||||
continue;
|
||||
} else {
|
||||
return `请填写${message.name}`;
|
||||
return this.$t('fill') + message.name;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (message.type === 'tel' && !validateNumber(value)) {
|
||||
return '请填写正确的数字格式留言';
|
||||
return this.$t('number');
|
||||
}
|
||||
if (message.type === 'email' && !validateEmail(value)) {
|
||||
return '请填写正确的邮箱';
|
||||
return this.$t('email');
|
||||
}
|
||||
if (message.type === 'id_no' && (value.length < 15 || value.length > 18)) {
|
||||
return '请填写正确的身份证号码';
|
||||
return this.$t('id_no');
|
||||
}
|
||||
}
|
||||
|
||||
if (value.length > 200) {
|
||||
return `${message.name} 写的太多了<br/>不要超过200字`;
|
||||
return `${message.name} ${this.$t('overlimit')}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="van-sku-stepper-stock">
|
||||
<div class="van-sku-stepper-container">
|
||||
<div class="van-sku__stepper-title">{{ stepperTitle }}：</div>
|
||||
<div class="van-sku__stepper-title">{{ stepperTitle || $t('title') }}：</div>
|
||||
<stepper
|
||||
class="van-sku__stepper"
|
||||
v-model="currentNum"
|
||||
@ -11,18 +11,19 @@
|
||||
@overlimit="handleOverLimit">
|
||||
</stepper>
|
||||
</div>
|
||||
<div v-if="!hideStock" class="van-sku__stock">剩余{{ stock }}件</div>
|
||||
<div v-if="quota > 0" class="van-sku__quota">每人限购{{ quota }}件</div>
|
||||
<div v-if="!hideStock" class="van-sku__stock">{{ $t('remain', stock) }}</div>
|
||||
<div v-if="quota > 0" class="van-sku__quota">{{ $t('quota', quota) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { create } from '../../utils';
|
||||
import Stepper from '../../stepper';
|
||||
import { LIMIT_TYPE, DEFAULT_BUY_TEXT } from '../constants';
|
||||
import { LIMIT_TYPE } from '../constants';
|
||||
|
||||
const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
|
||||
|
||||
export default {
|
||||
export default create({
|
||||
name: 'van-sku-stepper',
|
||||
|
||||
components: {
|
||||
@ -35,6 +36,7 @@ export default {
|
||||
selectedSku: Object,
|
||||
selectedSkuComb: Object,
|
||||
selectedNum: Number,
|
||||
stepperTitle: String,
|
||||
quota: Number,
|
||||
quotaUsed: Number,
|
||||
hideStock: {
|
||||
@ -44,10 +46,6 @@ export default {
|
||||
disableStepperInput: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
stepperTitle: {
|
||||
type: String,
|
||||
default: DEFAULT_BUY_TEXT
|
||||
}
|
||||
},
|
||||
|
||||
@ -107,5 +105,5 @@ export default {
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -2,17 +2,3 @@ export const LIMIT_TYPE = {
|
||||
QUOTA_LIMIT: 0,
|
||||
STOCK_LIMIT: 1
|
||||
};
|
||||
|
||||
export const DEFAULT_BUY_TEXT = '立即购买';
|
||||
|
||||
export const DEFAULT_STEPPER_TITLE = '购买数量';
|
||||
|
||||
export const DEFAULT_PLACEHOLDER_MAP = {
|
||||
'id_no': '输入18位身份证号码',
|
||||
text: '输入文本',
|
||||
tel: '输入数字',
|
||||
email: '输入邮箱',
|
||||
date: '点击选择日期',
|
||||
time: '点击选择时间',
|
||||
textarea: '点击填写段落文本'
|
||||
};
|
||||
|
||||
@ -81,7 +81,7 @@ import SkuStepper from '../components/SkuStepper';
|
||||
import SkuMessages from '../components/SkuMessages';
|
||||
import SkuActions from '../components/SkuActions';
|
||||
import { isAllSelected, getSkuComb, getSelectedSkuValues } from '../utils/skuHelper';
|
||||
import { LIMIT_TYPE, DEFAULT_STEPPER_TITLE } from '../constants';
|
||||
import { LIMIT_TYPE } from '../constants';
|
||||
import { create } from '../../utils';
|
||||
|
||||
const { QUOTA_LIMIT } = LIMIT_TYPE;
|
||||
@ -121,10 +121,7 @@ export default create({
|
||||
default: true
|
||||
},
|
||||
buyText: String,
|
||||
stepperTitle: {
|
||||
type: String,
|
||||
default: DEFAULT_STEPPER_TITLE
|
||||
},
|
||||
stepperTitle: String,
|
||||
bodyOffsetTop: {
|
||||
type: Number,
|
||||
default: 200
|
||||
@ -260,7 +257,7 @@ export default create({
|
||||
},
|
||||
validateSku() {
|
||||
if (this.selectedNum === 0) {
|
||||
return '商品已经无法购买啦';
|
||||
return this.$t('unavailable');
|
||||
}
|
||||
|
||||
if (this.isSkuCombSelected) {
|
||||
@ -268,7 +265,7 @@ export default create({
|
||||
// sku留言没有错误则校验通过
|
||||
return error;
|
||||
} else {
|
||||
return '请选择完整的规格';
|
||||
return this.$t('spec');
|
||||
}
|
||||
},
|
||||
handleCloseClicked() {
|
||||
@ -291,14 +288,14 @@ export default create({
|
||||
},
|
||||
handleOverLimit({ action, limitType, quota, quotaUsed }) {
|
||||
if (action === 'minus') {
|
||||
Toast('至少选择一件');
|
||||
Toast(this.$t('least'));
|
||||
} else if (action === 'plus') {
|
||||
if (limitType === QUOTA_LIMIT) {
|
||||
let msg = `限购${quota}件`;
|
||||
if (quotaUsed > 0) msg += `，您已购买${quotaUsed}件`;
|
||||
let msg = this.$t('quota', quota);
|
||||
if (quotaUsed > 0) msg += `，${this.$t('purchase', quotaUsed)}`;
|
||||
Toast(msg);
|
||||
} else {
|
||||
Toast('库存不足');
|
||||
Toast(this.$t('inventory'));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -216,7 +216,7 @@ describe('Sku', (done) => {
|
||||
buyBtn.trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(toastText.textContent).to.equal('留言4 写的太多了<br/>不要超过200字');
|
||||
expect(toastText.textContent).to.equal('留言4 写的太多了，不要超过200字');
|
||||
|
||||
textarea.element.value = '';
|
||||
// 测试数字留言
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user