feat(ui): redesign all miniprogram pages
- 全局样式改为粉色(#E6508C)/金色(#DCB982)/绿色(#52c41a)配色
- 所有非tab页使用自定义导航栏，带彩色头部+标题+副标题
- login页: 粉色头部+🌸图标+微信授权登录
- scan页: 粉色头部+虚线扫码框+手动输入按钮
- ble-connect页: 蓝牙提示+搜索中/已发现设备卡片
- bind-success页: 绿色头部+成功图标+7天试用提示卡
- wear-check页: 设备信息行+佩戴指引卡片
- index首页: 粉色设备卡片+开始护理/设备管理按钮
- treatment-setup页: 模式选择+面部地图选区域
- auto-scan页: 面部轮廓+扫描线动画+检测标签
- treating页: 蓝色头部+大倒计时+渐变进度条+放松提示
- treatment-done页: 绿色头部+统计卡片+已记录提示
- subscribe-prompt页: 普通/智能模式对比+试用提示+金色订阅按钮
- subscribe-plans页: 金色头部+服务卡片+月卡/年卡选择
- subscribe-success页: 绿色头部+订阅详情卡+金色按钮
- profile页: 渐变头部+用户行+订阅卡+菜单列表
- history页: 粉色统计行+模式标签记录列表
这个提交包含在：
Guoguo
+203
-107
@@ -1,51 +1,229 @@
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 24rpx;
|
||||
min-height: 100vh;
|
||||
.page-header {
|
||||
padding: 80rpx 40rpx 32rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
.page-header-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.page-header-subtitle {
|
||||
font-size: 26rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.page-header-pink {
|
||||
background-color: #E6508C;
|
||||
}
|
||||
|
||||
.page-header-green {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
.page-header-blue {
|
||||
background-color: #006699;
|
||||
}
|
||||
|
||||
.page-header-gold {
|
||||
background-color: #DCB982;
|
||||
}
|
||||
|
||||
.page-header-gradient {
|
||||
background: linear-gradient(135deg, #E6508C 0%, #DCB982 100%);
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #333333;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #E6508C;
|
||||
color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx 40rpx;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 20rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.btn-primary::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
opacity: 0.8;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.btn-primary-green {
|
||||
background: #E6508C;
|
||||
}
|
||||
|
||||
.btn-primary-gold {
|
||||
background: #DCB982;
|
||||
}
|
||||
|
||||
.btn-primary-red {
|
||||
background: #ff4d4f;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
border: 2rpx solid #333333;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx 40rpx;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #ffffff;
|
||||
color: #E6508C;
|
||||
border: 4rpx solid #E6508C;
|
||||
border-radius: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.btn-secondary::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-secondary-gold {
|
||||
color: #DCB982;
|
||||
border-color: #DCB982;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.status-badge-green {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
.status-badge-gold {
|
||||
background-color: #FAAD14;
|
||||
}
|
||||
|
||||
.device-card {
|
||||
background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);
|
||||
border: 4rpx solid #E6508C;
|
||||
border-radius: 28rpx;
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #E6508C;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 52rpx;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.device-battery {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
margin-top: 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
background: #52c41a;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 44rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.tip-card {
|
||||
background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
|
||||
border: 2rpx solid #DCB982;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx;
|
||||
margin-bottom: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.tip-card-icon {
|
||||
font-size: 52rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tip-card-title {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.tip-card-sub {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.info-tip {
|
||||
background: #f0f9ff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #006699;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
@@ -56,89 +234,7 @@ page {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.mt-10 { margin-top: 10rpx; }
|
||||
.mt-20 { margin-top: 20rpx; }
|
||||
.mt-30 { margin-top: 30rpx; }
|
||||
.mb-10 { margin-bottom: 10rpx; }
|
||||
.mb-20 { margin-bottom: 20rpx; }
|
||||
.mb-30 { margin-bottom: 30rpx; }
|
||||
.p-20 { padding: 20rpx; }
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background-color: #eeeeee;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
background-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background-color: #faad14;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 120rpx 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state .empty-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.empty-state .empty-text {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "自动扫描"
|
||||
}
|
||||
|
||||
@@ -1,19 +1,28 @@
|
||||
<view class="container">
|
||||
<view class="card text-center">
|
||||
<view class="section-title">{{scanning ? '面部扫描中' : '扫描完成'}}</view>
|
||||
<progress percent="{{scanProgress}}" stroke-width="12" activeColor="#333333" show-info />
|
||||
<view class="text-muted mt-20">{{scanning ? '请保持设备贴合面部' : ''}}</view>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-pink">
|
||||
<view class="page-header-title">自动扫描</view>
|
||||
<view class="page-header-subtitle">正在识别面部...</view>
|
||||
</view>
|
||||
|
||||
<view class="card" wx:if="{{!scanning && regionData.length > 0}}">
|
||||
<view class="section-title">扫描结果</view>
|
||||
<view wx:for="{{regionData}}" wx:key="region" class="scan-result-item flex-between">
|
||||
<text>{{item.region}}</text>
|
||||
<text class="text-muted">{{item.pd}}</text>
|
||||
<view class="page-content">
|
||||
<view class="page-title">自动扫描面部区域</view>
|
||||
|
||||
<view class="scan-container">
|
||||
<view class="face-outline">
|
||||
<view class="scan-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn-area-fixed" wx:if="{{!scanning}}">
|
||||
<view class="btn-primary" bindtap="onNext">设置护理参数</view>
|
||||
<view class="scan-hint">请将面罩对准面部</view>
|
||||
|
||||
<view class="scan-progress" wx:if="{{scanning}}">
|
||||
正在扫描... <text class="highlight">{{regionData.length || 3}}</text> 个区域
|
||||
</view>
|
||||
|
||||
<view class="detected-tags" wx:if="{{regionData.length > 0}}">
|
||||
<text class="detected-tag" wx:for="{{regionData}}" wx:key="region">{{item.region}}</text>
|
||||
</view>
|
||||
|
||||
<button class="btn-primary mt-30" wx:if="{{!scanning}}" bindtap="onNext">设置护理参数</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,8 +1,79 @@
|
||||
.scan-result-item {
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
.scan-container {
|
||||
position: relative;
|
||||
width: 320rpx;
|
||||
height: 400rpx;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
|
||||
.scan-result-item:last-child {
|
||||
border-bottom: none;
|
||||
.face-outline {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 6rpx solid #e5e5e5;
|
||||
border-radius: 50% 50% 45% 45%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scan-line {
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
right: 10rpx;
|
||||
height: 6rpx;
|
||||
background: linear-gradient(90deg, transparent, #E6508C, #DCB982, #E6508C, transparent);
|
||||
animation: scan 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
0% { top: 0; opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
100% { top: calc(100% - 6rpx); opacity: 0.5; }
|
||||
}
|
||||
|
||||
.scan-hint {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.scan-progress {
|
||||
text-align: center;
|
||||
background: #f0f9ff;
|
||||
padding: 16rpx 28rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #006699;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #E6508C;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detected-tags {
|
||||
text-align: center;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.detected-tag {
|
||||
background: #fdf2f8;
|
||||
border: 2rpx solid #E6508C;
|
||||
color: #E6508C;
|
||||
padding: 10rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
margin: 6rpx;
|
||||
animation: tagPulse 1s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes tagPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.btn-primary::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "绑定成功"
|
||||
}
|
||||
|
||||
@@ -1,9 +1,23 @@
|
||||
<view class="container">
|
||||
<view class="card text-center">
|
||||
<view class="success-icon">✓</view>
|
||||
<view class="section-title">绑定成功</view>
|
||||
<view class="text-muted mb-20">设备已成功绑定到您的账号</view>
|
||||
<view class="text-muted mb-30">已自动发放 {{trialDays}} 天试用</view>
|
||||
<view class="btn-primary" bindtap="onStart">开始使用</view>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-green">
|
||||
<view class="page-header-title">绑定成功</view>
|
||||
<view class="page-header-subtitle">设备已成功绑定</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="success-area">
|
||||
<view class="success-icon">✓</view>
|
||||
<view class="success-title">绑定成功！</view>
|
||||
</view>
|
||||
|
||||
<view class="tip-card">
|
||||
<text class="tip-card-icon">🎁</text>
|
||||
<view class="tip-card-body">
|
||||
<view class="tip-card-title">恭喜获得7天智能模式试用</view>
|
||||
<view class="tip-card-sub">体验结束后可订阅继续使用</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="btn-primary" bindtap="onStart">开始使用</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
.success-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #52c41a;
|
||||
color: #ffffff;
|
||||
font-size: 64rpx;
|
||||
line-height: 120rpx;
|
||||
margin: 40rpx auto;
|
||||
.success-area {
|
||||
text-align: center;
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
|
||||
.tip-card-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "蓝牙连接"
|
||||
}
|
||||
|
||||
@@ -1,28 +1,30 @@
|
||||
<view class="container">
|
||||
<view class="card text-center">
|
||||
<view class="section-title">
|
||||
{{state === 'scanning' ? '正在扫描设备...' : state === 'connecting' ? '正在连接设备...' : state === 'binding' ? '正在绑定设备...' : '连接失败'}}
|
||||
<view class="page">
|
||||
<view class="page-header page-header-pink">
|
||||
<view class="page-header-title">蓝牙连接</view>
|
||||
<view class="page-header-subtitle">{{state === 'scanning' ? '正在搜索设备...' : state === 'connecting' ? '正在连接设备...' : state === 'binding' ? '正在绑定...' : '连接失败'}}</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="info-tip">
|
||||
<text>📡</text>
|
||||
<text>请确保手机蓝牙已开启</text>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{state === 'scanning'}}" class="text-muted mb-30">
|
||||
请确保设备已开机且在附近
|
||||
</view>
|
||||
<view wx:if="{{state === 'connecting'}}" class="text-muted mb-30">
|
||||
设备ID: {{deviceId}}
|
||||
</view>
|
||||
<view wx:if="{{state === 'binding'}}" class="text-muted mb-30">
|
||||
正在写入绑定信息...
|
||||
</view>
|
||||
<view wx:if="{{state === 'error'}}" class="mb-30">
|
||||
<text class="text-error">{{error}}</text>
|
||||
<view class="search-card" wx:if="{{state === 'scanning' || state === 'connecting'}}">
|
||||
<view class="search-icon pulsing">⏳</view>
|
||||
<view class="search-text">搜索中...</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{state === 'scanning' || state === 'connecting' || state === 'binding'}}" class="loading-spinner">
|
||||
<view class="spinner"></view>
|
||||
<view class="found-card" wx:if="{{state === 'binding'}}">
|
||||
<view class="found-icon">💆</view>
|
||||
<view class="found-name">光子美容仪-{{deviceId}}</view>
|
||||
<view class="status-badge status-badge-green">连接中</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{state === 'error'}}">
|
||||
<view class="btn-primary" bindtap="onRetry">重试</view>
|
||||
<view class="found-card" wx:if="{{state === 'error'}}">
|
||||
<view class="search-icon">⚠️</view>
|
||||
<view class="found-name">{{error || '连接失败'}}</view>
|
||||
<button class="retry-btn" bindtap="onRetry">重试</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,18 +1,78 @@
|
||||
.loading-spinner {
|
||||
padding: 40rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.search-card {
|
||||
background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);
|
||||
border: 4rpx dashed #e5e5e5;
|
||||
border-radius: 28rpx;
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border: 6rpx solid #eeeeee;
|
||||
border-top-color: #333333;
|
||||
.search-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #cccccc;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin: 0 auto 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
.search-icon.pulsing {
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.search-text {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.found-card {
|
||||
background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);
|
||||
border: 4rpx solid #E6508C;
|
||||
border-radius: 28rpx;
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.found-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #E6508C;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.found-name {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
display: inline-block;
|
||||
background: #E6508C;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 20rpx;
|
||||
padding: 16rpx 48rpx;
|
||||
font-size: 28rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.retry-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -5,6 +5,8 @@ Page({
|
||||
data: {
|
||||
records: [],
|
||||
total: 0,
|
||||
totalHours: 0,
|
||||
monthCount: 0,
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
loading: true,
|
||||
@@ -41,18 +43,30 @@ Page({
|
||||
page: page,
|
||||
page_size: self.data.pageSize
|
||||
}).then(function (data) {
|
||||
var totalMs = 0
|
||||
var now = new Date()
|
||||
var monthStart = new Date(now.getFullYear(), now.getMonth(), 1)
|
||||
var monthCount = 0
|
||||
|
||||
var records = (data.records || []).map(function (r) {
|
||||
var durationMin = Math.floor((r.total_duration_ms || 0) / 60000)
|
||||
totalMs += (r.total_duration_ms || 0)
|
||||
r.duration_text = durationMin + '分钟'
|
||||
r.region_names = ble.getRegionName(r.regions || 0).join('、')
|
||||
r.wavelength_name = ble.getWavelengthName(r.wavelength || 2)
|
||||
r.date_text = r.start_time ? r.start_time.slice(0, 10) : ''
|
||||
|
||||
if (r.start_time && new Date(r.start_time) >= monthStart) {
|
||||
monthCount++
|
||||
}
|
||||
return r
|
||||
})
|
||||
|
||||
self.setData({
|
||||
records: refresh ? records : self.data.records.concat(records),
|
||||
total: data.total || 0,
|
||||
totalHours: Math.round(totalMs / 3600000),
|
||||
monthCount: monthCount,
|
||||
page: page,
|
||||
loading: false,
|
||||
loadingMore: false
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
{
|
||||
"navigationBarTitleText": "护理记录"
|
||||
"navigationBarTitleText": "护理记录",
|
||||
"navigationBarBackgroundColor": "#E6508C",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
|
||||
@@ -1,26 +1,38 @@
|
||||
<view class="container">
|
||||
<view wx:if="{{loading}}" class="empty-state">
|
||||
<text class="text-muted">加载中...</text>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-pink">
|
||||
<view class="page-header-title">护理记录</view>
|
||||
<view class="page-header-subtitle">查看历史护理数据</view>
|
||||
</view>
|
||||
|
||||
<view wx:elif="{{records.length === 0}}" class="empty-state">
|
||||
<view class="empty-icon">📑</view>
|
||||
<view class="empty-text">暂无护理记录</view>
|
||||
</view>
|
||||
|
||||
<view wx:else>
|
||||
<view class="record-count text-muted mb-20">共 {{total}} 条记录</view>
|
||||
|
||||
<view wx:for="{{records}}" wx:key="record_id" class="card record-card">
|
||||
<view class="flex-between mb-10">
|
||||
<text class="record-date">{{item.date_text}}</text>
|
||||
<text class="record-duration">{{item.duration_text}}</text>
|
||||
<view class="page-content">
|
||||
<view class="stats-row">
|
||||
<view class="stat-card">
|
||||
<view class="stat-value">{{total}}</view>
|
||||
<view class="stat-label">累计次数</view>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<view class="stat-value">{{totalHours}}h</view>
|
||||
<view class="stat-label">累计时长</view>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<view class="stat-value">{{monthCount}}</view>
|
||||
<view class="stat-label">本月次数</view>
|
||||
</view>
|
||||
<view class="text-muted record-regions">{{item.region_names}}</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{loadingMore}}" class="text-center text-muted mt-20">
|
||||
加载更多...
|
||||
<view class="section-title">最近记录</view>
|
||||
|
||||
<view class="record-item" wx:for="{{records}}" wx:key="session_id">
|
||||
<view class="record-date">{{item.date_text}}</view>
|
||||
<text class="record-mode {{item.mode === 1 ? 'smart' : 'normal'}}">{{item.mode === 1 ? '✨ 智能' : '🔄 普通'}}</text>
|
||||
<view class="record-details">{{item.duration_text}}</view>
|
||||
</view>
|
||||
|
||||
<view class="empty-state" wx:if="{{!loading && records.length === 0}}">
|
||||
<text class="empty-icon">📃</text>
|
||||
<view class="empty-text">暂无护理记录</view>
|
||||
</view>
|
||||
|
||||
<view class="loading-more" wx:if="{{loadingMore}}">加载更多...</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,22 +1,94 @@
|
||||
.record-count {
|
||||
font-size: 24rpx;
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.record-card {
|
||||
padding: 24rpx 32rpx;
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
background: #f8f8f8;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #E6508C;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 12rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.record-date {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.record-duration {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.record-regions {
|
||||
.record-mode {
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.record-mode.smart {
|
||||
background: #fdf2f8;
|
||||
color: #E6508C;
|
||||
}
|
||||
|
||||
.record-mode.normal {
|
||||
background: #f0f0f0;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.record-details {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 120rpx 40rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.loading-more {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
margin-top: 4rpx;
|
||||
color: #999999;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
{
|
||||
"navigationBarTitleText": "首页"
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationBarBackgroundColor": "#E6508C",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
|
||||
@@ -1,52 +1,30 @@
|
||||
<view class="container">
|
||||
<view class="card device-card" wx:if="{{!hasDevice}}">
|
||||
<view class="text-center">
|
||||
<view class="section-title">添加设备</view>
|
||||
<view class="text-muted mb-30">您还没有绑定设备</view>
|
||||
<view class="btn-primary" bindtap="onAddDevice">扫码添加设备</view>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-pink">
|
||||
<view class="page-header-title">首页</view>
|
||||
<view class="page-header-subtitle">光子美容仪</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content" wx:if="{{!hasDevice}}">
|
||||
<view class="empty-device">
|
||||
<text class="empty-icon">📱</text>
|
||||
<view class="empty-text">还没有绑定设备</view>
|
||||
<button class="btn-primary mt-30" bindtap="onAddDevice">扫码添加设备</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card device-card" wx:if="{{hasDevice}}">
|
||||
<view class="flex-between mb-20">
|
||||
<view>
|
||||
<view class="device-name">{{deviceName}}</view>
|
||||
<view class="device-status">
|
||||
<text class="{{connected ? 'text-success' : 'text-muted'}}">
|
||||
{{connected ? '已连接' : bleState === 'scanning' ? '扫描中...' : bleState === 'connecting' ? '连接中...' : '未连接'}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:if="{{connected}}" class="battery-area">
|
||||
<text>{{battery}}%</text>
|
||||
<view class="page-content" wx:if="{{hasDevice}}">
|
||||
<view class="device-card">
|
||||
<view class="device-icon">💆</view>
|
||||
<view class="device-name">{{deviceName || '我的光面膜'}}</view>
|
||||
<text class="status-badge status-badge-green" wx:if="{{connected}}">已连接</text>
|
||||
<text class="status-badge" style="background:#ccc;" wx:else>未连接</text>
|
||||
<view class="device-battery" wx:if="{{connected}}">
|
||||
<text>🔋</text>
|
||||
<text>电量 {{battery}}%</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{!connected && bleState !== 'scanning' && bleState !== 'connecting'}}" class="mt-20">
|
||||
<view class="btn-secondary" bindtap="onConnectBle">连接设备</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{connected}}" class="mt-20">
|
||||
<view class="text-muted">设备状态: {{modeState}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card sub-card" bindtap="onViewSubscription">
|
||||
<view class="flex-between">
|
||||
<view>
|
||||
<view class="section-title">订阅状态</view>
|
||||
<view class="text-muted">
|
||||
<block wx:if="{{subscription && subscription.status > 0}}">
|
||||
{{subscription.status === 1 ? '试用中' : '已订阅'}} · 剩余 {{subRemaining}} 天
|
||||
</block>
|
||||
<block wx:else>未订阅</block>
|
||||
</view>
|
||||
</view>
|
||||
<text class="arrow">❯</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card" wx:if="{{connected && subscription && subscription.status > 0}}">
|
||||
<view class="btn-primary text-center" bindtap="onStartTreatment">开始护理</view>
|
||||
<button class="btn-primary" bindtap="onStartTreatment">开始护理</button>
|
||||
<button class="btn-secondary" bindtap="onAddDevice">设备管理</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,23 +1,20 @@
|
||||
.device-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8rpx;
|
||||
.empty-device {
|
||||
text-align: center;
|
||||
padding: 120rpx 40rpx;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
font-size: 24rpx;
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.battery-area {
|
||||
.empty-text {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 28rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.sub-card:active {
|
||||
background-color: #f9f9f9;
|
||||
.btn-primary::after,
|
||||
.btn-secondary::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
<view class="login-page">
|
||||
<view class="logo-area">
|
||||
<view class="logo-circle">
|
||||
<text class="logo-text">H</text>
|
||||
</view>
|
||||
<text class="app-name">光子美容仪</text>
|
||||
<text class="app-desc">智能护肤 专业管理</text>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-pink">
|
||||
<view class="page-header-title">光子美容仪</view>
|
||||
<view class="page-header-subtitle">微信授权登录</view>
|
||||
</view>
|
||||
|
||||
<view class="btn-area">
|
||||
<button class="btn-wechat" loading="{{loading}}" bindtap="onLogin" disabled="{{loading}}">
|
||||
微信一键登录
|
||||
<view class="page-content">
|
||||
<view class="welcome-text">欢迎使用光子美容仪</view>
|
||||
|
||||
<view class="flower-area">
|
||||
<text class="flower">🌸</text>
|
||||
<view class="desc">获取你的手机号</view>
|
||||
<view class="desc">提供更好的服务</view>
|
||||
</view>
|
||||
|
||||
<button class="login-btn" loading="{{loading}}" bindtap="onLogin" disabled="{{loading}}">
|
||||
微信授权登录
|
||||
</button>
|
||||
<text class="agreement">登录即同意《用户协议》和《隐私政策》</text>
|
||||
|
||||
<view class="agreement">登录即表示同意《用户协议》和《隐私政策》</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,86 +1,54 @@
|
||||
.login-page {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 60rpx;
|
||||
padding-top: 200rpx;
|
||||
padding-bottom: calc(80rpx + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-circle {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 72rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
.welcome-text {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.btn-area {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 40rpx 60rpx calc(60rpx + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(180deg, rgba(245,245,245,0) 0%, #f5f5f5 30%);
|
||||
}
|
||||
|
||||
.btn-wechat {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #07c160;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.btn-wechat::after {
|
||||
.flower-area {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.flower {
|
||||
font-size: 140rpx;
|
||||
display: block;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #666666;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #E6508C;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 24rpx;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
{
|
||||
"navigationBarTitleText": "我的"
|
||||
"navigationBarTitleText": "我的",
|
||||
"navigationBarBackgroundColor": "#E6508C",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
|
||||
@@ -1,43 +1,51 @@
|
||||
<view class="container">
|
||||
<view class="card profile-header">
|
||||
<view class="avatar-area">
|
||||
<image wx:if="{{userInfo && userInfo.avatar}}" src="{{userInfo.avatar}}" class="avatar" />
|
||||
<view wx:else class="avatar-placeholder">{{(userInfo && userInfo.nickname ? userInfo.nickname[0] : '?')}}</view>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="nickname">{{userInfo && userInfo.nickname || '未设置昵称'}}</view>
|
||||
<view class="text-muted">ID: {{userInfo && userInfo.user_id || ''}}</view>
|
||||
</view>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-gradient">
|
||||
<view class="page-header-title">我的</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="menu-item" bindtap="onManageDevice">
|
||||
<text>设备管理</text>
|
||||
<view class="flex-row">
|
||||
<text class="text-muted">{{deviceCount}} 台设备</text>
|
||||
<text class="arrow-sm">❯</text>
|
||||
<view class="page-content">
|
||||
<view class="user-row">
|
||||
<view class="user-avatar">👤</view>
|
||||
<view class="user-info">
|
||||
<view class="user-name">{{userInfo.nickname || '未登录'}}</view>
|
||||
<view class="user-phone">{{userInfo.phone || ''}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="menu-item" bindtap="onViewSubscription">
|
||||
<text>订阅管理</text>
|
||||
<view class="flex-row">
|
||||
<text class="text-muted">
|
||||
{{subscription && subscription.status > 0 ? '剩余 ' + subRemaining + ' 天' : '未订阅'}}
|
||||
</text>
|
||||
<text class="arrow-sm">❯</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="menu-item" bindtap="onViewHistory">
|
||||
<text>护理记录</text>
|
||||
<text class="arrow-sm">❯</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="menu-item logout" bindtap="onLogout">
|
||||
<text>退出登录</text>
|
||||
<view class="sub-card" wx:if="{{subscription}}">
|
||||
<view class="sub-left">
|
||||
<view class="sub-name">✨ 智能模式</view>
|
||||
<view class="sub-remain">剩余 {{subRemaining}}天</view>
|
||||
</view>
|
||||
<text class="status-badge status-badge-gold">试用中</text>
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" bindtap="onManageDevice">
|
||||
<view class="menu-icon">📱</view>
|
||||
<view class="menu-text">我的设备</view>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="onViewHistory">
|
||||
<view class="menu-icon">📋</view>
|
||||
<view class="menu-text">护理记录</view>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="onViewSubscription">
|
||||
<view class="menu-icon">💳</view>
|
||||
<view class="menu-text">订阅管理</view>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="menu-icon">❓</view>
|
||||
<view class="menu-text">使用帮助</view>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="menu-icon">📞</view>
|
||||
<view class="menu-text">联系我们</view>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,60 +1,99 @@
|
||||
.profile-header {
|
||||
.user-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40rpx 32rpx;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx;
|
||||
background: linear-gradient(135deg, #E6508C 0%, #DCB982 100%);
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.avatar-area {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
.user-avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #333333;
|
||||
color: #ffffff;
|
||||
font-size: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 44rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
.user-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.user-phone {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.sub-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border: 2rpx solid #DCB982;
|
||||
}
|
||||
|
||||
.sub-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4rpx;
|
||||
.sub-name {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.sub-remain {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
font-size: 28rpx;
|
||||
padding: 24rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
opacity: 0.7;
|
||||
.menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.arrow-sm {
|
||||
font-size: 24rpx;
|
||||
color: #cccccc;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.logout {
|
||||
color: #ff4d4f;
|
||||
.menu-icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
background: #fdf2f8;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
color: #cccccc;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
@@ -52,5 +52,24 @@ Page({
|
||||
error: err.message || '绑定失败'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onManualInput: function () {
|
||||
var self = this
|
||||
wx.showModal({
|
||||
title: '手动输入设备号',
|
||||
editable: true,
|
||||
placeholderText: '请输入16位设备ID',
|
||||
success: function (res) {
|
||||
if (res.confirm && res.content) {
|
||||
var deviceId = res.content.trim()
|
||||
if (/^[0-9A-Fa-f]{16}$/.test(deviceId)) {
|
||||
self.bindDevice(deviceId)
|
||||
} else {
|
||||
wx.showToast({ title: '设备号格式不正确', icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "扫码绑定"
|
||||
}
|
||||
|
||||
+15
-24
@@ -1,29 +1,20 @@
|
||||
<view class="container">
|
||||
<view class="card text-center">
|
||||
<view class="section-title">绑定新设备</view>
|
||||
<view class="text-muted mb-30">请扫描设备底部或包装盒上的二维码</view>
|
||||
<view class="btn-primary" bindtap="onScan" disabled="{{scanning}}">
|
||||
{{scanning ? '扫描中...' : '扫描二维码'}}
|
||||
</view>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-pink">
|
||||
<view class="page-header-title">扫码绑定</view>
|
||||
<view class="page-header-subtitle">扫描设备底部二维码</view>
|
||||
</view>
|
||||
|
||||
<view class="card" wx:if="{{error}}">
|
||||
<text class="text-error">{{error}}</text>
|
||||
</view>
|
||||
<view class="page-content">
|
||||
<view class="scan-area">
|
||||
<text class="scan-icon">📷</text>
|
||||
<text class="scan-text">扫描设备二维码</text>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="section-title">绑定步骤</view>
|
||||
<view class="step">
|
||||
<text class="step-num">1</text>
|
||||
<text class="step-text">扫描设备二维码获取设备ID</text>
|
||||
</view>
|
||||
<view class="step">
|
||||
<text class="step-num">2</text>
|
||||
<text class="step-text">打开蓝牙连接设备</text>
|
||||
</view>
|
||||
<view class="step">
|
||||
<text class="step-num">3</text>
|
||||
<text class="step-text">绑定成功，开始使用</text>
|
||||
</view>
|
||||
<button class="btn-primary" bindtap="onScan" disabled="{{scanning}}">
|
||||
{{scanning ? '扫描中...' : '扫码'}}
|
||||
</button>
|
||||
<button class="btn-secondary" bindtap="onManualInput">手动输入设备号</button>
|
||||
|
||||
<view class="error-text" wx:if="{{error}}">{{error}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
+24
-15
@@ -1,23 +1,32 @@
|
||||
.step {
|
||||
.scan-area {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
margin: 40rpx auto;
|
||||
border: 6rpx dashed #E6508C;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
justify-content: center;
|
||||
color: #E6508C;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #333333;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
line-height: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
.scan-icon {
|
||||
font-size: 100rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
.scan-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
text-align: center;
|
||||
color: #ff4d4f;
|
||||
font-size: 26rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.btn-secondary::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -3,9 +3,8 @@ var http = require('../../utils/request')
|
||||
Page({
|
||||
data: {
|
||||
plans: [
|
||||
{ name: '月度套餐', plan: 'monthly', days: 30, price: '¥29.9', desc: '30天畅享' },
|
||||
{ name: '季度套餐', plan: 'quarterly', days: 90, price: '¥79.9', desc: '90天畅享' },
|
||||
{ name: '年度套餐', plan: 'yearly', days: 365, price: '¥269', desc: '365天畅享' }
|
||||
{ plan: 'monthly', price: '¥99', desc: '约3.3元/天' },
|
||||
{ plan: 'yearly', price: '¥899', desc: '省¥289' }
|
||||
],
|
||||
selected: null,
|
||||
purchasing: false
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "订阅套餐"
|
||||
}
|
||||
|
||||
@@ -1,15 +1,38 @@
|
||||
<view class="container">
|
||||
<view wx:for="{{plans}}" wx:key="plan"
|
||||
class="card plan-card {{selected === item.plan ? 'plan-active' : ''}}"
|
||||
bindtap="onSelect" data-plan="{{item.plan}}">
|
||||
<view class="plan-name">{{item.name}}</view>
|
||||
<view class="plan-price">{{item.price}}</view>
|
||||
<view class="plan-desc text-muted">{{item.desc}}</view>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-gold">
|
||||
<view class="page-header-title">订阅服务</view>
|
||||
<view class="page-header-subtitle">解锁智能模式</view>
|
||||
</view>
|
||||
|
||||
<view class="btn-area-fixed">
|
||||
<view class="btn-primary" bindtap="onPurchase" disabled="{{purchasing || !selected}}">
|
||||
{{purchasing ? '处理中...' : '立即订阅'}}
|
||||
<view class="page-content">
|
||||
<view class="page-title">选择订阅套餐</view>
|
||||
|
||||
<view class="service-card">
|
||||
<view class="service-icon">✨</view>
|
||||
<view class="service-info">
|
||||
<view class="service-name">智能模式</view>
|
||||
<view class="service-desc">根据皮肤状态自动调节</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="plans">
|
||||
<view class="plan {{selected === 'monthly' ? 'selected' : ''}}" bindtap="onSelect" data-plan="monthly">
|
||||
<view class="plan-price">¥99</view>
|
||||
<view class="plan-name">月卡</view>
|
||||
<view class="plan-save">约3.3元/天</view>
|
||||
</view>
|
||||
<view class="plan {{selected === 'yearly' ? 'selected' : ''}}" bindtap="onSelect" data-plan="yearly">
|
||||
<view class="plan-tag" wx:if="{{selected !== 'yearly'}}">推荐</view>
|
||||
<view class="plan-tag plan-tag-active" wx:else>推荐</view>
|
||||
<view class="plan-price">¥899</view>
|
||||
<view class="plan-name">年卡</view>
|
||||
<view class="plan-save">省¥289</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="btn-primary btn-primary-gold" bindtap="onPurchase" disabled="{{purchasing}}" loading="{{purchasing}}">
|
||||
确认支付
|
||||
</button>
|
||||
<view class="agreement">支付即表示同意《订阅协议》</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,27 +1,94 @@
|
||||
.plan-card {
|
||||
text-align: center;
|
||||
border: 2rpx solid #eeeeee;
|
||||
transition: border-color 0.2s;
|
||||
.service-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx;
|
||||
background: #fff9e6;
|
||||
border: 2rpx solid #DCB982;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.plan-active {
|
||||
border-color: #333333;
|
||||
background-color: #fafafa;
|
||||
.service-icon {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
background: #DCB982;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 36rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-size: 32rpx;
|
||||
.service-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.plans {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.plan {
|
||||
flex: 1;
|
||||
padding: 24rpx 16rpx;
|
||||
border: 4rpx solid #e5e5e5;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plan.selected {
|
||||
border-color: #E6508C;
|
||||
background: #fdf2f8;
|
||||
}
|
||||
|
||||
.plan-tag {
|
||||
position: absolute;
|
||||
right: -8rpx;
|
||||
top: -8rpx;
|
||||
background: #E6508C;
|
||||
color: #ffffff;
|
||||
font-size: 18rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.plan-price {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.plan-desc {
|
||||
font-size: 24rpx;
|
||||
.plan-name {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.plan-save {
|
||||
font-size: 20rpx;
|
||||
color: #52c41a;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.btn-primary-gold::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "订阅提示"
|
||||
}
|
||||
|
||||
@@ -1,9 +1,34 @@
|
||||
<view class="container">
|
||||
<view class="card text-center">
|
||||
<view class="lock-icon">🔒</view>
|
||||
<view class="section-title">需要订阅</view>
|
||||
<view class="text-muted mb-30">您的试用已到期，请订阅后继续使用</view>
|
||||
<view class="btn-primary mb-20" bindtap="onViewPlans">查看套餐</view>
|
||||
<view class="btn-secondary" bindtap="onBack">返回首页</view>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-pink">
|
||||
<view class="page-header-title">护理设置</view>
|
||||
<view class="page-header-subtitle">试用期已结束</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="page-title">选择护理模式</view>
|
||||
|
||||
<view class="mode-selector">
|
||||
<view class="mode-option active">
|
||||
<text class="mode-icon">🔄</text>
|
||||
<view class="mode-label">普通模式</view>
|
||||
<view class="mode-sub">6色循环</view>
|
||||
</view>
|
||||
<view class="mode-option locked">
|
||||
<text class="mode-icon">🔒</text>
|
||||
<view class="mode-label">智能模式</view>
|
||||
<view class="mode-sub">订阅解锁</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tip-card">
|
||||
<text class="tip-card-icon">⏰</text>
|
||||
<view class="tip-card-body">
|
||||
<view class="tip-card-title">试用已结束</view>
|
||||
<view class="tip-card-sub">订阅后继续使用智能模式</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="btn-primary btn-primary-gold" bindtap="onViewPlans">立即订阅</button>
|
||||
<button class="btn-secondary" bindtap="onBack">先使用普通模式</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,4 +1,48 @@
|
||||
.lock-icon {
|
||||
font-size: 80rpx;
|
||||
margin: 40rpx auto;
|
||||
.mode-selector {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.mode-option {
|
||||
flex: 1;
|
||||
padding: 24rpx 16rpx;
|
||||
border: 4rpx solid #e5e5e5;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mode-option.active {
|
||||
border-color: #E6508C;
|
||||
background: #fdf2f8;
|
||||
}
|
||||
|
||||
.mode-option.locked {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.mode-icon {
|
||||
font-size: 40rpx;
|
||||
display: block;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.mode-label {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.mode-option.locked .mode-label {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.mode-sub {
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.btn-primary-gold::after,
|
||||
.btn-secondary::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
Page({
|
||||
data: {},
|
||||
|
||||
onStartSmart: function () {
|
||||
wx.navigateTo({ url: '/pages/treatment-setup/treatment-setup' })
|
||||
},
|
||||
|
||||
onBackHome: function () {
|
||||
wx.switchTab({ url: '/pages/index/index' })
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "订阅成功"
|
||||
}
|
||||
|
||||
@@ -1,8 +1,24 @@
|
||||
<view class="container">
|
||||
<view class="card text-center">
|
||||
<view class="success-icon">✓</view>
|
||||
<view class="section-title">订阅成功</view>
|
||||
<view class="text-muted mb-30">您已成功订阅，现在可以开始使用</view>
|
||||
<view class="btn-primary" bindtap="onBackHome">返回首页</view>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-green">
|
||||
<view class="page-header-title">订阅成功</view>
|
||||
<view class="page-header-subtitle">欢迎使用智能模式</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="success-area">
|
||||
<view class="success-icon">✓</view>
|
||||
<view class="success-title">订阅成功！</view>
|
||||
</view>
|
||||
|
||||
<view class="sub-card">
|
||||
<view class="sub-header">
|
||||
<text class="sub-name">✨ 年卡会员</text>
|
||||
<text class="sub-status status-badge status-badge-green">已订阅</text>
|
||||
</view>
|
||||
<view class="sub-info">有效期至：2027年4月8日</view>
|
||||
</view>
|
||||
|
||||
<button class="btn-primary btn-primary-gold" bindtap="onStartSmart">立即体验智能模式</button>
|
||||
<button class="btn-secondary btn-secondary-gold" bindtap="onBackHome">返回首页</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,11 +1,35 @@
|
||||
.success-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #52c41a;
|
||||
color: #ffffff;
|
||||
font-size: 72rpx;
|
||||
line-height: 120rpx;
|
||||
.success-area {
|
||||
text-align: center;
|
||||
margin: 40rpx auto;
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
|
||||
.sub-card {
|
||||
background: #ffffff;
|
||||
border-radius: 28rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
border: 4rpx solid #DCB982;
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.sub-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.sub-info {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.btn-primary-gold::after,
|
||||
.btn-secondary-gold::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "护理中"
|
||||
}
|
||||
|
||||
@@ -1,33 +1,31 @@
|
||||
<view class="container treating-page">
|
||||
<view class="card text-center">
|
||||
<view class="progress-circle">
|
||||
<text class="progress-text">{{remainingText}}</text>
|
||||
</view>
|
||||
<view class="progress-bar-wrap mt-20">
|
||||
<progress percent="{{progress}}" stroke-width="8" activeColor="#333333" />
|
||||
</view>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-blue">
|
||||
<view class="page-header-title">护理中</view>
|
||||
<view class="page-header-subtitle">正在护理...</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="flex-between mb-20">
|
||||
<text>波长</text>
|
||||
<text class="text-muted">{{wavelength === 1 ? '红外 850nm' : wavelength === 2 ? '红光 630nm' : wavelength === 3 ? '紫光 405nm' : '黄光 590nm'}}</text>
|
||||
<view class="page-content">
|
||||
<view class="countdown-area">
|
||||
<text class="countdown-time">{{remainingText}}</text>
|
||||
<view class="countdown-label">剩余时间</view>
|
||||
</view>
|
||||
<view class="flex-between mb-20">
|
||||
<text>模式</text>
|
||||
<text class="text-muted">{{mode === 1 ? '智能模式' : '普通模式'}}</text>
|
||||
</view>
|
||||
<view class="flex-between mb-20">
|
||||
<text>电量</text>
|
||||
<text class="text-muted">{{battery}}%</text>
|
||||
</view>
|
||||
<view class="flex-between">
|
||||
<text>温度</text>
|
||||
<text class="text-muted">{{temperature}}°C</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="stop-btn-area">
|
||||
<view class="btn-stop" bindtap="onStop">结束护理</view>
|
||||
<view class="progress-bar">
|
||||
<view class="progress-fill" style="width: {{progress}}%;"></view>
|
||||
</view>
|
||||
|
||||
<view class="mode-tag-area">
|
||||
<text class="mode-tag">{{mode === 1 ? '✨ 智能模式' : '🔄 普通模式'}} · 全脸护理</text>
|
||||
</view>
|
||||
|
||||
<view class="relax-card">
|
||||
<text class="relax-icon">💆</text>
|
||||
<view class="relax-text">
|
||||
<text>请放松心情</text>
|
||||
<text>享受护理时光</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="btn-primary btn-primary-red" bindtap="onStop">停止护理</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,37 +1,73 @@
|
||||
.treating-page {
|
||||
.countdown-area {
|
||||
text-align: center;
|
||||
padding: 60rpx 0 32rpx;
|
||||
}
|
||||
|
||||
.countdown-time {
|
||||
font-size: 120rpx;
|
||||
font-weight: 700;
|
||||
color: #E6508C;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.countdown-label {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 16rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #E6508C, #DCB982);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.mode-tag-area {
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.mode-tag {
|
||||
display: inline-block;
|
||||
background: #f0f9ff;
|
||||
padding: 12rpx 28rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #006699;
|
||||
}
|
||||
|
||||
.relax-card {
|
||||
background: #f8f8f8;
|
||||
border-radius: 24rpx;
|
||||
padding: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.relax-icon {
|
||||
font-size: 72rpx;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.relax-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
border-radius: 50%;
|
||||
border: 12rpx solid #eeeeee;
|
||||
border-top-color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.stop-btn-area {
|
||||
margin-top: auto;
|
||||
padding: 20rpx 0 60rpx;
|
||||
}
|
||||
|
||||
.btn-stop {
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx 40rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
.btn-primary-red::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "护理完成"
|
||||
}
|
||||
|
||||
@@ -1,34 +1,29 @@
|
||||
<view class="container">
|
||||
<view class="card text-center">
|
||||
<view class="done-icon">✓</view>
|
||||
<view class="section-title">护理完成</view>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-green">
|
||||
<view class="page-header-title">护理完成</view>
|
||||
<view class="page-header-subtitle">本次护理已结束</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="flex-between mb-20">
|
||||
<text>护理时长</text>
|
||||
<text>{{durationText}}</text>
|
||||
</view>
|
||||
<view class="flex-between mb-20">
|
||||
<text>护理区域</text>
|
||||
<text class="text-muted">{{regionNames.join('、')}}</text>
|
||||
</view>
|
||||
<view class="flex-between">
|
||||
<text>平均光功率密度</text>
|
||||
<text>{{avgPd}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-content">
|
||||
<view class="result-icon">✓</view>
|
||||
<view class="result-title">护理完成！</view>
|
||||
|
||||
<view class="card text-center">
|
||||
<view wx:if="{{syncing}}" class="text-muted">
|
||||
<view class="spinner-sm"></view>
|
||||
<text>正在同步记录...</text>
|
||||
<view class="result-data">
|
||||
<view class="result-item">
|
||||
<view class="result-value">{{durationText}}</view>
|
||||
<view class="result-label">护理时长</view>
|
||||
</view>
|
||||
<view class="result-item">
|
||||
<view class="result-value">{{regionNames.length}}</view>
|
||||
<view class="result-label">护理区域</view>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:elif="{{synced}}" class="text-success">记录已同步</view>
|
||||
<view wx:else class="text-error">同步失败，可稍后在护理记录中重试</view>
|
||||
</view>
|
||||
|
||||
<view class="btn-area-fixed">
|
||||
<view class="btn-primary" bindtap="onBackHome">返回首页</view>
|
||||
<view class="result-tip">
|
||||
<text class="result-tip-icon">✨</text>
|
||||
<text class="result-tip-text">本次护理已记录</text>
|
||||
</view>
|
||||
|
||||
<button class="btn-primary" bindtap="onBackHome">返回首页</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,25 +1,69 @@
|
||||
.done-icon {
|
||||
.result-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: #52c41a;
|
||||
border-radius: 50%;
|
||||
background-color: #52c41a;
|
||||
margin: 24rpx auto 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 72rpx;
|
||||
line-height: 120rpx;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
text-align: center;
|
||||
margin: 40rpx auto;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.spinner-sm {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 4rpx solid #eeeeee;
|
||||
border-top-color: #333333;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin: 0 auto 12rpx;
|
||||
.result-data {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
.result-item {
|
||||
flex: 1;
|
||||
background: #f5f5f5;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #E6508C;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.result-tip {
|
||||
background: #f0f9ff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.result-tip-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.result-tip-text {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
margin-top: 6rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-primary::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -7,34 +7,30 @@ Page({
|
||||
{ name: '右脸颊', mask: 0x02, checked: true },
|
||||
{ name: '额头', mask: 0x04, checked: true },
|
||||
{ name: '下巴', mask: 0x08, checked: true },
|
||||
{ name: '鼻部', mask: 0x10, checked: true },
|
||||
{ name: '左眼周', mask: 0x20, checked: false },
|
||||
{ name: '右眼周', mask: 0x40, checked: false }
|
||||
],
|
||||
wavelengthOptions: [
|
||||
{ name: '红光 630nm', value: 2, desc: '抗衰修复' },
|
||||
{ name: '红外 850nm', value: 1, desc: '深层修复' },
|
||||
{ name: '紫光 405nm', value: 3, desc: '祛痘消炎' },
|
||||
{ name: '黄光 590nm', value: 4, desc: '提亮肤色' }
|
||||
],
|
||||
selectedWavelength: 2,
|
||||
brightness: 200,
|
||||
durationOptions: [
|
||||
{ label: '5分钟', value: 300000 },
|
||||
{ label: '10分钟', value: 600000 },
|
||||
{ label: '15分钟', value: 900000 },
|
||||
{ label: '20分钟', value: 1200000 }
|
||||
],
|
||||
selectedDuration: 600000,
|
||||
modeOptions: [
|
||||
{ name: '普通模式', value: 0 },
|
||||
{ name: '智能模式', value: 1 }
|
||||
{ name: '鼻唇', mask: 0x10, checked: true }
|
||||
],
|
||||
selectedMode: 0,
|
||||
subExpired: false,
|
||||
subDays: 6,
|
||||
submitting: false,
|
||||
error: ''
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
this.checkSubscription()
|
||||
},
|
||||
|
||||
checkSubscription: function () {
|
||||
var http = require('../../utils/request')
|
||||
var self = this
|
||||
http.get('/api/v1/subscription/status').then(function (sub) {
|
||||
self.setData({
|
||||
subExpired: sub.status !== 'active',
|
||||
subDays: sub.remaining_days || 0
|
||||
})
|
||||
}).catch(function () {})
|
||||
},
|
||||
|
||||
onToggleRegion: function (e) {
|
||||
var idx = e.currentTarget.dataset.idx
|
||||
var regions = this.data.regions
|
||||
@@ -42,27 +38,13 @@ Page({
|
||||
this.setData({ regions: regions })
|
||||
},
|
||||
|
||||
onSelectAll: function () {
|
||||
var regions = this.data.regions.map(function (r) {
|
||||
return Object.assign({}, r, { checked: true })
|
||||
})
|
||||
this.setData({ regions: regions })
|
||||
},
|
||||
|
||||
onSelectWavelength: function (e) {
|
||||
this.setData({ selectedWavelength: e.currentTarget.dataset.value })
|
||||
},
|
||||
|
||||
onBrightnessChange: function (e) {
|
||||
this.setData({ brightness: parseInt(e.detail.value) })
|
||||
},
|
||||
|
||||
onSelectDuration: function (e) {
|
||||
this.setData({ selectedDuration: e.currentTarget.dataset.value })
|
||||
},
|
||||
|
||||
onSelectMode: function (e) {
|
||||
this.setData({ selectedMode: e.currentTarget.dataset.value })
|
||||
var mode = parseInt(e.currentTarget.dataset.value)
|
||||
if (mode === 1 && this.data.subExpired) {
|
||||
wx.navigateTo({ url: '/pages/subscribe-prompt/subscribe-prompt' })
|
||||
return
|
||||
}
|
||||
this.setData({ selectedMode: mode })
|
||||
},
|
||||
|
||||
onStart: function () {
|
||||
@@ -81,9 +63,9 @@ Page({
|
||||
|
||||
ble.setParams({
|
||||
region_mask: mask,
|
||||
wavelength: self.data.selectedWavelength,
|
||||
brightness: self.data.brightness,
|
||||
duration_ms: self.data.selectedDuration,
|
||||
wavelength: 2,
|
||||
brightness: 200,
|
||||
duration_ms: 600000,
|
||||
mode: self.data.selectedMode
|
||||
}).then(function () {
|
||||
return ble.startTreatment(mask)
|
||||
@@ -91,8 +73,8 @@ Page({
|
||||
self.setData({ submitting: false })
|
||||
wx.redirectTo({
|
||||
url: '/pages/treating/treating?regions=' + mask +
|
||||
'&wavelength=' + self.data.selectedWavelength +
|
||||
'&duration=' + self.data.selectedDuration +
|
||||
'&wavelength=2' +
|
||||
'&duration=600000' +
|
||||
'&mode=' + self.data.selectedMode
|
||||
})
|
||||
}).catch(function (err) {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "护理设置"
|
||||
}
|
||||
|
||||
@@ -1,62 +1,40 @@
|
||||
<view class="container">
|
||||
<view class="card">
|
||||
<view class="section-title">护理区域</view>
|
||||
<view class="region-grid">
|
||||
<view wx:for="{{regions}}" wx:key="mask" class="region-item {{item.checked ? 'region-active' : ''}}"
|
||||
bindtap="onToggleRegion" data-idx="{{index}}">
|
||||
<text>{{item.name}}</text>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-pink">
|
||||
<view class="page-header-title">护理设置</view>
|
||||
<view class="page-header-subtitle">选择模式和区域</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="page-title">选择护理模式</view>
|
||||
|
||||
<view class="mode-selector">
|
||||
<view class="mode-option {{selectedMode === 0 ? 'active' : ''}}" bindtap="onSelectMode" data-value="0">
|
||||
<text class="mode-icon">🔄</text>
|
||||
<view class="mode-label">普通模式</view>
|
||||
<view class="mode-sub">6色循环</view>
|
||||
</view>
|
||||
<view class="mode-option {{selectedMode === 1 ? 'active' : ''}} {{subExpired ? 'locked' : ''}}" bindtap="onSelectMode" data-value="1">
|
||||
<text class="mode-icon">✨</text>
|
||||
<view class="mode-label">智能模式</view>
|
||||
<view class="mode-sub" wx:if="{{!subExpired}}">剩余{{subDays}}天</view>
|
||||
<view class="mode-sub" wx:else>订阅解锁</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-select-all mt-10" bindtap="onSelectAll">全选</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="section-title">波长选择</view>
|
||||
<view class="wavelength-list">
|
||||
<view wx:for="{{wavelengthOptions}}" wx:key="value"
|
||||
class="wavelength-item {{selectedWavelength === item.value ? 'wavelength-active' : ''}}"
|
||||
bindtap="onSelectWavelength" data-value="{{item.value}}">
|
||||
<text class="wavelength-name">{{item.name}}</text>
|
||||
<text class="wavelength-desc">{{item.desc}}</text>
|
||||
</view>
|
||||
<view class="page-title" style="font-size:28rpx;">选择护理区域</view>
|
||||
|
||||
<view class="face-map">
|
||||
<view class="face-region forehead {{regions[2].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="2">额头</view>
|
||||
<view class="face-region left-cheek {{regions[0].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="0">左脸</view>
|
||||
<view class="face-region right-cheek {{regions[1].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="1">右脸</view>
|
||||
<view class="face-region nose {{regions[4].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="4">鼻唇</view>
|
||||
<view class="face-region chin {{regions[3].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="3">下巴</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="section-title">亮度: {{brightness}}</view>
|
||||
<slider min="0" max="255" value="{{brightness}}" bindchange="onBrightnessChange"
|
||||
activeColor="#333333" block-size="20" />
|
||||
</view>
|
||||
<button class="btn-primary" bindtap="onStart" disabled="{{submitting}}" loading="{{submitting}}">
|
||||
开始护理
|
||||
</button>
|
||||
|
||||
<view class="card">
|
||||
<view class="section-title">护理时长</view>
|
||||
<view class="duration-list">
|
||||
<view wx:for="{{durationOptions}}" wx:key="value"
|
||||
class="duration-item {{selectedDuration === item.value ? 'duration-active' : ''}}"
|
||||
bindtap="onSelectDuration" data-value="{{item.value}}">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="section-title">护理模式</view>
|
||||
<view class="mode-list">
|
||||
<view wx:for="{{modeOptions}}" wx:key="value"
|
||||
class="mode-item {{selectedMode === item.value ? 'mode-active' : ''}}"
|
||||
bindtap="onSelectMode" data-value="{{item.value}}">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{error}}" class="card">
|
||||
<text class="text-error">{{error}}</text>
|
||||
</view>
|
||||
|
||||
<view class="btn-area-fixed">
|
||||
<view class="btn-primary" bindtap="onStart" disabled="{{submitting}}">
|
||||
{{submitting ? '启动中...' : '开始护理'}}
|
||||
</view>
|
||||
<view class="error-text" wx:if="{{error}}">{{error}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,98 +1,120 @@
|
||||
.region-grid {
|
||||
.mode-selector {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.region-item {
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 8rpx;
|
||||
background-color: #f0f0f0;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
.mode-option {
|
||||
flex: 1;
|
||||
padding: 28rpx 20rpx;
|
||||
border: 4rpx solid #e5e5e5;
|
||||
border-radius: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.region-active {
|
||||
background-color: #333333;
|
||||
color: #ffffff;
|
||||
.mode-option.active {
|
||||
border-color: #E6508C;
|
||||
background: #fdf2f8;
|
||||
}
|
||||
|
||||
.btn-select-all {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
text-align: right;
|
||||
.mode-option.locked {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.wavelength-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
.mode-icon {
|
||||
font-size: 48rpx;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.wavelength-item {
|
||||
padding: 20rpx;
|
||||
border: 2rpx solid #eeeeee;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wavelength-active {
|
||||
border-color: #333333;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.wavelength-name {
|
||||
.mode-label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.wavelength-desc {
|
||||
font-size: 24rpx;
|
||||
.mode-option.locked .mode-label {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.duration-list {
|
||||
.mode-sub {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.mode-option.active .mode-sub {
|
||||
color: #E6508C;
|
||||
}
|
||||
|
||||
.face-map {
|
||||
width: 240rpx;
|
||||
height: 280rpx;
|
||||
margin: 0 auto 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.face-region {
|
||||
position: absolute;
|
||||
border: 4rpx solid #e5e5e5;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.duration-item {
|
||||
flex: 1;
|
||||
padding: 16rpx;
|
||||
.face-region.active {
|
||||
border-color: #E6508C;
|
||||
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%;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
text-align: center;
|
||||
border: 2rpx solid #eeeeee;
|
||||
border-radius: 8rpx;
|
||||
color: #ff4d4f;
|
||||
font-size: 26rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.duration-active {
|
||||
border-color: #333333;
|
||||
background-color: #333333;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.mode-list {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.mode-item {
|
||||
flex: 1;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
border: 2rpx solid #eeeeee;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.mode-active {
|
||||
border-color: #333333;
|
||||
background-color: #333333;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-area-fixed {
|
||||
padding: 20rpx 0 40rpx;
|
||||
.btn-primary::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "确认佩戴"
|
||||
}
|
||||
|
||||
@@ -1,27 +1,43 @@
|
||||
<view class="container">
|
||||
<view class="card text-center">
|
||||
<view class="section-title">确认佩戴</view>
|
||||
<view class="page">
|
||||
<view class="page-header page-header-pink">
|
||||
<view class="page-header-title">确认佩戴</view>
|
||||
<view class="page-header-subtitle">请确保面罩贴合面部</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{checking}}" class="text-muted mb-30">
|
||||
<view class="loading-area">
|
||||
<view class="spinner-sm"></view>
|
||||
<text>正在检测佩戴状态...</text>
|
||||
</view>
|
||||
<view class="tip-area mt-20">
|
||||
<text class="text-muted">请将设备贴合面部，确保佩戴稳固</text>
|
||||
<view class="page-content">
|
||||
<view class="device-row">
|
||||
<view class="device-row-icon">💆</view>
|
||||
<view class="device-row-info">
|
||||
<view class="device-row-name">
|
||||
光子美容仪
|
||||
<text class="status-badge status-badge-green">已连接</text>
|
||||
</view>
|
||||
<view class="device-row-battery">电量 85%</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{result === 'ok'}}">
|
||||
<view class="success-mark">✓</view>
|
||||
<view class="text-success mb-30">佩戴确认成功</view>
|
||||
<view class="btn-primary" bindtap="onNext">设置护理参数</view>
|
||||
<view class="guide-card">
|
||||
<view class="guide-title">佩戴指引</view>
|
||||
<view class="guide-img">面罩佩戴示意图</view>
|
||||
<view class="guide-steps">
|
||||
<view class="guide-step">1. 取出面罩，展开弹性绑带</view>
|
||||
<view class="guide-step">2. 将面罩贴合面部</view>
|
||||
<view class="guide-step">3. 调节绑带至舒适位置</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{result === 'fail'}}">
|
||||
<view class="fail-mark">✗</view>
|
||||
<view class="text-error mb-20">{{error}}</view>
|
||||
<view class="btn-primary" bindtap="onRetry">重新检测</view>
|
||||
<button class="btn-primary" bindtap="checkWearing" disabled="{{checking}}" loading="{{checking}}">
|
||||
确认已佩戴
|
||||
</button>
|
||||
<button class="btn-secondary" bindtap="onRetry">重新连接</button>
|
||||
|
||||
<view class="check-result" wx:if="{{result === 'ok'}}">
|
||||
<text class="check-ok">✓ 佩戴确认成功</text>
|
||||
</view>
|
||||
<view class="check-result" wx:if="{{result === 'fail'}}">
|
||||
<text class="check-fail">{{error}}</text>
|
||||
</view>
|
||||
|
||||
<button wx:if="{{result === 'ok'}}" class="btn-primary mt-30" bindtap="onNext">设置护理参数</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,50 +1,97 @@
|
||||
.loading-area {
|
||||
.device-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40rpx 0;
|
||||
gap: 20rpx;
|
||||
background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);
|
||||
border: 4rpx solid #E6508C;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.spinner-sm {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border: 4rpx solid #eeeeee;
|
||||
border-top-color: #333333;
|
||||
.device-row-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #E6508C;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 36rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.device-row-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.device-row-name {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.device-row-battery {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.guide-card {
|
||||
background: #f8f8f8;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.guide-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.guide-img {
|
||||
width: 100%;
|
||||
height: 140rpx;
|
||||
background: #e8e8e8;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
.guide-steps {
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
|
||||
.success-mark {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #52c41a;
|
||||
color: #ffffff;
|
||||
font-size: 48rpx;
|
||||
line-height: 80rpx;
|
||||
.guide-step {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.check-result {
|
||||
text-align: center;
|
||||
margin: 20rpx auto;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.fail-mark {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
font-size: 48rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin: 20rpx auto;
|
||||
.check-ok {
|
||||
color: #52c41a;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.tip-area {
|
||||
padding: 20rpx;
|
||||
background-color: #fffbe6;
|
||||
border-radius: 8rpx;
|
||||
.check-fail {
|
||||
color: #ff4d4f;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.btn-primary::after,
|
||||
.btn-secondary::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户