fix: 标题栏问题修复

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

@@ -6,8 +6,8 @@ import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
 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, hexToRgb } from '@/service/utils.service';
-import Bridge from '@qg/js-bridge';
+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;
@@ -17,7 +17,6 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
 
   @Provide() editor = this;
   isEditor: boolean = false;
-  jsBridge = new Bridge();
   bottomInfo: object = {
     x: 0,
     y: 0,
@@ -79,24 +78,7 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   mounted() {
     this.targetEle = document.querySelector('body');
     this.showBackTop = true;
-    isApp && this.setTitleColor();
-  }
-  setTitleColor() {
-    const {titleBgColor: tbc} = this.pageData.props;
-    const isGradient = Array.isArray(tbc);
-    const rgbColor = hexToRgb(isGradient ? tbc[0] : tbc)
-                      .split(',');
-    const isDarkContent = 0.213 * rgbColor[0]
-                          + 0.715 * rgbColor[1]
-                          + 0.072 * rgbColor[2] > 255 / 2;
-    const colors = isGradient ? [tbc[0].substr(1), tbc[1].substr(1)] : tbc;
-    this.jsBridge.run({
-      "event": "resetNavigationBarColor",
-      "data": {
-          isDarkContent,
-          colors
-        }
-    });
+    isApp && setAppTitleColor(this.pageData.props.titleBgColor);
   }
   fetchApi(options) {
     const { store, route } = options;

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 = bgcolor.indexOf("rgb") > -1;
+  const rgbColor = hexToRgb(isGradient ? bgcolor[0] : bgcolor);
+  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

@@ -163,13 +163,68 @@ export const throttle = (event, time) => {
   }
 }
 
-export const hexToRgb = (hexValue) => {
-  const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b );
-  const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) || [];
-  const r = parseInt(rgb[1], 16);
-  const g = parseInt(rgb[2], 16);
-  const b = parseInt(rgb[3], 16);
-  return `rgb(${r},${g},${b})`;
-
+// 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