增加广播栏

yelaymaths/pages/index/index.js

@@ -8,6 +8,22 @@ const updateManager = wx.getUpdateManager();
 
 const PAGE_SIZE = 10;
 
+/** 广播文字默认色（红），配置里没填或填得不像颜色时用它 */
+const DEFAULT_BROADCAST_COLOR = '#e60012';
+
+/**
+ * 只认安全的颜色写法，其余一律回退默认色。
+ * 后台是文本框，填错一个字符不该把首页样式搞坏，也不该让这个值变成注入点。
+ */
+function safeColor(value) {
+  const v = String(value || '').trim();
+  if (/^#[0-9a-fA-F]{3}$|^#[0-9a-fA-F]{6}$|^#[0-9a-fA-F]{8}$/.test(v)) return v;
+  if (/^rgba?\([\d\s.,%]+\)$/.test(v)) return v;
+  if (/^hsla?\([\d\s.,%]+\)$/.test(v)) return v;
+  if (/^[a-zA-Z]{3,20}$/.test(v)) return v; // red / orange / tomato ...
+  return DEFAULT_BROADCAST_COLOR;
+}
+
 Page({
   data: {
     staticBase: config.STATIC_BASE_URL,
@@ -23,6 +39,12 @@ Page({
     title2: '',
     title3: '',
     footerText: '',
+    /** 首页信息广播文案，空则不显示整条 */
+    broadcast: '',
+    /** 文案超出宽度时才横向滚动 */
+    broadcastScroll: false,
+    /** 广播文字颜色，取自 home.broadcast_color */
+    broadcastColor: DEFAULT_BROADCAST_COLOR,
   },
 
   onLoad() {
@@ -32,11 +54,32 @@ Page({
   },
 
   applyConfig() {
-    this.setData({
-      title1: store.cfg('home.title.paid'),
-      title2: store.cfg('home.title.trial'),
-      title3: store.cfg('home.title.public'),
-      footerText: store.cfg('home.footer_text'),
+    this.setData(
+      {
+        title1: store.cfg('home.title.paid'),
+        title2: store.cfg('home.title.trial'),
+        title3: store.cfg('home.title.public'),
+        footerText: store.cfg('home.footer_text'),
+        broadcast: store.cfg('home.broadcast') || '',
+        broadcastColor: safeColor(store.cfg('home.broadcast_color')),
+        broadcastScroll: false,
+      },
+      // 等渲染完再量宽度：只有真放不下才让它滚动，短文案就静静居中
+      () => this.measureBroadcast(),
+    );
+  },
+
+  /** 量一下广播文字有没有超出容器，超了才加滚动动画。量不到就当不超。 */
+  measureBroadcast() {
+    if (!this.data.broadcast) return;
+    const query = wx.createSelectorQuery().in(this);
+    query.select('.broadcast-body').boundingClientRect();
+    query.select('.broadcast-text').boundingClientRect();
+    query.exec((res) => {
+      const box = res && res[0];
+      const text = res && res[1];
+      if (!box || !text) return;
+      if (text.width > box.width) this.setData({ broadcastScroll: true });
     });
   },