ajy/code/ajyApp/pages/device/bodyParams/bodyParams.nvue

<template>
	<view class="page">
		<image class="content-bg" src="/static/device/devicebg.png" mode="scaleToFill"></image>
		<view class="pageContent">
			<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="customHead">
				<view class="back-wrap" @click="goBack">
					<image src="/static/public/back.png" mode="aspectFill" class="backimg"></image>
				</view>
				<text class="customTitle">体形参数</text>
				<view class="placeholder"></view>
			</view>
			<text class="tipTxt">请录入体形参数，用于精准定位穴位</text>
			<scroll-view class="formArea" scroll-y="true">
				<view class="formInner">
				<!-- 用户姓名 -->
				<view class="formItem">
					<text class="formLabel">姓名</text>
					<view class="inputWrap">
						<input class="formInput" v-model="form.name" placeholder="请输入姓名" placeholder-class="pholder" maxlength="10" />
					</view>
				</view>

				<!-- 性别 -->
				<view class="formItem">
					<text class="formLabel">性别</text>
					<view class="genderRow">
						<view class="genderBtn" :class="{'genderActive': form.gender === 1}" @click="form.gender = 1">
							<text class="genderTxt" :style="{color: form.gender === 1 ? '#FFFFFF' : '#545F71'}">男</text>
						</view>
						<view class="genderBtn" :class="{'genderActive': form.gender === 2}" @click="form.gender = 2">
							<text class="genderTxt" :style="{color: form.gender === 2 ? '#FFFFFF' : '#545F71'}">女</text>
						</view>
					</view>
				</view>

				<!-- 年龄 -->
				<view class="formItem">
					<text class="formLabel">年龄</text>
					<view class="inputWrap">
						<input class="formInput" v-model="form.age" type="number" placeholder="例如：28" placeholder-class="pholder" maxlength="3" />
						<text class="unitTxt">岁</text>
					</view>
				</view>

				<!-- 手机号 -->
				<view class="formItem">
					<text class="formLabel">手机号</text>
					<view class="inputWrap">
						<input class="formInput" v-model="form.phone" type="number" placeholder="请输入手机号" placeholder-class="pholder" maxlength="11" />
					</view>
				</view>

				<!-- 肩宽 -->
				<view class="formItem">
					<text class="formLabel">肩宽（两肩之间的宽度）</text>
					<view class="inputWrap">
						<input class="formInput" v-model="form.shoulderWidth" type="digit" placeholder="例如：42" placeholder-class="pholder" />
						<text class="unitTxt">cm</text>
					</view>
				</view>

				<!-- 身高 -->
				<view class="formItem">
					<text class="formLabel">身高</text>
					<view class="inputWrap">
						<input class="formInput" v-model="form.height" type="digit" placeholder="例如：175" placeholder-class="pholder" />
						<text class="unitTxt">cm</text>
					</view>
				</view>

				<!-- 体重 -->
				<view class="formItem">
					<text class="formLabel">体重</text>
					<view class="inputWrap">
						<input class="formInput" v-model="form.weight" type="digit" placeholder="例如：65" placeholder-class="pholder" />
						<text class="unitTxt">kg</text>
					</view>
				</view>

				<!-- 身长/坐高 -->
				<view class="formItem">
					<text class="formLabel">坐高（坐姿时头顶到坐面的高度）</text>
					<view class="inputWrap">
						<input class="formInput" v-model="form.bodyHeight" type="digit" placeholder="例如：85" placeholder-class="pholder" />
						<text class="unitTxt">cm</text>
					</view>
				</view>

				<!-- 脊柱长度 -->
				<view class="formItem">
					<text class="formLabel">C7-S4 脊柱长度</text>
					<view class="inputWrap">
						<input class="formInput" v-model="form.spineLength" type="digit" placeholder="例如：48" placeholder-class="pholder" />
						<text class="unitTxt">cm</text>
					</view>
				</view>

				<!-- 保存按钮 -->
				<view class="saveBtn" @click="onSave">
					<text class="saveTxt">保存</text>
				</view>

				<view class="bottomSpace"></view>
				</view>
			</scroll-view>
		</view>
		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import ayToast from '@/components/ay-toast/ay-toast.nvue'
import { addGroupMember, updateGroupMember, getGroupMembers } from '@/utils/api/group.js'

export default {
	components: {
		ayToast
	},
	data() {
		return {
			statusBarHeight: 44,
			mode: 'add', // add / edit
			groupId: '',
			profileId: '',
			form: {
				name: '',
				gender: 1,
				age: '',
				phone: '',
				shoulderWidth: '',
				height: '',
				weight: '',
				bodyHeight: '',
				spineLength: ''
			}
		}
	},
	onLoad(options) {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
		this.mode = options.mode || 'add'
		this.groupId = options.groupId || ''
		this.profileId = options.profileId || ''
		if (this.mode === 'edit' && this.profileId) {
			this.loadUserData()
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		/** 加载编辑数据 - 从后端获取群组成员列表中查找当前成员 */
		async loadUserData() {
			try {
				const list = await getGroupMembers(this.groupId)
				const user = (list || []).find(u => String(u.profileId) === String(this.profileId))
				if (user) {
					this.form.name = user.name || ''
					this.form.gender = user.gender || 1
					this.form.age = user.age ? String(user.age) : ''
					this.form.phone = user.phone || ''
					this.form.shoulderWidth = user.shoulderWidth ? String(user.shoulderWidth) : ''
					this.form.height = user.height ? String(user.height) : ''
					this.form.weight = user.weight ? String(user.weight) : ''
					this.form.bodyHeight = user.bodyHeight ? String(user.bodyHeight) : ''
					this.form.spineLength = user.spineLength ? String(user.spineLength) : ''
				}
			} catch (e) {
				console.error('加载用户数据失败:', e)
			}
		},
		/** 校验并保存 */
		async onSave() {
			// 校验姓名
			if (!this.form.name.trim()) {
				this.$refs.ayToast.error('请输入姓名')
				return
			}

			// 构建请求参数
			const params = {
				name: this.form.name.trim(),
				gender: this.form.gender
			}
			if (this.form.age) params.age = Number(this.form.age)
			if (this.form.phone) params.phone = this.form.phone
			if (this.form.shoulderWidth) params.shoulderWidth = Number(this.form.shoulderWidth)
			if (this.form.height) params.height = Number(this.form.height)
			if (this.form.weight) params.weight = Number(this.form.weight)
			if (this.form.bodyHeight) params.bodyHeight = Number(this.form.bodyHeight)
			if (this.form.spineLength) params.spineLength = Number(this.form.spineLength)

			try {
				if (this.mode === 'add') {
					await addGroupMember(this.groupId, params)
					this.$refs.ayToast.success('添加成功')
				} else {
					await updateGroupMember(this.groupId, this.profileId, params)
					this.$refs.ayToast.success('保存成功')
				}
				setTimeout(() => {
					uni.navigateBack()
				}, 800)
			} catch (e) {
				console.error('保存失败:', e)
			}
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	position: relative;
}
.content-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 750rpx;
	height: 2000px;
}
.pageContent {
	flex: 1;
	background-image: linear-gradient(to bottom, rgba(56,149,136,1), rgba(56,149,136,0.5));
}
.status-bar {
	background-color: rgba(0,0,0,0);
}
.customHead {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 88rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
}
.back-wrap {
	width: 50rpx;
	height: 50rpx;
	justify-content: center;
	align-items: center;
}
.backimg {
	width: 50rpx;
	height: 50rpx;
}
.customTitle {
	font-weight: bold;
	font-size: 32rpx;
	color: #FFFFFF;
}
.placeholder {
	width: 50rpx;
}
.tipTxt {
	font-size: 24rpx;
	color: rgba(255,255,255,0.7);
	margin-left: 38rpx;
	margin-top: 10rpx;
	margin-bottom: 20rpx;
}
.formArea {
	flex: 1;
}
.formInner {
	padding-left: 30rpx;
	padding-right: 30rpx;
}
.formItem {
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 28rpx;
	margin-bottom: 20rpx;
}
.formLabel {
	font-size: 26rpx;
	color: #9BA5B7;
	margin-bottom: 16rpx;
}
.inputWrap {
	flex-direction: row;
	align-items: center;
	background-color: #F5F7FA;
	border-radius: 12rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	height: 80rpx;
}
.formInput {
	flex: 1;
	font-size: 30rpx;
	color: #333333;
}
.unitTxt {
	font-size: 26rpx;
	color: #9BA5B7;
	margin-left: 10rpx;
}
.genderRow {
	flex-direction: row;
}
.genderBtn {
	width: 160rpx;
	height: 72rpx;
	border-radius: 36rpx;
	background-color: #F5F7FA;
	justify-content: center;
	align-items: center;
	margin-right: 24rpx;
}
.genderActive {
	background-color: #389588;
}
.genderTxt {
	font-size: 28rpx;
}
.saveBtn {
	background-color: #389588;
	border-radius: 44rpx;
	height: 88rpx;
	justify-content: center;
	align-items: center;
	margin-top: 30rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
}
.saveTxt {
	font-size: 32rpx;
	color: #FFFFFF;
	font-weight: bold;
}
.bottomSpace {
	height: 60rpx;
}
</style>