Merge branch 'feat/titleColor' into 'master'

Feat/title color

See merge request !27

app/web/page/activity/view/activity/index.ts

@@ -7,7 +7,7 @@ import GridItem from '../../component/VueGridLayout/GridItem.vue';
 import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
 import SaMixin from '@/page/mixins/sa.mixin';
 import { getStyle, debounce, isApp } from '@/service/utils.service';
-
+import { setAppTitleColor } from '@/service/color.service';
 @Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   @Getter('pageData') pageData;
@@ -26,6 +26,7 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   };
   isLayoutComReady = false;
   showBackTop = false;
+
   targetEle: HTMLElement | null = null;
   loading: boolean = true;
   modfiTabsStyleDebounce = debounce(this.modfiTabsStyle, 300);
@@ -77,8 +78,8 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   mounted() {
     this.targetEle = document.querySelector('body');
     this.showBackTop = true;
+    isApp && setAppTitleColor(this.pageData.props.titleBgColor);
   }
-
   fetchApi(options) {
     const { store, route } = options;
     const { pageId } = route.params;

app/web/service/color.service.ts

+// tslint:disable
+import Bridge from '@qg/js-bridge';
+import { isApp } from './utils.service';
+
+// RGB转HEX
+export function rgbToHex(r, g, b) {
+  const hex = ((r << 16) | (g << 8) | b).toString(16);
+  return "#" + new Array(Math.abs(hex.length - 7)).join("0") + hex;
+}
+// HEX转RGB
+export function hexToRgb(hex) {
+  var rgb = [];
+  for (let i = 1; i < 7; i += 2) {
+    rgb.push(parseInt("0x" + hex.slice(i, i + 2)));
+  }
+  return rgb;
+}
+// 计算RGB渐变色色值
+export function gradient(startColor, endColor, step) {
+  // 将 hex 转换为rgb
+  let sColor = hexToRgb(startColor);
+  let eColor = hexToRgb(endColor);
+
+  // 计算R\G\B每一步的差值
+  let rStep = (eColor[0] - sColor[0]) / step;
+  let gStep = (eColor[1] - sColor[1]) / step;
+  let bStep = (eColor[2] - sColor[2]) / step;
+
+  let gradientColorArr = [];
+  for (let i = 0; i < step; i++) {
+    // 计算每一步的hex值
+    gradientColorArr.push(
+      rgbToHex(
+        parseInt(rStep * i + sColor[0]),
+        parseInt(gStep * i + sColor[1]),
+        parseInt(bStep * i + sColor[2])
+      )
+    );
+  }
+  return gradientColorArr;
+}
+export function colorToRgb(color) {
+  // 16进制颜色值的正则
+  let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+  // 把颜色值变成小写
+  color = color.toLowerCase();
+  if (reg.test(color)) {
+    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
+    if (color.length === 4) {
+      let colorNew = "#";
+      for (let i = 1; i < 4; i += 1) {
+        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
+      }
+      color = colorNew;
+    }
+    // 处理六位的颜色值，转为RGB
+    let colorChange = [];
+    for (let i = 1; i < 7; i += 2) {
+      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
+    }
+    return "RGB(" + colorChange.join(",") + ")";
+  } else {
+    return color;
+  }
+}
+// RGB TO RGBA
+export function rgbToRgba(rgb, opacity) {
+  return rgb.replace(")", `, ${opacity})`);
+}
+
+// 判断色值
+export function isColor(color) {
+  var re1 = /^#([0-9a-f]{6}|[0-9a-f]{3})$/i;
+  var re2 = /^rgb\(([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\)$/i;
+  var re3 = /^rgba\(([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\\,(1|1.0|0.[0-9])\)$/i;
+  return re2.test(color) || re1.test(color) || re3.test(color);
+}
+
+
+export function setAppTitleColor(bgcolor = "#fff") {
+  if (!isApp && !EASY_ENV_IS_BROWSER) return;
+  let jsBridge = new Bridge();
+  const isGradient = Array.isArray(bgcolor);
+  let rgbColor = isGradient ? bgcolor[0] : bgcolor;
+  if (rgbColor.toLocaleLowerCase().indexOf("rgb") === -1) rgbColor = hexToRgb(rgbColor);
+  const isDarkContent = 0.213 * rgbColor[0] + 0.715 * rgbColor[1] + 0.072 * rgbColor[2] <= 255 / 2;
+  const colors = isGradient
+    ? [bgcolor[0].substr(1), bgcolor[1].substr(1)]
+    : [bgcolor.substr(1), bgcolor.substr(1)];
+  jsBridge.run({
+    event: "resetNavigationBarColor",
+    data: {
+      isDarkContent,
+      colors
+    }
+  });
+  jsBridge = null;
+}

app/web/service/utils.service.ts

@@ -162,3 +162,69 @@ export const throttle = (event, time) => {
     }
   }
 }
+
+// RGB转HEX
+export function rgbToHex(r, g, b) {
+  const hex = ((r << 16) | (g << 8) | b).toString(16);
+  return "#" + new Array(Math.abs(hex.length - 7)).join("0") + hex;
+}
+// HEX转RGB
+export function hexToRgb(hex) {
+  var rgb = [];
+  for (let i = 1; i < 7; i += 2) {
+    rgb.push(parseInt("0x" + hex.slice(i, i + 2)));
+  }
+  return rgb;
+}
+// 计算RGB渐变色色值
+export function gradient(startColor, endColor, step) {
+  // 将 hex 转换为rgb
+  let sColor = hexToRgb(startColor);
+  let eColor = hexToRgb(endColor);
+
+  // 计算R\G\B每一步的差值
+  let rStep = (eColor[0] - sColor[0]) / step;
+  let gStep = (eColor[1] - sColor[1]) / step;
+  let bStep = (eColor[2] - sColor[2]) / step;
+
+  let gradientColorArr = [];
+  for (let i = 0; i < step; i++) {
+    // 计算每一步的hex值
+    gradientColorArr.push(
+      rgbToHex(
+        parseInt(rStep * i + sColor[0]),
+        parseInt(gStep * i + sColor[1]),
+        parseInt(bStep * i + sColor[2])
+      )
+    );
+  }
+  return gradientColorArr;
+}
+export function colorToRgb(color) {
+  // 16进制颜色值的正则
+  let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+  // 把颜色值变成小写
+  color = color.toLowerCase();
+  if (reg.test(color)) {
+    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
+    if (color.length === 4) {
+      let colorNew = "#";
+      for (let i = 1; i < 4; i += 1) {
+        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
+      }
+      color = colorNew;
+    }
+    // 处理六位的颜色值，转为RGB
+    let colorChange = [];
+    for (let i = 1; i < 7; i += 2) {
+      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
+    }
+    return "RGB(" + colorChange.join(",") + ")";
+  } else {
+    return color;
+  }
+}
+// RGB TO RGBA
+export function rgbToRgba(rgb, opacity) {
+  return rgb.replace(")", `, ${opacity})`);
+}
\ No newline at end of file

config/apollo.json

 {
   "api": {
-    "apiHost": "https://quantum-blocks-vcc2.liangkebang.net",
-    "h5Host": "https://quantum-h5-vcc2.liangkebang.net",
-    "opapiHost": "https://opapi-vcc2.liangkebang.net",
-    "passportHost": "https://passportapi-vcc2.liangkebang.net",
-    "kdspHost": "https://talos-vcc2.liangkebang.net",
+    "apiHost": "https://quantum-blocks-test1.liangkebang.net",
+    "h5Host": "https://quantum-h5-test1.liangkebang.net",
+    "opapiHost": "https://opapi-test1.liangkebang.net",
+    "passportHost": "https://passportapi-test1.liangkebang.net",
+    "kdspHost": "https://talos-test1.liangkebang.net",
     "loginUrl": "",
-    "h5ShopHost": "https://tenet-vcc2.liangkebang.net/#"
+    "h5ShopHost": "https://tenet-test1.liangkebang.net/#"
   },
   "mysql": {
     "low_code": {
-      "host": "undefined",
-      "port": "undefined",
+      "host": "172.17.5.17",
+      "port": "31548",
       "username": "qa",
       "password": "qatest",
       "database": "low_code"
     }
   },
   "redis": {
-    "port": "undefined",
-    "host": "undefined",
+    "port": "32625",
+    "host": "172.17.6.7",
     "password": "",
     "db": 0
   },

config/apollo.ssr.json

-{
-  "apiHost": "https://quantum-blocks-vcc2.liangkebang.net",
-    "h5Host": "https://quantum-h5-vcc2.liangkebang.net",
-    "opapiHost": "https://opapi-vcc2.liangkebang.net",
-    "passportHost": "https://passportapi-vcc2.liangkebang.net",
-    "kdspHost": "https://talos-vcc2.liangkebang.net",
-    "loginUrl": "",
-    "h5ShopHost": "https://tenet-vcc2.liangkebang.net/#"
-}
\ No newline at end of file
+{"apiHost":"https://quantum-blocks-test1.liangkebang.net","h5Host":"https://quantum-h5-test1.liangkebang.net","opapiHost":"https://opapi-test1.liangkebang.net","passportHost":"https://passportapi-test1.liangkebang.net","kdspHost":"https://talos-test1.liangkebang.net","loginUrl":"","h5ShopHost":"https://tenet-test1.liangkebang.net/#","qiniuUpHost":"https://up-z0.qiniup.com","qiniuHost":"https://appsync.lkbang.net"}
\ No newline at end of file

config/config.local.ts

@@ -29,8 +29,8 @@ export default (appInfo: EggAppConfig) => {
 
   exports.redis = {
     client: {
-      port: 31565,          // Redis port
-      host: '172.17.5.13',   // Redis host
+      port: 32625,          // Redis port
+      host: '172.17.6.7',   // Redis host
       password: '',
       db: 0
     }

package-lock.json

@@ -1672,8 +1672,8 @@
         "swiper": "^4.5.1",
         "vuex": "^3.6.0",
         "weixin-js-sdk": "^1.6.0"
-      }
       },
+      "dependencies": {
         "@qg/js-bridge": {
           "version": "1.1.11",
           "resolved": "http://npmprivate.quantgroups.com/@qg%2fjs-bridge/-/js-bridge-1.1.11.tgz",
@@ -1681,6 +1681,13 @@
           "requires": {
             "rollup": "^2.41.3"
           }
+        }
+      }
+    },
+    "@qg/js-bridge": {
+      "version": "1.1.7",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fjs-bridge/-/js-bridge-1.1.7.tgz",
+      "integrity": "sha512-t9ucNc5OFntMxhz5E1UFWZJsIM2CGbmgiyjzoOtpJL1s32s2liPnLXrRfnbryYJEiLNzNyhXQUbA0Z1qZlqq3w=="
     },
     "@tootallnate/once": {
       "version": "1.1.2",

package.json

@@ -25,6 +25,7 @@
     "@qg/apollo-nodejs": "^2.1.2",
     "@qg/cherry-ui": "2.21.1",
     "@qg/citrus-ui": "0.2.9",
+    "@qg/js-bridge": "^1.1.7",
     "babel-plugin-transform-vue-jsx": "^4.0.1",
     "cos-nodejs-sdk-v5": "^2.9.12",
     "egg": "^2.3.0",