feat(equipmentMember): 删除确认改为自定义弹窗,他人添加用户红色加粗警示

- 删除确认弹窗替代原生 wx.showModal,仿原生风格
- 他人添加成员删除时显示红色加粗警示文案
- 成员列表操作区统一展示编辑/删除按钮
- 名字旁补充「本人」「他人添加」标签

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
17792275749
2026-06-10 15:05:51 +08:00
co-authored by Claude Opus 4.7
parent d44e0a9e76
commit 97c135786c
3 changed files with 179 additions and 69 deletions
@@ -112,7 +112,7 @@
.scrollViewContent {
box-sizing: border-box;
/* 成员卡(容量小标题 + 列表整体白卡) */
/* 用户卡(容量小标题 + 列表整体白卡) */
.member-card {
width: 100%;
flex: 1;
@@ -261,6 +261,11 @@
background-color: rgba(19, 133, 250, 0.12);
}
.badge-my {
color: #1385FA;
background-color: rgba(19, 133, 250, 0.08);
}
.badge-other {
color: #77849E;
background-color: rgba(0, 0, 0, 0);
@@ -274,7 +279,7 @@
align-items: center;
background-color: #FFFFFF;
/* 底部添加成员按钮 */
/* 底部添加用户按钮 */
.add-member {
width: 580rpx;
height: 88rpx;
@@ -315,4 +320,72 @@
opacity: 0.4;
}
}
/* 删除确认弹窗 — 仿原生 wx.showModal 风格 */
.delete-modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
}
.delete-modal {
width: 540rpx;
border-radius: 16rpx;
background-color: #FFFFFF;
overflow: hidden;
}
.delete-modal-title {
width: 100%;
padding-top: 40rpx;
text-align: center;
font-size: 34rpx;
font-weight: 500;
color: #000000;
}
.delete-modal-content {
padding: 32rpx 32rpx 40rpx;
font-size: 28rpx;
color: #353535;
line-height: 44rpx;
text-align: center;
}
.delete-modal-warning {
color: #FF4D4F;
font-weight: bold;
}
.delete-modal-footer {
width: 100%;
height: 88rpx;
display: flex;
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
}
.delete-modal-btn {
flex: 1;
height: 88rpx;
line-height: 88rpx;
text-align: center;
font-size: 32rpx;
}
.delete-modal-btn-cancel {
color: #000000;
border-right: 1rpx solid rgba(0, 0, 0, 0.1);
}
.delete-modal-btn-confirm {
color: #000000;
font-weight: bold;
}
}
@@ -37,10 +37,10 @@ interface SysUserDevice {
relationType: number | null
}
/** 页面展示用成员模型 */
/** 页面展示用用户模型 */
interface MemberDisplay {
id: string
/** 成员 ID */
/** 用户 ID */
userId: string
realname: string
/** '男' | '女' */
@@ -101,7 +101,7 @@ const syncToDevice = (members: MemberDisplay[]): void => {
})
.then(() => {
wx.hideLoading()
wx.showToast({ title: '成员同步成功', icon: 'success' })
wx.showToast({ title: '用户同步成功', icon: 'success' })
})
.catch((err: Error) => {
wx.hideLoading()
@@ -110,7 +110,7 @@ const syncToDevice = (members: MemberDisplay[]): void => {
}
/**
* 设备成员管理页
* 设备用户管理页
* sn 与设备名直接读 lefuService.deviceInfo,连接状态实时同步
*/
Page({
@@ -128,6 +128,9 @@ Page({
capacityTotal: 10,
} as DeviceCard,
memberList: [] as MemberDisplay[],
/** 自定义删除确认弹窗 */
showDeleteModal: false,
deleteTarget: null as MemberDisplay | null,
},
// 当前子页 addMember 未注册任何 SDK 回调,不会覆盖本页回调槽位,故无需 onShow 兜底。
@@ -171,7 +174,7 @@ Page({
},
/**
* 调 v3 接口拉取成员列表,成功后更新设备名与成员数据
* 调 v3 接口拉取用户列表,成功后更新设备名与用户数据
* @param sn 设备 SN
*/
_loadData(sn: string) {
@@ -213,13 +216,13 @@ Page({
})
},
/** 编辑成员:仅携带 userId 跳转,详情由目标页自行查询 */
/** 编辑用户:仅携带 userId 跳转,详情由目标页自行查询 */
onTapEdit(e: WechatMiniprogram.TouchEvent) {
const id = e.currentTarget.dataset.id as string
wx.navigateTo({ url: `/pages/addMember/addMember?userId=${id}` })
},
/** 删除成员 */
/** 删除用户:弹出自定义确认弹窗 */
onTapDelete(e: WechatMiniprogram.TouchEvent) {
const id = e.currentTarget.dataset.id as string
const target = this.data.memberList.find(m => m.id === id)
@@ -240,56 +243,72 @@ Page({
}
}
wx.showModal({
title: '确认删除',
content: `确定要删除成员「${target.realname}」吗?删除后将同步更新设备数据。`,
success: (res) => {
if (!res.confirm) return
// 1. 从列表中移除该成员(立即更新 UI)
const newList = this.data.memberList.filter(m => m.id !== id)
this.setData({
memberList: newList,
'deviceCard.capacityUsed': newList.length,
})
wx.showLoading({ title: '正在同步设备数据...', mask: true })
// 2. 同步设备
let devicePromise: Promise<void>
if (newList.length) {
// 有剩余成员:清除设备数据并重新下发
devicePromise = lefuService.syncMembersToDevice(
newList.map(toDeviceMember),
(current, total) => {
wx.showLoading({ title: `正在同步设备数据 ${current}/${total}...`, mask: true })
},
)
} else {
// 删除最后一个成员:仅清除设备数据,不下发
devicePromise = lefuService.clearDeviceMembers()
}
devicePromise
.then(() => {
// 3. 调用删除接口
return del('weighingScale/v2/del/user', { id }, { loading: false })
})
.then(() => {
wx.hideLoading()
wx.showToast({ title: '删除成功', icon: 'success' })
})
.catch((err: Error) => {
wx.hideLoading()
// 失败时重新拉取列表恢复数据
this._loadData(this.data.sn)
wx.showToast({ title: err.message || '删除失败,请重试', icon: 'none' })
})
},
this.setData({
showDeleteModal: true,
deleteTarget: target,
})
},
/** 添加成员:未连接态禁用 */
/** 关闭删除确认弹窗 */
onHideDeleteModal() {
this.setData({
showDeleteModal: false,
deleteTarget: null,
})
},
/** 确认删除 */
onConfirmDelete() {
const target = this.data.deleteTarget
if (!target) return
const id = target.id
// 1. 从列表中移除该用户(立即更新 UI)
const newList = this.data.memberList.filter(m => m.id !== id)
this.setData({
memberList: newList,
'deviceCard.capacityUsed': newList.length,
showDeleteModal: false,
deleteTarget: null,
})
wx.showLoading({ title: '正在同步设备数据...', mask: true })
// 2. 同步设备
let devicePromise: Promise<void>
if (newList.length) {
devicePromise = lefuService.syncMembersToDevice(
newList.map(toDeviceMember),
(current, total) => {
wx.showLoading({ title: `正在同步设备数据 ${current}/${total}...`, mask: true })
},
)
} else {
devicePromise = lefuService.clearDeviceMembers()
}
devicePromise
.then(() => {
// 3. 调用删除接口
return del('weighingScale/v2/del/user', { id }, { loading: false })
})
.then(() => {
wx.hideLoading()
wx.showToast({ title: '删除成功', icon: 'success' })
})
.catch((err: Error) => {
wx.hideLoading()
// 失败时重新拉取列表恢复数据
this._loadData(this.data.sn)
wx.showToast({ title: err.message || '删除失败,请重试', icon: 'none' })
})
},
/** 空方法,阻止弹窗事件冒泡 */
noop() {},
/** 添加用户:未连接态禁用 */
onTapAddMember() {
if (!this.data.connected) return
if (this.data.memberList.length >= 10) {
@@ -25,7 +25,7 @@
<scroll-view class="scrollView" scroll-y>
<view class="scrollViewContent page-container">
<!-- 成员卡(容量 + 列表) -->
<!-- 用户卡(容量 + 列表) -->
<view class="member-card">
<!-- 设备容量(仅已连接态) -->
<block wx:if="{{ connected }}">
@@ -37,7 +37,7 @@
</view>
</block>
<!-- 成员列表 -->
<!-- 用户列表 -->
<block wx:for="{{ memberList }}" wx:key="id">
<view class="member-item">
<!-- 头像:取名字第一个字 -->
@@ -47,10 +47,15 @@
<view class="member-info">
<view class="member-name-row">
<view class="member-name">{{ item.realname }}</view>
<!-- 本人 badge -->
<block wx:if="{{ item.relationType == 1 }}">
<view class="badge badge-self">本人</view>
</block>
<block wx:elif="{{ item.relationType == 2 }}">
<!-- <view class="badge badge-my">自己添加</view>-->
</block>
<block wx:elif="{{ item.relationType == 3 }}">
<view class="badge badge-other">他人添加</view>
</block>
</view>
<view class="member-meta">
<text class="meta-text">{{ item.sex_dictText }}</text>
@@ -61,15 +66,9 @@
</view>
</view>
<!-- 右侧:他人添加 badge 或 编辑/删除按钮 -->
<view class="member-actions">
<!-- 他人添加:仅展示 badge -->
<block wx:if="{{ item.relationType == 3 }}">
<view class="badge badge-other">他人添加</view>
</block>
<!-- 自己添加(relationType == 2):显示编辑/删除 -->
<block wx:elif="{{ item.relationType != 1 }}">
<view class="action-text" data-id="{{ item.id }}" bind:tap="onTapEdit">编辑</view>
<view class="action-text" data-id="{{ item.id }}" bind:tap="onTapEdit">编辑</view>
<block wx:if="{{ item.relationType != 1 }}">
<view class="action-text action-text-danger" data-id="{{ item.id }}" bind:tap="onTapDelete">删除</view>
</block>
</view>
@@ -80,11 +79,30 @@
</scroll-view>
</view>
<!-- 底部添加成员按钮 -->
<!-- 底部添加用户按钮 -->
<view class="btn">
<view class="add-member {{ connected ? '' : 'add-member-disabled' }}" bind:tap="onTapAddMember">
<view class="add-member-icon">+</view>
<view class="add-member-text">添加成员<text>(最多10位)</text></view>
<view class="add-member-text">添加用户<text>(最多10位)</text></view>
</view>
</view>
<!-- 删除确认弹窗 -->
<view class="delete-modal-mask" wx:if="{{ showDeleteModal }}" bind:tap="onHideDeleteModal">
<view class="delete-modal" catch:tap="noop">
<view class="delete-modal-title">确认删除</view>
<view class="delete-modal-content">
<block wx:if="{{ deleteTarget.relationType == 3 }}">
<text class="delete-modal-warning">'{{ deleteTarget.realname }}'用户为他人添加,请确认是否删除</text>
</block>
<block wx:else>
确定要删除用户「{{ deleteTarget.realname }}」吗?删除后将同步更新设备数据。
</block>
</view>
<view class="delete-modal-footer">
<view class="delete-modal-btn delete-modal-btn-cancel" bind:tap="onHideDeleteModal">取消</view>
<view class="delete-modal-btn delete-modal-btn-confirm" bind:tap="onConfirmDelete">确定删除</view>
</view>
</view>
</view>
</view>