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)
这个提交包含在:
@@ -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
|
||||
|
||||
@@ -24,15 +24,13 @@
|
||||
</view>
|
||||
|
||||
<view class="page-title section-title">{{i18n.manual.regionTitle}}</view>
|
||||
<view class="region-grid">
|
||||
<view
|
||||
wx:for="{{regions}}"
|
||||
wx:key="key"
|
||||
class="region-chip {{item.checked ? 'active' : ''}}"
|
||||
bindtap="onToggleRegion"
|
||||
data-idx="{{index}}">
|
||||
{{i18n.common.regions[item.key]}}
|
||||
</view>
|
||||
<!-- 脸型图布局(与「使用设置」一致);位置↔idx:0=左 1=中上 2=中 3=中下 4=右 -->
|
||||
<view class="face-map">
|
||||
<view class="face-region forehead {{regions[1].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="1">{{i18n.common.regions.top}}</view>
|
||||
<view class="face-region left-cheek {{regions[0].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="0">{{i18n.common.regions.left}}</view>
|
||||
<view class="face-region right-cheek {{regions[4].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="4">{{i18n.common.regions.right}}</view>
|
||||
<view class="face-region nose {{regions[2].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="2">{{i18n.common.regions.middle}}</view>
|
||||
<view class="face-region chin {{regions[3].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="3">{{i18n.common.regions.bottom}}</view>
|
||||
</view>
|
||||
|
||||
<view class="page-title section-title">{{i18n.manual.durationTitle}}</view>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
在新工单中引用
屏蔽一个用户