yuchunlei/bodyWeight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[AI Generated]: feat(Views): 新增完善个人信息页表单及身份证解析逻辑

Browse Source
This commit is contained in:
17792275749
2026-05-11 17:10:42 +08:00
parent 640966ae61
commit 5c923bf19a
8 changed files with 671 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/supplementPersonal/supplementPersonal.js
+127 -3
View File
@@ -1,4 +1,128 @@
/**
* 完善个人信息页
* 收集姓名、身份证号、身高,并根据身份证自动解析性别与年龄
* 提交后进入首页(tabBar)
*/
Page({
data: {},
onLoad() {}
})
data: {
// 表单数据
form: {
name: '', // 姓名
idCard: '', // 身份证号
gender: '', // 性别(由身份证解析,只读)
age: '', // 年龄(由身份证解析,只读)
height: '' // 身高(cm)
}
},
/**
* 姓名输入
*/
onNameInput(e) {
this.setData({
'form.name': e.detail.value
});
},
/**
* 身份证号输入
* 长度满 18 位时自动解析性别与年龄,否则清空
*/
onIdCardInput(e) {
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) {
this.setData({
'form.height': e.detail.value
});
},
/**
* 解析身份证号,返回性别与年龄
* @param {string} idCard 18 位身份证号
* @returns {{ gender: string, age: string }}
*/
parseIdCard(idCard) {
// 简单校验: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) };
},
/**
* 提交表单
* 必填:姓名、身份证号(18 位且解析成功)、身高
* 未通过时 toast 提示,通过后进入首页(tabBar)
*/
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.switchTab({
url: '/pages/home/home'
});
}
});
miniprogram/pages/supplementPersonal/supplementPersonal.json
+2 -1
View File
@@ -1,3 +1,4 @@
{
"usingComponents": {}
"usingComponents": {},
"navigationBarTitleText": "完善个人信息"
}
miniprogram/pages/supplementPersonal/supplementPersonal.less
+176
View File
@@ -0,0 +1,176 @@
.supplement-personal {
width: 100%;
height: 100%;
/* 顶部蓝色提示条 */
.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%;
padding: 0 30rpx;
margin-bottom: 40rpx;
box-sizing: border-box;
/* 表单卡片 */
.form-card {
width: 100%;
padding: 40rpx 30rpx;
border-radius: 16rpx;
box-sizing: border-box;
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;
}
}
}
}
/* 底部提交按钮 */
.submit-btn {
color: #FFFFFF;
width: 580rpx;
height: 88rpx;
font-size: 32rpx;
font-weight: bold;
line-height: 88rpx;
text-align: center;
background-color: #1385FA;
border-radius: 44rpx;
margin: 0 auto;
}
}
miniprogram/pages/supplementPersonal/supplementPersonal.wxml
+106 -1
View File
@@ -1 +1,106 @@
<view class="page">supplementPersonal 占位</view>
<view class="supplement-personal">
<!-- 顶部蓝色提示条 -->
<view class="tips">
<view class="tips-icon">!</view>
<text class="tips-text">请完整填写信息，用于精准计算体脂数据</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-star">*</text>
<text class="label-text">身高</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>
<!-- 底部提交按钮 -->
<view class="submit-btn" bind:tap="onSubmit">完成并进入首页</view>
</view>