[AI Generated]: feat(Views): 新增设备成员页结构与样式及添加成员入口

2026-05-12 10:33:02 +08:00
parent 441baf66ad
commit d520bc275a
9 changed files with 654 additions and 0 deletions
@@ -0,0 +1,112 @@
+<view class="add-member">
+
+	<!-- 顶部浅蓝提示条 -->
+	<view class="tips">
+		<view class="tips-icon">!</view>
+		<text class="tips-text">最多支持 10 位成员</text>
+	</view>
+
+	<view class="form">
+		<!-- 白色圆角表单卡片 -->
+		<view class="form-card">
+
+			<!-- 姓名 -->
+			<view class="form-row">
+				<view class="form-label">
+					<text class="label-text">姓名</text>
+					<text class="label-star">*</text>
+				</view>
+				<view class="form-control">
+					<input class="form-input"
+						   type="text"
+						   maxlength="20"
+						   placeholder="请填写真实姓名"
+						   placeholder-class="form-placeholder"
+						   value="{{ form.name }}"
+						   bind:input="onNameInput" />
+				</view>
+			</view>
+
+			<!-- 身份证号 -->
+			<view class="form-row">
+				<view class="form-label">
+					<text class="label-text">身份证号</text>
+					<text class="label-star">*</text>
+				</view>
+				<view class="form-control">
+					<input class="form-input"
+						   type="idcard"
+						   maxlength="18"
+						   placeholder="请填写身份证号"
+						   placeholder-class="form-placeholder"
+						   value="{{ form.idCard }}"
+						   bind:input="onIdCardInput" />
+				</view>
+			</view>
+
+			<!-- 性别(由身份证自动生成) -->
+			<view class="form-row">
+				<view class="form-label">
+					<text class="label-text">性别</text>
+				</view>
+				<view class="form-control">
+					<view class="form-readonly">
+						<block wx:if="{{ form.gender }}">
+							<text class="readonly-text">{{ form.gender }}</text>
+						</block>
+						<block wx:else>
+							<text class="readonly-placeholder">自动生成,无需填写</text>
+						</block>
+					</view>
+				</view>
+			</view>
+
+			<!-- 年龄(由身份证自动生成) -->
+			<view class="form-row">
+				<view class="form-label">
+					<text class="label-text">年龄</text>
+				</view>
+				<view class="form-control">
+					<view class="form-readonly form-readonly-with-suffix">
+						<block wx:if="{{ form.age }}">
+							<text class="readonly-text">{{ form.age }}</text>
+						</block>
+						<block wx:else>
+							<text class="readonly-placeholder">自动生成,无需填写</text>
+						</block>
+						<text class="form-suffix">岁</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 身高 -->
+			<view class="form-row">
+				<view class="form-label">
+					<text class="label-text">身高</text>
+					<text class="label-star">*</text>
+				</view>
+				<view class="form-control">
+					<view class="form-input-wrap">
+						<input class="form-input form-input-with-suffix"
+							   type="digit"
+							   maxlength="5"
+							   placeholder="请填写身高"
+							   placeholder-class="form-placeholder"
+							   value="{{ form.height }}"
+							   bind:input="onHeightInput" />
+						<text class="form-suffix form-suffix-inside">cm</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+        <!-- 从已有成员中选择(蓝色描边幽灵按钮) -->
+        <view class="ghost-btn" bind:tap="onTapSelectExisting">从已有成员中选择</view>
+	</view>
+
+	<!-- 底部双按钮:取消 / 保存成员信息 -->
+	<view class="actions">
+		<view class="btn-cancel" bind:tap="onCancel">取消</view>
+		<view class="btn-primary" bind:tap="onSubmit">保存成员信息</view>
+	</view>
+</view>