From 8f4122f8ad857b760051a62393a868c0132c39e6 Mon Sep 17 00:00:00 2001 From: niunai Date: Fri, 8 Sep 2017 16:25:07 +0800 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=E8=BF=81=E7=A7=BBsku=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/examples-docs/sku.md | 204 ++++++++++++++++ docs/mock/sku.js | 266 ++++++++++++++++++++ docs/src/doc.config.js | 4 + package.json | 3 +- packages/index.js | 3 + packages/sku/components/SkuActions.vue | 34 +++ packages/sku/components/SkuHeader.vue | 65 +++++ packages/sku/components/SkuMessages.vue | 156 ++++++++++++ packages/sku/components/SkuQuantity.vue | 100 ++++++++ packages/sku/components/SkuRow.vue | 36 +++ packages/sku/components/SkuRowItem.vue | 54 ++++ packages/sku/constants.js | 4 + packages/sku/containers/SkuContainer.vue | 299 +++++++++++++++++++++++ packages/sku/index.js | 18 ++ packages/sku/utils/skuHelper.js | 95 +++++++ packages/vant-css/src/index.css | 1 + packages/vant-css/src/sku.css | 202 +++++++++++++++ test/unit/mock/sku.js | 234 ++++++++++++++++++ test/unit/specs/sku.spec.js | 43 ++++ yarn.lock | 285 ++++++--------------- 20 files changed, 1890 insertions(+), 216 deletions(-) create mode 100644 docs/examples-docs/sku.md create mode 100644 docs/mock/sku.js create mode 100644 packages/sku/components/SkuActions.vue create mode 100644 packages/sku/components/SkuHeader.vue create mode 100644 packages/sku/components/SkuMessages.vue create mode 100644 packages/sku/components/SkuQuantity.vue create mode 100644 packages/sku/components/SkuRow.vue create mode 100644 packages/sku/components/SkuRowItem.vue create mode 100644 packages/sku/constants.js create mode 100644 packages/sku/containers/SkuContainer.vue create mode 100644 packages/sku/index.js create mode 100644 packages/sku/utils/skuHelper.js create mode 100644 packages/vant-css/src/sku.css create mode 100644 test/unit/mock/sku.js create mode 100644 test/unit/specs/sku.spec.js diff --git a/docs/examples-docs/sku.md b/docs/examples-docs/sku.md new file mode 100644 index 000000000..c9a850566 --- /dev/null +++ b/docs/examples-docs/sku.md @@ -0,0 +1,204 @@ +## Sku 商品购买组件 + + + + + +### 使用指南 +```javascript +import { Sku } from 'vant'; + +Vue.component(Sku.name, Sku); +``` + +### 代码演示 +#### 基础用法 +:::demo +```html + +``` +::: + +#### 自定义部分sku子组件 +:::demo +```html + +``` +::: + +### API + +| 参数 | 说明 | 类型 | 默认值 | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 是否显示sku | Boolean | false | 是 | +| sku | 商品sku数据 | Object | - | 是 | +| goods | 商品信息 | Object | - | 是 | +| goodsId | 商品id | String | - | 是 | +| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 | +| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 | +| quota | 限购数(0表示不限购) | Number | 0 | 否 | +| quotaUsed | 已经购买过的数量 | Number | 0 | 否 | +| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 | +| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 | + +### 数据结构 +#### sku对象结构 +```javascript +"sku": { + // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。 + // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。 + "tree": [{ + "k": "颜色", // skuKeyName：规格类目名称 + "v": [{ + "id": "30349", // skuValueId：规格值id + "name": "红色", // skuValueName：规格值名称 + "imgUrl": "upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg" // 规格类目图片，暂时只能第一个规格类目可以定义图片 + }, { + "id": "1215", + "name": "蓝色", + "imgUrl": "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 // 是否隐藏剩余库存 +}, +``` + +#### 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" +}, +``` + +#### 添加购物车和点击购买回调函数接收的skuData对象结构 +```javascript +skuData: { + // 商品id + goodsId:"946755", + // 留言信息 + messages: { + message_0:"12", + message_1:"", + ... // 有几个留言就有几条 + }, + // 选择的商品数量 + selectedNum:1, + // 选择的sku组合 + selectedSkuComb: { + id:2257, + price:100, + s1:"30349", + s2:"1193", + s3:"0", + stock_num:111 + } +} +``` diff --git a/docs/mock/sku.js b/docs/mock/sku.js new file mode 100644 index 000000000..2b20595ee --- /dev/null +++ b/docs/mock/sku.js @@ -0,0 +1,266 @@ +/* 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": "upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.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 + }, + "goods_id": "946755", + "alias": "2oml0r0n5vytj", + "quota": 15, + "is_virtual": "0", + "quota_used": 0, + "goods_info": { + "title": "\u725b\u5976\u6d4b\u8bd5", + "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"], + "price": 1, + "origin": "" + }, + "url": { + "base": "https:\/\/www.youzan.com", + "bbs": "http:\/\/bbs.youzan.com", + "cdn": "https:\/\/b.yzcdn.cn\/", + "cdn_static": "https:\/\/b.yzcdn.cn\/v2", + "daxue": "http:\/\/xuetang.youzan.com", + "fenxiao": "\/\/fx.youzan.com", + "fuwu": "http:\/\/fuwu.youzan.com", + "img": "http:\/\/img.youzan.com", + "imgqn": "https:\/\/img.yzcdn.cn", + "login": "http:\/\/login.youzan.com", + "open": "\/\/open.youzan.com", + "static": "\/\/static.youzan.com\/v2", + "trade": "https:\/\/trade.koudaitong.com", + "v1": "https:\/\/www.youzan.com\/v1", + "v1_static": "https:\/\/b.yzcdn.cn\/v1", + "v2": "https:\/\/www.youzan.com\/v2", + "wap": "https:\/\/h5.youzan.com\/v2", + "ws": "ws:\/\/im.youzan.com:8080", + "www": "\/\/www.youzan.com\/v2", + "youzan": "http:\/\/www.youzan.com", + "cloud": "https:\/\/dl.yzcdn.cn", + "pf": "http:\/\/pifa.youzan.com", + "uic": "\/\/uic.youzan.com", + "store": "\/\/store.youzan.com", + "market": "http:\/\/pfmarket.youzan.com", + "im": "http:\/\/b-im.youzan.com", + "help": "\/\/help.youzan.com", + "materials": "\/\/materials.youzan.com" + } +}; + +export default _global; diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index b51fa8856..879ea5e42 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -201,6 +201,10 @@ module.exports = { "path": "/goods-action", "title": "GoodsAction 商品操作" }, + { + "path": "/sku", + "title": "Sku 商品规格弹层" + }, { "path": "/invalid-goods", "title": "InvalidGoods 不可用商品列表" diff --git a/package.json b/package.json index 06ba811fb..50a5ebe76 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,8 @@ "license": "ISC", "dependencies": { "babel-runtime": "6.x", - "vue-lazyload": "^1.1.3" + "vue-lazyload": "^1.1.3", + "zan-utils": "^1.0.14" }, "peerDependencies": { "vue": "2.4.2" diff --git a/packages/index.js b/packages/index.js index 16e1e8c5d..b388a89c2 100644 --- a/packages/index.js +++ b/packages/index.js @@ -38,6 +38,7 @@ import Radio from './radio'; import RadioGroup from './radio-group'; import Row from './row'; import Search from './search'; +import Sku from './sku'; import Step from './step'; import Steps from './steps'; import Swipe from './swipe'; @@ -90,6 +91,7 @@ const components = [ RadioGroup, Row, Search, + Sku, Step, Steps, Swipe, @@ -158,6 +160,7 @@ export { RadioGroup, Row, Search, + Sku, Step, Steps, Swipe, diff --git a/packages/sku/components/SkuActions.vue b/packages/sku/components/SkuActions.vue new file mode 100644 index 000000000..70a97ef8c --- /dev/null +++ b/packages/sku/components/SkuActions.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/sku/components/SkuHeader.vue b/packages/sku/components/SkuHeader.vue new file mode 100644 index 000000000..86364b782 --- /dev/null +++ b/packages/sku/components/SkuHeader.vue @@ -0,0 +1,65 @@ + + + diff --git a/packages/sku/components/SkuMessages.vue b/packages/sku/components/SkuMessages.vue new file mode 100644 index 000000000..d7f62f296 --- /dev/null +++ b/packages/sku/components/SkuMessages.vue @@ -0,0 +1,156 @@ + + + diff --git a/packages/sku/components/SkuQuantity.vue b/packages/sku/components/SkuQuantity.vue new file mode 100644 index 000000000..aaabc1b8a --- /dev/null +++ b/packages/sku/components/SkuQuantity.vue @@ -0,0 +1,100 @@ + + + diff --git a/packages/sku/components/SkuRow.vue b/packages/sku/components/SkuRow.vue new file mode 100644 index 000000000..f81905f5d --- /dev/null +++ b/packages/sku/components/SkuRow.vue @@ -0,0 +1,36 @@ + + + diff --git a/packages/sku/components/SkuRowItem.vue b/packages/sku/components/SkuRowItem.vue new file mode 100644 index 000000000..a3cdd608b --- /dev/null +++ b/packages/sku/components/SkuRowItem.vue @@ -0,0 +1,54 @@ + + + diff --git a/packages/sku/constants.js b/packages/sku/constants.js new file mode 100644 index 000000000..80b443ee6 --- /dev/null +++ b/packages/sku/constants.js @@ -0,0 +1,4 @@ +export const LIMIT_TYPE = { + QUOTA_LIMIT: 0, + STOCK_LIMIT: 1 +}; diff --git a/packages/sku/containers/SkuContainer.vue b/packages/sku/containers/SkuContainer.vue new file mode 100644 index 000000000..aaacb338d --- /dev/null +++ b/packages/sku/containers/SkuContainer.vue @@ -0,0 +1,299 @@ + + + diff --git a/packages/sku/index.js b/packages/sku/index.js new file mode 100644 index 000000000..97ebe65c5 --- /dev/null +++ b/packages/sku/index.js @@ -0,0 +1,18 @@ +import SkuActions from './components/SkuActions'; +import SkuHeader from './components/SkuHeader'; +import SkuMessages from './components/SkuMessages'; +import SkuQuantity from './components/SkuQuantity'; +import SkuRow from './components/SkuRow'; +import SkuRowItem from './components/SkuRowItem'; +import skuHelper from './utils/skuHelper'; +import SkuContainer from './containers/SkuContainer'; + +SkuContainer.SkuActions = SkuActions; +SkuContainer.SkuHeader = SkuHeader; +SkuContainer.SkuMessages = SkuMessages; +SkuContainer.SkuQuantity = SkuQuantity; +SkuContainer.SkuRow = SkuRow; +SkuContainer.SkuRowItem = SkuRowItem; +SkuContainer.skuHelper = skuHelper; + +export default SkuContainer; diff --git a/packages/sku/utils/skuHelper.js b/packages/sku/utils/skuHelper.js new file mode 100644 index 000000000..b354c295b --- /dev/null +++ b/packages/sku/utils/skuHelper.js @@ -0,0 +1,95 @@ +import isArray from 'lodash/isArray'; +import keys from 'lodash/keys'; +import filter from 'lodash/filter'; +import find from 'lodash/find'; +import isObject from 'lodash/isObject'; +import every from 'lodash/every'; + +/* + 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; +}; + +// 判断是否所有的sku都已经选中 +export const isAllSelected = (skuTree, selectedSku) => { + if (!isArray(skuTree)) { + throw new Error('skuTree must be array'); + } + if (!isObject(selectedSku)) { + throw new Error('selectedSku must be object'); + } + + const selected = filter(keys(selectedSku), skuKeyStr => selectedSku[skuKeyStr] !== ''); + return skuTree.length === selected.length; +}; + +// 根据已选择的sku获取skuComb +export const getSkuComb = (skuList, selectedSku) => { + const skuComb = find(skuList, (skuComb) => { + return every(keys(selectedSku), skuKeyStr => { + // 后端给的key有时数字有时字符串，需要兼容=。= + return skuComb[skuKeyStr] == selectedSku[skuKeyStr]; // eslint-disable-line + }); + }); + return skuComb; +}; + +// 获取已选择的sku名称 +export const getSelectedSkuValues = (skuTree, selectedSku) => { + const normalizedTree = normalizeSkuTree(skuTree); + return keys(selectedSku).reduce((selectedValues, skuKeyStr) => { + const skuValues = normalizedTree[skuKeyStr]; + const skuValueId = selectedSku[skuKeyStr]; + + if (skuValueId) { + const skuValue = find(skuValues, skuValue => skuValue.id === skuValueId); + skuValue && selectedValues.push(skuValue); + } + return selectedValues; + }, []); +}; + +const SkuHelper = { + normalizeSkuTree, + isAllSelected, + getSkuComb, + getSelectedSkuValues +}; +export default SkuHelper; diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css index 4c8d5576f..f6345cf40 100644 --- a/packages/vant-css/src/index.css +++ b/packages/vant-css/src/index.css @@ -51,3 +51,4 @@ @import './order-goods.css'; @import './pay-order.css'; @import './switch-cell.css'; +@import './sku.css'; diff --git a/packages/vant-css/src/sku.css b/packages/vant-css/src/sku.css new file mode 100644 index 000000000..27d10fdf0 --- /dev/null +++ b/packages/vant-css/src/sku.css @@ -0,0 +1,202 @@ +@import './mixins/border_retina'; + +.van-sku-container { + background: #f8f8f8; +} +.van-sku-layout { + background: #fff; +} +.van-sku-body { + max-height: 350px; + overflow-y: scroll; + + &::-webkit-scrollbar { + display: none; + } +} +.van-sku-group-container { + position: relative; + padding-top: 12px; + padding-bottom: 2px; + margin-left: 15px; + + &::after { + @mixin border-retina (bottom); + } +} + +.van-sku-row-group { + margin-right: 15px; + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } +} + +/* + sku header + */ +.van-sku-header { + position: relative; + margin-left: 15px; + + &::after { + @mixin border-retina (bottom); + } +} +.van-sku-header__img-wrap { + position: relative; + float: left; + margin-top: -10px; + width: 80px; + height: 80px; + background: #fafafa; + border-radius: 2px; + + .van-sku__goods-img { + position: absolute; + margin: auto; + top: 0; + left: 0; + right: 0; + bottom: 0; + max-width: 100%; + max-height: 100%; + } +} +.van-sku-header__goods-info { + padding: 10px 60px 10px 10px; + min-height: 62px; + overflow: hidden; +} +.van-sku__goods-name { + font-size: 12px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.van-sku__price-symbol { + font-size: 14px; + vertical-align: middle; +} +.van-sku__price-num { + vertical-align: middle; +} +.van-sku__goods-price { + margin-top: 10px; + font-size: 16px; + color: #f44; + vertical-align: middle; +} +.van-sku__close-icon { + position: absolute; + top: 0; + right: 0; + width: 44px; + height: 44px; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAUVBMVEUAAACfn5+bm5uampqZmZmoqKiampqampqZmZmampqampqbm5ubm5uZmZmqqqqampqampqZmZmampqampqampqbm5ubm5uampqdnZ2ampqZmZkjZXmqAAAAGnRSTlMAFYBC5wm+rdPv1Ckl8wzZxKWicm9eUjoN8nSyS9UAAAFVSURBVDjLvZXbrsIgEEWhtAUU6M1a3f//oSeHWKfuVhv7IC+TkJVhz4UZ9bsThq5uYmzqbgifSV04LI4r9Fs0FRHw/WhCugUz9h6IRdpmryVgzfLGWKC8brEF0E58ObVAsUIrC1y2fFwAW9GdhTfb6oyHZQ3+/C7us39VcgXE79o3sIgylayXdZdpIaJVH08rQnTE9BmeEPXsWMK1rV6m01Xz/dO1g5H3nH6yNcoZNnCPPoOXTjplemYlnR4h2wG9YppZ1WPItsOomGZWjeiyrWEU08wqgzrbBkERfWJWBTTZRiTFNLMqIWZ7x43atQYa+lA33EmG5KyB0yyDApT8/uvWFCCnTvIrtKRuLgqzQktRpNzMCi3l5kaymZXqiGS3blGX2Zl2ftGi6+avqtcsUvN/8a2++LCHRsH+kDkwvg4Mxt2Re3yY85pIsiaOLKD91faz8wcoUxux/aS9awAAAABJRU5ErkJggg==); + background-size: 22px 22px; + background-repeat: no-repeat; + background-position: 7px 10px; +} + +/* + sku row +*/ +.van-sku-row__title { + font-size: 14px; + padding-bottom: 10px; +} +.van-sku-row__item { + display: inline-block; + padding: 5px 9px; + margin-right: 10px; + margin-bottom: 10px; + height: 16px; + min-width: 32px; + line-height: 16px; + font-size: 12px; + color: #333; + text-align: center; + border: 1px solid #999; + border-radius: 3px; + + &.van-sku-row__item--active { + border-color: #f44; + color: #fff; + background: #f44; + } + &.van-sku-row__item--disabled { + background: #efefef; + border-color: #e5e5e5; + color: #cacaca; + } +} + +/* + sku quantity +*/ +.van-sku-quantity-stock { + padding: 12px 0; + margin-left: 15px; +} +.van-sku-quantity-container { + height: 30px; + margin-right: 20px; +} +.van-sku__quantity-title { + float: left; + line-height: 30px; + font-size: 14px; +} +.van-sku__quantity { + float: right; + top: 7px; + left: 4px; +} +.van-sku__stock { + display: inline-block; + margin-right: 10px; + color: #999; + font-size: 12px; +} +.van-sku__quota { + display: inline-block; + color: #f44; + font-size: 12px; +} + +/* + sku actions +*/ +.van-sku-actions { + margin-top: 10px; + font-size: 0; +} +.van-sku__add-cart-btn { + width: 50%; + height: 50px; + padding: 0; + border: 0; + background: #f85; + color: #fff; + font-size: 16px; + line-height: 50px; + text-align: center; + + & + .van-sku__buy-btn { + width: 50%; + } +} +.van-sku__buy-btn { + width: 100%; + height: 50px; + padding: 0; + border: 0; + background: #f44; + color: #fff; + font-size: 16px; + line-height: 50px; + text-align: center; +} diff --git a/test/unit/mock/sku.js b/test/unit/mock/sku.js new file mode 100644 index 000000000..e43b438bb --- /dev/null +++ b/test/unit/mock/sku.js @@ -0,0 +1,234 @@ +/* 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": "upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg" + }], + "k_s": "s1" + }, { + "k": "\u5c3a\u5bf8", + "k_id": "2", + "v": [{ + "id": "1193", + "name": "1" + }, { + "id": "1194", + "name": "2" + }], + "k_s": "s2" + }], + "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 + }, + "goods_id": "946755", + "alias": "2oml0r0n5vytj", + "quota": 15, + "is_virtual": "0", + "quota_used": 0, + "goods_info": { + "title": "\u725b\u5976\u6d4b\u8bd5", + "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"], + "price": 1, + "origin": "" + } +}; + +export default _global; diff --git a/test/unit/specs/sku.spec.js b/test/unit/specs/sku.spec.js new file mode 100644 index 000000000..fdedd079e --- /dev/null +++ b/test/unit/specs/sku.spec.js @@ -0,0 +1,43 @@ +import Sku from 'packages/sku'; +import { mount } from 'avoriaz'; +import { DOMChecker } from '../utils'; +import data from '../mock/sku'; + +const goods = data.goods_info; +goods.picture = goods.picture[0]; + +describe('Sku', () => { + let wrapper; + afterEach(() => { + wrapper && wrapper.destroy(); + }); + + it('default', () => { + wrapper = mount(Sku, { + attachToDocument: true, + propsData: { + show: false, + sku: data.sku, + goods: goods, + quota: data.quota, + quotaUsed: data.quota_used + } + }); + + DOMChecker(wrapper, { + text: { + '.van-order-goods-header a': '起码运动馆', + '.van-order-goods-price .van-cell__value span': '¥10.50', + '.van-card__title': item1.title, + '.van-card__num': 'x ' + item1.num, + '.van-card__price': '¥10.50' + }, + value: { + '.van-order-goods-message textarea': '留言留言' + }, + src: { + '.van-card__thumb img': item1.img_url + } + }); + }); +}); diff --git a/yarn.lock b/yarn.lock index 2ab7362f6..f62d7febb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6,11 +6,7 @@ abab@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d" -abbrev@1: - version "1.1.0" - resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f" - -abbrev@1.0.x: +abbrev@1, abbrev@1.0.x: version "1.0.9" resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135" @@ -372,15 +368,7 @@ babel-cli@^6.26.0: optionalDependencies: chokidar "^1.6.1" -babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0: - version "6.22.0" - resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4" - dependencies: - chalk "^1.1.0" - esutils "^2.0.2" - js-tokens "^3.0.0" - -babel-code-frame@^6.26.0: +babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" dependencies: @@ -388,31 +376,7 @@ babel-code-frame@^6.26.0: esutils "^2.0.2" js-tokens "^3.0.2" -babel-core@^6.1.4, babel-core@^6.24.1: - version "6.25.0" - resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729" - dependencies: - babel-code-frame "^6.22.0" - babel-generator "^6.25.0" - babel-helpers "^6.24.1" - babel-messages "^6.23.0" - babel-register "^6.24.1" - babel-runtime "^6.22.0" - babel-template "^6.25.0" - babel-traverse "^6.25.0" - babel-types "^6.25.0" - babylon "^6.17.2" - convert-source-map "^1.1.0" - debug "^2.1.1" - json5 "^0.5.0" - lodash "^4.2.0" - minimatch "^3.0.2" - path-is-absolute "^1.0.0" - private "^0.1.6" - slash "^1.0.0" - source-map "^0.5.0" - -babel-core@^6.26.0: +babel-core@^6.1.4, babel-core@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8" dependencies: @@ -445,19 +409,6 @@ babel-eslint@^7.2.1: babel-types "^6.23.0" babylon "^6.17.0" -babel-generator@^6.25.0: - version "6.25.0" - resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc" - dependencies: - babel-messages "^6.23.0" - babel-runtime "^6.22.0" - babel-types "^6.25.0" - detect-indent "^4.0.0" - jsesc "^1.3.0" - lodash "^4.2.0" - source-map "^0.5.0" - trim-right "^1.0.1" - babel-generator@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5" @@ -883,18 +834,6 @@ babel-preset-env@^1.6.0: invariant "^2.2.2" semver "^5.3.0" -babel-register@^6.24.1: - version "6.24.1" - resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.24.1.tgz#7e10e13a2f71065bdfad5a1787ba45bca6ded75f" - dependencies: - babel-core "^6.24.1" - babel-runtime "^6.22.0" - core-js "^2.4.0" - home-or-tmp "^2.0.0" - lodash "^4.2.0" - mkdirp "^0.5.1" - source-map-support "^0.4.2" - babel-register@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071" @@ -907,31 +846,14 @@ babel-register@^6.26.0: mkdirp "^0.5.1" source-map-support "^0.4.15" -babel-runtime@6.x, babel-runtime@^6.26.0: +babel-runtime@6.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" dependencies: core-js "^2.4.0" regenerator-runtime "^0.11.0" -babel-runtime@^6.18.0, babel-runtime@^6.22.0: - version "6.25.0" - resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.25.0.tgz#33b98eaa5d482bb01a8d1aa6b437ad2b01aec41c" - dependencies: - core-js "^2.4.0" - regenerator-runtime "^0.10.0" - -babel-template@^6.24.1, babel-template@^6.25.0: - version "6.25.0" - resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071" - dependencies: - babel-runtime "^6.22.0" - babel-traverse "^6.25.0" - babel-types "^6.25.0" - babylon "^6.17.2" - lodash "^4.2.0" - -babel-template@^6.26.0: +babel-template@^6.24.1, babel-template@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02" dependencies: @@ -941,21 +863,7 @@ babel-template@^6.26.0: babylon "^6.18.0" lodash "^4.17.4" -babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.25.0: - version "6.25.0" - resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1" - dependencies: - babel-code-frame "^6.22.0" - babel-messages "^6.23.0" - babel-runtime "^6.22.0" - babel-types "^6.25.0" - babylon "^6.17.2" - debug "^2.2.0" - globals "^9.0.0" - invariant "^2.2.0" - lodash "^4.2.0" - -babel-traverse@^6.26.0: +babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee" dependencies: @@ -969,16 +877,7 @@ babel-traverse@^6.26.0: invariant "^2.2.2" lodash "^4.17.4" -babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.25.0: - version "6.25.0" - resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e" - dependencies: - babel-runtime "^6.22.0" - esutils "^2.0.2" - lodash "^4.2.0" - to-fast-properties "^1.0.1" - -babel-types@^6.26.0: +babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497" dependencies: @@ -987,11 +886,7 @@ babel-types@^6.26.0: lodash "^4.17.4" to-fast-properties "^1.0.3" -babylon@^6.17.0, babylon@^6.17.2: - version "6.17.4" - resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a" - -babylon@^6.18.0: +babylon@^6.17.0, babylon@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3" @@ -1196,14 +1091,7 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6: caniuse-db "^1.0.30000639" electron-to-chromium "^1.2.7" -browserslist@^2.1.2: - version "2.3.3" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.3.3.tgz#2b0cabc4d28489f682598605858a0782f14b154c" - dependencies: - caniuse-lite "^1.0.30000715" - electron-to-chromium "^1.3.18" - -browserslist@^2.4.0: +browserslist@^2.1.2, browserslist@^2.4.0: version "2.4.0" resolved "https://registry.npmjs.org/browserslist/-/browserslist-2.4.0.tgz#693ee93d01e66468a6348da5498e011f578f87f8" dependencies: @@ -1303,10 +1191,6 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: version "1.0.30000715" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000715.tgz#0b9b5c795950dfbaf301a8806bafe87f126da8ca" -caniuse-lite@^1.0.30000715: - version "1.0.30000715" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000715.tgz#c327f5e6d907ebcec62cde598c3bf0dd793fb9a0" - caniuse-lite@^1.0.30000718: version "1.0.30000718" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz#0dd24290beb11310b2d80f6b70a823c2a65a6fad" @@ -1343,7 +1227,7 @@ chalk@^0.5.0: strip-ansi "^0.3.0" supports-color "^0.2.0" -chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3: +chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" dependencies: @@ -1677,7 +1561,7 @@ content-type@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed" -convert-source-map@^1.1.0, convert-source-map@^1.5.0: +convert-source-map@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5" @@ -2065,14 +1949,10 @@ di@^0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c" -diff@3.2.0: +diff@3.2.0, diff@^3.1.0: version "3.2.0" resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9" -diff@^3.1.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.0.tgz#056695150d7aa93237ca7e378ac3b1682b7963b9" - diffie-hellman@^5.0.0: version "5.0.2" resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e" @@ -2170,20 +2050,13 @@ domutils@1.1: dependencies: domelementtype "1" -domutils@1.5, domutils@1.5.1: +domutils@1.5, domutils@1.5.1, domutils@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf" dependencies: dom-serializer "0" domelementtype "1" -domutils@^1.5.1: - version "1.6.2" - resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff" - dependencies: - dom-serializer "0" - domelementtype "1" - duplexer2@0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db" @@ -2783,6 +2656,10 @@ fd-slicer@~1.0.1: dependencies: pend "~1.2.0" +fecha@^2.3.1: + version "2.3.1" + resolved "https://registry.npmjs.org/fecha/-/fecha-2.3.1.tgz#921b4e5a9d331aaa9b65c1634b26fc45945f6421" + felint@^0.5.0-alpha.3: version "0.5.0" resolved "https://registry.yarnpkg.com/felint/-/felint-0.5.0.tgz#e1281863f894a05ae9d2239e7ae8372958831c2a" @@ -3206,7 +3083,7 @@ global-prefix@^0.1.4: is-windows "^0.2.0" which "^1.2.12" -globals@^9.0.0, globals@^9.14.0, globals@^9.18.0: +globals@^9.14.0, globals@^9.18.0: version "9.18.0" resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a" @@ -3706,7 +3583,7 @@ interpret@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90" -invariant@^2.2.0, invariant@^2.2.2: +invariant@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -4003,6 +3880,10 @@ istanbul@^0.4.0: which "^1.1.1" wordwrap "^1.0.0" +jquery@1.12.4: + version "1.12.4" + resolved "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz#01e1dfba290fe73deba77ceeacb0f9ba2fec9e0c" + js-base64@^2.1.9: version "2.1.9" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce" @@ -4623,7 +4504,7 @@ lodash@^3.8.0: version "3.10.1" resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" -lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0: +lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.0, lodash@^4.14.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -4667,11 +4548,7 @@ lower-case@^1.1.1: version "1.1.4" resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac" -lru-cache@2: - version "2.7.3" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952" - -lru-cache@2.2.x: +lru-cache@2, lru-cache@2.2.x: version "2.2.4" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d" @@ -4706,14 +4583,10 @@ map-obj@^1.0.0, map-obj@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" -map-stream@0.0.4: +map-stream@0.0.4, map-stream@>=0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.0.4.tgz#5ec6de90213ef6c7b2eb9367e9ade8da4efdb68b" -map-stream@>=0.0.4: - version "0.1.0" - resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194" - markdown-it-container@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-2.0.0.tgz#0019b43fd02eefece2f1960a2895fba81a404695" @@ -4728,17 +4601,7 @@ markdown-it@^6.0.5: mdurl "~1.0.1" uc.micro "^1.0.1" -markdown-it@^8.3.2: - version "8.3.2" - resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.3.2.tgz#df4b86530d17c3bc9beec3b68d770b92ea17ae96" - dependencies: - argparse "^1.0.7" - entities "~1.1.1" - linkify-it "^2.0.0" - mdurl "^1.0.1" - uc.micro "^1.0.3" - -markdown-it@^8.4.0: +markdown-it@^8.3.2, markdown-it@^8.4.0: version "8.4.0" resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.0.tgz#e2400881bf171f7018ed1bd9da441dac8af6306d" dependencies: @@ -4870,7 +4733,7 @@ minimatch@~0.2.11: lru-cache "2" sigmund "~1.0.0" -minimist@0.0.8: +minimist@0.0.8, minimist@~0.0.1: version "0.0.8" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" @@ -4882,10 +4745,6 @@ minimist@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.2.0.tgz#4dffe525dae2b864c66c2e23c6271d7afdecefce" -minimist@~0.0.1: - version "0.0.10" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" - mkdirp@0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.0.tgz#1d73076a6df986cd9344e15e71fcc05a4c9abf12" @@ -5278,7 +5137,7 @@ os-locale@^2.0.0: lcid "^1.0.0" mem "^1.1.0" -os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2: +os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" @@ -5474,6 +5333,10 @@ performance-now@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5" +performance-now@^2.1.0: + version "2.1.0" + resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" + phantomjs-prebuilt@^2.1.7: version "2.1.15" resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.15.tgz#20f86e82d3349c505917527745b7a411e08b3903" @@ -5952,15 +5815,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0 source-map "^0.5.6" supports-color "^3.2.3" -postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.2, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.9: - version "6.0.9" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.9.tgz#54819766784a51c65b1ec4d54c2f93765438c35a" - dependencies: - chalk "^2.1.0" - source-map "^0.5.6" - supports-color "^4.2.1" - -postcss@^6.0.10: +postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.10, postcss@^6.0.2, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.9: version "6.0.10" resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.10.tgz#c311b89734483d87a91a56dc9e53f15f4e6e84e4" dependencies: @@ -6118,6 +5973,12 @@ querystringify@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb" +raf@^3.3.2: + version "3.3.2" + resolved "https://registry.npmjs.org/raf/-/raf-3.3.2.tgz#0c13be0b5b49b46f76d6669248d527cf2b02fe27" + dependencies: + performance-now "^2.1.0" + randomatic@^1.1.3: version "1.1.7" resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c" @@ -6197,9 +6058,9 @@ readable-stream@1.0, "readable-stream@>=1.0.33-1 <1.1.0-0", readable-stream@~1.0 isarray "0.0.1" string_decoder "~0.10.x" -readable-stream@1.1: - version "1.1.13" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e" +readable-stream@1.1, readable-stream@~1.1.9: + version "1.1.14" + resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9" dependencies: core-util-is "~1.0.0" inherits "~2.0.1" @@ -6218,15 +6079,6 @@ readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable string_decoder "~1.0.3" util-deprecate "~1.0.1" -readable-stream@~1.1.9: - version "1.1.14" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9" - dependencies: - core-util-is "~1.0.0" - inherits "~2.0.1" - isarray "0.0.1" - string_decoder "~0.10.x" - readdirp@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78" @@ -6275,7 +6127,7 @@ regenerate@^1.2.1: version "1.3.2" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260" -regenerator-runtime@^0.10.0, regenerator-runtime@^0.10.5: +regenerator-runtime@^0.10.5: version "0.10.5" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658" @@ -6728,21 +6580,15 @@ source-map-support@^0.4.15: dependencies: source-map "^0.5.6" -source-map-support@^0.4.2: - version "0.4.15" - resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1" - dependencies: - source-map "^0.5.6" - source-map@0.4.x, source-map@^0.4.4: version "0.4.4" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" dependencies: amdefine ">=0.0.4" -source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3: - version "0.5.6" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" +source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3: + version "0.5.7" + resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" source-map@^0.1.41: version "0.1.43" @@ -6750,9 +6596,9 @@ source-map@^0.1.41: dependencies: amdefine ">=0.0.4" -source-map@^0.5.7: - version "0.5.7" - resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" +source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6: + version "0.5.6" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" source-map@~0.2.0: version "0.2.0" @@ -6953,7 +6799,7 @@ sugarss@^1.0.0: dependencies: postcss "^6.0.0" -supports-color@3.1.2: +supports-color@3.1.2, supports-color@^3.1.1: version "3.1.2" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5" dependencies: @@ -6967,7 +6813,7 @@ supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" -supports-color@^3.1.0, supports-color@^3.1.1, supports-color@^3.2.3: +supports-color@^3.1.0, supports-color@^3.2.3: version "3.2.3" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6" dependencies: @@ -7109,18 +6955,12 @@ timers-browserify@^2.0.2: dependencies: setimmediate "^1.0.4" -tmp@0.0.31: +tmp@0.0.31, tmp@0.0.x: version "0.0.31" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7" dependencies: os-tmpdir "~1.0.1" -tmp@0.0.x: - version "0.0.33" - resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9" - dependencies: - os-tmpdir "~1.0.2" - to-array@0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890" @@ -7129,7 +6969,7 @@ to-arraybuffer@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43" -to-fast-properties@^1.0.1, to-fast-properties@^1.0.3: +to-fast-properties@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47" @@ -7292,7 +7132,7 @@ url-parse@1.0.x: querystringify "0.0.x" requires-port "1.0.x" -url-parse@^1.1.8: +url-parse@^1.1.8, url-parse@^1.1.9: version "1.1.9" resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.9.tgz#c67f1d775d51f0a18911dd7b3ffad27bb9e5bd19" dependencies: @@ -7810,3 +7650,18 @@ zan-doc@^0.2.12: markdown-it-container "^2.0.0" node-watch "^0.5.5" nprogress "^0.2.0" + +zan-jquery@^1.0.2: + version "1.0.2" + resolved "https://registry.npmjs.org/zan-jquery/-/zan-jquery-1.0.2.tgz#d9a45088d0d152cfe41729aca70b6682e30ce5cf" + +zan-utils@^1.0.14: + version "1.0.14" + resolved "https://registry.npmjs.org/zan-utils/-/zan-utils-1.0.14.tgz#cff43f1cf8e6c81343134c3a49dc4bccf3e82585" + dependencies: + fecha "^2.3.1" + jquery "1.12.4" + lodash "^4.16.4" + raf "^3.3.2" + url-parse "^1.1.9" + zan-jquery "^1.0.2" From 078cf05cebd17d90238db2ab517fdb4de94590c7 Mon Sep 17 00:00:00 2001 From: niunai Date: Fri, 8 Sep 2017 16:56:14 +0800 Subject: [PATCH 2/8] fix: quantity -> stepper --- docs/examples-docs/sku.md | 4 ++-- packages/sku/components/SkuQuantity.vue | 20 ++++++++++---------- packages/sku/containers/SkuContainer.vue | 22 +++++++++++----------- packages/sku/index.js | 4 ++-- packages/vant-css/src/sku.css | 10 +++++----- 5 files changed, 30 insertions(+), 30 deletions(-) diff --git a/docs/examples-docs/sku.md b/docs/examples-docs/sku.md index c9a850566..86d9b05f7 100644 --- a/docs/examples-docs/sku.md +++ b/docs/examples-docs/sku.md @@ -60,7 +60,7 @@ Vue.component(Sku.name, Sku); :show-add-cart-btn="true" :quota="quota" :quota-used="quotaUsed" - :reset-quantity-on-hide="true" + :reset-stepper-on-hide="true" @buy-clicked="handleBuyClicked" @add-cart="handleAddCartClicked" > @@ -85,7 +85,7 @@ Vue.component(Sku.name, Sku); :show-add-cart-btn="true" :quota="quota" :quota-used="quotaUsed" - :reset-quantity-on-hide="true" + :reset-stepper-on-hide="true" @buy-clicked="handleBuyClicked" @add-cart="handleAddCartClicked" > diff --git a/packages/sku/components/SkuQuantity.vue b/packages/sku/components/SkuQuantity.vue index aaabc1b8a..236ce49e0 100644 --- a/packages/sku/components/SkuQuantity.vue +++ b/packages/sku/components/SkuQuantity.vue @@ -1,8 +1,8 @@ From 01a50276e1f8d30877a3894bd213a7a3ebef3bb8 Mon Sep 17 00:00:00 2001 From: niunai Date: Fri, 8 Sep 2017 16:57:58 +0800 Subject: [PATCH 4/8] fix: file name change --- packages/sku/components/SkuStepper.vue | 100 +++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 packages/sku/components/SkuStepper.vue diff --git a/packages/sku/components/SkuStepper.vue b/packages/sku/components/SkuStepper.vue new file mode 100644 index 000000000..236ce49e0 --- /dev/null +++ b/packages/sku/components/SkuStepper.vue @@ -0,0 +1,100 @@ + + + From 40fd2efd5c9887aeecf0a47f714a6a617cb18c22 Mon Sep 17 00:00:00 2001 From: niunai Date: Fri, 8 Sep 2017 21:42:26 +0800 Subject: [PATCH 5/8] =?UTF-8?q?fix:=20sku=E6=B5=8B=E8=AF=95=E7=94=A8?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/examples-docs/sku.md | 3 - docs/mock/sku.js | 34 +----- packages/sku/containers/SkuContainer.vue | 7 +- test/unit/mock/sku.js | 42 +------ test/unit/specs/sku.spec.js | 145 ++++++++++++++++++++--- 5 files changed, 139 insertions(+), 92 deletions(-) diff --git a/docs/examples-docs/sku.md b/docs/examples-docs/sku.md index 86d9b05f7..4fc3ed4ff 100644 --- a/docs/examples-docs/sku.md +++ b/docs/examples-docs/sku.md @@ -55,7 +55,6 @@ Vue.component(Sku.name, Sku); v-model="showBase" :sku="sku" :goods="goods" - :goods-id="goodsId" :hide-stock="sku.hide_stock" :show-add-cart-btn="true" :quota="quota" @@ -80,7 +79,6 @@ Vue.component(Sku.name, Sku); v-model="showCustomAction" :sku="sku" :goods="goods" - :goods-id="goodsId" :hide-stock="sku.hide_stock" :show-add-cart-btn="true" :quota="quota" @@ -117,7 +115,6 @@ Vue.component(Sku.name, Sku); | v-model | 是否显示sku | Boolean | false | 是 | | sku | 商品sku数据 | Object | - | 是 | | goods | 商品信息 | Object | - | 是 | -| goodsId | 商品id | String | - | 是 | | hideStock | 是否显示商品剩余库存 | Boolean | false | 否 | | showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 | | quota | 限购数(0表示不限购) | Number | 0 | 否 | diff --git a/docs/mock/sku.js b/docs/mock/sku.js index 2b20595ee..4214ca6a5 100644 --- a/docs/mock/sku.js +++ b/docs/mock/sku.js @@ -226,40 +226,10 @@ var _global = { "is_virtual": "0", "quota_used": 0, "goods_info": { - "title": "\u725b\u5976\u6d4b\u8bd5", - "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"], + "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": "" - }, - "url": { - "base": "https:\/\/www.youzan.com", - "bbs": "http:\/\/bbs.youzan.com", - "cdn": "https:\/\/b.yzcdn.cn\/", - "cdn_static": "https:\/\/b.yzcdn.cn\/v2", - "daxue": "http:\/\/xuetang.youzan.com", - "fenxiao": "\/\/fx.youzan.com", - "fuwu": "http:\/\/fuwu.youzan.com", - "img": "http:\/\/img.youzan.com", - "imgqn": "https:\/\/img.yzcdn.cn", - "login": "http:\/\/login.youzan.com", - "open": "\/\/open.youzan.com", - "static": "\/\/static.youzan.com\/v2", - "trade": "https:\/\/trade.koudaitong.com", - "v1": "https:\/\/www.youzan.com\/v1", - "v1_static": "https:\/\/b.yzcdn.cn\/v1", - "v2": "https:\/\/www.youzan.com\/v2", - "wap": "https:\/\/h5.youzan.com\/v2", - "ws": "ws:\/\/im.youzan.com:8080", - "www": "\/\/www.youzan.com\/v2", - "youzan": "http:\/\/www.youzan.com", - "cloud": "https:\/\/dl.yzcdn.cn", - "pf": "http:\/\/pifa.youzan.com", - "uic": "\/\/uic.youzan.com", - "store": "\/\/store.youzan.com", - "market": "http:\/\/pfmarket.youzan.com", - "im": "http:\/\/b-im.youzan.com", - "help": "\/\/help.youzan.com", - "materials": "\/\/materials.youzan.com" } }; diff --git a/packages/sku/containers/SkuContainer.vue b/packages/sku/containers/SkuContainer.vue index 0357b1b26..497eae950 100644 --- a/packages/sku/containers/SkuContainer.vue +++ b/packages/sku/containers/SkuContainer.vue @@ -13,7 +13,7 @@
-
+
@@ -171,8 +171,11 @@ export default { isSkuCombSelected() { return isAllSelected(this.sku.tree, this.selectedSku); }, + hasSku() { + return !this.sku.none_sku; + }, selectedSkuComb() { - if (this.sku.none_sku) { + if (!this.hasSku) { return { id: this.sku.collection_id, price: Math.round(this.sku.price * 100), diff --git a/test/unit/mock/sku.js b/test/unit/mock/sku.js index e43b438bb..fbb429598 100644 --- a/test/unit/mock/sku.js +++ b/test/unit/mock/sku.js @@ -27,42 +27,6 @@ var _global = { "k_s": "s2" }], "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, @@ -222,10 +186,10 @@ var _global = { "alias": "2oml0r0n5vytj", "quota": 15, "is_virtual": "0", - "quota_used": 0, + "quota_used": 2, "goods_info": { - "title": "\u725b\u5976\u6d4b\u8bd5", - "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"], + "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": "" } diff --git a/test/unit/specs/sku.spec.js b/test/unit/specs/sku.spec.js index fdedd079e..20cafa45f 100644 --- a/test/unit/specs/sku.spec.js +++ b/test/unit/specs/sku.spec.js @@ -3,20 +3,106 @@ import { mount } from 'avoriaz'; import { DOMChecker } from '../utils'; import data from '../mock/sku'; +const { skuHelper } = Sku; const goods = data.goods_info; goods.picture = goods.picture[0]; -describe('Sku', () => { +describe('Sku', (done) => { let wrapper; afterEach(() => { wrapper && wrapper.destroy(); }); - it('default', () => { + it('default', (done) => { wrapper = mount(Sku, { attachToDocument: true, propsData: { - show: false, + value: true, + sku: data.sku, + goods: goods, + resetStepperOnHide: true + } + }); + + DOMChecker(wrapper, { + text: { + '.van-sku__goods-name': goods.title, + '.van-sku__price-num': '1.00' + }, + value: { + '.van-stepper__input': '1' + }, + src: { + '.van-sku__goods-img': 'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg' + } + }); + + // 测试默认选中 + const selectedSku = skuHelper.getSelectedSkuValues(data.sku.tree, wrapper.vm.selectedSku); + expect(selectedSku[0].id).to.equal('30349'); + + // 关闭sku弹层 + const closeCallback = sinon.spy(); + const closeIcon = wrapper.find('.van-sku__close-icon')[0]; + wrapper.vm.$on('sku-close', closeCallback); + closeIcon.trigger('click'); + wrapper.vm.$nextTick(() => { + expect(closeCallback.calledOnce).to.be.true; + done(); + }); + }); + + it('click buy and addCart', (done) => { + wrapper = mount(Sku, { + attachToDocument: true, + propsData: { + value: true, + sku: data.sku, + goods: goods + } + }); + + const buyCallback = sinon.spy(); + const addCartCallback = sinon.spy(); + const buyBtn = wrapper.find('.van-sku__buy-btn')[0]; + const addCartBtn = wrapper.find('.van-sku__add-cart-btn')[0]; + wrapper.vm.$on('buy-clicked', buyCallback); + wrapper.vm.$on('add-cart', addCartCallback); + + // 未选择完整规格时，弹出toast提示 + buyBtn.trigger('click'); + wrapper.vm.$nextTick(() => { + const toastText = document.querySelector('.van-toast__text'); + expect(toastText.textContent).to.equal('请选择完整的规格'); + expect(buyCallback.calledOnce).to.be.false; + + // 选择完整规格时，未填留言时，弹出toast提示。 + wrapper.find('.van-sku-row-group')[1].find('.van-sku-row__item')[0].trigger('click'); + buyBtn.trigger('click'); + wrapper.vm.$nextTick(() => { + expect(toastText.textContent).to.equal('请填写留言1'); + expect(buyCallback.calledOnce).to.be.false; + + // 触发buy-clicked事件 + const requiredMessage = wrapper.find('.van-cell--required .van-field__control')[0]; + requiredMessage.element.value = 'test'; + requiredMessage.trigger('input'); + wrapper.vm.$nextTick(() => { + buyBtn.trigger('click'); + addCartBtn.trigger('click'); + expect(buyCallback.calledOnce).to.be.true; + expect(addCartCallback.calledOnce).to.be.true; + done(); + }); + }); + }); + }); + + it('change step value', (done) =>{ + wrapper = mount(Sku, { + attachToDocument: true, + propsData: { + value: true, sku: data.sku, goods: goods, quota: data.quota, @@ -24,20 +110,47 @@ describe('Sku', () => { } }); - DOMChecker(wrapper, { - text: { - '.van-order-goods-header a': '起码运动馆', - '.van-order-goods-price .van-cell__value span': '¥10.50', - '.van-card__title': item1.title, - '.van-card__num': 'x ' + item1.num, - '.van-card__price': '¥10.50' - }, - value: { - '.van-order-goods-message textarea': '留言留言' - }, - src: { - '.van-card__thumb img': item1.img_url + // 点击减号 + const minusBtn = wrapper.find('.van-stepper__minus')[0]; + minusBtn.trigger('click'); + wrapper.vm.$nextTick(() => { + const toastText = document.querySelector('.van-toast__text'); + expect(toastText.textContent).to.equal('至少选择一件'); + + // 手动修改购买数量 + const stepperInput = wrapper.find('.van-stepper__input')[0]; + stepperInput.element.value = 20; + stepperInput.trigger('input'); + wrapper.vm.$nextTick(() => { + expect(+stepperInput.element.value).to.equal(data.quota - data.quota_used); + + // 达到购买上限时，点击加号 + const plusBtn = wrapper.find('.van-stepper__plus')[0]; + plusBtn.trigger('click'); + wrapper.vm.$nextTick(() => { + expect(toastText.textContent).to.equal(`限购${data.quota}件，您已购买${data.quota_used}件`); + done(); + }); + }); + }); + }); + + it('test none sku', (done) => { + data.sku.none_sku = true; // eslint-disable-line + + wrapper = mount(Sku, { + attachToDocument: true, + propsData: { + value: false, + sku: data.sku, + goods: goods } }); + + wrapper.vm.value = true; + wrapper.vm.$nextTick(() => { + expect(wrapper.find('.van-sku-group-container').length).to.equal(0); + done(); + }); }); }); From 880fc562e5fd6e6693f7956b5c495903ed4b3a02 Mon Sep 17 00:00:00 2001 From: niunai Date: Fri, 8 Sep 2017 21:54:55 +0800 Subject: [PATCH 6/8] fix: update doc --- docs/examples-docs/sku.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/docs/examples-docs/sku.md b/docs/examples-docs/sku.md index 4fc3ed4ff..7924e1cea 100644 --- a/docs/examples-docs/sku.md +++ b/docs/examples-docs/sku.md @@ -70,13 +70,14 @@ Vue.component(Sku.name, Sku); ``` ::: -#### 自定义部分sku子组件 +#### 自定义sku slot区块 :::demo ```html