[AI Generated]: refactor(Views): 优化设备成员页结构与样式细节

2026-05-12 11:10:18 +08:00
parent d520bc275a
commit 6a4f09e0a0
2 changed files with 376 additions and 10 deletions
@@ -1,15 +1,81 @@
 <view class="equipmentMember">
-	<block>
-		<view class="tips"></view>
+
+	<!-- 未连接提示条 -->
+	<block wx:if="{{ !connected }}">
+		<view class="tips">
+			<view class="tips-icon">!</view>
+			<text class="tips-text">设备未连接,请前往连接</text>
+		</view>
 	</block>

-	<view class="member-card">
-		<view class="member-card-header"></view>
-		<view class="member-card-List"></view>
-	</view>
+	<view class="seaction">
+		<!-- 设备卡 -->
+		<view class="device-card">
+			<view class="device-illustration"></view>
+			<view class="device-info">
+				<view class="device-name">{{ deviceCard.name }}</view>
+				<view class="device-status">
+					<view class="status-dot {{ connected ? 'status-dot-on' : 'status-dot-off' }}"></view>
+					<view class="status-text">{{ connected ? '蓝牙已连接' : '未连接' }}</view>
+				</view>
+			</view>
+		</view>

-	<view class="add-member">
-		<view></view>
-		<view>添加成员（最多10位）</view>
+		<!-- 成员卡(容量 + 列表) -->
+		<view class="member-card">
+			<!-- 设备容量(仅已连接态) -->
+			<block wx:if="{{ connected }}">
+				<view class="member-card-header">
+					<view class="capacity-label">设备容量</view>
+					<view class="capacity-value">
+						{{ deviceCard.capacityUsed }}/{{ deviceCard.capacityTotal }}
+					</view>
+				</view>
+			</block>
+
+			<!-- 成员列表 -->
+			<scroll-view scroll-y class="member-card-list">
+				<block wx:for="{{ memberList }}" wx:key="id">
+					<view class="member-item">
+						<!-- 头像色块 -->
+						<view class="member-avatar" style="background: {{ item.avatar }};"></view>
+
+						<!-- 信息列 -->
+						<view class="member-info">
+							<view class="member-name-row">
+								<view class="member-name">{{ item.name }}</view>
+								<block wx:if="{{ item.isSelf }}">
+									<view class="badge badge-self">本人</view>
+								</block>
+							</view>
+							<view class="member-meta">
+								<text class="meta-text">{{ item.gender }}</text>
+								<text class="meta-divider">·</text>
+								<text class="meta-text">{{ item.age }}岁</text>
+								<text class="meta-divider">|</text>
+								<text class="meta-text">{{ item.height }}cm</text>
+							</view>
+						</view>
+
+						<!-- 右侧:他人添加 badge 或 纯文字编辑/删除 -->
+						<view class="member-actions">
+							<block wx:if="{{ item.isFromOther }}">
+								<view class="badge badge-other">他人添加</view>
+							</block>
+							<block wx:elif="{{ !item.isSelf }}">
+								<view class="action-text" data-id="{{ item.id }}" bind:tap="onTapEdit">编辑</view>
+								<view class="action-text action-text-danger" data-id="{{ item.id }}" bind:tap="onTapDelete">删除</view>
+							</block>
+						</view>
+					</view>
+				</block>
+			</scroll-view>
+		</view>
+
+		<!-- 底部添加成员按钮 -->
+		<view class="add-member {{ connected ? '' : 'add-member-disabled' }}" bind:tap="onTapAddMember">
+			<view class="add-member-icon">+</view>
+			<view class="add-member-text">添加成员<text>（最多10位）</text></view>
+		</view>
 	</view>
-</view>
+</view>