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 } from '@/service/utils.service';
-
+import { getStyle, debounce, isApp, hexToRgb } from '@/service/utils.service';
+import Bridge from '@qg/js-bridge';
 @Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   @Getter('pageData') pageData;
@@ -17,6 +17,7 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
 
   @Provide() editor = this;
   isEditor: boolean = false;
+  jsBridge = new Bridge();
   bottomInfo: object = {
     x: 0,
     y: 0,
@@ -26,6 +27,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 +79,25 @@ 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
+        }
+    });
   }
-
   fetchApi(options) {
     const { store, route } = options;
     const { pageId } = route.params;

app/web/service/utils.service.ts

@@ -162,3 +162,14 @@ 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})`;
+
+}
\ No newline at end of file

package-lock.json

@@ -1672,15 +1672,22 @@
         "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",
+          "integrity": "sha512-WVvkSUg2zcc2nblzYGxM/bVo+VDcANy/dw7vcbxLoW1Jega9Jm2d5FGSb7uS6m4746waghUUqcAWNJZ0Q5yeqA==",
+          "requires": {
+            "rollup": "^2.41.3"
+          }
+        }
       }
     },
     "@qg/js-bridge": {
-      "version": "1.1.11",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fjs-bridge/-/js-bridge-1.1.11.tgz",
-      "integrity": "sha512-WVvkSUg2zcc2nblzYGxM/bVo+VDcANy/dw7vcbxLoW1Jega9Jm2d5FGSb7uS6m4746waghUUqcAWNJZ0Q5yeqA==",
-      "requires": {
-        "rollup": "^2.41.3"
-      }
+      "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",