[new feature] GoodsAction: update style (#3967)

src/goods-action-button/index.js

@@ -0,0 +1,59 @@
+import { createNamespace } from '../utils';
+import { route, routeProps } from '../utils/router';
+import { ChildrenMixin } from '../mixins/relation';
+import Button from '../button';
+
+const [createComponent, bem] = createNamespace('goods-action-button');
+
+export default createComponent({
+  mixins: [ChildrenMixin('vanGoodsAction')],
+
+  props: {
+    ...routeProps,
+    type: String,
+    text: String,
+    loading: Boolean,
+    disabled: Boolean
+  },
+
+  computed: {
+    isFirst() {
+      const prev = this.parent && this.parent.children[this.index - 1];
+      return !prev || prev.$options.name !== this.$options.name;
+    },
+
+    isLast() {
+      const next = this.parent && this.parent.children[this.index + 1];
+      return !next || next.$options.name !== this.$options.name;
+    }
+  },
+
+  methods: {
+    onClick(event) {
+      this.$emit('click', event);
+      route(this.$router, this);
+    }
+  },
+
+  render(h) {
+    return (
+      <Button
+        class={bem([
+          {
+            first: this.isFirst,
+            last: this.isLast
+          },
+          this.type
+        ])}
+        square
+        size="large"
+        type={this.type}
+        loading={this.loading}
+        disabled={this.disabled}
+        onClick={this.onClick}
+      >
+        {this.slots() || this.text}
+      </Button>
+    );
+  }
+});

src/goods-action-button/index.less

@@ -2,8 +2,33 @@
 
 .van-goods-action-button {
   flex: 1;
+  height: 36px;
+  font-weight: 500;
+  font-size: @font-size-md;
+  line-height: 34px;
+  border: none;
+
+  &--first {
+    margin-left: 5px;
+    border-top-left-radius: 18px;
+    border-bottom-left-radius: 18px;
+  }
+
+  &--last {
+    margin-right: 5px;
+    border-top-right-radius: 18px;
+    border-bottom-right-radius: 18px;
+  }
+
+  &--warning {
+    background: linear-gradient(to right, #ffd01e, #ff8917);
+  }
+
+  &--danger {
+    background: linear-gradient(to right, #ff6034, #ee0a24);
+  }
 
   @media (max-width: 321px) {
-    font-size: 15px;
+    font-size: 13px;
   }
 }

src/goods-action-button/index.tsx

@@ -1,55 +0,0 @@
-import { createNamespace } from '../utils';
-import Button, { ButtonType, ButtonEvents } from '../button';
-import { emit, inherit } from '../utils/functional';
-import { functionalRoute, routeProps, RouteProps } from '../utils/router';
-
-// Types
-import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
-
-export type GoodsActionButtonProps = RouteProps & {
-  text?: string;
-  type?: ButtonType;
-  primary?: boolean;
-  loading?: boolean;
-  disabled?: boolean;
-};
-
-const [createComponent, bem] = createNamespace('goods-action-button');
-
-function GoodsActionButton(
-  h: CreateElement,
-  props: GoodsActionButtonProps,
-  slots: DefaultSlots,
-  ctx: RenderContext<GoodsActionButtonProps>
-) {
-  function onClick(event: Event) {
-    emit(ctx, 'click', event);
-    functionalRoute(ctx);
-  }
-
-  return (
-    <Button
-      square
-      class={bem()}
-      size="large"
-      type={props.type}
-      loading={props.loading}
-      disabled={props.disabled}
-      onClick={onClick}
-      {...inherit(ctx)}
-    >
-      {slots.default ? slots.default() : props.text}
-    </Button>
-  );
-}
-
-GoodsActionButton.props = {
-  ...routeProps,
-  type: String,
-  text: String,
-  loading: Boolean,
-  disabled: Boolean
-};
-
-export default createComponent<GoodsActionButtonProps, ButtonEvents>(GoodsActionButton);