From 48ac39f0e000dbd895d42f8f4a0d66de5cf1e38e Mon Sep 17 00:00:00 2001 From: 17792275749 <812100002@qq.com> Date: Wed, 19 Aug 2026 16:33:48 +0800 Subject: [PATCH] =?UTF-8?q?feat(userManagement):=20=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=8C=89=E6=9C=AC=E4=BA=BA/=E5=91=98?= =?UTF-8?q?=E5=B7=A5/=E5=AE=B6=E5=BA=AD=E7=94=A8=E6=88=B7=E5=88=86?= =?UTF-8?q?=E7=BB=84=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.7 --- .../pages/userManagement/userManagement.less | 260 +++++++++++------- .../pages/userManagement/userManagement.ts | 32 ++- .../pages/userManagement/userManagement.wxml | 51 +++- 3 files changed, 218 insertions(+), 125 deletions(-) diff --git a/miniprogram/pages/userManagement/userManagement.less b/miniprogram/pages/userManagement/userManagement.less index 810fe03..cdbb72a 100644 --- a/miniprogram/pages/userManagement/userManagement.less +++ b/miniprogram/pages/userManagement/userManagement.less @@ -13,13 +13,12 @@ .device-card { width: 100%; - padding: 32rpx; + padding: 30rpx; + display: flex; border-radius: 24rpx; background-color: #FFFFFF; box-sizing: border-box; margin-bottom: 24rpx; - display: flex; - align-items: center; .device-icon { width: 88rpx; @@ -28,7 +27,6 @@ margin-right: 24rpx; border-radius: 24rpx; background-color: #1385FA; - flex-shrink: 0; } .device-info { @@ -36,6 +34,7 @@ .device-name-row { width: 100%; + height: 40rpx; display: flex; align-items: center; justify-content: space-between; @@ -45,13 +44,17 @@ color: #252535; height: 32rpx; font-size: 32rpx; + font-weight: bolder; line-height: 32rpx; } .device-status { - height: 22rpx; + height: 40rpx; display: flex; + padding: 0 16rpx; + border-radius: 20rpx; align-items: center; + background-color: #EAFAF6; .status-dot { width: 12rpx; @@ -75,13 +78,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,17 +94,18 @@ color: #252535; height: 32rpx; font-size: 32rpx; + font-weight: bolder; line-height: 32rpx; } .sync-btn { - height: 48rpx; - padding: 0 20rpx; - border-radius: 24rpx; - background-color: #1385FA; color: #FFFFFF; + height: 48rpx; font-size: 24rpx; line-height: 48rpx; + padding: 0 20rpx; + border-radius: 8rpx; + background-color: #1385FA; } } @@ -142,124 +146,166 @@ .scrollViewContent { width: 100%; - padding: 0 30rpx; + padding: 0 30rpx 30rpx; box-sizing: border-box; - + .group-title { + color: #252535; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + margin-bottom: 24rpx; + } .member-card { width: 100%; - padding: 32rpx; + padding: 30rpx; 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 { + .member-top { + width: 100%; display: flex; - flex-direction: column; - align-items: flex-end; + align-items: center; + + .member-avatar { + width: 88rpx; + height: 88rpx; + overflow: hidden; + border-radius: 24rpx; + margin-right: 24rpx; + + &.member-avatar--male { + background-color: #C6E6FF; + } + + &.member-avatar--female { + background-color: #FFD5E3; + } + } + + .member-info { + width: 0; + flex: 1; + + .member-name-row { + width: 100%; + height: 36rpx; + display: flex; + flex-wrap: nowrap; + align-items: center; + margin-bottom: 14rpx; + + .member-name { + color: #252535; + height: 36rpx; + font-size: 32rpx; + font-weight: bolder; + line-height: 36rpx; + margin-right: 16rpx; + + text { + color: #808080; + font-weight: normal; + font-size: 24rpx; + } + } + + .member-type-tag { + color: #FFFFFF; + height: 36rpx; + padding: 0 10rpx; + font-size: 24rpx; + line-height: 36rpx; + border-radius: 8rpx; + } + + .member-type-tag--self { + background-color: #1385FA; + } + } + + > .member-name { + color: #252535; + height: 40rpx; + font-size: 32rpx; + font-weight: bolder; + line-height: 40rpx; + margin-bottom: 10rpx; + } + + .member-sub { + color: #808080; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + } + } .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; + align-items: center; - .op-edit { - color: #77849E; - height: 26rpx; - font-size: 26rpx; - line-height: 26rpx; - margin-right: 24rpx; + > view:nth-of-type(1) { + width: 12rpx; + height: 12rpx; + border-radius: 50%; + margin-right: 8rpx; } - .op-delete { - color: #F24439; - height: 26rpx; - font-size: 26rpx; - line-height: 26rpx; + > view:nth-of-type(2) { + height: 22rpx; + font-size: 22rpx; + line-height: 22rpx; } + + &.member-sync--done { + color: #2AC79F; + + > view:nth-of-type(1) { + background-color: #2AC79F; + } + } + + &.member-sync--pending { + color: #F2994A; + + > view:nth-of-type(1) { + background-color: #F2994A; + } + } + } + } + + .member-divider { + width: 100%; + height: 2rpx; + background-color: #EAECF1; + margin: 24rpx 0; + } + + .member-ops { + display: flex; + justify-content: flex-end; + + .op-edit { + color: #77849E; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + margin-right: 60rpx; + } + + .op-delete { + color: #F24439; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; } } } diff --git a/miniprogram/pages/userManagement/userManagement.ts b/miniprogram/pages/userManagement/userManagement.ts index 3f89b7e..0c06efa 100644 --- a/miniprogram/pages/userManagement/userManagement.ts +++ b/miniprogram/pages/userManagement/userManagement.ts @@ -7,13 +7,31 @@ Page({ model: 'BS-A100', serial: 'BL2024B00321' }, - memberCount: 4, - members: [ - { id: 1, name: '张晓敏', gender: '男', age: 36, height: 172, type: '本人', typeClass: 'self', sync: '已同步', syncClass: 'done' }, - { id: 2, name: '李建国', gender: '男', age: 36, height: 182, type: '员工', typeClass: 'employee', sync: '已同步', syncClass: 'done' }, - { id: 3, name: '吉夏', gender: '女', age: 28, height: 165, type: '家庭用户', typeClass: 'family', sync: '未同步', syncClass: 'pending' }, - { id: 4, name: '张雪（他人添加）', gender: '女', age: 32, height: 158, type: '家庭用户', typeClass: 'family', sync: '已同步', syncClass: 'done' }, - { id: 5, name: '赵明亮', gender: '男', age: 32, height: 172, type: '员工', typeClass: 'employee', sync: '已删除未同步', syncClass: 'deleted' } + memberCount: 5, + hasData: true, + self: { + name: '张晓敏', + gender: '男', + age: 36, + height: 172, + sync: '已同步', + syncClass: 'done' + }, + groups: [ + { + title: '员工', + members: [ + { id: 2, name: '李建国', gender: '男', age: 36, height: 182, sync: '已同步', syncClass: 'done' }, + { id: 5, name: '赵明亮', gender: '男', age: 32, height: 172, sync: '已同步', syncClass: 'done' } + ] + }, + { + title: '家庭用户', + members: [ + { id: 3, name: '吉夏', gender: '女', age: 28, height: 165, sync: '已同步', syncClass: 'done' }, + { id: 4, name: '张雪', gender: '女', age: 32, height: 158, sync: '未同步', syncClass: 'pending' } + ] + } ], syncShow: false, syncPercent: 0, diff --git a/miniprogram/pages/userManagement/userManagement.wxml b/miniprogram/pages/userManagement/userManagement.wxml index e68bac8..f685855 100644 --- a/miniprogram/pages/userManagement/userManagement.wxml +++ b/miniprogram/pages/userManagement/userManagement.wxml @@ -12,7 +12,7 @@ {{ device.connected ? '已连接' : '未连接' }} - 型号：{{ device.model }} + 型号：{{ device.model }} 设备编号：{{ device.serial }} @@ -29,26 +29,55 @@ - + - - - + + + + - {{ item.name }} - {{ item.type }} + {{ self.name }} + 本人 - {{ item.gender }}·{{ item.age }}岁 丨 {{ item.height }}cm + {{ self.gender }}·{{ self.age }}岁 丨 {{ self.height }}cm - - {{ item.sync }} + + + {{ self.sync }} + + + + + 删除 + + + + + + {{ group.title }} + + + + + + + {{ member.name }} （他人添加） + + {{ member.gender }}·{{ member.age }}岁 丨 {{ member.height }}cm + + + + {{ member.sync }} + + + 编辑 删除 - +