From 3e0d260fdc452caab95be955a1cfe3d185cb4f4c Mon Sep 17 00:00:00 2001 From: 17792275749 <812100002@qq.com> Date: Wed, 19 Aug 2026 15:58:28 +0800 Subject: [PATCH] =?UTF-8?q?feat(userManagement):=20=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=96=B0=E5=A2=9E=E7=A9=BA=E6=80=81=E4=B8=8E?= =?UTF-8?q?=E5=90=8C=E6=AD=A5=E8=BF=9B=E5=BA=A6=E5=BC=B9=E6=A1=86=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.7 --- .../userManagementSync.json | 4 + .../userManagementSync.less | 63 ++ .../userManagementSync/userManagementSync.ts | 19 + .../userManagementSync.wxml | 11 + .../pages/userManagement/userManagement.json | 4 +- .../pages/userManagement/userManagement.less | 547 +++++++++--------- .../pages/userManagement/userManagement.ts | 10 + .../pages/userManagement/userManagement.wxml | 116 ++-- 8 files changed, 443 insertions(+), 331 deletions(-) create mode 100644 miniprogram/components/userManagementSync/userManagementSync.json create mode 100644 miniprogram/components/userManagementSync/userManagementSync.less create mode 100644 miniprogram/components/userManagementSync/userManagementSync.ts create mode 100644 miniprogram/components/userManagementSync/userManagementSync.wxml diff --git a/miniprogram/components/userManagementSync/userManagementSync.json b/miniprogram/components/userManagementSync/userManagementSync.json new file mode 100644 index 0000000..59a1db6 --- /dev/null +++ b/miniprogram/components/userManagementSync/userManagementSync.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} diff --git a/miniprogram/components/userManagementSync/userManagementSync.less b/miniprogram/components/userManagementSync/userManagementSync.less new file mode 100644 index 0000000..44ff623 --- /dev/null +++ b/miniprogram/components/userManagementSync/userManagementSync.less @@ -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; + } + } +} diff --git a/miniprogram/components/userManagementSync/userManagementSync.ts b/miniprogram/components/userManagementSync/userManagementSync.ts new file mode 100644 index 0000000..ceab7f6 --- /dev/null +++ b/miniprogram/components/userManagementSync/userManagementSync.ts @@ -0,0 +1,19 @@ +Component({ + properties: { + /** 是否显示弹框 */ + show: { + type: Boolean, + value: false + }, + /** 同步进度百分比 */ + percent: { + type: Number, + value: 0 + }, + /** 同步状态文案 */ + status: { + type: String, + value: '' + } + } +}) diff --git a/miniprogram/components/userManagementSync/userManagementSync.wxml b/miniprogram/components/userManagementSync/userManagementSync.wxml new file mode 100644 index 0000000..21b89f3 --- /dev/null +++ b/miniprogram/components/userManagementSync/userManagementSync.wxml @@ -0,0 +1,11 @@ + + + + 同步成员至设备 + {{ status }} + {{ percent }}% + + + + + diff --git a/miniprogram/pages/userManagement/userManagement.json b/miniprogram/pages/userManagement/userManagement.json index cbd4601..41f72a5 100644 --- a/miniprogram/pages/userManagement/userManagement.json +++ b/miniprogram/pages/userManagement/userManagement.json @@ -1,5 +1,7 @@ { - "usingComponents": {}, + "usingComponents": { + "user-management-sync": "/components/userManagementSync/userManagementSync" + }, "navigationBarTitleText": "用户管理", "navigationBarTextStyle": "black", "navigationBarBackgroundColor": "#FFFFFF" diff --git a/miniprogram/pages/userManagement/userManagement.less b/miniprogram/pages/userManagement/userManagement.less index b260d96..810fe03 100644 --- a/miniprogram/pages/userManagement/userManagement.less +++ b/miniprogram/pages/userManagement/userManagement.less @@ -1,312 +1,307 @@ .userManagement { width: 100%; - min-height: 100%; - padding: 24rpx 30rpx; - box-sizing: border-box; + height: 100%; + display: flex; + flex-direction: column; - /* 设备卡片 */ - .device-card { + /* 顶部固定区 */ + .header { width: 100%; - padding: 30rpx; - display: flex; - flex-wrap: nowrap; - border-radius: 24rpx; - background-color: #FFFFFF; + padding: 24rpx 30rpx 0; box-sizing: border-box; - margin-bottom: 32rpx; + margin-bottom: 24rpx; - .device-icon { - width: 88rpx; - height: 88rpx; - overflow: hidden; - margin-right: 24rpx; + .device-card { + width: 100%; + padding: 32rpx; border-radius: 24rpx; - background-color: #1385FA; - } + background-color: #FFFFFF; + box-sizing: border-box; + margin-bottom: 24rpx; + display: flex; + align-items: center; - .device-info { - flex: 1; + .device-icon { + width: 88rpx; + height: 88rpx; + overflow: hidden; + margin-right: 24rpx; + border-radius: 24rpx; + background-color: #1385FA; + flex-shrink: 0; + } - .device-name-row { - width: 100%; - height: 40rpx; - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 14rpx; + .device-info { + flex: 1; - .device-name { - color: #252535; - height: 40rpx; - font-size: 32rpx; - font-weight: bolder; - line-height: 40rpx; - } - - .device-status { - height: 40rpx; - padding: 0 16rpx; + .device-name-row { + width: 100%; display: flex; - flex-wrap: nowrap; align-items: center; - border-radius: 20rpx; - background-color: #EAFAF6; + justify-content: space-between; + margin-bottom: 16rpx; - .status-dot { - width: 12rpx; - height: 12rpx; - margin-right: 8rpx; - border-radius: 50%; - background-color: #2AC79F; + .device-name { + color: #252535; + height: 32rpx; + font-size: 32rpx; + line-height: 32rpx; } - .status-text { - color: #2AC79F; + .device-status { + height: 22rpx; + display: flex; + align-items: center; + + .status-dot { + width: 12rpx; + height: 12rpx; + border-radius: 50%; + background-color: #2AC79F; + margin-right: 8rpx; + } + + .status-text { + color: #2AC79F; + height: 22rpx; + font-size: 22rpx; + line-height: 22rpx; + } + } + } + + .device-meta { + color: #808080; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + margin-bottom: 8rpx; + } + } + } + + .section-header { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16rpx; + + .section-title { + color: #252535; + height: 32rpx; + font-size: 32rpx; + line-height: 32rpx; + } + + .sync-btn { + height: 48rpx; + 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; + } + } + + /* 用户列表滚动区 */ + .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; + border-radius: 24rpx; + background-color: #FFFFFF; + box-sizing: border-box; + margin-bottom: 24rpx; + display: flex; + align-items: center; + + .member-avatar { + width: 88rpx; + height: 88rpx; + border-radius: 24rpx; + margin-right: 24rpx; + flex-shrink: 0; + } + + .member-avatar--male { + background-color: #C6E6FF; + } + + .member-avatar--female { + background-color: #FFD5E3; + } + + .member-info { + flex: 1; + + .member-name-row { + display: flex; + align-items: center; + margin-bottom: 16rpx; + + .member-name { + color: #252535; + height: 32rpx; + font-size: 32rpx; + line-height: 32rpx; + margin-right: 16rpx; + } + + .member-type-tag { + height: 40rpx; + padding: 0 10rpx; + font-size: 24rpx; + line-height: 40rpx; + border-radius: 8rpx; + color: #FFFFFF; + } + + .member-type-tag--self { + background-color: #1385FA; + } + + .member-type-tag--employee { + background-color: #10B981; + } + + .member-type-tag--family { + background-color: #F59E0B; + } + } + + .member-sub { + color: #808080; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + } + } + + .member-right { + display: flex; + flex-direction: column; + align-items: flex-end; + + .member-sync { height: 22rpx; font-size: 22rpx; line-height: 22rpx; + margin-bottom: 16rpx; + } + + .member-sync--done { + color: #2AC79F; + } + + .member-sync--pending { + color: #F2994A; + } + + .member-sync--deleted { + color: #F24439; + } + + .member-ops { + display: flex; + + .op-edit { + color: #77849E; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + margin-right: 24rpx; + } + + .op-delete { + color: #F24439; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + } } } } - - .device-meta { - color: #808080; - height: 26rpx; - font-size: 26rpx; - line-height: 26rpx; - } } } - /* 已录入用户 + 同步按钮 */ - .section-header { + /* 底部常驻添加用户按钮 */ + .footer { width: 100%; - height: 48rpx; + height: 120rpx; + padding: 0 30rpx; display: flex; + gap: 15rpx; + flex-wrap: nowrap; align-items: center; - justify-content: space-between; - margin-bottom: 16rpx; + box-sizing: border-box; + background-color: #FFFFFF; + box-shadow: 0 2rpx 8rpx 0 rgba(19, 133, 250, 0.06); - .section-title { - color: #252535; - height: 32rpx; + .btn-cancel { + color: #1385FA; + flex: 1; + height: 88rpx; font-size: 32rpx; - font-weight: bolder; - line-height: 32rpx; + text-align: center; + line-height: 84rpx; + border-radius: 44rpx; + box-sizing: border-box; + border: 2rpx solid #1385FA; + background-color: #FFFFFF; } - .sync-btn { + .btn-primary { color: #FFFFFF; - height: 48rpx; - font-size: 24rpx; - padding: 0 16rpx; - line-height: 48rpx; - border-radius: 8rpx; + flex: 1; + height: 88rpx; + font-size: 32rpx; + font-weight: bold; + text-align: center; + line-height: 88rpx; + border-radius: 44rpx; background-color: #1385FA; } } - - /* 同步提示 */ - .sync-tip { - color: #F2994A; - font-size: 24rpx; - line-height: 34rpx; - margin-bottom: 24rpx; - } - - /* 用户卡片 */ - .member-card { - width: 100%; - padding: 32rpx; - border-radius: 24rpx; - background-color: #FFFFFF; - box-sizing: border-box; - margin-bottom: 24rpx; - display: flex; - align-items: center; - - .member-avatar { - width: 88rpx; - height: 88rpx; - border-radius: 24rpx; - margin-right: 24rpx; - flex-shrink: 0; - } - - .member-avatar--male { - background-color: #C6E6FF; - } - - .member-avatar--female { - background-color: #FFD5E3; - } - - .member-info { - flex: 1; - - .member-name-row { - display: flex; - align-items: center; - margin-bottom: 16rpx; - - .member-name { - color: #252535; - height: 32rpx; - font-size: 32rpx; - line-height: 32rpx; - margin-right: 16rpx; - } - - .member-type-tag { - height: 40rpx; - padding: 0 10rpx; - font-size: 24rpx; - line-height: 40rpx; - border-radius: 8rpx; - color: #FFFFFF; - } - - .member-type-tag--self { - background-color: #1385FA; - } - - .member-type-tag--employee { - background-color: #10B981; - } - - .member-type-tag--family { - background-color: #F59E0B; - } - } - - .member-sub { - color: #808080; - height: 26rpx; - font-size: 26rpx; - line-height: 26rpx; - } - } - - .member-right { - display: flex; - flex-direction: column; - align-items: flex-end; - - .member-sync { - height: 22rpx; - font-size: 22rpx; - line-height: 22rpx; - margin-bottom: 16rpx; - } - - .member-sync--done { - color: #2AC79F; - } - - .member-sync--pending { - color: #F2994A; - } - - .member-sync--deleted { - color: #F24439; - } - - .member-ops { - display: flex; - - .op-edit { - color: #77849E; - height: 26rpx; - font-size: 26rpx; - line-height: 26rpx; - margin-right: 24rpx; - } - - .op-delete { - color: #F24439; - height: 26rpx; - font-size: 26rpx; - line-height: 26rpx; - } - } - } - } - - /* 底部添加用户按钮 */ - .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; - 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; - } - } - } } diff --git a/miniprogram/pages/userManagement/userManagement.ts b/miniprogram/pages/userManagement/userManagement.ts index a8ec683..3f89b7e 100644 --- a/miniprogram/pages/userManagement/userManagement.ts +++ b/miniprogram/pages/userManagement/userManagement.ts @@ -31,5 +31,15 @@ Page({ /** 添加用户 */ onTapAddUser() { wx.navigateTo({ url: '/pages/addUser/addUser' }) + }, + + /** 一键添加本人 */ + onTapAddSelf() { + // 一键添加本人（待接入） + }, + + /** 添加新用户 */ + onTapAddNew() { + wx.navigateTo({ url: '/pages/addUser/addUser' }) } }) diff --git a/miniprogram/pages/userManagement/userManagement.wxml b/miniprogram/pages/userManagement/userManagement.wxml index 6b1412c..e68bac8 100644 --- a/miniprogram/pages/userManagement/userManagement.wxml +++ b/miniprogram/pages/userManagement/userManagement.wxml @@ -1,63 +1,71 @@ - - - - - - - {{ device.name }} - - - {{ device.connected ? '已连接' : '未连接' }} + + + + + + + + + {{ device.name }} + + + {{ device.connected ? '已连接' : '未连接' }} + + 型号：{{ device.model }} + 设备编号：{{ device.serial }} - 型号：{{ device.model }} - 设备编号：{{ device.serial }} + + + + + 已录入用户（{{ memberCount }}/10） + 同步用户至设备 + + + + 当前用户信息未同步至设备，请在连接设备的状态下，点击同步按钮完成信息同步 + + + + + + + + + + + + {{ item.name }} + {{ item.type }} + + {{ item.gender }}·{{ item.age }}岁 丨 {{ item.height }}cm + + + {{ item.sync }} + + 编辑 + 删除 + + + + + + + + + 暂无用户\n请添加用户以使用设备测量 - - - 已录入用户（{{ memberCount }}/10） - 同步用户至设备 + + + + 添加用户（最多10位） + + - - 当前用户信息未同步至设备，请在连接设备的状态下，点击同步按钮完成信息同步 - - - - - - - - {{ item.name }} - {{ item.type }} - - {{ item.gender }}·{{ item.age }}岁 丨 {{ item.height }}cm - - - {{ item.sync }} - - 编辑 - 删除 - - - - - - - 添加用户（最多10位） - - - - - 同步成员至设备 - {{ syncStatus }} - {{ syncPercent }}% - - - - - +