From 796eb46bacc286354e3fb80f20938ee6f8390cd8 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Tue, 23 Jun 2020 17:55:24 +0800 Subject: [PATCH] docs(Sku): update mock data --- src/sku/README.md | 11 +++--- src/sku/README.zh-CN.md | 19 +++++---- src/sku/demo/data.ts | 88 ++++++++++++++++------------------------- src/sku/demo/index.vue | 7 ++-- 4 files changed, 51 insertions(+), 74 deletions(-) diff --git a/src/sku/README.md b/src/sku/README.md index f9f34c080..637def141 100644 --- a/src/sku/README.md +++ b/src/sku/README.md @@ -189,31 +189,30 @@ sku: { tree: [ { k: 'Color', + k_s: 's1', v: [ { - id: '30349', + id: '1', name: 'Red', imgUrl: 'https://img.yzcdn.cn/1.jpg', previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', }, { - id: '1215', + id: '1', name: 'Blue', imgUrl: 'https://img.yzcdn.cn/2.jpg', previewImgUrl: 'https://img.yzcdn.cn/2p.jpg', } ], - k_s: 's1', large_picture_preview: true, // Whether to display large image mode } ], list: [ { id: 2259, + s1: '1', + s2: '1', price: 100, - s1: '1215', - s2: '1193', - s3: '0', stock_num: 110 } ], diff --git a/src/sku/README.zh-CN.md b/src/sku/README.zh-CN.md index 45c8d16f0..024b84cb3 100644 --- a/src/sku/README.zh-CN.md +++ b/src/sku/README.zh-CN.md @@ -197,32 +197,31 @@ sku: { tree: [ { k: '颜色', // skuKeyName：规格类目名称 + k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id v: [ { - id: '30349', // skuValueId：规格值 id + id: '1', // skuValueId：规格值 id name: '红色', // skuValueName：规格值名称 imgUrl: 'https://img.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片 previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片 }, { - id: '1215', + id: '1', name: '蓝色', imgUrl: 'https://img.yzcdn.cn/2.jpg', previewImgUrl: 'https://img.yzcdn.cn/2p.jpg', } ], - k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id large_picture_preview: true, // 是否展示大图模式 } ], // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合 list: [ { - id: 2259, // skuId，下单时后端需要 + id: 2259, // skuId + s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id + s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id price: 100, // 价格（单位分） - s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id - s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id - s3: '0', // 最多包含3个规格值，为0表示不存在该规格 stock_num: 110 // 当前 sku 组合对应的库存 } ], @@ -276,8 +275,8 @@ sku: { { // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值） // 值：skuValueId（规格值 id） - s1: '30349', - s2: '1193', + s1: '1', + s2: '1', // 初始选中数量 selectedNum: 3, // 初始选中的商品属性 @@ -330,7 +329,7 @@ customStepperConfig: { } ``` -### messageConfig Data Structure +### messageConfig 对象结构 ```js messageConfig: { diff --git a/src/sku/demo/data.ts b/src/sku/demo/data.ts index 38ae6f0f4..7f7152883 100644 --- a/src/sku/demo/data.ts +++ b/src/sku/demo/data.ts @@ -1,14 +1,13 @@ export function getSkuData(large_picture_preview = false) { return { - goods_id: '946755', - quota: 15, + goods_id: '1', + quota: 5, quota_used: 0, - start_sale_num: 10, + start_sale_num: 2, 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, + title: '测试商品', + picture: 'https://b.yzcdn.cn/vant/sku/shoes-1.png', }, sku: { price: '1.00', @@ -19,94 +18,75 @@ export function getSkuData(large_picture_preview = false) { tree: [ { k: '颜色', + k_s: 's1', k_id: '1', v: [ { - id: '30349', - name: '天蓝色', - imgUrl: - 'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg', + id: '1', + name: '粉色', + imgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-1.png', }, { - id: '1215', - name: '白色', - imgUrl: - 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg', + 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', }, ], - k_s: 's1', - count: 2, large_picture_preview, }, { k: '尺寸', + k_s: 's2', k_id: '2', v: [ { - id: '1193', - name: '1', + id: '1', + name: '大', }, { - id: '1194', - name: '2', + id: '2', + name: '小', }, ], - k_s: 's2', - count: 2, }, ], list: [ { id: 2259, + s1: '2', + s2: '1', price: 100, discount: 100, - code: '', - s1: '1215', - s2: '1193', - s3: '0', - s4: '0', - s5: '0', stock_num: 110, - goods_id: 946755, }, { id: 2260, + s1: '3', + s2: '1', price: 100, discount: 100, - code: '', - s1: '1215', - s2: '1194', - s3: '0', - s4: '0', - s5: '0', - stock_num: 0, - goods_id: 946755, + stock_num: 99, }, { id: 2257, + s1: '1', + s2: '1', price: 100, discount: 100, - code: '', - s1: '30349', - s2: '1193', - s3: '0', - s4: '0', - s5: '0', stock_num: 111, - goods_id: 946755, }, { id: 2258, + s1: '1', + s2: '2', price: 100, discount: 100, - code: '', - s1: '30349', - s2: '1194', - s3: '0', - s4: '0', - s5: '0', stock_num: 6, - goods_id: 946755, }, ], messages: [ @@ -178,8 +158,8 @@ export function getSkuData(large_picture_preview = false) { }, properties: [ { - k_id: 124, k: '加料', + k_id: 124, is_multiple: true, v: [ { @@ -204,8 +184,8 @@ export function getSkuData(large_picture_preview = false) { } export const initialSku = { - s1: '30349', - s2: '1193', + s1: '1', + s2: '1', selectedNum: 3, selectedProp: { 124: [1225, 1226], diff --git a/src/sku/demo/index.vue b/src/sku/demo/index.vue index e28be725e..64802cc1c 100644 --- a/src/sku/demo/index.vue +++ b/src/sku/demo/index.vue @@ -13,10 +13,10 @@ :hide-stock="skuData.sku.hide_stock" :message-config="messageConfig" :start-sale-num="skuData.start_sale_num" - :close-on-click-overlay="closeOnClickOverlay" :custom-sku-validator="customSkuValidator" disable-stepper-input reset-stepper-on-hide + close-on-click-overlay safe-area-inset-bottom reset-selected-sku-on-hide @buy-clicked="onBuyClicked" @@ -94,7 +94,7 @@ :start-sale-num="skuData2.start_sale_num" :show-header-image="false" :custom-sku-validator="customSkuValidator" - :close-on-click-overlay="closeOnClickOverlay" + close-on-click-overlay disable-stepper-input reset-stepper-on-hide safe-area-inset-bottom @@ -213,11 +213,10 @@ export default { showStepper: false, showSoldout: false, showLargePicturePreview: false, - closeOnClickOverlay: true, customSkuValidator: () => '请选择xxx', customStepperConfig: { quotaText: '单次限购100件', - stockFormatter: (stock) => `剩余${stock}件`, + stockFormatter: (stock) => `剩余${stock}`, handleOverLimit: (data) => { const { action, limitType, quota, startSaleNum = 1 } = data;