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

miniprogram/app.json

@@ -1,9 +1,11 @@
 {
   "pages": [
+    "pages/equipmentMember/equipmentMember",
     "pages/login/login",
     "pages/connectedDevice/connectedDevice",
     "pages/connectedWifi/connectedWifi",
     "pages/supplementPersonal/supplementPersonal",
+    "pages/addMember/addMember",
     "pages/home/home",
     "pages/equipment/equipment",
     "pages/data/data",

miniprogram/pages/addMember/addMember.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "添加成员",
+  "usingComponents": {}
+}

miniprogram/pages/addMember/addMember.less

@@ -0,0 +1,221 @@
+.add-member {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-flow: column;
+
+	/* 顶部浅蓝提示条 */
+	.tips {
+		width: 100%;
+		height: 56rpx;
+		display: flex;
+		margin-bottom: 24rpx;
+		padding-left: 30rpx;
+		align-items: center;
+		box-sizing: border-box;
+		background-color: rgba(19, 133, 250, 0.2);
+
+		.tips-icon {
+			color: #1385FA;
+			width: 28rpx;
+			height: 28rpx;
+			font-size: 20rpx;
+			font-weight: bold;
+			margin-right: 10rpx;
+			line-height: 24rpx;
+			text-align: center;
+			border-radius: 50%;
+			box-sizing: border-box;
+			border: 1rpx solid #1385FA;
+		}
+
+		.tips-text {
+			color: #1385FA;
+			height: 24rpx;
+			font-size: 24rpx;
+			line-height: 24rpx;
+		}
+	}
+
+	.form {
+		width: 100%;
+		flex: 1;
+		overflow: hidden;
+		padding: 0 30rpx;
+		margin-bottom: 40rpx;
+		box-sizing: border-box;
+
+		/* 表单卡片 */
+		.form-card {
+			width: 100%;
+			padding: 40rpx 30rpx;
+			border-radius: 16rpx;
+			box-sizing: border-box;
+			margin-bottom: 40rpx;
+			background-color: #FFFFFF;
+
+			.form-row {
+				width: 100%;
+				margin-bottom: 40rpx;
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+
+			.form-label {
+				width: 100%;
+				height: 40rpx;
+				display: flex;
+				flex-wrap: nowrap;
+				margin-bottom: 18rpx;
+
+				.label-text {
+					color: #252535;
+					height: 40rpx;
+					font-size: 28rpx;
+					line-height: 40rpx;
+					font-weight: bold;
+					margin-right: 6rpx;
+				}
+
+				.label-star {
+					color: #FF4D4F;
+					height: 40rpx;
+					font-weight: 500;
+					font-size: 28rpx;
+					line-height: 40rpx;
+				}
+			}
+
+			.form-control {
+				width: 100%;
+			}
+
+			/* 可输入区域 */
+			.form-input {
+				width: 100%;
+				height: 88rpx;
+				padding: 0 30rpx;
+				color: #252535;
+				font-size: 26rpx;
+				border-radius: 16rpx;
+				box-sizing: border-box;
+				background-color: #FFFFFF;
+				border: 2rpx solid #E6E6EA;
+			}
+
+			.form-placeholder {
+				color: #B6B6B6;
+				font-size: 26rpx;
+			}
+
+			/* 输入框 + 后缀容器(身高 cm) */
+			.form-input-wrap {
+				position: relative;
+				width: 630rpx;
+
+				.form-input-with-suffix {
+					padding-right: 80rpx;
+				}
+
+				.form-suffix-inside {
+					position: absolute;
+					right: 30rpx;
+					top: 0;
+					height: 88rpx;
+					color: #77849E;
+					font-size: 26rpx;
+					line-height: 88rpx;
+				}
+			}
+
+			/* 只读区域(性别 / 年龄) */
+			.form-readonly {
+				width: 630rpx;
+				height: 88rpx;
+				box-sizing: border-box;
+				padding: 0 24rpx;
+				background: #F6F6F6;
+				border-radius: 16rpx;
+				display: flex;
+				align-items: center;
+
+				.readonly-text {
+					color: #252535;
+					font-size: 26rpx;
+				}
+
+				.readonly-placeholder {
+					color: #B6B6B6;
+					font-size: 26rpx;
+				}
+			}
+
+			.form-readonly-with-suffix {
+				justify-content: space-between;
+
+				.form-suffix {
+					color: #77849E;
+					height: 88rpx;
+					font-size: 26rpx;
+					line-height: 88rpx;
+				}
+			}
+		}
+
+		/* 从已有成员中选择(蓝色描边幽灵按钮) */
+		.ghost-btn {
+			color: #1385FA;
+			width: 580rpx;
+			height: 88rpx;
+			font-size: 32rpx;
+			font-weight: bold;
+			text-align: center;
+			line-height: 84rpx;
+			border-radius: 44rpx;
+			box-sizing: border-box;
+			border: 2rpx solid #1385FA;
+			margin: 0 auto;
+		}
+	}
+
+	/* 底部双按钮 */
+	.actions {
+		width: 100%;
+		height: 120rpx;
+		padding: 0 55rpx;
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		justify-content: space-between;
+		box-sizing: border-box;
+		background-color: #FFFFFF;
+		box-shadow: 0 2rpx 8rpx 0 rgba(19, 133, 250, 0.06);
+
+		.btn-cancel {
+			color: #1385FA;
+			width: 300rpx;
+			height: 88rpx;
+			font-size: 32rpx;
+			text-align: center;
+			line-height: 84rpx;
+			border-radius: 44rpx;
+			box-sizing: border-box;
+			border: 2rpx solid #1385FA;
+			background-color: #FFFFFF;
+		}
+
+		.btn-primary {
+			color: #FFFFFF;
+			width: 300rpx;
+			height: 88rpx;
+			font-size: 32rpx;
+			font-weight: bold;
+			text-align: center;
+			line-height: 88rpx;
+			border-radius: 44rpx;
+			background-color: #1385FA;
+		}
+	}
+}

miniprogram/pages/addMember/addMember.ts

@@ -0,0 +1,161 @@
+/** 表单数据模型 */
+interface MemberForm {
+	/** 姓名 */
+	name: string
+	/** 身份证号 */
+	idCard: string
+	/** 性别(由身份证解析,只读) */
+	gender: string
+	/** 年龄(由身份证解析,只读) */
+	age: string
+	/** 身高(cm) */
+	height: string
+}
+
+/** 身份证解析结果 */
+interface IdCardParsed {
+	/** 性别,空字符串表示解析失败 */
+	gender: string
+	/** 年龄,空字符串表示解析失败 */
+	age: string
+}
+
+/**
+ * 添加成员页
+ * 收集姓名、身份证号、身高,并根据身份证自动解析性别与年龄
+ * 保存后返回设备成员列表页
+ */
+Page({
+	data: {
+		// 表单数据
+		form: {
+			name: '',     // 姓名
+			idCard: '',   // 身份证号
+			gender: '',   // 性别(由身份证解析,只读)
+			age: '',      // 年龄(由身份证解析,只读)
+			height: ''    // 身高(cm)
+		} as MemberForm
+	},
+
+	/**
+	 * 姓名输入
+	 */
+	onNameInput(e: WechatMiniprogram.Input) {
+		this.setData({
+			'form.name': e.detail.value
+		})
+	},
+
+	/**
+	 * 身份证号输入
+	 * 长度满 18 位时自动解析性别与年龄,否则清空
+	 */
+	onIdCardInput(e: WechatMiniprogram.Input) {
+		const idCard = (e.detail.value || '').trim().toUpperCase()
+		const parsed = this.parseIdCard(idCard)
+
+		this.setData({
+			'form.idCard': idCard,
+			'form.gender': parsed.gender,
+			'form.age': parsed.age
+		})
+	},
+
+	/**
+	 * 身高输入
+	 */
+	onHeightInput(e: WechatMiniprogram.Input) {
+		this.setData({
+			'form.height': e.detail.value
+		})
+	},
+
+	/**
+	 * 解析身份证号,返回性别与年龄
+	 * @param idCard 18 位身份证号
+	 */
+	parseIdCard(idCard: string): IdCardParsed {
+		// 简单校验:18 位且前 17 位为数字
+		const reg = /^\d{17}[\dX]$/
+		if (!reg.test(idCard)) {
+			return { gender: '', age: '' }
+		}
+
+		// 性别:第 17 位奇数为男,偶数为女
+		const genderCode = parseInt(idCard.charAt(16), 10)
+		const gender = genderCode % 2 === 1 ? '男' : '女'
+
+		// 出生日期:第 7-14 位
+		const year = parseInt(idCard.substr(6, 4), 10)
+		const month = parseInt(idCard.substr(10, 2), 10)
+		const day = parseInt(idCard.substr(12, 2), 10)
+
+		// 基本合法性校验
+		if (
+			!year || !month || !day ||
+			month < 1 || month > 12 ||
+			day < 1 || day > 31
+		) {
+			return { gender: '', age: '' }
+		}
+
+		// 计算周岁(看是否过了今年生日)
+		const now = new Date()
+		let age = now.getFullYear() - year
+		const nowMonth = now.getMonth() + 1
+		const nowDay = now.getDate()
+		if (nowMonth < month || (nowMonth === month && nowDay < day)) {
+			age -= 1
+		}
+
+		if (age < 0 || age > 150) {
+			return { gender: '', age: '' }
+		}
+
+		return { gender, age: String(age) }
+	},
+
+	/**
+	 * 从已有成员中选择(暂留空,后续接入选择浮层)
+	 */
+	onTapSelectExisting() {
+		// TODO: 接入"从已有成员中选择"浮层/选择页
+	},
+
+	/**
+	 * 取消:直接返回上一页
+	 */
+	onCancel() {
+		wx.navigateBack()
+	},
+
+	/**
+	 * 保存成员信息
+	 * 必填:姓名、身份证号(18 位且解析成功)、身高
+	 * 未通过时 toast 提示,通过后返回上一页
+	 */
+	onSubmit() {
+		const { name, idCard, gender, age, height } = this.data.form
+		const heightNum = parseFloat(height)
+
+		if (!name.trim()) {
+			wx.showToast({ title: '请填写姓名', icon: 'none' })
+			return
+		}
+		if (idCard.length !== 18) {
+			wx.showToast({ title: '请填写正确的身份证号', icon: 'none' })
+			return
+		}
+		if (!gender || !age) {
+			wx.showToast({ title: '身份证号有误,请检查', icon: 'none' })
+			return
+		}
+		if (!height || isNaN(heightNum) || heightNum <= 0) {
+			wx.showToast({ title: '请填写身高', icon: 'none' })
+			return
+		}
+
+		// TODO: 此处后续接入成员保存接口
+		wx.navigateBack()
+	}
+})

miniprogram/pages/addMember/addMember.wxml

@@ -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>

miniprogram/pages/equipmentMember/equipmentMember.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "设备成员",
+  "usingComponents": {}
+}

miniprogram/pages/equipmentMember/equipmentMember.ts

@@ -0,0 +1,135 @@
+/** 成员项 */
+interface MemberItem {
+	/** 唯一 ID */
+	id: string
+	/** 姓名 */
+	name: string
+	/** 性别 */
+	gender: '男' | '女'
+	/** 年龄 */
+	age: number
+	/** 身高(cm) */
+	height: number
+	/** 头像色块(无图片时使用) */
+	avatar: string
+	/** 是否本人 */
+	isSelf: boolean
+	/** 是否他人添加(只读,不显示编辑/删除) */
+	isFromOther: boolean
+}
+
+/** 设备卡片 */
+interface DeviceCard {
+	/** 设备 ID */
+	id: string
+	/** 设备名称 */
+	name: string
+	/** 已使用容量(成员数) */
+	capacityUsed: number
+	/** 总容量 */
+	capacityTotal: number
+}
+
+/**
+ * 设备成员页
+ * 两态:已连接(connected=true) / 未连接(connected=false)
+ * connected 为页面内部全局状态,后续接入真实设备状态时替换
+ */
+Page({
+	data: {
+		// 设备连接状态(全局,内部控制)
+		connected: true,
+
+		// 设备卡片
+		deviceCard: {
+			id: 'device-001',
+			name: 'MX-W30A1',
+			capacityUsed: 4,
+			capacityTotal: 10
+		} as DeviceCard,
+
+		// 成员列表(色块占位头像)
+		memberList: [
+			{
+				id: 'm-001',
+				name: '陈小飞',
+				gender: '男',
+				age: 28,
+				height: 175,
+				avatar: '#1385FA',
+				isSelf: true,
+				isFromOther: false
+			},
+			{
+				id: 'm-002',
+				name: '李镇南',
+				gender: '男',
+				age: 32,
+				height: 178,
+				avatar: '#2AC79F',
+				isSelf: false,
+				isFromOther: false
+			},
+			{
+				id: 'm-003',
+				name: '张颖',
+				gender: '女',
+				age: 26,
+				height: 165,
+				avatar: '#FF8FAB',
+				isSelf: false,
+				isFromOther: false
+			},
+			{
+				id: 'm-004',
+				name: '李镇南',
+				gender: '男',
+				age: 60,
+				height: 170,
+				avatar: '#FFB347',
+				isSelf: false,
+				isFromOther: true
+			}
+		] as MemberItem[]
+	},
+
+	/**
+	 * 编辑成员
+	 */
+	onTapEdit(e: WechatMiniprogram.TouchEvent) {
+		const id = e.currentTarget.dataset.id as string
+		// TODO: 后续接入编辑成员浮层/页面
+		wx.showToast({ title: `编辑 ${id}`, icon: 'none' })
+	},
+
+	/**
+	 * 删除成员
+	 */
+	onTapDelete(e: WechatMiniprogram.TouchEvent) {
+		const id = e.currentTarget.dataset.id as string
+		wx.showModal({
+			title: '提示',
+			content: '确定删除该成员?',
+			success: (res) => {
+				if (!res.confirm) return
+				// TODO: 后续接入删除成员接口
+				const list = this.data.memberList.filter(m => m.id !== id)
+				this.setData({
+					memberList: list,
+					'deviceCard.capacityUsed': list.length
+				})
+			}
+		})
+	},
+
+	/**
+	 * 添加成员:跳转到 addMember 页
+	 * 未连接态禁用
+	 */
+	onTapAddMember() {
+		if (!this.data.connected) return
+		wx.navigateTo({
+			url: '/pages/addMember/addMember'
+		})
+	}
+})

miniprogram/pages/equipmentMember/equipmentMember.wxml

@@ -0,0 +1,15 @@
+<view class="equipmentMember">
+	<block>
+		<view class="tips"></view>
+	</block>
+
+	<view class="member-card">
+		<view class="member-card-header"></view>
+		<view class="member-card-List"></view>
+	</view>
+
+	<view class="add-member">
+		<view></view>
+		<view>添加成员（最多10位）</view>
+	</view>
+</view>