From f37cf4b8d00ffe5aea298449134189bea9a22e85 Mon Sep 17 00:00:00 2001 From: fenghou Date: Fri, 12 Oct 2018 15:27:35 +0800 Subject: [PATCH] =?UTF-8?q?[new=20feature](goods-action):=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E5=95=86=E5=93=81=E9=A1=B5=E8=A1=8C=E5=8A=A8=E7=82=B9?= =?UTF-8?q?=E4=B8=9A=E5=8A=A1=E7=BB=84=E4=BB=B6=20(#736)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/app.json | 3 +- example/config.js | 4 + example/pages/goods-action/index.js | 75 ++++++++++++++++ example/pages/goods-action/index.json | 11 +++ example/pages/goods-action/index.wxml | 11 +++ example/pages/goods-action/index.wxss | 7 ++ packages/goods-action-big-btn/index.json | 6 ++ packages/goods-action-big-btn/index.less | 1 + packages/goods-action-big-btn/index.ts | 24 +++++ packages/goods-action-big-btn/index.wxml | 20 +++++ packages/goods-action-mini-btn/index.json | 6 ++ packages/goods-action-mini-btn/index.less | 19 ++++ packages/goods-action-mini-btn/index.ts | 26 ++++++ packages/goods-action-mini-btn/index.wxml | 18 ++++ packages/goods-action/README.md | 103 ++++++++++++++++++++++ packages/goods-action/index.json | 7 ++ packages/goods-action/index.less | 30 +++++++ packages/goods-action/index.ts | 20 +++++ packages/goods-action/index.wxml | 27 ++++++ 19 files changed, 417 insertions(+), 1 deletion(-) create mode 100644 example/pages/goods-action/index.js create mode 100644 example/pages/goods-action/index.json create mode 100644 example/pages/goods-action/index.wxml create mode 100644 example/pages/goods-action/index.wxss create mode 100644 packages/goods-action-big-btn/index.json create mode 100644 packages/goods-action-big-btn/index.less create mode 100644 packages/goods-action-big-btn/index.ts create mode 100644 packages/goods-action-big-btn/index.wxml create mode 100644 packages/goods-action-mini-btn/index.json create mode 100644 packages/goods-action-mini-btn/index.less create mode 100644 packages/goods-action-mini-btn/index.ts create mode 100644 packages/goods-action-mini-btn/index.wxml create mode 100644 packages/goods-action/README.md create mode 100644 packages/goods-action/index.json create mode 100644 packages/goods-action/index.less create mode 100644 packages/goods-action/index.ts create mode 100644 packages/goods-action/index.wxml diff --git a/example/app.json b/example/app.json index bea9f296..ce963064 100644 --- a/example/app.json +++ b/example/app.json @@ -32,7 +32,8 @@ "pages/area/index", "pages/submit-bar/index", "pages/radio/index", - "pages/checkbox/index" + "pages/checkbox/index", + "pages/goods-action/index" ], "window": { "navigationBarBackgroundColor": "#f8f8f8", diff --git a/example/config.js b/example/config.js index 4d3cb92f..b390f9a1 100644 --- a/example/config.js +++ b/example/config.js @@ -149,6 +149,10 @@ export default [ { path: '/submit-bar', title: 'SubmitBar 提交订单栏' + }, + { + path: '/goods-action', + title: 'GoodsAction 商品页行动点' } ] } diff --git a/example/pages/goods-action/index.js b/example/pages/goods-action/index.js new file mode 100644 index 00000000..217c2b67 --- /dev/null +++ b/example/pages/goods-action/index.js @@ -0,0 +1,75 @@ +import Page from '../../common/page'; +import Toast from '../../dist/toast/toast'; + +Page({ + data: { + btnList: [ + { + type: 'mini', + icon: 'chat', + text: '客服', + bindClickEventName: 'onClickChatBtn' + }, + { + type: 'mini', + icon: 'cart', + text: '购物车' + }, + { + type: 'big', + text: '加入购物车' + }, + { + type: 'big', + text: '立即购买', + primary: true, + bindClickEventName: 'onClickBuyBtn' + } + ], + btnListInfo: [ + { + type: 'mini', + icon: 'chat', + text: '客服', + url: '/pages/submit-bar/index', + replace: true, + info: 15 + }, + { + type: 'mini', + icon: 'cart', + text: '购物车', + info: '5' + }, + { + type: 'mini', + icon: 'shop', + text: '店铺' + }, + { + type: 'big', + text: '加入购物车' + }, + { + type: 'big', + text: '立即购买', + primary: true, + url: '/pages/submit-bar/index', + replace: false + } + ] + }, + + onClick(event) { + const { bindClickEventName } = event.detail; + this[`${bindClickEventName}`](); + }, + + onClickChatBtn() { + Toast('点击图标'); + }, + + onClickBuyBtn() { + Toast('点击按钮'); + } +}); diff --git a/example/pages/goods-action/index.json b/example/pages/goods-action/index.json new file mode 100644 index 00000000..2654ffe3 --- /dev/null +++ b/example/pages/goods-action/index.json @@ -0,0 +1,11 @@ +{ + "navigationBarTitleText": "GoodsAction 商品页行动点", + "usingComponents": { + "demo-block": "../../components/demo-block/index", + "van-goods-action": "../../dist/goods-action/index", + "van-goods-action-big-btn": "../../dist/goods-action-big-btn/index", + "van-goods-action-mini-btn": "../../dist/goods-action-mini-btn/index", + "van-submit-bar": "../../dist/submit-bar/index", + "van-toast": "../../dist/toast/index" + } +} diff --git a/example/pages/goods-action/index.wxml b/example/pages/goods-action/index.wxml new file mode 100644 index 00000000..00b2c0ed --- /dev/null +++ b/example/pages/goods-action/index.wxml @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/example/pages/goods-action/index.wxss b/example/pages/goods-action/index.wxss new file mode 100644 index 00000000..b8a12f0d --- /dev/null +++ b/example/pages/goods-action/index.wxss @@ -0,0 +1,7 @@ +.van-goods-action { + position: relative !important; +} + +.icon-color { + color: #06bf04!important; +} diff --git a/packages/goods-action-big-btn/index.json b/packages/goods-action-big-btn/index.json new file mode 100644 index 00000000..b5676868 --- /dev/null +++ b/packages/goods-action-big-btn/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "van-button": "../button/index" + } +} diff --git a/packages/goods-action-big-btn/index.less b/packages/goods-action-big-btn/index.less new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/packages/goods-action-big-btn/index.less @@ -0,0 +1 @@ + diff --git a/packages/goods-action-big-btn/index.ts b/packages/goods-action-big-btn/index.ts new file mode 100644 index 00000000..b8cb3da9 --- /dev/null +++ b/packages/goods-action-big-btn/index.ts @@ -0,0 +1,24 @@ +import { VantComponent } from '../common/component'; + +VantComponent({ + props: { + url: String, + text: String, + bindClickEventName: String, + primary: { + type: Boolean, + value: false + }, + replace: { + type: Boolean, + value: false + } + }, + + methods: { + onClick(event: Weapp.Event) { + const { bindClickEventName } = this.data; + this.$emit('click', {...event.detail, bindClickEventName}); + } + } +}); diff --git a/packages/goods-action-big-btn/index.wxml b/packages/goods-action-big-btn/index.wxml new file mode 100644 index 00000000..19a99a20 --- /dev/null +++ b/packages/goods-action-big-btn/index.wxml @@ -0,0 +1,20 @@ + + + + + + + + + + + diff --git a/packages/goods-action-mini-btn/index.json b/packages/goods-action-mini-btn/index.json new file mode 100644 index 00000000..0a336c08 --- /dev/null +++ b/packages/goods-action-mini-btn/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "van-icon": "../icon/index" + } +} diff --git a/packages/goods-action-mini-btn/index.less b/packages/goods-action-mini-btn/index.less new file mode 100644 index 00000000..029a534a --- /dev/null +++ b/packages/goods-action-mini-btn/index.less @@ -0,0 +1,19 @@ +@import '../common/style/var.less'; + +.van-goods-action-mini-btn { + color: @gray-darker; + display: flex; + height: 50px; + font-size: 10px; + line-height: 1; + text-align: center; + background-color: @white; + flex-direction: column; + justify-content: center; +} + +.van-goods-action-mini-btn__icon { + width: 1em; + font-size: 20px; + margin: 0 auto 5px; +} diff --git a/packages/goods-action-mini-btn/index.ts b/packages/goods-action-mini-btn/index.ts new file mode 100644 index 00000000..1f28db8b --- /dev/null +++ b/packages/goods-action-mini-btn/index.ts @@ -0,0 +1,26 @@ +import { VantComponent } from '../common/component'; + +VantComponent({ + classes: [ + 'icon-class' + ], + + props: { + url: String, + text: String, + info: String, + icon: String, + bindClickEventName: String, + replace: { + type: Boolean, + value: false + } + }, + + methods: { + onClick(event: Weapp.Event) { + const { bindClickEventName } = this.data; + this.$emit('click', {...event.detail, bindClickEventName}); + } + } +}); diff --git a/packages/goods-action-mini-btn/index.wxml b/packages/goods-action-mini-btn/index.wxml new file mode 100644 index 00000000..a089ab2b --- /dev/null +++ b/packages/goods-action-mini-btn/index.wxml @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/packages/goods-action/README.md b/packages/goods-action/README.md new file mode 100644 index 00000000..5f536bcb --- /dev/null +++ b/packages/goods-action/README.md @@ -0,0 +1,103 @@ +## goodsAction 商品页行动点 + +### 使用指南 +在 index.json 中引入组件 +```json +"usingComponents": { + "van-goods-action": "path/to/vant-weapp/dist/goods-action/index" +} +``` + +### 代码演示 + +#### 基础用法 + +```html + +``` + +```javascript +Page({ + data: { + btnList: [ + { + type: 'mini', + icon: 'chat', + text: '客服', + bindClickEventName: 'onClickChatBtn' + }, + { + type: 'mini', + icon: 'cart', + text: '购物车', + info: 5, + url: '/pages/submit-bar/index', + replace: true + }, + { + type: 'big', + text: '加入购物车', + bindClickEventName: 'onClickBuyBtn' + }, + { + type: 'big', + text: '立即购买', + primary: true, + url: '/pages/submit-bar/index', + replace: false + } + ] + }, + + onClick(event) { + const { bindClickEventName } = event.detail; + this[`${bindClickEventName}`](); + }, + + onClickChatBtn() { + console.log('点击图标'); + }, + + onClickBuyBtn() { + console.log('点击按钮'); + } +}); +```` + +### API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| btn-list | 按钮列表 | `Array` | - | + +#### btn-list +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| type | 按钮类型，可选值为 `mini` `big` | `String` | - | +| text | 按钮文字 | `String` | - | +| icon | 图标 | `String` | - | +| info | 图标右上角提示信息 | `String | Number` | - | +| url | 跳转链接 | `String` | - | +| replace | 跳转时是否替换当前 history | `String` | `false` | +| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| click | 按钮点击事件回调 | - | + +### 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| icon-class | icon按钮样式类 | + +### 更新日志 + +| 版本 | 类型 | 内容 | +|-----------|-----------|-----------| +| 0.3.6 | feature | 新增组件 | diff --git a/packages/goods-action/index.json b/packages/goods-action/index.json new file mode 100644 index 00000000..3a32fb91 --- /dev/null +++ b/packages/goods-action/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "van-goods-action-mini-btn": "../goods-action-mini-btn/index", + "van-goods-action-big-btn": "../goods-action-big-btn/index" + } +} diff --git a/packages/goods-action/index.less b/packages/goods-action/index.less new file mode 100644 index 00000000..868c7072 --- /dev/null +++ b/packages/goods-action/index.less @@ -0,0 +1,30 @@ +@import '../common/style/var.less'; + +.van-goods-action { + left: 0; + right: 0; + bottom: 0; + display: flex; + position: fixed; +} + +.van-goods-action-big-btn { + flex: 1; + padding: 0; +} + +.van-goods-action-mini-btn { + min-width: 15%; +} + +.van-goods-action-mini-btn::after { + border-width: 1px 0 0 1px; +} + +.van-goods-action-mini-btn:first-child::after { + border-left-width: 0; +} + +.van-goods-action-mini-btn:active { + background-color: @active-color; +} diff --git a/packages/goods-action/index.ts b/packages/goods-action/index.ts new file mode 100644 index 00000000..6e5f2831 --- /dev/null +++ b/packages/goods-action/index.ts @@ -0,0 +1,20 @@ +import { VantComponent } from '../common/component'; + +VantComponent({ + classes: [ + 'icon-class' + ], + + props: { + btnList: Array + }, + + methods: { + onClick(event: Weapp.Event) { + const { bindClickEventName } = event.detail; + if (bindClickEventName) { + this.$emit('click', event.detail); + } + } + } +}); diff --git a/packages/goods-action/index.wxml b/packages/goods-action/index.wxml new file mode 100644 index 00000000..34f86aed --- /dev/null +++ b/packages/goods-action/index.wxml @@ -0,0 +1,27 @@ + + + + + + +