bodyWeight/miniprogram/components/selectMemberDrawer/selectMemberDrawer.ts

/** 抽屉内部用户项（含回填所需全量字段） */
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
        },
        /** 数据来源模式：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.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)
        }
    }
})