feat(data,my): 实现数据页与我的页界面，新增选择成员抽屉组件

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-08-17 15:48:07 +08:00
parent 6ad51b00b1
commit 0c8285f390
13 changed files with 1098 additions and 7 deletions
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
@@ -0,0 +1,263 @@
+/* 遮罩层 */
+.drawer-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(37, 37, 53, 0.6);
+    z-index: 100;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+
+    &--visible {
+        opacity: 1;
+    }
+}
+
+/* 抽屉面板 */
+.drawer-panel {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    /* 最大高度约 75% 屏幕 */
+    height: 85vh;
+    background-color: #FFFFFF;
+    border-radius: 24rpx 24rpx 0 0;
+    z-index: 101;
+    display: flex;
+    flex-direction: column;
+    transform: translateY(100%);
+    transition: transform 0.3s ease;
+
+    &--visible {
+        transform: translateY(0);
+    }
+}
+
+/* 拖拽把手 */
+.drawer-handle {
+    width: 72rpx;
+    height: 6rpx;
+    background-color: #77849E;
+    border-radius: 3rpx;
+    margin: 32rpx auto 40rpx;
+}
+
+/* 标题栏 */
+.drawer-header {
+    width: 100%;
+    height: 32rpx;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .drawer-title {
+        color: #252535;
+        height: 32rpx;
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 32rpx;
+    }
+
+    /* 关闭按钮 */
+
+    .drawer-close {
+        width: 32rpx;
+        height: 32rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .drawer-close-icon {
+            width: 28rpx;
+            height: 28rpx;
+            position: relative;
+
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                width: 100%;
+                height: 3rpx;
+                background-color: #252535;
+                border-radius: 2rpx;
+            }
+
+            &::before {
+                transform: translate(-50%, -50%) rotate(45deg);
+            }
+
+            &::after {
+                transform: translate(-50%, -50%) rotate(-45deg);
+            }
+        }
+    }
+}
+
+/* 顶部分隔线 */
+.drawer-divider {
+    width: 690rpx;
+    height: 2rpx;
+    background-color: #EAEDF1;
+    margin: 39rpx 30rpx 0;
+    flex-shrink: 0;
+}
+
+/* 用户滚动列表 */
+.drawer-list {
+    flex: 1;
+    overflow: hidden;
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* 用户行 */
+.member-item {
+    width: 100%;
+    height: 90rpx;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 24rpx;
+
+    /* 有图片头像 */
+
+    .member-avatar {
+        width: 90rpx;
+        height: 90rpx;
+        border-radius: 24rpx;
+        flex-shrink: 0;
+
+        &--selected {
+            border: 3rpx solid #50A6FF;
+        }
+    }
+
+    /* 纯色占位头像 */
+
+    .member-avatar-placeholder {
+        width: 90rpx;
+        height: 90rpx;
+        border-radius: 24rpx;
+        flex-shrink: 0;
+
+        /* 男：蓝色 */
+
+        &--male {
+            background-color: #C6E6FF;
+        }
+
+        /* 女：粉色 */
+
+        &--female {
+            background-color: #FFD5E3;
+        }
+
+        /* 选中男 */
+
+        &--selected-male {
+            border: 3rpx solid #50A6FF;
+            width: 96rpx;
+            height: 96rpx;
+            margin: -3rpx 0 0 -3rpx;
+        }
+
+        /* 选中女 */
+
+        &--selected-female {
+            border: 3rpx solid #FF8FB5;
+            width: 96rpx;
+            height: 96rpx;
+            margin: -3rpx 0 0 -3rpx;
+        }
+    }
+
+    /* 姓名 + 副标题 */
+
+    .member-info {
+        flex: 1;
+        height: 78rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        margin-left: 23rpx;
+
+        .member-name {
+            color: #333333;
+            font-size: 32rpx;
+            font-weight: 500;
+            line-height: 32rpx;
+            white-space: nowrap;
+        }
+
+        .member-sub {
+            color: #77849E;
+            font-size: 26rpx;
+            line-height: 34rpx;
+            white-space: nowrap;
+        }
+    }
+
+    .member-type {
+        height: 40rpx;
+        flex-shrink: 0;
+
+        .member-type-tag {
+            height: 40rpx;
+            padding: 0 14rpx;
+            font-size: 22rpx;
+            line-height: 40rpx;
+            border-radius: 6rpx;
+        }
+
+        .member-type-tag--self {
+            color: #1385FA;
+            background-color: rgba(19, 133, 250, 0.12);
+        }
+
+        .member-type-tag--employee {
+            color: #10B981;
+            background-color: rgba(16, 185, 129, 0.12);
+        }
+
+        .member-type-tag--family {
+            color: #F59E0B;
+            background-color: rgba(245, 158, 11, 0.12);
+        }
+    }
+}
+
+/* 行间水平分隔线 */
+.member-separator {
+    width: 690rpx;
+    height: 2rpx;
+    background-color: #EAEDF1;
+    margin: 24rpx 30rpx 0;
+}
+
+/* 空态占位 */
+.drawer-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 80rpx;
+
+    .drawer-empty-icon {
+        width: 193rpx;
+        height: 138rpx;
+        margin-bottom: 30rpx;
+    }
+
+    .drawer-empty-text {
+        color: #808080;
+        font-size: 28rpx;
+        line-height: 28rpx;
+    }
+}
@@ -0,0 +1,190 @@
+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
+}
+
+/**
+ * 选择已有用户抽屉组件
+ * 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._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()
+          })
+      }
+    },
+
+    /** 点击遮罩关闭 */
+    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)
+    }
+  }
+})
@@ -0,0 +1,70 @@
+<!-- 选择已有用户抽屉 -->
+<block wx:if="{{ innerShow }}">
+    <!-- 遮罩 -->
+    <view class="drawer-mask {{ animVisible ? 'drawer-mask--visible' : '' }}" bind:tap="onTapMask"></view>
+
+    <!-- 抽屉面板 -->
+    <view class="drawer-panel {{ animVisible ? 'drawer-panel--visible' : '' }}">
+
+        <!-- 顶部拖拽把手 -->
+        <view class="drawer-handle"></view>
+
+        <!-- 标题栏 -->
+        <view class="drawer-header">
+            <text class="drawer-title">选择已有用户</text>
+            <view class="drawer-close" bind:tap="onTapClose">
+                <view class="drawer-close-icon"></view>
+            </view>
+        </view>
+
+        <!-- 分隔线 -->
+        <view class="drawer-divider"></view>
+
+        <!-- 用户列表 -->
+        <block wx:if="{{ members.length }}">
+            <scroll-view class="drawer-list" scroll-y>
+                <block wx:for="{{ members }}" wx:key="id">
+                    <view class="member-item" bind:tap="onTapMember" data-member="{{ item }}">
+                        <!-- 头像 -->
+                        <block wx:if="{{ item.avatar }}">
+                            <image class="member-avatar {{ item.selected ? 'member-avatar--selected' : '' }}"
+                                   src="{{ item.avatar }}" mode="aspectFill"></image>
+                        </block>
+                        <block wx:else>
+                            <view class="member-avatar-placeholder {{ item.gender === '女' ? 'member-avatar-placeholder--female' : 'member-avatar-placeholder--male' }} {{ item.selected ? 'member-avatar-placeholder--selected-male' : '' }} {{ item.selected && item.gender === '女' ? 'member-avatar-placeholder--selected-female' : '' }}"></view>
+                        </block>
+
+                        <!-- 姓名 + 性别·年龄 -->
+                        <view class="member-info">
+                            <text class="member-name">{{ item.name }}</text>
+                            <text class="member-sub">{{ item.gender }}·{{ item.age }}岁 丨 {{ item.height }}cm</text>
+                        </view>
+
+                        <view class="member-type">
+                            <block wx:if="{{ item.relationType == 1 }}">
+                                <view class="member-type-tag member-type-tag--self">本人</view>
+                            </block>
+                            <block wx:elif="{{ item.dataType === 0 }}">
+                                <view class="member-type-tag member-type-tag--employee">员工</view>
+                            </block>
+                            <block wx:elif="{{ item.dataType === 1 }}">
+                                <view class="member-type-tag member-type-tag--family">家庭用户</view>
+                            </block>
+                        </view>
+                    </view>
+
+                    <!-- 水平分隔线 -->
+                    <view class="member-separator"></view>
+                </block>
+            </scroll-view>
+        </block>
+
+        <!-- 无用户：占位 -->
+        <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>
+        </block>
+    </view>
+</block>