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="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="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="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.bodyHeight" type="digit" placeholder="例如：135" placeholder-class="pholder" />
						<text class="unitTxt">cm</text>
					</view>
					<view class="sliderWrap">
						<slider :value="Number(form.bodyHeight) || 100" :min="50" :max="250" :step="1"
							activeColor="#389588" backgroundColor="#E8E8E8" block-size="20"
							@change="onBodyHeightChange" />
						<view class="sliderRange">
							<text class="rangeTxt">50cm</text>
							<text class="rangeTxt">250cm</text>
						</view>
					</view>
				</view>

				<!-- 脊柱长度 -->
				<view class="formItem">
					<text class="formLabel">C7-S4脊柱长度</text>
					<view class="inputWrap">
						<input class="formInput" v-model="form.spineLength" type="digit" placeholder="例如：45" placeholder-class="pholder" />
						<text class="unitTxt">cm</text>
					</view>
					<view class="sliderWrap">
						<slider :value="Number(form.spineLength) || 45" :min="1" :max="80" :step="1"
							activeColor="#389588" backgroundColor="#E8E8E8" block-size="20"
							@change="onSpineLengthChange" />
						<view class="sliderRange">
							<text class="rangeTxt">1cm</text>
							<text class="rangeTxt">80cm</text>
						</view>
					</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 class="sliderWrap">
						<slider :value="Number(form.shoulderWidth) || 40" :min="20" :max="80" :step="1"
							activeColor="#389588" backgroundColor="#E8E8E8" block-size="20"
							@change="onShoulderWidthChange" />
						<view class="sliderRange">
							<text class="rangeTxt">20cm</text>
							<text class="rangeTxt">80cm</text>
						</view>
					</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="saveBtn" @click="onSave">
					<text class="saveTxt">保存</text>
				</view>

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

<script>
import ayToast from '@/components/ay-toast/ay-toast.nvue'
import { addGroupMember, updateGroupMember } from '@/utils/api/device'
import { updateProfile } from '@/utils/api/user'

export default {
	components: {
		ayToast
	},
	data() {
		return {
			statusBarHeight: 44,
			mode: 'add', // add / edit
			userId: '',
			form: {
				name: '',
				phone: '',
				gender: 1,
				age: '',
				bodyHeight: '',
				shoulderWidth: '',
				spineLength: '',
				weight: ''
			}
		}
	},
	onLoad(options) {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
		this.mode = options.mode || 'add'
		this.userId = options.userId || ''
		if (this.mode === 'edit' && this.userId) {
			this.loadUserData()
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		/** 加载编辑数据 */
		loadUserData() {
			const list = uni.getStorageSync('user_manage_list') || []
			const currentUser = uni.getStorageSync('current_manage_user') || {}
			const user = list.find(u => String(u.id) === String(this.userId)) ||
				((String(currentUser.id) === String(this.userId) || String(currentUser.profileId) === String(this.userId)) ? currentUser : null)
			if (user) {
				this.form.name = user.name || ''
				this.form.phone = user.phone || ''
				this.form.gender = user.gender || 1
				this.form.age = user.age ? String(user.age) : ''
				this.form.bodyHeight = user.bodyHeight || user.shoulderHeight ? String(user.bodyHeight || user.shoulderHeight) : ''
				this.form.shoulderWidth = user.shoulderWidth ? String(user.shoulderWidth) : ''
				this.form.spineLength = user.spineLength ? String(user.spineLength) : ''
				this.form.weight = user.weight ? String(user.weight) : ''
			}
		},
		onBodyHeightChange(e) {
			this.form.bodyHeight = String(e.detail.value)
		},
		onShoulderWidthChange(e) {
			this.form.shoulderWidth = String(e.detail.value)
		},
		onSpineLengthChange(e) {
			this.form.spineLength = String(e.detail.value)
		},
		/** 校验并保存 */
		async onSave() {
			// 校验
			if (!this.form.name.trim()) {
				this.$refs.ayToast.error('请输入姓名')
				return
			}
			const phone = this.form.phone.trim()
			if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
				this.$refs.ayToast.error('手机号格式不正确')
				return
			}
			const age = Number(this.form.age)
			if (!age || age < 1 || age > 120) {
				this.$refs.ayToast.error('年龄范围为1-120岁')
				return
			}
			const height = Number(this.form.bodyHeight)
			if (!height || height < 50 || height > 250) {
				this.$refs.ayToast.error('身长/坐高范围为50-250cm')
				return
			}
			const width = Number(this.form.shoulderWidth)
			if (!width || width < 20 || width > 80) {
				this.$refs.ayToast.error('肩宽范围为20-80cm')
				return
			}
			const spineLength = Number(this.form.spineLength)
			if (!spineLength || spineLength < 1 || spineLength > 80) {
				this.$refs.ayToast.error('脊柱长度范围为1-80cm')
				return
			}
			const weight = this.form.weight ? Number(this.form.weight) : null
			if (weight && (weight < 10 || weight > 300)) {
				this.$refs.ayToast.error('体重范围为10-300kg')
				return
			}

			let list = uni.getStorageSync('user_manage_list') || []
			const currentDevice = uni.getStorageSync('current_device') || {}
			const payload = {
				name: this.form.name.trim(),
				phone,
				gender: this.form.gender,
				age,
				bodyHeight: height,
				shoulderWidth: width,
				spineLength,
				weight
			}

			if (this.mode === 'add') {
				// 再次检查是否超过10个
				if (list.length >= 10) {
					this.$refs.ayToast.error('最多可添加10个用户')
					return
				}
				if (!currentDevice.groupId) {
					this.$refs.ayToast.error('公共设备不支持新增成员')
					return
				}
				const saved = await addGroupMember(currentDevice.groupId, payload)
				const newUser = this.normalizeSavedMember(saved)
				list.push(newUser)
				uni.setStorageSync('user_manage_list', list)
				// 如果是第一个用户，自动设为当前用户
				if (list.length === 1) {
					uni.setStorageSync('current_manage_user_id', newUser.id)
					uni.setStorageSync('current_manage_user', newUser)
				}
				this.$refs.ayToast.success('添加成功')
			} else {
				// 编辑模式
				let index = list.findIndex(u => String(u.id) === String(this.userId))
				if (index === -1) {
					const currentUser = uni.getStorageSync('current_manage_user') || {}
					if (String(currentUser.id) === String(this.userId) || String(currentUser.profileId) === String(this.userId)) {
						list = [this.normalizeSavedMember(currentUser)]
						index = 0
					}
				}
				if (index === -1) {
					this.$refs.ayToast.error('用户信息已过期，请刷新')
					return
				}
				let saved
				if (currentDevice.groupId) {
					saved = await updateGroupMember(currentDevice.groupId, this.userId, payload)
				} else {
					saved = await updateProfile(payload)
				}
				list[index] = this.normalizeSavedMember({ ...list[index], ...(saved || payload) })
				uni.setStorageSync('user_manage_list', list)
				// 如果编辑的是当前用户，更新当前用户缓存
				const curId = uni.getStorageSync('current_manage_user_id')
				if (String(curId) === String(this.userId)) {
					uni.setStorageSync('current_manage_user', list[index])
				}
				this.$refs.ayToast.success('保存成功')
			}

			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		},
		normalizeSavedMember(item) {
			return {
				...item,
				id: String(item.profileId || item.id),
				bodyHeight: item.bodyHeight || item.shoulderHeight || '',
				profileComplete: !!item.profileComplete
			}
		}
	}
}
</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;
	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;
}
.sliderWrap {
	margin-top: 20rpx;
}
.sliderRange {
	flex-direction: row;
	justify-content: space-between;
	margin-top: 4rpx;
}
.rangeTxt {
	font-size: 22rpx;
	color: #9BA5B7;
}
.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>