From d845bb8730873ed51eeb0b593d876a71e07f80b4 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Mon, 18 Dec 2017 11:45:44 +0800
Subject: [PATCH] [new feature] GoodsAction: support  routerLink & info (#448)

---
 docs/demos/views/goods-action.vue        | 46 +++++++++++++-----------
 docs/markdown/en-US/goods-action.md      | 45 ++++++++++++++---------
 docs/markdown/zh-CN/goods-action.md      | 42 ++++++++++++++--------
 packages/goods-action-big-btn/index.vue  | 15 ++++++--
 packages/goods-action-mini-btn/index.vue | 18 ++++++++--
 packages/vant-css/src/goods-action.css   |  8 ++---
 6 files changed, 115 insertions(+), 59 deletions(-)

diff --git a/docs/demos/views/goods-action.vue b/docs/demos/views/goods-action.vue
index 9ede4ec29..142e3d897 100644
--- a/docs/demos/views/goods-action.vue
+++ b/docs/demos/views/goods-action.vue
@@ -2,18 +2,20 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-goods-action>
-        <van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
-          {{ $t('button1') }}
-        </van-goods-action-mini-btn>
-        <van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
-          {{ $t('button2') }}
-        </van-goods-action-mini-btn>
-        <van-goods-action-big-btn @click="onClickBigBtn">
-          {{ $t('button3') }}
-        </van-goods-action-big-btn>
-        <van-goods-action-big-btn @click="onClickBigBtn" primary>
-          {{ $t('button4') }}
-        </van-goods-action-big-btn>
+        <van-goods-action-mini-btn icon="chat" :text="$t('icon1')" @click="onClickMiniBtn" />
+        <van-goods-action-mini-btn icon="cart" :text="$t('icon2')" @click="onClickMiniBtn" />
+        <van-goods-action-big-btn :text="$t('button1')" @click="onClickBigBtn" />
+        <van-goods-action-big-btn :text="$t('button2')" @click="onClickBigBtn" primary />
+      </van-goods-action>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-goods-action>
+        <van-goods-action-mini-btn icon="chat" :text="$t('icon1')" @click="onClickMiniBtn" />
+        <van-goods-action-mini-btn icon="cart" info="5" :text="$t('icon2')" @click="onClickMiniBtn" />
+        <van-goods-action-mini-btn icon="shop" :text="$t('icon3')" @click="onClickMiniBtn" />
+        <van-goods-action-big-btn :text="$t('button1')" @click="onClickBigBtn" />
+        <van-goods-action-big-btn :text="$t('button2')" @click="onClickBigBtn" primary />
       </van-goods-action>
     </demo-block>
   </demo-section>
@@ -25,18 +27,22 @@ export default {
     'zh-CN': {
       clickIcon: '点击图标',
       clickButton: '点击按钮',
-      button1: '客服',
-      button2: '购物车',
-      button3: '加入购物车',
-      button4: '立即购买'
+      icon1: '客服',
+      icon2: '购物车',
+      icon3: '店铺',
+      button1: '加入购物车',
+      button2: '立即购买',
+      title2: '图标提示'
     },
     'en-US': {
       clickIcon: 'Click Icon',
       clickButton: 'Click Button',
-      button1: 'Icon1',
-      button2: 'Icon2',
-      button3: 'Button1',
-      button4: 'Button2'
+      icon1: 'Icon1',
+      icon2: 'Icon2',
+      icon3: 'Icon3',
+      button1: 'Button1',
+      button2: 'Button2',
+      title2: 'Icon info'
     }
   },
 
diff --git a/docs/markdown/en-US/goods-action.md b/docs/markdown/en-US/goods-action.md
index 10c0c7b32..8954eeebd 100644
--- a/docs/markdown/en-US/goods-action.md
+++ b/docs/markdown/en-US/goods-action.md
@@ -14,22 +14,14 @@ Vue.use(GoodsActionMiniBtn);
 ```
 
 ### Usage
-
+#### Basic Usage
 
 ```html
 <van-goods-action>
-  <van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
-    Icon1
-  </van-goods-action-mini-btn>
-  <van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
-    Icon2
-  </van-goods-action-mini-btn>
-  <van-goods-action-big-btn @click="onClickBigBtn">
-    Button1
-  </van-goods-action-big-btn>
-  <van-goods-action-big-btn @click="onClickBigBtn" primary>
-    Button2
-  </van-goods-action-big-btn>
+  <van-goods-action-mini-btn icon="chat" text="Icon1" @click="onClickMiniBtn" />
+  <van-goods-action-mini-btn icon="cart" text="Icon2" @click="onClickMiniBtn" />
+  <van-goods-action-big-btn text="Button1" @click="onClickBigBtn" />
+  <van-goods-action-big-btn text="Button2" @click="onClickBigBtn" primary />
 </van-goods-action>
 ```
 
@@ -46,19 +38,40 @@ export default {
 }
 ```
 
+#### Icon info
+Use `info` prop to show messages in upper right corner of icon
+
+```html
+<van-goods-action>
+  <van-goods-action-mini-btn icon="chat" text="Icon1" />
+  <van-goods-action-mini-btn icon="cart" text="Icon2" info="5" />
+  <van-goods-action-mini-btn icon="shop" text="Icon3" />
+  <van-goods-action-big-btn text="Button1" />
+  <van-goods-action-big-btn text="Button2" primary />
+</van-goods-action>
+```
+
 ### API
 
 #### GoodsActionMiniBtn
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| icon | Icon | `String` | - | Icon 组件支持的所有图标 |
+| text | Button text | `String` | - | - |
+| icon | Icon | `String` | - | - |
 | iconClass | Icon class name | `String` | `''` | - |
-| url | Link URL | `String` | `javascript:;` | - |
+| info | Info message | `String` | - | - |
+| url | Link | `String` | - | - |
+| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | - |
+| replace | If true, the navigation will not leave a history record | `String` | `false` | - |
+
 
 #### GoodsActionBigBtn
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| url | Link URL | `String` | `javascript:;` | - |
+| text | Button text | `String` | - | - |
 | primary | Is primary button (red color) | `Boolean` | `false` | - |
+| url | Link | `String` | - | - |
+| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | - |
+| replace | If true, the navigation will not leave a history record | `String` | `false` | - |
diff --git a/docs/markdown/zh-CN/goods-action.md b/docs/markdown/zh-CN/goods-action.md
index 827cf2712..409c51d48 100644
--- a/docs/markdown/zh-CN/goods-action.md
+++ b/docs/markdown/zh-CN/goods-action.md
@@ -14,21 +14,14 @@ Vue.use(GoodsActionMiniBtn);
 ```
 
 ### 代码演示
+#### 基础用法
 
 ```html
 <van-goods-action>
-  <van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
-    客服
-  </van-goods-action-mini-btn>
-  <van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
-    购物车
-  </van-goods-action-mini-btn>
-  <van-goods-action-big-btn @click="onClickBigBtn">
-    加入购物车
-  </van-goods-action-big-btn>
-  <van-goods-action-big-btn @click="onClickBigBtn" primary>
-    立即购买
-  </van-goods-action-big-btn>
+  <van-goods-action-mini-btn icon="chat" text="客服" @click="onClickMiniBtn" />
+  <van-goods-action-mini-btn icon="cart" text="购物车" @click="onClickMiniBtn" />
+  <van-goods-action-big-btn text="加入购物车" @click="onClickBigBtn" />
+  <van-goods-action-big-btn text="立即购买" @click="onClickBigBtn" primary />
 </van-goods-action>
 ```
 
@@ -45,19 +38,40 @@ export default {
 }
 ```
 
+#### 图标提示
+通过`info`属性在图标右上角增加相应的提示
+
+```html
+<van-goods-action>
+  <van-goods-action-mini-btn icon="chat" text="客服" />
+  <van-goods-action-mini-btn icon="cart" text="购物车" info="5" />
+  <van-goods-action-mini-btn icon="shop" text="店铺" />
+  <van-goods-action-big-btn text="加入购物车" />
+  <van-goods-action-big-btn text="立即购买" primary />
+</van-goods-action>
+```
+
 ### API
 
 #### GoodsActionMiniBtn
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
+| text | 按钮文字 | `String` | - | - |
 | icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
 | iconClass | 图标额外类名 | `String` | `''` | - |
-| url | 跳转链接 | `String` | `javascript:;` | - |
+| info | 图标右上角提示信息 | `String` | - | - |
+| url | 跳转链接 | `String` | - | - |
+| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
+| replace | 跳转时是否替换当前 history | `String` | `false` | - |
+
 
 #### GoodsActionBigBtn
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| url | 跳转链接 | `String` | `javascript:;` | - |
+| text | 按钮文字 | `String` | - | - |
 | primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - |
+| url | 跳转链接 | `String` | - | - |
+| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
+| replace | 跳转时是否替换当前 history | `String` | `false` | - |
diff --git a/packages/goods-action-big-btn/index.vue b/packages/goods-action-big-btn/index.vue
index e8b298c1e..5d9856f3e 100644
--- a/packages/goods-action-big-btn/index.vue
+++ b/packages/goods-action-big-btn/index.vue
@@ -5,26 +5,37 @@
     class="van-goods-action__big-btn"
     :type="primary ? 'primary' : 'default'"
     bottomAction
-    @click="$emit('click', $event)"
+    @click="onClick"
   >
-    <slot></slot>
+    <slot>{{ text }}</slot>
   </van-button>
 </template>
 
 <script>
 import { create } from '../utils';
 import VanButton from '../button';
+import RouterLink from '../mixins/router-link';
 
 export default create({
   name: 'van-goods-action-big-btn',
 
+  mixins: [RouterLink],
+
   components: {
     VanButton
   },
 
   props: {
     url: String,
+    text: String,
     primary: Boolean
+  },
+
+  methods: {
+    onClick(event) {
+      this.$emit('click', event);
+      this.routerLink();
+    }
   }
 });
 </script>
diff --git a/packages/goods-action-mini-btn/index.vue b/packages/goods-action-mini-btn/index.vue
index ad508c37c..88db1a951 100644
--- a/packages/goods-action-mini-btn/index.vue
+++ b/packages/goods-action-mini-btn/index.vue
@@ -1,20 +1,32 @@
 <template>
-  <a :href="url" class="van-goods-action__mini-btn van-hairline" @click="$emit('click', $event);">
-    <icon class="van-goods-action__mini-btn-icon" :class="iconClass" :name="icon" />
-    <slot></slot>
+  <a :href="url" class="van-goods-action__mini-btn van-hairline" @click="onClick">
+    <icon class="van-goods-action__mini-btn-icon" :class="iconClass" :info="info" :name="icon" />
+    <slot>{{ text }}</slot>
   </a>
 </template>
 
 <script>
 import { create } from '../utils';
+import RouterLink from '../mixins/router-link';
 
 export default create({
   name: 'van-goods-action-mini-btn',
 
+  mixins: [RouterLink],
+
   props: {
     url: String,
+    text: String,
+    info: String,
     icon: String,
     iconClass: String
+  },
+
+  methods: {
+    onClick(event) {
+      this.$emit('click', event);
+      this.routerLink();
+    }
   }
 });
 </script>
diff --git a/packages/vant-css/src/goods-action.css b/packages/vant-css/src/goods-action.css
index 826b355d6..29d703823 100644
--- a/packages/vant-css/src/goods-action.css
+++ b/packages/vant-css/src/goods-action.css
@@ -39,10 +39,10 @@
     &:active {
       background-color: $active-color;
     }
-  }
 
-  &__mini-btn-icon {
-    font-size: 20px;
-    margin-bottom: 5px;
+    &-icon {
+      font-size: 20px;
+      margin-bottom: 5px;
+    }
   }
 }