feat(data): 数据页接入选择成员抽屉，简化抽屉实现并复用空态组件

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

miniprogram/components/selectMemberDrawer/selectMemberDrawer.less

@@ -36,15 +36,6 @@
     }
 }
 
-/* 拖拽把手 */
-.drawer-handle {
-    width: 72rpx;
-    height: 6rpx;
-    background-color: #77849E;
-    border-radius: 3rpx;
-    margin: 32rpx auto 40rpx;
-}
-
 /* 标题栏 */
 .drawer-header {
     width: 100%;

miniprogram/components/selectMemberDrawer/selectMemberDrawer.ts

@@ -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
+    id: string
-  name: string
+    name: string
-  gender: '男' | '女'
+    gender: '男' | '女'
-  age: number
+    age: number
-  height: number
+    height: number
-  weight: number
+    weight: number
-  idCard: string
+    idCard: string
-  avatar?: string
+    avatar?: string
-  selected?: boolean
+    selected?: boolean
-  /** history 模式额外携带，供页面构建 userInfo */
+    /** history 模式额外携带，供页面构建 userInfo */
-  userId?: string
+    userId?: string
-  sex?: number
+    sex?: number
-  birthday?: string
+    birthday?: string
-  relationType?: number | string | null
+    relationType?: number | string | null
-  /** 0=员工 1=家庭成员 */
+    /** 0=员工 1=家庭成员 */
-  dataType?: number
+    dataType?: number
 }
 
 /**
@@ -55,136 +24,71 @@ interface ExistingMember {
  * Events: close(关闭), select(选中用户,携带 ExistingMember)
  */
 Component({
-  properties: {
+    properties: {
-    /** 是否显示抽屉 */
+        /** 是否显示抽屉 */
-    show: {
+        show: {
-      type: Boolean,
+            type: Boolean,
-      value: false
+            value: false
-    },
+        },
-    /** 数据来源模式：addMember=新增用户选择 / history=历史数据切换用户 */
+        /** 数据来源模式：addMember=新增用户选择 / history=历史数据切换用户 */
-    source: {
+        source: {
-      type: String,
+            type: String,
-      value: 'addMember'
+            value: 'addMember'
-    },
+        },
-    /** 需要排除的用户 ID（history 模式下排除当前查看的用户） */
+        /** 需要排除的用户 ID（history 模式下排除当前查看的用户） */
-    excludeUserId: {
+        excludeUserId: {
-      type: String,
+            type: String,
-      value: ''
+            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
         }
-        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()
-          })
-      }
     },
 
-    /** 点击遮罩关闭 */
+    data: {
-    onTapMask() {
+        /** 控制 wx:if，DOM 是否存在 */
-      this.triggerEvent('close')
+        innerShow: false,
+        /** 控制 --visible 类，触发 CSS transition */
+        animVisible: false,
+        /** 用户列表（组件内部拉取） */
+        members: [] as ExistingMember[]
     },
 
-    /** 点击关闭按钮 */
+    observers: {
-    onTapClose() {
+        /**
-      this.triggerEvent('close')
+         * 监听外部 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: {
-     * 点击用户行，触发 select 事件
+        /** 点击遮罩关闭 */
-     * @param e 携带 data-member 的点击事件
+        onTapMask() {
-     */
+            this.triggerEvent('close')
-    onTapMember(e: WechatMiniprogram.TouchEvent) {
+        },
-      const member = e.currentTarget.dataset.member as ExistingMember
+
-      this.triggerEvent('select', member)
+        /** 点击关闭按钮 */
+        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)
+        }
     }
-  }
 })

miniprogram/components/selectMemberDrawer/selectMemberDrawer.wxml

@@ -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">
+            <empty-data/>
-                <image class="drawer-empty-icon" src="/images/selectMemberDrawer/noData.png" mode="aspectFit"/>
-                <text class="drawer-empty-text">暂无可选用户</text>
-            </view>
         </block>
     </view>
 </block>

miniprogram/pages/data/data.json

@@ -1,5 +1,7 @@
 {
-    "usingComponents": {},
+    "usingComponents": {
+		"select-member-drawer": "/components/selectMemberDrawer/selectMemberDrawer"
+	},
 	"navigationBarTitleText": "历史数据",
 	"navigationBarTextStyle": "black",
 	"navigationBarBackgroundColor": "#FFFFFF" 

miniprogram/pages/data/data.ts

@@ -5,7 +5,7 @@ Page({
      * 页面的初始数据
      */
     data: {
-
+        showSelectDrawer: false,
     },
 
     /**
@@ -15,13 +15,6 @@ Page({
 
     },
 
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady() {
-
-    },
-
     /**
      * 生命周期函数--监听页面显示
      */
@@ -29,38 +22,12 @@ Page({
 
     },
 
-    /**
+    onTapSwitchMember() {
-     * 生命周期函数--监听页面隐藏
+        this.setData({ showSelectDrawer: true })
-     */
-    onHide() {
-
     },
 
-    /**
+    /** 抽屉关闭 */
-     * 生命周期函数--监听页面卸载
+    onCloseDrawer() {
-     */
+        this.setData({ showSelectDrawer: false })
-    onUnload() {
-
     },
-
-    /**
-     * 页面相关事件处理函数--监听用户下拉动作
-     */
-    onPullDownRefresh() {
-
-    },
-
-    /**
-     * 页面上拉触底事件的处理函数
-     */
-    onReachBottom() {
-
-    },
-
-    /**
-     * 用户点击右上角分享
-     */
-    onShareAppMessage() {
-
-    }
 })

miniprogram/pages/data/data.wxml

@@ -83,10 +83,10 @@
 	</view>
 </scroll-view>
 
-<!-- <select-member-drawer
+<select-member-drawer
 	show="{{ showSelectDrawer }}"
 	source="history"
 	exclude-user-id="{{ userInfo.userId }}"
 	bind:select="onSelectMember"
 	bind:close="onCloseDrawer"
-/> -->
+/>