[new feature](goods-action): 新增商品页行动点业务组件 (#736)

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",

example/config.js

@@ -149,6 +149,10 @@ export default [
       {
         path: '/submit-bar',
         title: 'SubmitBar 提交订单栏'
+      },
+      {
+        path: '/goods-action',
+        title: 'GoodsAction 商品页行动点'
       }
     ]
   }

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('点击按钮');
+  }
+});

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"
+  }
+}

example/pages/goods-action/index.wxml

@@ -0,0 +1,11 @@
+<demo-block title="基础用法">
+  <van-goods-action icon-class="icon-color" btn-list="{{ btnList }}" bind:click="onClick" />
+</demo-block>
+
+<demo-block title="图标提示">
+  <van-goods-action btn-list="{{ btnListInfo }}" bind:click="onClick" />
+</demo-block>
+
+<van-toast id="van-toast" />
+
+

example/pages/goods-action/index.wxss

@@ -0,0 +1,7 @@
+.van-goods-action {
+  position: relative !important;
+}
+
+.icon-color {
+  color: #06bf04!important;
+}

packages/goods-action-big-btn/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-button": "../button/index"
+  }
+}

packages/goods-action-big-btn/index.less

@@ -0,0 +1 @@
+

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});
+    }
+  }
+});

packages/goods-action-big-btn/index.wxml

@@ -0,0 +1,20 @@
+<navigator wx:if="{{ url }}" url="{{ url }}" open-type="{{ replace ? 'redirect' : 'navigate' }}">
+  <template is="big-btn" data="{{ primary, text }}"></template>
+</navigator>
+
+<block wx:else>
+  <template is="big-btn" data="{{ primary, text }}"></template>
+</block>
+
+<template name="big-btn">
+  <van-button
+    type="{{ primary ? 'danger' : 'warning' }}"
+    square
+    size="large"
+    bind:click="onClick"
+  >
+    {{ text }}
+  </van-button>
+</template>
+
+

packages/goods-action-mini-btn/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

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;
+}

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});
+    }
+  }
+});

packages/goods-action-mini-btn/index.wxml

@@ -0,0 +1,18 @@
+<navigator wx:if="{{ url }}" url="{{ url }}" open-type="{{ replace ? 'redirect' : 'navigate' }}">
+  <template is="mini-btn" data="{{ icon, info, text }}"></template>
+</navigator>
+
+<block wx:else>
+  <template is="mini-btn" data="{{ icon, info, text }}"></template>
+</block>
+
+<template name="mini-btn">
+  <view class="van-goods-action-mini-btn icon-class" bindtap="onClick">
+    <van-icon
+      name="{{ icon }}"
+      info="{{ info }}"
+      class="van-goods-action-mini-btn__icon"
+    />
+    {{ text }}
+  </view>
+</template>

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
+<van-goods-action 
+ btn-list="{{ btnList }}" 
+ bind:click="onClick" 
+/>
+```
+
+```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 | 新增组件 |

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"
+  }
+}

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;
+}

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);
+      }
+    }
+  }
+});

packages/goods-action/index.wxml

@@ -0,0 +1,27 @@
+<view class="van-goods-action">
+  <block wx:for="{{ btnList }}" wx:key="{{ index }}">
+    <van-goods-action-mini-btn
+      wx:if="{{ item.type === 'mini' }}"
+      bind:click="onClick"
+      class="van-goods-action-mini-btn van-hairline"
+      icon-class="icon-class"
+      icon="{{ item.icon }}"
+      text="{{ item.text }}"
+      info="{{ item.info }}"
+      url="{{ item.url }}"
+      replace="{{ item.replace }}"
+      bind-click-event-name="{{ item.bindClickEventName }}"
+    />
+
+    <van-goods-action-big-btn
+      wx:elif="{{ item.type === 'big' }}"
+      bind:click="onClick"
+      class="van-goods-action-big-btn"
+      primary="{{ item.primary }}"
+      text="{{ item.text }}"
+      url="{{ item.url }}"
+      replace="{{ item.replace }}"
+      bind-click-event-name="{{ item.bindClickEventName }}"
+    />
+  </block>
+</view>