feat(GoodsActionButton): add plain attributes (#2559)

* feat(GoodsActionButton): add plain attributes

* feat(GoodsActionButton): classnames normalize

* feat(GoodsActionButton): code optimization

example/pages/goods-action/index.wxml

@@ -37,7 +37,16 @@
     <van-goods-action-icon icon="chat-o" text="客服" />
     <van-goods-action-icon icon="shop-o" text="店铺" />
     <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" />
-    <van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
+    <van-goods-action-button color="#7232dd" text="立即购买" />
+  </van-goods-action>
+</demo-block>
+
+<demo-block title="朴素按钮">
+  <van-goods-action custom-class="goods-action" safe-area-inset-bottom="{{ false }}">
+    <van-goods-action-icon icon="chat-o" text="客服" />
+    <van-goods-action-icon icon="shop-o" text="店铺" />
+    <van-goods-action-button color="#7232dd"  text="加入购物" type="warning" />
+    <van-goods-action-button plain color="#7232dd" text="立即购买" />
   </van-goods-action>
 </demo-block>
 

packages/common/style/var.less

@@ -212,6 +212,7 @@
 @goods-action-button-border-radius: @goods-action-button-height / 2;
 @goods-action-button-warning-color: @gradient-orange;
 @goods-action-button-danger-color: @gradient-red;
+@goods-action-button-plain-color: @white;
 
 // Image
 @image-placeholder-text-color: @gray-6;

packages/goods-action-button/index.less

@@ -6,7 +6,6 @@
 }
 
 .van-goods-action-button {
-  border: none !important;
   .theme(height, '@goods-action-button-height') !important;
   .theme(font-weight, '@font-weight-bold') !important;
   .theme(line-height, '@goods-action-button-height') !important;
@@ -33,6 +32,18 @@
     .theme(background, '@goods-action-button-danger-color');
   }
 
+  &--ordinary {
+    border: none !important;
+  }
+
+  &--plain {
+    .theme(background, '@goods-action-button-plain-color');
+  }
+
+  &--no-right-border {
+    border-right-width: 0px !important;
+  }
+
   @media (max-width: 321px) {
     font-size: 13px;
   }

packages/goods-action-button/index.ts

@@ -18,6 +18,7 @@ VantComponent({
     color: String,
     loading: Boolean,
     disabled: Boolean,
+    plain: Boolean,
     type: {
       type: String,
       value: 'danger'
@@ -36,11 +37,16 @@ VantComponent({
 
     updateStyle() {
       const { children = [] } = this.parent;
+      const { length } = children;
       const index = children.indexOf(this);
-
+      let rightBorderLess = false;
+      if (length > 1) {
+        rightBorderLess = index !== length - 1;
+      }
       this.setData({
         isFirst: index === 0,
-        isLast: index === children.length - 1
+        rightBorderLess,
+        isLast: index === length - 1
       });
     }
   }

packages/goods-action-button/index.wxml

@@ -5,10 +5,11 @@
   lang="{{ lang }}"
   type="{{ type }}"
   color="{{ color }}"
+  plain="{{ plain }}"
   loading="{{ loading }}"
   disabled="{{ disabled }}"
   open-type="{{ openType }}"
-  custom-class="{{ utils.bem('goods-action-button', [type, { first: isFirst, last: isLast }]) }}"
+  custom-class="{{ utils.bem('goods-action-button', [type, { first: isFirst, last: isLast, plain : plain, ordinary: !plain }])}} {{ rightBorderLess ?'van-goods-action-button--no-right-border': ''}}"
   business-id="{{ businessId }}"
   session-from="{{ sessionFrom }}"
   app-parameter="{{ appParameter }}"

packages/goods-action/README.md

@@ -81,6 +81,19 @@ Page({
   <van-goods-action-button color="#7232dd" text="立即购买" />
 </van-goods-action>
 ```
+### 朴素按钮
+
+通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色
+
+```html
+<van-goods-action>
+  <van-goods-action-icon icon="chat-o" text="客服" />
+  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
+  <van-goods-action-icon icon="shop-o" text="店铺" />
+  <van-goods-action-button color="#7232dd"  text="加入购物" type="warning" />
+  <van-goods-action-button plain color="#7232dd" text="立即购买" />
+</van-goods-action>
+```
 
 ## API
 
@@ -121,6 +134,7 @@ Page({
 | link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | *string* | `navigateTo` | - |
 | id | 标识符 | *string* | - | - |
 | type | 按钮类型，可选值为 `primary` `warning` `danger` | *string* | `danger` | - |
+| plain | 是否为朴素按钮 | *boolean* | `false` | - |
 | size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | *string* | `normal` | - |
 | disabled | 是否禁用按钮 | *boolean* | `false` | - |
 | loading | 是否显示为加载状态 | *boolean* | `false` | - |