From 431d4058a85766ac5c24ea67571662f677cc0b79 Mon Sep 17 00:00:00 2001 From: Guoguo Date: Tue, 28 Jul 2026 06:44:34 -0700 Subject: [PATCH] feat(ui): use face-map layout for report zones and manual region picker; restrict manual care to smart mode - scan-report: replace zone card grid with the same oval face-map layout as treatment-setup, zones tinted by recommended light with mode label; restore the per-light legend under the map - manual-treatment: region picker now uses the same face-map layout - manual care mode selection is smart-mode only: entry link hidden for non-subscribers and the page itself checks subscription (free mode passes since the backend reports it as active) --- miniprogram/i18n/locales/manual.js | 6 +- .../manual-treatment/manual-treatment.js | 17 ++++++ .../manual-treatment/manual-treatment.wxml | 16 +++-- .../manual-treatment/manual-treatment.wxss | 37 ++++++------ .../pages/scan-report/scan-report.wxml | 37 +++++++++--- .../pages/scan-report/scan-report.wxss | 60 ++++++++++++------- .../treatment-setup/treatment-setup.wxml | 2 +- 7 files changed, 116 insertions(+), 59 deletions(-) diff --git a/miniprogram/i18n/locales/manual.js b/miniprogram/i18n/locales/manual.js index eecca53..2d7bf5c 100644 --- a/miniprogram/i18n/locales/manual.js +++ b/miniprogram/i18n/locales/manual.js @@ -19,7 +19,8 @@ module.exports = { starting: '启动中...', noRegionSelected: '请至少选择一个区域', startFailed: '启动失败', - entryLink: '手动选择波长护理 ›' + entryLink: '手动选择波长护理 ›', + smartOnly: '手动选择护理模式为智能模式专属，开通订阅后即可使用' }, en: { navTitle: 'Manual Care', @@ -39,6 +40,7 @@ module.exports = { starting: 'Starting...', noRegionSelected: 'Please select at least one region', startFailed: 'Failed to start', - entryLink: 'Manual wavelength care ›' + entryLink: 'Manual wavelength care ›', + smartOnly: 'Choosing a care mode manually is a Smart Mode feature. Subscribe to unlock it.' } } diff --git a/miniprogram/pages/manual-treatment/manual-treatment.js b/miniprogram/pages/manual-treatment/manual-treatment.js index b34dedf..982dd54 100644 --- a/miniprogram/pages/manual-treatment/manual-treatment.js +++ b/miniprogram/pages/manual-treatment/manual-treatment.js @@ -48,6 +48,23 @@ Page({ onShow: function () { i18n.bind(this) this.refreshDurationOptions() + this._checkAccess() + }, + + // 手动选择护理模式为智能模式专属（果果 2026-07-28 定案）。普通模式用户不可用—— + // 入口链接已按订阅隐藏，此处兜底拦截直达（smart_mode_free 开启时后端返回 active，同样放行）。 + _checkAccess: function () { + var http = require('../../utils/request') + http.get('/api/v1/subscription').then(function (sub) { + if (sub && sub.status === 'active') return + wx.showModal({ + content: i18n.t('manual.smartOnly'), + showCancel: false, + complete: function () { + wx.navigateBack({ fail: function () { wx.reLaunch({ url: '/pages/index/index' }) } }) + } + }) + }).catch(function () {}) // 网络失败不拦（避免误伤），实际下发仍有 BLE/后端校验 }, // Duration labels carry a dynamic number, which WXML cannot substitute, so diff --git a/miniprogram/pages/manual-treatment/manual-treatment.wxml b/miniprogram/pages/manual-treatment/manual-treatment.wxml index 64eaa68..9a8eb68 100644 --- a/miniprogram/pages/manual-treatment/manual-treatment.wxml +++ b/miniprogram/pages/manual-treatment/manual-treatment.wxml @@ -24,15 +24,13 @@ {{i18n.manual.regionTitle}} - - - {{i18n.common.regions[item.key]}} - + + + {{i18n.common.regions.top}} + {{i18n.common.regions.left}} + {{i18n.common.regions.right}} + {{i18n.common.regions.middle}} + {{i18n.common.regions.bottom}} {{i18n.manual.durationTitle}} diff --git a/miniprogram/pages/manual-treatment/manual-treatment.wxss b/miniprogram/pages/manual-treatment/manual-treatment.wxss index 1bf2f9a..d8e2868 100644 --- a/miniprogram/pages/manual-treatment/manual-treatment.wxss +++ b/miniprogram/pages/manual-treatment/manual-treatment.wxss @@ -56,30 +56,33 @@ } /* region checkbox grid */ -.region-grid { - display: flex; - flex-wrap: wrap; - gap: 20rpx; - justify-content: center; +/* face-map 脸型图（与 treatment-setup 同款） */ +.face-map { + width: 240rpx; + height: 280rpx; + margin: 0 auto 24rpx; + position: relative; } - -.region-chip { - /* 与「使用设置」mode-option 同款卡片：等宽(3+2 排布)不拉伸、圆角 24rpx */ - padding: 24rpx 0; - text-align: center; +.face-region { + position: absolute; border: 4rpx solid #e5e5e5; - border-radius: 24rpx; - font-size: 26rpx; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 22rpx; color: #999999; - flex: 0 0 calc((100% - 40rpx) / 3); - box-sizing: border-box; } - -.region-chip.active { +.face-region.active { border-color: #E6508C; - background: rgba(230, 80, 140, 0.12); + background: rgba(230, 80, 140, 0.2); color: #E6508C; } +.face-region.forehead { top: 5%; left: 25%; width: 50%; height: 15%; border-radius: 40rpx 40rpx 50% 50%; } +.face-region.left-cheek { top: 25%; left: 5%; width: 30%; height: 25%; } +.face-region.right-cheek { top: 25%; right: 5%; width: 30%; height: 25%; } +.face-region.nose { top: 45%; left: 35%; width: 30%; height: 18%; border-radius: 40%; } +.face-region.chin { top: 68%; left: 25%; width: 50%; height: 20%; border-radius: 0 0 50% 50%; } /* duration segmented control */ .segmented { diff --git a/miniprogram/pages/scan-report/scan-report.wxml b/miniprogram/pages/scan-report/scan-report.wxml index 772bf05..a56d2f3 100644 --- a/miniprogram/pages/scan-report/scan-report.wxml +++ b/miniprogram/pages/scan-report/scan-report.wxml @@ -30,17 +30,38 @@ {{i18n.report.noProblem}} - + {{i18n.report.faceTitle}} - - - {{item.name}} - {{item.modeLabel}} - {{item.levelLabel}} - {{i18n.report.noProblem}} + + + + {{faceZones[1].name}} + {{faceZones[1].modeLabel}} + + {{faceZones[0].name}} + {{faceZones[0].modeLabel}} + + + {{faceZones[4].name}} + {{faceZones[4].modeLabel}} + + + {{faceZones[2].name}} + {{faceZones[2].modeLabel}} + + + {{faceZones[3].name}} + {{faceZones[3].modeLabel}} + + + + + {{i18n.report.modeNames.red}} + {{i18n.report.modeNames.ir}} + {{i18n.report.modeNames.uv}} + {{i18n.report.modeNames.yellow}} {{i18n.report.faceTapHint}} {{i18n.report.allNormalHint}} diff --git a/miniprogram/pages/scan-report/scan-report.wxss b/miniprogram/pages/scan-report/scan-report.wxss index 772da7a..0f77b60 100644 --- a/miniprogram/pages/scan-report/scan-report.wxss +++ b/miniprogram/pages/scan-report/scan-report.wxss @@ -60,34 +60,50 @@ .empty-hint { color: #999; font-size: 26rpx; } -/* 分区卡片栅格 — 与「使用设置」mode-selector 同款：等宽圆角卡片，3+2 排布 */ -.zone-grid { +/* 脸型图 — 与「使用设置」同款布局，放大以容纳模式名 */ +.face-map { + width: 320rpx; + height: 400rpx; + margin: 0 auto 16rpx; + position: relative; +} +.face-region { + position: absolute; + border: 3rpx solid #e5e5e5; + border-radius: 50%; display: flex; - flex-wrap: wrap; - gap: 20rpx; + flex-direction: column; + align-items: center; justify-content: center; + background: #FAFAFA; + color: #999; } -.zone-card { - flex: 0 0 calc((100% - 40rpx) / 3); - box-sizing: border-box; - padding: 24rpx 12rpx; - border: 4rpx solid #e5e5e5; - border-radius: 24rpx; - text-align: center; - color: #666; -} -.zone-card:active { transform: scale(0.97); } -.zone-card-name { font-size: 28rpx; font-weight: 600; color: inherit; } -.zone-card-mode { font-size: 22rpx; margin-top: 6rpx; } -.zone-card-level { font-size: 20rpx; margin-top: 2rpx; opacity: 0.85; } +.face-region:active { transform: scale(0.96); } +.fz-name { font-size: 22rpx; font-weight: 600; } +.fz-mode { font-size: 18rpx; margin-top: 2rpx; } +.face-region.forehead { top: 5%; left: 25%; width: 50%; height: 15%; border-radius: 40rpx 40rpx 50% 50%; } +.face-region.left-cheek { top: 25%; left: 5%; width: 30%; height: 25%; } +.face-region.right-cheek { top: 25%; right: 5%; width: 30%; height: 25%; } +.face-region.nose { top: 45%; left: 35%; width: 30%; height: 18%; border-radius: 40%; } +.face-region.chin { top: 68%; left: 25%; width: 50%; height: 20%; border-radius: 0 0 50% 50%; } -/* 波长配色（置于 .zone-card 之后以覆盖默认边框/文字色） */ -.zone-red { background: rgba(232, 93, 93, 0.10); border-color: rgba(232, 93, 93, 0.55); color: #B23C3C; } -.zone-ir { background: rgba(192, 107, 74, 0.10); border-color: rgba(192, 107, 74, 0.55); color: #8C4A2E; } -.zone-uv { background: rgba(142, 107, 216, 0.10); border-color: rgba(142, 107, 216, 0.55); color: #5F3FAE; } -.zone-yellow { background: rgba(232, 185, 61, 0.12); border-color: rgba(232, 185, 61, 0.6); color: #8A6A10; } +/* 波长配色（置于 .face-region 之后以覆盖默认色） */ +.zone-red { background: rgba(232, 93, 93, 0.14); border-color: rgba(232, 93, 93, 0.55); color: #B23C3C; } +.zone-ir { background: rgba(192, 107, 74, 0.14); border-color: rgba(192, 107, 74, 0.55); color: #8C4A2E; } +.zone-uv { background: rgba(142, 107, 216, 0.14); border-color: rgba(142, 107, 216, 0.55); color: #5F3FAE; } +.zone-yellow { background: rgba(232, 185, 61, 0.16); border-color: rgba(232, 185, 61, 0.6); color: #8A6A10; } .zone-none { background: #FAFAFA; border-color: #e5e5e5; color: #999; } +/* 底部图例：各光简要功效 */ +.face-legend { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 8rpx; } +.legend-item { display: flex; align-items: center; margin: 0 16rpx 10rpx 0; } +.legend-dot { width: 16rpx; height: 16rpx; border-radius: 50%; margin-right: 8rpx; } +.dot-red { background: #E85D5D; } +.dot-ir { background: #C06B4A; } +.dot-uv { background: #8E6BD8; } +.dot-yellow { background: #E8B93D; } +.legend-label { font-size: 22rpx; color: #888; } + .face-tap-hint { font-size: 22rpx; color: #bbb; margin-top: 14rpx; text-align: center; } .face-all-normal-hint { font-size: 24rpx; color: #6BBF59; text-align: center; margin-top: 12rpx; } diff --git a/miniprogram/pages/treatment-setup/treatment-setup.wxml b/miniprogram/pages/treatment-setup/treatment-setup.wxml index f0b3f1c..88954f2 100644 --- a/miniprogram/pages/treatment-setup/treatment-setup.wxml +++ b/miniprogram/pages/treatment-setup/treatment-setup.wxml @@ -38,7 +38,7 @@ {{i18n.setup.startBtn}} - {{i18n.manual.entryLink}} + {{i18n.manual.entryLink}} {{error}}