From a65d97c2dd2819ffcd63b22a9b08959a3a2100c7 Mon Sep 17 00:00:00 2001
From: ShuaiKang Zhang <zhangshuaikang_zsk@youzan.com>
Date: Fri, 20 Sep 2019 09:39:19 +0800
Subject: [PATCH] feat(Switch): change loading color when background color
 change (#2067)

---
 packages/common/color.ts   |  1 +
 packages/switch/index.ts   | 14 ++++++++++++--
 packages/switch/index.wxml |  2 +-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/common/color.ts b/packages/common/color.ts
index bfea29bf..6b285bd6 100644
--- a/packages/common/color.ts
+++ b/packages/common/color.ts
@@ -4,3 +4,4 @@ export const WHITE = '#fff';
 export const GREEN = '#07c160';
 export const ORANGE = '#ff976a';
 export const GRAY = '#323233';
+export const GRAY_DARK = '#969799';
diff --git a/packages/switch/index.ts b/packages/switch/index.ts
index 0d1880f4..cd4962fd 100644
--- a/packages/switch/index.ts
+++ b/packages/switch/index.ts
@@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { BLUE, GRAY_DARK } from '../common/color';
 
 VantComponent({
   field: true,
@@ -27,15 +28,24 @@ VantComponent({
 
   watch: {
     checked(value) {
-      this.setData({ value });
+      const loadingColor = this.getLoadingColor(value);
+      this.setData({ value, loadingColor });
     }
   },
 
   created() {
-    this.setData({ value: this.data.checked });
+    const { checked: value } = this.data;
+    const loadingColor = this.getLoadingColor(value);
+
+    this.setData({ value, loadingColor });
   },
 
   methods: {
+    getLoadingColor(checked) {
+      const { activeColor, inactiveColor } = this.data;
+      return checked ? activeColor || BLUE : inactiveColor || GRAY_DARK;
+    },
+
     onClick() {
       const { activeValue, inactiveValue } = this.data;
       if (!this.data.disabled && !this.data.loading) {
diff --git a/packages/switch/index.wxml b/packages/switch/index.wxml
index 74ce520e..147d6189 100644
--- a/packages/switch/index.wxml
+++ b/packages/switch/index.wxml
@@ -6,6 +6,6 @@
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">
-    <van-loading wx:if="{{ loading }}" size="50%" custom-class="van-switch__loading" />
+    <van-loading wx:if="{{ loading }}" color="{{ loadingColor }}" size="50%" custom-class="van-switch__loading" />
   </view>
 </view>