feat(userManagement): 新增添加用户弹框组件

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
17792275749
2026-09-11 15:09:35 +08:00
co-authored by Claude Sonnet 4.6
parent 9e8e26cb19
commit dc0a294406
9 changed files with 179 additions and 41 deletions
@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}
@@ -0,0 +1,58 @@
.userManagementAddUser-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(37, 37, 53, 0.5);
z-index: 100;
}
.userManagementAddUser-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 660rpx;
box-sizing: border-box;
padding: 48rpx 40rpx 56rpx;
background-color: #FFFFFF;
border-radius: 24rpx;
z-index: 101;
display: flex;
flex-direction: column;
align-items: center;
.userManagementAddUser-title {
color: #252535;
height: 36rpx;
font-size: 36rpx;
font-weight: bolder;
line-height: 36rpx;
margin-bottom: 48rpx;
}
.userManagementAddUser-btn {
width: 100%;
height: 96rpx;
font-size: 36rpx;
font-weight: bold;
text-align: center;
border-radius: 48rpx;
box-sizing: border-box;
&--primary {
color: #FFFFFF;
line-height: 96rpx;
background-color: #1385FA;
margin-bottom: 40rpx;
}
&--outline {
color: #1385FA;
line-height: 92rpx;
border: 2rpx solid #1385FA;
background-color: #FFFFFF;
}
}
}
@@ -0,0 +1,26 @@
Component({
properties: {
/** 是否显示弹框 */
show: {
type: Boolean,
value: false
}
},
methods: {
/** 点击遮罩关闭 */
onClose() {
this.triggerEvent('close')
},
/** 一键添加本人 */
onAddSelf() {
this.triggerEvent('addself')
},
/** 添加其他用户 */
onAddOther() {
this.triggerEvent('addother')
}
}
})
@@ -0,0 +1,8 @@
<block wx:if="{{ show }}">
<view class="userManagementAddUser-mask" bind:tap="onClose"></view>
<view class="userManagementAddUser-panel">
<view class="userManagementAddUser-title">添加用户</view>
<view class="userManagementAddUser-btn userManagementAddUser-btn--primary" bind:tap="onAddSelf">一键添加本人</view>
<view class="userManagementAddUser-btn userManagementAddUser-btn--outline" bind:tap="onAddOther">添加其他用户</view>
</view>
</block>
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

@@ -1,6 +1,7 @@
{
"usingComponents": {
"user-management-sync": "/components/userManagementSync/userManagementSync"
"user-management-sync": "/components/userManagementSync/userManagementSync",
"user-management-add-user": "/components/userManagementAddUser/userManagementAddUser"
},
"navigationBarTitleText": "用户管理",
"navigationBarTextStyle": "black",
@@ -120,14 +120,29 @@
line-height: 32rpx;
}
.sync-btn {
color: #FFFFFF;
.section-addUser {
display: flex;
flex-wrap: nowrap;
align-items: center;
height: 48rpx;
font-size: 24rpx;
line-height: 48rpx;
padding: 0 20rpx;
border-radius: 8rpx;
background-color: #1385FA;
border-radius: 32rpx;
background-color: #D9E9FA;
> view:nth-of-type(1) {
width: 32rpx;
height: 32rpx;
display: flex;
align-items: center;
margin-right: 6rpx;
}
> view:nth-of-type(2) {
color: #1385FA;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
}
}
}
@@ -342,36 +357,36 @@
height: 120rpx;
padding: 0 30rpx;
display: flex;
gap: 15rpx;
flex-wrap: nowrap;
align-items: center;
box-sizing: border-box;
background-color: #FFFFFF;
box-shadow: 0 2rpx 8rpx 0 rgba(19, 133, 250, 0.06);
.btn-cancel {
color: #1385FA;
.sync-btn {
flex: 1;
height: 88rpx;
font-size: 32rpx;
text-align: center;
line-height: 84rpx;
border-radius: 44rpx;
box-sizing: border-box;
border: 2rpx solid #1385FA;
background-color: #FFFFFF;
}
.btn-primary {
color: #FFFFFF;
flex: 1;
height: 88rpx;
font-size: 32rpx;
font-weight: bold;
text-align: center;
line-height: 88rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
border-radius: 44rpx;
background-color: #1385FA;
> view:nth-of-type(1) {
width: 32rpx;
height: 32rpx;
display: flex;
align-items: center;
margin-right: 6rpx;
}
> view:nth-of-type(2) {
color: #FFFFFF;
height: 32rpx;
font-size: 32rpx;
line-height: 32rpx;
font-weight: bold;
}
}
}
}
@@ -96,6 +96,7 @@ Page({
syncShow: false,
syncPercent: 0,
syncStatus: '',
addUserShow: false,
isOps: false
},
@@ -403,14 +404,34 @@ Page({
})
},
/** 添加用户 */
/** 添加用户:运维模式或已有本人直接跳添加页,否则弹出选择弹框 */
onTapAddUser() {
if (this.data.memberCount >= 10) {
wx.showToast({ title: '最多添加10位用户', icon: 'none' })
return
}
const sn = targetDevice?.sn || ''
wx.navigateTo({ url: `/pages/addUser/addUser?sn=${encodeURIComponent(sn)}` })
if (this.data.isOps || this.data.self) {
this.onTapAddNew()
} else {
this.setData({ addUserShow: true })
}
},
/** 关闭添加用户弹框 */
onCloseAddUser() {
this.setData({ addUserShow: false })
},
/** 弹框:一键添加本人 */
onAddSelfTap() {
this.setData({ addUserShow: false })
this.onTapAddSelf()
},
/** 弹框:添加其他用户 */
onAddOtherTap() {
this.setData({ addUserShow: false })
this.onTapAddNew()
},
/** 编辑成员:跳转 addUser 编辑模式 */
@@ -24,7 +24,12 @@
<!-- 已录入用户 + 同步按钮 -->
<view class="section-header">
<view class="section-title" bind:longpress="onLongPressSectionTitle">已录入用户({{ memberCount }}/10</view>
<view class="sync-btn" bind:tap="onTapSync">同步用户至设备</view>
<view class="section-addUser" bind:tap="onTapAddUser">
<view>
<image src="/images/userManagement/add.png" mode="aspectFit" />
</view>
<view>添加用户</view>
</view>
</view>
<!-- 同步提示 -->
@@ -104,17 +109,17 @@
<!-- 底部常驻添加用户按钮 -->
<view class="footer">
<block wx:if="{{ self }}">
<view class="btn-primary" bind:tap="onTapAddUser">添加用户(最多10位)</view>
</block>
<block wx:else>
<block wx:if="{{ !isOps }}">
<view class="btn-primary" bind:tap="onTapAddSelf">一键添加本人</view>
</block>
<view class="btn-cancel" bind:tap="onTapAddNew">添加新用户</view>
</block>
<view class="sync-btn" bind:tap="onTapSync">
<view>
<image src="/images/userManagement/reload.png" mode="aspectFit" />
</view>
<view>同步用户至设备</view>
</view>
</view>
<!-- 同步进度弹框 -->
<user-management-sync show="{{ syncShow }}" percent="{{ syncPercent }}" status="{{ syncStatus }}" />
<!-- 添加用户弹框 -->
<user-management-add-user show="{{ addUserShow }}" bind:addself="onAddSelfTap" bind:addother="onAddOtherTap" bind:close="onCloseAddUser" />
</view>