fix: resolve header overlap on Dynamic Island iPhones

- app.js 通过 wx.getSystemInfoSync 获取 statusBarHeight 存入 globalData
- 所有12个自定义导航页面的 JS 读取 statusBarHeight
- WXML 通过 style="padding-top: {{statusBarHeight + 24}}px" 动态适配
- 普通手机和灵动岛手机都能正确显示

miniprogram/app.js

@@ -5,10 +5,14 @@ App({
     userInfo: null,
     userId: null,
     connectedDevice: null,
-    currentTreatment: null
+    currentTreatment: null,
+    statusBarHeight: 44
   },
 
   onLaunch: function () {
+    var sysInfo = wx.getSystemInfoSync()
+    this.globalData.statusBarHeight = sysInfo.statusBarHeight || 44
+
     if (!wx.cloud) {
       console.error('请使用 2.2.3 或以上的基础库以使用云能力')
       return

miniprogram/app.wxss

@@ -6,7 +6,7 @@ page {
 }
 
 .page-header {
-  padding: 80rpx 40rpx 32rpx;
+  padding: 0 40rpx 32rpx;
   text-align: center;
   color: #ffffff;
 }

miniprogram/pages/auto-scan/auto-scan.js

@@ -2,6 +2,7 @@ var ble = require('../../services/ble')
 
 Page({
   data: {
+    statusBarHeight: 44,
     scanning: true,
     scanProgress: 0,
     regionData: [],
@@ -9,6 +10,8 @@ Page({
   },
 
   onLoad: function () {
+    var app = getApp()
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
     this.startScan()
   },
 

miniprogram/pages/auto-scan/auto-scan.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-pink">
+  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">自动扫描</view>
     <view class="page-header-subtitle">正在识别面部...</view>
   </view>

miniprogram/pages/bind-success/bind-success.js

@@ -1,10 +1,13 @@
 Page({
   data: {
+    statusBarHeight: 44,
     deviceId: '',
     trialDays: 7
   },
 
   onLoad: function (options) {
+    var app = getApp()
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
     this.setData({ deviceId: options.device_id || '' })
   },
 

miniprogram/pages/bind-success/bind-success.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-green">
+  <view class="page-header page-header-green" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">绑定成功</view>
     <view class="page-header-subtitle">设备已成功绑定</view>
   </view>

miniprogram/pages/ble-connect/ble-connect.js

@@ -3,6 +3,7 @@ var app = getApp()
 
 Page({
   data: {
+    statusBarHeight: 44,
     deviceId: '',
     bindToken: '',
     state: 'scanning',
@@ -10,6 +11,7 @@ Page({
   },
 
   onLoad: function (options) {
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
     this.setData({
       deviceId: options.device_id || '',
       bindToken: options.bind_token || ''

miniprogram/pages/ble-connect/ble-connect.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-pink">
+  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">蓝牙连接</view>
     <view class="page-header-subtitle">{{state === 'scanning' ? '正在搜索设备...' : state === 'connecting' ? '正在连接设备...' : state === 'binding' ? '正在绑定...' : '连接失败'}}</view>
   </view>

miniprogram/pages/login/login.js

@@ -2,9 +2,15 @@ var app = getApp()
 
 Page({
   data: {
+    statusBarHeight: 44,
     loading: false
   },
 
+  onLoad: function () {
+    var app = getApp()
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
+  },
+
   onLogin: function () {
     var self = this
     self.setData({ loading: true })

miniprogram/pages/login/login.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-pink">
+  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">光子美容仪</view>
     <view class="page-header-subtitle">微信授权登录</view>
   </view>

miniprogram/pages/scan/scan.js

@@ -2,11 +2,17 @@ var http = require('../../utils/request')
 
 Page({
   data: {
+    statusBarHeight: 44,
     scanning: false,
     deviceId: '',
     error: ''
   },
 
+  onLoad: function () {
+    var app = getApp()
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
+  },
+
   onScan: function () {
     var self = this
     self.setData({ scanning: true, error: '' })

miniprogram/pages/scan/scan.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-pink">
+  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">扫码绑定</view>
     <view class="page-header-subtitle">扫描设备底部二维码</view>
   </view>

miniprogram/pages/subscribe-plans/subscribe-plans.js

@@ -2,6 +2,7 @@ var http = require('../../utils/request')
 
 Page({
   data: {
+    statusBarHeight: 44,
     plans: [
       { plan: 'monthly', price: '¥99', desc: '约3.3元/天' },
       { plan: 'yearly', price: '¥899', desc: '省¥289' }
@@ -10,6 +11,11 @@ Page({
     purchasing: false
   },
 
+  onLoad: function () {
+    var app = getApp()
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
+  },
+
   onSelect: function (e) {
     this.setData({ selected: e.currentTarget.dataset.plan })
   },

miniprogram/pages/subscribe-plans/subscribe-plans.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-gold">
+  <view class="page-header page-header-gold" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">订阅服务</view>
     <view class="page-header-subtitle">解锁智能模式</view>
   </view>

miniprogram/pages/subscribe-prompt/subscribe-prompt.js

@@ -1,5 +1,12 @@
 Page({
-  data: {},
+  data: {
+    statusBarHeight: 44
+  },
+
+  onLoad: function () {
+    var app = getApp()
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
+  },
 
   onViewPlans: function () {
     wx.navigateTo({ url: '/pages/subscribe-plans/subscribe-plans' })

miniprogram/pages/subscribe-prompt/subscribe-prompt.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-pink">
+  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">护理设置</view>
     <view class="page-header-subtitle">试用期已结束</view>
   </view>

miniprogram/pages/subscribe-success/subscribe-success.js

@@ -1,10 +1,13 @@
 Page({
   data: {
+    statusBarHeight: 44,
     planName: '年卡会员',
     expiryDate: ''
   },
 
   onLoad: function () {
+    var app = getApp()
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
     var now = new Date()
     now.setFullYear(now.getFullYear() + 1)
     var y = now.getFullYear()

miniprogram/pages/subscribe-success/subscribe-success.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-green">
+  <view class="page-header page-header-green" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">订阅成功</view>
     <view class="page-header-subtitle">欢迎使用智能模式</view>
   </view>

miniprogram/pages/treating/treating.js

@@ -2,6 +2,7 @@ var ble = require('../../services/ble')
 
 Page({
   data: {
+    statusBarHeight: 44,
     regions: 0,
     wavelength: 2,
     duration: 600000,
@@ -16,6 +17,8 @@ Page({
   },
 
   onLoad: function (options) {
+    var app = getApp()
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
     this.setData({
       regions: parseInt(options.regions) || 0x7F,
       wavelength: parseInt(options.wavelength) || 2,

miniprogram/pages/treating/treating.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-blue">
+  <view class="page-header page-header-blue" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">护理中</view>
     <view class="page-header-subtitle">正在护理...</view>
   </view>

miniprogram/pages/treatment-done/treatment-done.js

@@ -4,6 +4,7 @@ var app = getApp()
 
 Page({
   data: {
+    statusBarHeight: 44,
     sessionId: '',
     regions: 0,
     duration: 0,
@@ -15,6 +16,7 @@ Page({
   },
 
   onLoad: function (options) {
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
     var durationMs = parseInt(options.duration) || 0
     var mins = Math.floor(durationMs / 60000)
     var secs = Math.floor((durationMs % 60000) / 1000)

miniprogram/pages/treatment-done/treatment-done.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-green">
+  <view class="page-header page-header-green" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">护理完成</view>
     <view class="page-header-subtitle">本次护理已结束</view>
   </view>

miniprogram/pages/treatment-setup/treatment-setup.js

@@ -2,6 +2,7 @@ var ble = require('../../services/ble')
 
 Page({
   data: {
+    statusBarHeight: 44,
     regions: [
       { name: '左脸颊', mask: 0x01, checked: true },
       { name: '右脸颊', mask: 0x02, checked: true },
@@ -17,6 +18,8 @@ Page({
   },
 
   onLoad: function () {
+    var app = getApp()
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
     this.checkSubscription()
   },
 

miniprogram/pages/treatment-setup/treatment-setup.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-pink">
+  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">护理设置</view>
     <view class="page-header-subtitle">选择模式和区域</view>
   </view>

miniprogram/pages/wear-check/wear-check.js

@@ -2,11 +2,17 @@ var ble = require('../../services/ble')
 
 Page({
   data: {
+    statusBarHeight: 44,
     checking: false,
     result: null,
     error: ''
   },
 
+  onLoad: function () {
+    var app = getApp()
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight })
+  },
+
   onShow: function () {
     this.checkWearing()
   },

miniprogram/pages/wear-check/wear-check.wxml

@@ -1,5 +1,5 @@
 <view class="page">
-  <view class="page-header page-header-pink">
+  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
     <view class="page-header-title">确认佩戴</view>
     <view class="page-header-subtitle">请确保面罩贴合面部</view>
   </view>