feat(data): 数据页接入选择成员抽屉，简化抽屉实现并复用空态组件
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
17792275749
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
0c8285f390
commit
3c62c31b5d
@@ -36,15 +36,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 拖拽把手 */
|
||||
.drawer-handle {
|
||||
width: 72rpx;
|
||||
height: 6rpx;
|
||||
background-color: #77849E;
|
||||
border-radius: 3rpx;
|
||||
margin: 32rpx auto 40rpx;
|
||||
}
|
||||
|
||||
/* 标题栏 */
|
||||
.drawer-header {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,52 +1,21 @@
|
||||
import { get } from '../../utils/request/index'
|
||||
import { lefuService } from '../../lefu/index'
|
||||
import { calcAge } from '../../utils/common'
|
||||
|
||||
/** GET /weighingScale/v3/select/addMembers/user 返回的单条结构 */
|
||||
interface AddMemberApiItem {
|
||||
id: string
|
||||
realname: string
|
||||
sex_dictText: '男' | '女'
|
||||
birthday: string
|
||||
height: number
|
||||
weight: number
|
||||
idCard: string | null
|
||||
avatar: string | null
|
||||
dataType?: number
|
||||
relationType?: number | string | null
|
||||
}
|
||||
|
||||
/** GET /weighingScale/v3/select/history/user 返回的单条结构 */
|
||||
interface HistoryApiItem {
|
||||
id: string
|
||||
userId: string
|
||||
realname: string
|
||||
sex: number
|
||||
height: number
|
||||
birthday: string
|
||||
avatar: string | null
|
||||
relationType: number | string | null
|
||||
dataType?: number
|
||||
}
|
||||
|
||||
/** 抽屉内部用户项（含回填所需全量字段） */
|
||||
interface ExistingMember {
|
||||
id: string
|
||||
name: string
|
||||
gender: '男' | '女'
|
||||
age: number
|
||||
height: number
|
||||
weight: number
|
||||
idCard: string
|
||||
avatar?: string
|
||||
selected?: boolean
|
||||
/** history 模式额外携带，供页面构建 userInfo */
|
||||
userId?: string
|
||||
sex?: number
|
||||
birthday?: string
|
||||
relationType?: number | string | null
|
||||
/** 0=员工 1=家庭成员 */
|
||||
dataType?: number
|
||||
id: string
|
||||
name: string
|
||||
gender: '男' | '女'
|
||||
age: number
|
||||
height: number
|
||||
weight: number
|
||||
idCard: string
|
||||
avatar?: string
|
||||
selected?: boolean
|
||||
/** history 模式额外携带，供页面构建 userInfo */
|
||||
userId?: string
|
||||
sex?: number
|
||||
birthday?: string
|
||||
relationType?: number | string | null
|
||||
/** 0=员工 1=家庭成员 */
|
||||
dataType?: number
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -55,136 +24,71 @@ interface ExistingMember {
|
||||
* Events: close(关闭), select(选中用户,携带 ExistingMember)
|
||||
*/
|
||||
Component({
|
||||
properties: {
|
||||
/** 是否显示抽屉 */
|
||||
show: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
/** 数据来源模式：addMember=新增用户选择 / history=历史数据切换用户 */
|
||||
source: {
|
||||
type: String,
|
||||
value: 'addMember'
|
||||
},
|
||||
/** 需要排除的用户 ID（history 模式下排除当前查看的用户） */
|
||||
excludeUserId: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
/** 控制 wx:if，DOM 是否存在 */
|
||||
innerShow: false,
|
||||
/** 控制 --visible 类，触发 CSS transition */
|
||||
animVisible: false,
|
||||
/** 用户列表（组件内部拉取） */
|
||||
members: [] as ExistingMember[]
|
||||
},
|
||||
|
||||
observers: {
|
||||
/**
|
||||
* 监听外部 show 变化：
|
||||
* 打开时先拉数据再展示抽屉；关闭时移除动画类后移除 DOM
|
||||
*/
|
||||
show(val: boolean) {
|
||||
if (val) {
|
||||
this._fetchMembers()
|
||||
this.setData({ innerShow: true })
|
||||
setTimeout(() => {
|
||||
this.setData({ animVisible: true })
|
||||
}, 20)
|
||||
} else {
|
||||
this.setData({ animVisible: false })
|
||||
setTimeout(() => {
|
||||
this.setData({ innerShow: false })
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/** 调接口获取可选用户列表，根据 source 调不同接口 */
|
||||
_fetchMembers() {
|
||||
const userInfo = wx.getStorageSync('userInfo') as { userId?: string } | null
|
||||
const userId = userInfo?.userId ?? ''
|
||||
|
||||
wx.showLoading({ title: '加载中...', mask: true })
|
||||
|
||||
if (this.properties.source === 'history') {
|
||||
const params: Record<string, string> = { userId }
|
||||
if (this.properties.excludeUserId) {
|
||||
params.userIdExclude = this.properties.excludeUserId
|
||||
properties: {
|
||||
/** 是否显示抽屉 */
|
||||
show: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
/** 数据来源模式：addMember=新增用户选择 / history=历史数据切换用户 */
|
||||
source: {
|
||||
type: String,
|
||||
value: 'addMember'
|
||||
},
|
||||
/** 需要排除的用户 ID（history 模式下排除当前查看的用户） */
|
||||
excludeUserId: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
get<HistoryApiItem[]>('weighingScale/v3/select/history/user', params, { loading: false })
|
||||
.then((res: any) => {
|
||||
const members: ExistingMember[] = (res.result ?? []).map((item: HistoryApiItem) => ({
|
||||
id: item.id,
|
||||
name: item.realname,
|
||||
gender: item.sex === 1 ? '男' : '女',
|
||||
age: calcAge(item.birthday),
|
||||
height: item.height,
|
||||
weight: 0,
|
||||
idCard: '',
|
||||
avatar: item.avatar ?? '',
|
||||
userId: item.userId,
|
||||
sex: item.sex,
|
||||
birthday: item.birthday,
|
||||
relationType: item.relationType,
|
||||
dataType: item.dataType,
|
||||
}))
|
||||
this.setData({ members })
|
||||
})
|
||||
.catch(() => {
|
||||
wx.showToast({ title: '加载失败', icon: 'none' })
|
||||
})
|
||||
.finally(() => {
|
||||
wx.hideLoading()
|
||||
})
|
||||
} else {
|
||||
const sn = lefuService.deviceInfo?.serialNumber ?? ''
|
||||
get<AddMemberApiItem[]>('weighingScale/v5/select/addMembers/user', { userId, sn }, { loading: false })
|
||||
.then((res: any) => {
|
||||
const members: ExistingMember[] = (res.result ?? []).map((item: AddMemberApiItem) => ({
|
||||
id: item.id,
|
||||
name: item.realname,
|
||||
gender: item.sex_dictText,
|
||||
age: calcAge(item.birthday),
|
||||
height: item.height,
|
||||
weight: item.weight,
|
||||
idCard: item.idCard ?? '',
|
||||
avatar: item.avatar ?? '',
|
||||
relationType: item.relationType,
|
||||
dataType: item.dataType,
|
||||
}))
|
||||
this.setData({ members })
|
||||
})
|
||||
.catch(() => {
|
||||
wx.showToast({ title: '加载失败', icon: 'none' })
|
||||
})
|
||||
.finally(() => {
|
||||
wx.hideLoading()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/** 点击遮罩关闭 */
|
||||
onTapMask() {
|
||||
this.triggerEvent('close')
|
||||
data: {
|
||||
/** 控制 wx:if，DOM 是否存在 */
|
||||
innerShow: false,
|
||||
/** 控制 --visible 类，触发 CSS transition */
|
||||
animVisible: false,
|
||||
/** 用户列表（组件内部拉取） */
|
||||
members: [] as ExistingMember[]
|
||||
},
|
||||
|
||||
/** 点击关闭按钮 */
|
||||
onTapClose() {
|
||||
this.triggerEvent('close')
|
||||
observers: {
|
||||
/**
|
||||
* 监听外部 show 变化：
|
||||
* 打开时先拉数据再展示抽屉；关闭时移除动画类后移除 DOM
|
||||
*/
|
||||
show(val: boolean) {
|
||||
if (val) {
|
||||
this.setData({innerShow: true})
|
||||
setTimeout(() => {
|
||||
this.setData({animVisible: true})
|
||||
}, 20)
|
||||
} else {
|
||||
this.setData({animVisible: false})
|
||||
setTimeout(() => {
|
||||
this.setData({innerShow: false})
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击用户行，触发 select 事件
|
||||
* @param e 携带 data-member 的点击事件
|
||||
*/
|
||||
onTapMember(e: WechatMiniprogram.TouchEvent) {
|
||||
const member = e.currentTarget.dataset.member as ExistingMember
|
||||
this.triggerEvent('select', member)
|
||||
methods: {
|
||||
/** 点击遮罩关闭 */
|
||||
onTapMask() {
|
||||
this.triggerEvent('close')
|
||||
},
|
||||
|
||||
/** 点击关闭按钮 */
|
||||
onTapClose() {
|
||||
this.triggerEvent('close')
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击用户行，触发 select 事件
|
||||
* @param e 携带 data-member 的点击事件
|
||||
*/
|
||||
onTapMember(e: WechatMiniprogram.TouchEvent) {
|
||||
const member = e.currentTarget.dataset.member as ExistingMember
|
||||
this.triggerEvent('select', member)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -5,10 +5,6 @@
|
||||
|
||||
<!-- 抽屉面板 -->
|
||||
<view class="drawer-panel {{ animVisible ? 'drawer-panel--visible' : '' }}">
|
||||
|
||||
<!-- 顶部拖拽把手 -->
|
||||
<view class="drawer-handle"></view>
|
||||
|
||||
<!-- 标题栏 -->
|
||||
<view class="drawer-header">
|
||||
<text class="drawer-title">选择已有用户</text>
|
||||
@@ -61,10 +57,7 @@
|
||||
|
||||
<!-- 无用户：占位 -->
|
||||
<block wx:else>
|
||||
<view class="drawer-empty">
|
||||
<image class="drawer-empty-icon" src="/images/selectMemberDrawer/noData.png" mode="aspectFit"/>
|
||||
<text class="drawer-empty-text">暂无可选用户</text>
|
||||
</view>
|
||||
<empty-data/>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
Reference in New Issue
Block a user