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

export default {
	components: {
		ayToast
	},
	data() {
		return {
			statusBarHeight: 44,
			mode: 'add', // add / edit
			userId: '',
			form: {
				name: '',
				gender: 1,
				age: '',
				shoulderHeight: '',
				shoulderWidth: '',
				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 user = list.find(u => u.id === this.userId)
			if (user) {
				this.form.name = user.name || ''
				this.form.gender = user.gender || 1
				this.form.age = user.age ? String(user.age) : ''
				this.form.shoulderHeight = user.shoulderHeight ? String(user.shoulderHeight) : ''
				this.form.shoulderWidth = user.shoulderWidth ? String(user.shoulderWidth) : ''
				this.form.weight = user.weight ? String(user.weight) : ''
			}
		},
		onShoulderHeightChange(e) {
			this.form.shoulderHeight = String(e.detail.value)
		},
		onShoulderWidthChange(e) {
			this.form.shoulderWidth = String(e.detail.value)
		},
		/** 校验并保存 */
		onSave() {
			// 校验
			if (!this.form.name.trim()) {
				this.$refs.ayToast.error('请输入姓名')
				return
			}
			const height = Number(this.form.shoulderHeight)
			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 weight = Number(this.form.weight)
			if (!weight || weight < 10 || weight > 300) {
				this.$refs.ayToast.error('体重范围为10-300kg')
				return
			}

			let list = uni.getStorageSync('user_manage_list') || []

			if (this.mode === 'add') {
				// 再次检查是否超过10个
				if (list.length >= 10) {
					this.$refs.ayToast.error('最多可添加10个用户')
					return
				}
				const newUser = {
					id: 'user_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6),
					name: this.form.name.trim(),
					gender: this.form.gender,
					age: Number(this.form.age) || 0,
					shoulderHeight: height,
					shoulderWidth: width,
					weight: weight,
					createTime: Date.now()
				}
				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 {
				// 编辑模式
				const index = list.findIndex(u => u.id === this.userId)
				if (index === -1) {
					this.$refs.ayToast.error('用户信息已过期，请刷新')
					return
				}
				list[index] = {
					...list[index],
					name: this.form.name.trim(),
					gender: this.form.gender,
					age: Number(this.form.age) || 0,
					shoulderHeight: height,
					shoulderWidth: width,
					weight: weight
				}
				uni.setStorageSync('user_manage_list', list)
				// 如果编辑的是当前用户，更新当前用户缓存
				const curId = uni.getStorageSync('current_manage_user_id')
				if (curId === this.userId) {
					uni.setStorageSync('current_manage_user', list[index])
				}
				this.$refs.ayToast.success('保存成功')
			}

			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		}
	}
}
</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>