feat:完成颜色选择器和button组件

miniprogram/ui/button/button.json

@@ -1,5 +1,7 @@
 {
     "component": true,
-    "styleIsolation": "apply-shared",
-    "usingComponents": {}
+    "usingComponents": {
+        "van-icon": "@vant/weapp/icon/index",
+        "van-loading": "@vant/weapp/loading/index"
+    }
 }

miniprogram/ui/button/button.less

@@ -0,0 +1,41 @@
+@button-default-height: 86rpx;
+@button-border-radius: 18rpx;
+@button-default-font-size: 32rpx;
+@button-default-color: #fff;
+
+.toy-button {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: @button-default-height;
+    line-height: @button-default-height;
+    border-radius: @button-border-radius;
+    font-size: @button-default-font-size;
+    color: @button-default-color;
+
+    &--primary {
+        background: rgba(255, 215, 25, 1);
+        box-shadow: 0px 10rpx 4rpx #DBB917;
+
+        &.disabled {
+            background: rgba(255, 215, 25, 0.5);
+            box-shadow: 0px 10rpx 4rpx rgba(219, 185, 23, 0.5);
+        }
+    }
+
+    &--green {
+        background: rgba(147, 211, 51, 1);
+        box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 1);
+
+        &.disabled {
+            background: rgba(147, 211, 51, 0.5);
+            box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 0.5);
+        }
+    }
+
+    .loading-class,
+    &__icon {
+        margin-right: 24rpx;
+    }
+}

miniprogram/ui/button/button.ts

@@ -8,16 +8,12 @@ Component({
     properties: {
         type: {
             type: String,
-            value: 'default', // default, green, white
+            value: 'default', // primary, green, white
         },
         size: {
             type: String,
             value: 'normal', // large, normal, small, mini
         },
-        icon: {
-            type: String,
-            value: '', // 图标名称
-        },
         disabled: {
             type: Boolean,
             value: false, // 是否禁用
@@ -30,6 +26,52 @@ Component({
             type: Boolean,
             value: false, // 是否加载中
         },
+        style: {
+            type: String,
+            value: '', // 自定义样式
+        },
+        // className: {
+        //     type: String,
+        //     value: '', // 自定义类名
+        // },
+        width: {
+            type: String,
+            value: '', // 按钮宽度
+        },
+        height: {
+            type: String,
+            value: '',
+        },
+        loadingType: {
+            type: String,
+            value: 'circular',
+        },
+        loadingSize: {
+            type: String,
+            value: '20px',
+        },
+        loadingColor: {
+            type: String,
+            value: '#ffffff',
+        },
+
+        // icon
+        icon: {
+            type: String,
+            value: '',
+        },
+        iconClassPrefix: {
+            type: String,
+            value: 'j-icon',
+        },
+        iconSize: {
+            type: String,
+            value: '44rpx',
+        },
+        iconColor: {
+            type: String,
+            value: '#ffffff',
+        },
     },
     /**
      * 组件的初始数据
@@ -41,5 +83,9 @@ Component({
     /**
      * 组件的方法列表
      */
-    methods: {},
+    methods: {
+        onClick(e: WechatMiniprogram.TouchEvent): void {
+            this.triggerEvent('click', e);
+        },
+    },
 });

miniprogram/ui/button/button.wxml

@@ -0,0 +1,41 @@
+<wxs src="../wxs/base.wxs" module="Utils" />
+
+<button
+    class="toy-button toy-button--{{type}} {{ disabled ? 'toy-button--disabled' : '' }} {{Utils.classNames({disabled: disabled, loading: loading })}}"
+    style="{{style}};{{width ? 'width:' + width + ';' : ''}};{{height ? 'height:' + height + ';' : ''}}"
+    session-from="{{ sessionFrom }}"
+    send-message-title="{{ sendMessageTitle }}"
+    send-message-path="{{ sendMessagePath }}"
+    send-message-img="{{ sendMessageImg }}"
+    show-message-card="{{ showMessageCard }}"
+    app-parameter="{{ appParameter }}"
+    aria-label="{{ ariaLabel }}"
+    bindtap="{{ disabled || loading ? '' : 'onClick' }}"
+    bindgetuserinfo="onGetUserInfo"
+    bindcontact="onContact"
+    bindgetphonenumber="onGetPhoneNumber"
+    bindgetrealtimephonenumber="onGetRealTimePhoneNumber"
+    bindagreeprivacyauthorization="onAgreePrivacyAuthorization"
+    binderror="onError"
+    bindlaunchapp="onLaunchApp"
+    bindopensetting="onOpenSetting"
+    bindchooseavatar="onChooseAvatar">
+    <block wx:if="{{ loading }}">
+        <van-loading
+            custom-class="loading-class"
+            size="{{ loadingSize || iconSize }}"
+            type="{{ loadingType }}"
+            color="{{ loadingColor }}" />
+    </block>
+    <block wx:else>
+        <van-icon
+            wx:if="{{ icon }}"
+            size="1.2em"
+            name="{{ icon }}"
+            size="{{ iconSize }}"
+            color="{{ iconColor }}"
+            class-prefix="{{ iconClassPrefix }}"
+            class="toy-button__icon" />
+    </block>
+    <slot></slot>
+</button>