yuchunlei/bodyWeight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(userManagement): 用户管理新增空态与同步进度弹框组件

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
17792275749
2026-08-19 15:58:28 +08:00
co-authored by Claude Opus 4.7
parent 9040fc4fba
commit 3e0d260fdc
8 changed files with 443 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/components/userManagementSync/userManagementSync.json
+4
View File
@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}
miniprogram/components/userManagementSync/userManagementSync.less
+63
View File
@@ -0,0 +1,63 @@
.sync-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(37, 37, 53, 0.6);
z-index: 100;
}
.sync-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 560rpx;
box-sizing: border-box;
background-color: #FFFFFF;
border-radius: 24rpx;
z-index: 101;
display: flex;
flex-direction: column;
align-items: center;
padding: 64rpx 48rpx;
.sync-title {
color: #252535;
height: 32rpx;
font-size: 32rpx;
line-height: 32rpx;
}
.sync-status {
color: #808080;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
margin-top: 24rpx;
}
.sync-percent {
color: #77849E;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
margin-top: 48rpx;
}
.sync-progress {
width: 464rpx;
height: 10rpx;
border-radius: 6rpx;
background-color: #D9D9D9;
margin-top: 16rpx;
overflow: hidden;
.sync-progress-inner {
height: 10rpx;
border-radius: 6rpx;
background-color: #1385FA;
}
}
}
miniprogram/components/userManagementSync/userManagementSync.ts
+19
View File
@@ -0,0 +1,19 @@
Component({
properties: {
/** 是否显示弹框 */
show: {
type: Boolean,
value: false
},
/** 同步进度百分比 */
percent: {
type: Number,
value: 0
},
/** 同步状态文案 */
status: {
type: String,
value: ''
}
}
})
miniprogram/components/userManagementSync/userManagementSync.wxml
+11
View File
@@ -0,0 +1,11 @@
<block wx:if="{{ show }}">
<view class="sync-mask"></view>
<view class="sync-panel">
<view class="sync-title">同步成员至设备</view>
<view class="sync-status">{{ status }}</view>
<view class="sync-percent">{{ percent }}%</view>
<view class="sync-progress">
<view class="sync-progress-inner" style="width: {{ percent }}%;"></view>
</view>
</view>
</block>
miniprogram/pages/userManagement/userManagement.json
+3 -1
View File
@@ -1,5 +1,7 @@
{
"usingComponents": {},
"usingComponents": {
"user-management-sync": "/components/userManagementSync/userManagementSync"
},
"navigationBarTitleText": "用户管理",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFFFFF"
miniprogram/pages/userManagement/userManagement.less
+90 -95
View File
@@ -1,19 +1,25 @@
.userManagement {
width: 100%;
min-height: 100%;
padding: 24rpx 30rpx;
height: 100%;
display: flex;
flex-direction: column;
/* 顶部固定区 */
.header {
width: 100%;
padding: 24rpx 30rpx 0;
box-sizing: border-box;
margin-bottom: 24rpx;
/* 设备卡片 */
.device-card {
width: 100%;
padding: 30rpx;
display: flex;
flex-wrap: nowrap;
padding: 32rpx;
border-radius: 24rpx;
background-color: #FFFFFF;
box-sizing: border-box;
margin-bottom: 32rpx;
margin-bottom: 24rpx;
display: flex;
align-items: center;
.device-icon {
width: 88rpx;
@@ -22,6 +28,7 @@
margin-right: 24rpx;
border-radius: 24rpx;
background-color: #1385FA;
flex-shrink: 0;
}
.device-info {
@@ -29,35 +36,29 @@
.device-name-row {
width: 100%;
height: 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14rpx;
margin-bottom: 16rpx;
.device-name {
color: #252535;
height: 40rpx;
height: 32rpx;
font-size: 32rpx;
font-weight: bolder;
line-height: 40rpx;
line-height: 32rpx;
}
.device-status {
height: 40rpx;
padding: 0 16rpx;
height: 22rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
border-radius: 20rpx;
background-color: #EAFAF6;
.status-dot {
width: 12rpx;
height: 12rpx;
margin-right: 8rpx;
border-radius: 50%;
background-color: #2AC79F;
margin-right: 8rpx;
}
.status-text {
@@ -74,14 +75,13 @@
height: 26rpx;
font-size: 26rpx;
line-height: 26rpx;
margin-bottom: 8rpx;
}
}
}
/* 已录入用户 + 同步按钮 */
.section-header {
width: 100%;
height: 48rpx;
display: flex;
align-items: center;
justify-content: space-between;
@@ -91,30 +91,62 @@
color: #252535;
height: 32rpx;
font-size: 32rpx;
font-weight: bolder;
line-height: 32rpx;
}
.sync-btn {
color: #FFFFFF;
height: 48rpx;
font-size: 24rpx;
padding: 0 16rpx;
line-height: 48rpx;
border-radius: 8rpx;
padding: 0 20rpx;
border-radius: 24rpx;
background-color: #1385FA;
color: #FFFFFF;
font-size: 24rpx;
line-height: 48rpx;
}
}
/* 同步提示 */
.sync-tip {
color: #F2994A;
font-size: 24rpx;
line-height: 34rpx;
margin-bottom: 24rpx;
}
}
/* 用户卡片 */
/* 用户列表滚动区 */
.body {
flex: 1;
overflow: hidden;
.empty-state {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.empty-img {
width: 193rpx;
height: 138rpx;
}
.empty-text {
color: #B6B6B6;
font-size: 28rpx;
line-height: 42rpx;
text-align: center;
margin-top: 32rpx;
white-space: pre-line;
}
}
.scrollViewContent {
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
.member-card {
width: 100%;
padding: 32rpx;
@@ -231,82 +263,45 @@
}
}
}
/* 底部添加用户按钮 */
.add-btn {
width: 100%;
height: 96rpx;
border-radius: 48rpx;
background-color: #1385FA;
color: #FFFFFF;
font-size: 36rpx;
line-height: 96rpx;
text-align: center;
margin-top: 8rpx;
}
}
/* 同步进度弹框 */
.sync-mask {
position: fixed;
top: 0;
left: 0;
/* 底部常驻添加用户按钮 */
.footer {
width: 100%;
height: 100%;
background-color: rgba(37, 37, 53, 0.6);
z-index: 100;
}
.sync-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 560rpx;
height: 120rpx;
padding: 0 30rpx;
display: flex;
gap: 15rpx;
flex-wrap: nowrap;
align-items: center;
box-sizing: border-box;
background-color: #FFFFFF;
border-radius: 24rpx;
z-index: 101;
display: flex;
flex-direction: column;
align-items: center;
padding: 64rpx 48rpx;
box-shadow: 0 2rpx 8rpx 0 rgba(19, 133, 250, 0.06);
.sync-title {
color: #252535;
height: 32rpx;
.btn-cancel {
color: #1385FA;
flex: 1;
height: 88rpx;
font-size: 32rpx;
line-height: 32rpx;
text-align: center;
line-height: 84rpx;
border-radius: 44rpx;
box-sizing: border-box;
border: 2rpx solid #1385FA;
background-color: #FFFFFF;
}
.sync-status {
color: #808080;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
margin-top: 24rpx;
}
.sync-percent {
color: #77849E;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
margin-top: 48rpx;
}
.sync-progress {
width: 464rpx;
height: 10rpx;
border-radius: 6rpx;
background-color: #D9D9D9;
margin-top: 16rpx;
overflow: hidden;
.sync-progress-inner {
height: 10rpx;
border-radius: 6rpx;
.btn-primary {
color: #FFFFFF;
flex: 1;
height: 88rpx;
font-size: 32rpx;
font-weight: bold;
text-align: center;
line-height: 88rpx;
border-radius: 44rpx;
background-color: #1385FA;
}
}
}
}
miniprogram/pages/userManagement/userManagement.ts
+10
View File
@@ -31,5 +31,15 @@ Page({
/** 添加用户 */
onTapAddUser() {
wx.navigateTo({ url: '/pages/addUser/addUser' })
},
/** 一键添加本人 */
onTapAddSelf() {
// 一键添加本人（待接入）
},
/** 添加新用户 */
onTapAddNew() {
wx.navigateTo({ url: '/pages/addUser/addUser' })
}
})
miniprogram/pages/userManagement/userManagement.wxml
+23 -15
View File
@@ -1,4 +1,6 @@
<view class="userManagement">
<!-- 顶部固定区 -->
<view class="header">
<!-- 设备卡片 -->
<view class="device-card">
<view class="device-icon"></view>
@@ -10,7 +12,7 @@
<view class="status-text">{{ device.connected ? '已连接' : '未连接' }}</view>
</view>
</view>
<view class="device-meta" style="margin-bottom: 20rpx;">型号：{{ device.model }}</view>
<view class="device-meta">型号：{{ device.model }}</view>
<view class="device-meta">设备编号：{{ device.serial }}</view>
</view>
</view>
@@ -23,8 +25,12 @@
<!-- 同步提示 -->
<view class="sync-tip">当前用户信息未同步至设备，请在连接设备的状态下，点击同步按钮完成信息同步</view>
</view>
<!-- 用户列表 -->
<!-- 用户列表滚动区 -->
<view class="body">
<scroll-view scroll-y class="scrollView" wx:if="{{ members.length }}">
<view class="scrollViewContent">
<block wx:for="{{ members }}" wx:key="id">
<view class="member-card">
<view class="member-avatar {{ item.gender === '女' ? 'member-avatar--female' : 'member-avatar--male' }}"></view>
@@ -44,20 +50,22 @@
</view>
</view>
</block>
</view>
</scroll-view>
<view class="empty-state" wx:else>
<image class="empty-img" src="/images/emptyData.png" mode="aspectFit" />
<view class="empty-text">暂无用户\n请添加用户以使用设备测量</view>
</view>
</view>
<!-- 底部添加用户按钮 -->
<view class="add-btn" bind:tap="onTapAddUser">添加用户（最多10位）</view>
<!-- 底部常驻添加用户按钮 -->
<view class="footer">
<view class="btn-primary" bind:tap="onTapAddUser">添加用户（最多10位）</view>
<!-- <view class="btn-primary" bind:tap="onTapAddSelf">一键添加本人</view>-->
<!-- <view class="btn-cancel" bind:tap="onTapAddNew">添加新用户</view>-->
</view>
<!-- 同步进度弹框 -->
<block wx:if="{{ syncShow }}">
<view class="sync-mask"></view>
<view class="sync-panel">
<view class="sync-title">同步成员至设备</view>
<view class="sync-status">{{ syncStatus }}</view>
<view class="sync-percent">{{ syncPercent }}%</view>
<view class="sync-progress">
<view class="sync-progress-inner" style="width: {{ syncPercent }}%;"></view>
</view>
</view>
</block>
<user-management-sync show="{{ syncShow }}" percent="{{ syncPercent }}" status="{{ syncStatus }}" />
</view>