[improvement] GoodsAction: rebuild api (#759)

docs/src/Preview.vue

@@ -15,18 +15,19 @@ const PREFIX = 'https://img.yzcdn.cn/vant-weapp/';
 const MAP = {
   index: 'index-201808121630.png',
   'action-sheet': 'action-sheet-201809071648.png',
-  area: 'area-201809271357.png',
+  area: 'area-20181015.png',
   badge: 'badge-201808092138.png',
-  button: 'button-201808092138.png',
+  button: 'button-20181015.png',
   card: 'card-201808092138.png',
   col: 'layout-201808092138.png',
   cell: 'cell-201808092138.png',
   dialog: 'dialog-201809071648.png',
   field: 'field-201808092138.png',
+  'goods-action': 'goods-action-20181015.png',
   icon: 'icon-201808092138.png',
   loading: 'loading-201808092138.png',
   'nav-bar': 'nav-bar-201808110751.png',
-  'notice-bar': 'notice-bar-201808092138.png',
+  'notice-bar': 'notice-bar-20181015.png',
   notify: 'notify-201808112050.png',
   panel: 'panel-201808092138.png',
   popup: 'popup-201808092138.png',
@@ -35,11 +36,11 @@ const MAP = {
   slider: 'slider-201808221024.png',
   stepper: 'stepper-201808092138.png',
   search: 'search-201808092138.png',
-  steps: 'steps-201808092138.png',
+  steps: 'steps-20181015.png',
   switch: 'switch-201808092138.png',
   'switch-cell': 'switch-cell-201808221124.png',
   'submit-bar': 'submit-bar-a-201809271357.png',
-  tab: 'tab-201809051457.png',
+  tab: 'tab-20181015.png',
   tag: 'tag-201808092138.png',
   tabbar: 'tabbar-201808160922.png',
   toast: 'toast-201808191046.png',

example/pages/goods-action/index.js

@@ -2,74 +2,11 @@ import Page from '../../common/page';
 import Toast from '../../dist/toast/toast';
 
 Page({
-  data: {
+  onClickIcon() {
-    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() {
+  onClickButton() {
     Toast('点击按钮');
   }
 });

example/pages/goods-action/index.json

@@ -3,8 +3,8 @@
   "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-icon": "../../dist/goods-action-icon/index",
-    "van-goods-action-mini-btn": "../../dist/goods-action-mini-btn/index",
+    "van-goods-action-button": "../../dist/goods-action-button/index",
     "van-submit-bar": "../../dist/submit-bar/index",
     "van-toast": "../../dist/toast/index"
   }

example/pages/goods-action/index.wxml

@@ -1,11 +1,35 @@
 <demo-block title="基础用法">
-  <van-goods-action icon-class="icon-color" btn-list="{{ btnList }}" bind:click="onClick" />
+  <van-goods-action custom-class="goods-action">
+    <van-goods-action-icon
+      icon="chat"
+      text="客服"
+      bind:click="onClickIcon"
+    />
+    <van-goods-action-icon
+      icon="cart"
+      text="购物车"
+      bind:click="onClickIcon"
+    />
+    <van-goods-action-button
+      text="加入购物车"
+      type="warning"
+      bind:click="onClickButton"
+    />
+    <van-goods-action-button
+      text="立即购买"
+      bind:click="onClickButton"
+    />
+  </van-goods-action>
 </demo-block>
 
 <demo-block title="图标提示">
-  <van-goods-action btn-list="{{ btnListInfo }}" bind:click="onClick" />
+  <van-goods-action custom-class="goods-action">
+    <van-goods-action-icon icon="chat" text="客服" />
+    <van-goods-action-icon icon="cart" text="购物车" info="5" />
+    <van-goods-action-icon icon="shop" text="店铺" />
+    <van-goods-action-button text="加入购物车" type="warning" />
+    <van-goods-action-button text="立即购买" />
+  </van-goods-action>
 </demo-block>
 
 <van-toast id="van-toast" />
-
-

example/pages/goods-action/index.wxss

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

packages/cell/index.ts

@@ -42,5 +42,12 @@ VantComponent({
       const { titleWidth } = this.data;
       return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : '';
     }
+  },
+
+  methods: {
+    onClick(event: Weapp.Event) {
+      this.$emit('click', event.detail);
+      this.jumpLink();
+    }
   }
 });

packages/common/component.ts

@@ -21,7 +21,7 @@ function VantComponent<Data, Props, Watch, Methods, Computed>(
     Methods,
     Computed,
     CombinedComponentInstance<Data, Props, Watch, Methods, Computed>
-  >
+  > = {}
 ): void {
   const options: any = {};
 

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

@@ -1 +0,0 @@
-

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

@@ -1,24 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<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-button/index.less

@@ -0,0 +1,3 @@
+:host {
+  flex: 1;
+}

packages/goods-action-button/index.ts

@@ -0,0 +1,21 @@
+import { link } from '../mixins/link';
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  mixins: [link],
+
+  props: {
+    text: String,
+    type: {
+      type: String,
+      value: 'danger'
+    }
+  },
+
+  methods: {
+    onClick(event: Weapp.Event) {
+      this.$emit('click', event.detail);
+      this.jumpLink();
+    }
+  }
+});

packages/goods-action-button/index.wxml

@@ -0,0 +1,8 @@
+<van-button
+  square
+  size="large"
+  type="{{ type }}"
+  bind:click="onClick"
+>
+  {{ text }}
+</van-button>

packages/goods-action-icon/index.json

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

packages/goods-action-icon/index.less

@@ -0,0 +1,20 @@
+@import '../common/style/var.less';
+
+.van-goods-action-icon {
+  width: 50px !important;
+  border: none !important;
+
+  &__content {
+    height: 100%;
+    display: flex;
+    line-height: 1;
+    font-size: 10px;
+    color: @gray-darker;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__icon {
+    margin-bottom: 5px;
+  }
+}

packages/goods-action-icon/index.ts

@@ -0,0 +1,19 @@
+import { link } from '../mixins/link';
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  mixins: [link],
+
+  props: {
+    text: String,
+    info: String,
+    icon: String
+  },
+
+  methods: {
+    onClick(event: Weapp.Event) {
+      this.$emit('click', event.detail);
+      this.jumpLink();
+    }
+  }
+});

packages/goods-action-icon/index.wxml

@@ -0,0 +1,15 @@
+<van-button
+  custom-class="van-goods-action-icon"
+  size="large"
+  bind:tap="onClick"
+>
+  <view class="van-goods-action-icon__content van-hairline--right">
+    <van-icon
+      size="20px"
+      name="{{ icon }}"
+      info="{{ info }}"
+      class="van-goods-action-icon__icon"
+    />
+    {{ text }}
+  </view>
+</van-button>

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

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

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

@@ -1,19 +0,0 @@
-@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

@@ -1,26 +0,0 @@
-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

@@ -1,18 +0,0 @@
-<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

@@ -4,7 +4,9 @@
 在 index.json 中引入组件
 ```json
 "usingComponents": {
-  "van-goods-action": "path/to/vant-weapp/dist/goods-action/index"
+  "van-goods-action": "path/to/vant-weapp/dist/goods-action/index",
+  "van-goods-action-icon": "path/to/vant-weapp/dist/goods-action-icon/index",
+  "van-goods-action-button": "path/to/vant-weapp/dist/goods-action-button/index"
 }
 ```
 
@@ -13,76 +15,73 @@
 #### 基础用法
 
 ```html
-<van-goods-action 
+<van-goods-action>
- btn-list="{{ btnList }}" 
+  <van-goods-action-icon
- bind:click="onClick" 
+    icon="chat"
-/>
+    text="客服"
+    bind:click="onClickIcon"
+  />
+  <van-goods-action-icon
+    icon="cart"
+    text="购物车"
+    bind:click="onClickIcon"
+  />
+  <van-goods-action-button
+    text="加入购物车"
+    type="warning"
+    bind:click="onClickButton"
+  />
+  <van-goods-action-button
+    text="立即购买"
+    bind:click="onClickButton"
+  />
+</van-goods-action>
 ```
 
 ```javascript
 Page({
-  data: {
+  onClickIcon() {
-    btnList: [
+    Toast('点击图标');
-      {
-        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) {
+  onClickButton() {
-    const { bindClickEventName } = event.detail;
+    Toast('点击按钮');
-    this[`${bindClickEventName}`]();
-  },
-
-  onClickChatBtn() {
-    console.log('点击图标');
-  },
-
-  onClickBuyBtn() {
-    console.log('点击按钮');
   }
 });
-````
+```
 
-### API
+#### 图标提示
+
+通过`info`属性在图标右上角增加相应的提示
+
+```html
+<van-goods-action>
+  <van-goods-action-icon icon="chat" text="客服" />
+  <van-goods-action-icon icon="cart" text="购物车" info="5" />
+  <van-goods-action-icon icon="shop" text="店铺" />
+  <van-goods-action-button text="加入购物车" type="warning" />
+  <van-goods-action-button text="立即购买" />
+</van-goods-action>
+```
+
+### GoodsActionIcon API
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| btn-list | 按钮列表 |  `Array` | - |
-
-#### btn-list
-| 参数 | 说明 | 类型 | 默认值 |
-|-----------|-----------|-----------|-------------|
-| type | 按钮类型，可选值为 `mini` `big` | `String` | - |
 | text | 按钮文字 | `String` | - |
-| icon | 图标 | `String` | - |
+| icon | 图标类型，可选值见`icon`组件 | `String` | - |
 | info | 图标右上角提示信息 | `String | Number` | - |
 | url | 跳转链接 | `String` | - |
-| replace | 跳转时是否替换当前 history | `String` | `false` |
+| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` |
-| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` |
+
+### GoodsActionButton API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| text | 按钮文字 | `String` | - |
+| type | 按钮类型 | `String` | `danger` |
+| url | 跳转链接 | `String` | - |
+| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` |
 
 ### Event
 
@@ -90,14 +89,8 @@ Page({
 |-----------|-----------|-----------|
 | click | 按钮点击事件回调 | - |
 
-### 外部样式类
-
-| 类名 | 说明 |
-|-----------|-----------|
-| icon-class | icon按钮样式类 |
-
 ### 更新日志
 
 | 版本 | 类型 | 内容 |
 |-----------|-----------|-----------|
-| 0.3.6 | feature | 新增组件 |
+| 0.3.9 | feature | 新增组件 |

packages/goods-action/index.json

@@ -1,7 +1,3 @@
 {
-  "component": true,
+  "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

@@ -7,24 +7,3 @@
   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

@@ -1,20 +1,3 @@
 import { VantComponent } from '../common/component';
 
-VantComponent({
+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

@@ -1,27 +1,3 @@
-<view class="van-goods-action">
+<view class="van-goods-action custom-class">
-  <block wx:for="{{ btnList }}" wx:key="{{ index }}">
+  <slot />
-    <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>