146 lines
3.8 KiB
TypeScript
146 lines
3.8 KiB
TypeScript
/** 抽屉内部用户项（含回填所需全量字段） */
|
||
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
|
||
}
|
||
|
||
/**
|
||
* 选择已有用户抽屉组件
|
||
* Properties: show(控制显示)
|
||
* Events: close(关闭), select(选中用户,携带 ExistingMember)
|
||
*/
|
||
Component({
|
||
properties: {
|
||
/** 是否显示抽屉 */
|
||
show: {
|
||
type: Boolean,
|
||
value: false
|
||
},
|
||
/** 需要排除的用户 ID（history 模式下排除当前查看的用户） */
|
||
excludeUserId: {
|
||
type: String,
|
||
value: ''
|
||
}
|
||
},
|
||
|
||
data: {
|
||
/** 控制 wx:if，DOM 是否存在 */
|
||
innerShow: false,
|
||
/** 控制 --visible 类，触发 CSS transition */
|
||
animVisible: false,
|
||
/** 用户列表（静态假数据填充，后续接真实接口替换） */
|
||
members: [
|
||
{
|
||
id: '1',
|
||
name: '张晓敏',
|
||
gender: '男',
|
||
age: 36,
|
||
height: 170,
|
||
weight: 89.6,
|
||
idCard: '',
|
||
relationType: 1,
|
||
selected: false
|
||
},
|
||
{
|
||
id: '2',
|
||
name: '李晓华',
|
||
gender: '女',
|
||
age: 34,
|
||
height: 162,
|
||
weight: 52,
|
||
idCard: '',
|
||
dataType: 1,
|
||
selected: false
|
||
},
|
||
{
|
||
id: '3',
|
||
name: '王建军',
|
||
gender: '男',
|
||
age: 40,
|
||
height: 175,
|
||
weight: 68,
|
||
idCard: '',
|
||
dataType: 1,
|
||
selected: false
|
||
},
|
||
{
|
||
id: '4',
|
||
name: '陈静',
|
||
gender: '女',
|
||
age: 28,
|
||
height: 158,
|
||
weight: 48,
|
||
idCard: '',
|
||
dataType: 0,
|
||
selected: false
|
||
},
|
||
{
|
||
id: '5',
|
||
name: '刘洋',
|
||
gender: '男',
|
||
age: 30,
|
||
height: 180,
|
||
weight: 72,
|
||
idCard: '',
|
||
dataType: 0,
|
||
selected: false
|
||
}
|
||
] as ExistingMember[]
|
||
},
|
||
|
||
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)
|
||
}
|
||
}
|
||
},
|
||
|
||
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)
|
||
}
|
||
}
|
||
})
|