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 @@
+
+
+
+
+
+
+
+
+
+
+ {{ text }}
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ text }}
+
+
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 @@
+
+
+
+
+
+
+