[AI Generated]: feat(Comp): 新增添加用户弹窗的用户类型切换功能,支持员工模式(工号查询)与家庭用户模式(手动填写),切换时自动清空已填数据

This commit is contained in:
17792275749
2026-04-08 09:26:39 +08:00
parent 912fafc539
commit 7a662d7c34
2 changed files with 274 additions and 91 deletions
@@ -8,8 +8,22 @@ Component({
data: {
animationData: null,
modalStatus: false,
// 用户类型:employee=员工,family=家庭用户
userType: 'employee',
// 员工模式
workNo: "",
userInfo: null,
// 家庭用户模式 - 手动填写
familyInfo: {
name: '',
sex: 1,
birthday: '',
height: '',
weight: ''
},
// 性别选择器选项
genderOptions: ['男', '女'],
genderIndex: 0,
},
lifetimes: {
// 在组件实例进入页面节点树时执行
@@ -32,7 +46,7 @@ Component({
delay: 0
})
this.animation = animation;
animation.translateY(1100).step();
animation.translateY(1200).step();
this.setData({
animationData: animation.export(),
modalStatus: true
@@ -54,7 +68,7 @@ Component({
delay: 0
})
this.animation = animation;
animation.translateY(1100).step();
animation.translateY(1200).step();
this.setData({
animationData: animation.export(),
})
@@ -67,16 +81,44 @@ Component({
}, 200);
},
// 关闭弹窗并重置数据
// 关闭弹窗并重置所有数据
closeModal() {
this.setData({
userType: 'employee',
workNo: "",
userInfo: null,
familyInfo: {
name: '',
sex: 1,
birthday: '',
height: '',
weight: ''
},
genderIndex: 0,
});
this.hideModal();
},
// 监听工号输入
// 切换用户类型,同时清空所有已填数据
switchUserType(e) {
const type = e.currentTarget.dataset.type;
if (type === this.data.userType) return;
this.setData({
userType: type,
workNo: "",
userInfo: null,
familyInfo: {
name: '',
sex: 1,
birthday: '',
height: '',
weight: ''
},
genderIndex: 0,
});
},
// 监听工号输入(员工模式)
onWorkNoInput(e) {
this.setData({
workNo: e.detail.value,
@@ -84,17 +126,47 @@ Component({
});
},
// 监听身高输入
// 监听身高输入(员工模式)
onHeightInput(e) {
this.setData({ 'userInfo.height': e.detail.value });
},
// 监听体重输入
// 监听体重输入(员工模式)
onWeightInput(e) {
this.setData({ 'userInfo.weight': e.detail.value });
},
// 根据工号查询用户信息
// 监听家庭用户姓名输入
onFamilyNameInput(e) {
this.setData({ 'familyInfo.name': e.detail.value });
},
// 监听家庭用户性别选择
onFamilyGenderChange(e) {
const index = e.detail.value;
// 1=男,2=女
this.setData({
genderIndex: index,
'familyInfo.sex': index === '0' || index === 0 ? 1 : 2
});
},
// 监听家庭用户生日选择
onFamilyBirthdayChange(e) {
this.setData({ 'familyInfo.birthday': e.detail.value });
},
// 监听家庭用户身高输入
onFamilyHeightInput(e) {
this.setData({ 'familyInfo.height': e.detail.value });
},
// 监听家庭用户体重输入
onFamilyWeightInput(e) {
this.setData({ 'familyInfo.weight': e.detail.value });
},
// 根据工号查询用户信息(员工模式)
searchUser() {
let workNo = this.data.workNo.trim();
if (!workNo) {
@@ -130,38 +202,67 @@ Component({
// 确定提交
submit() {
const sn = app.globalData.ppScale.device.mac.replace(/:/g, '');
if (this.data.userType === 'employee') {
// 员工模式:必须先查询到用户信息
if (!this.data.userInfo) {
wx.showToast({
title: "请先查询用户信息",
icon: "none"
})
wx.showToast({ title: "请先查询用户信息", icon: "none" });
return;
}
let userInfo = this.data.userInfo;
// 校验身高
if (!userInfo.height) {
wx.showToast({ title: "请输入身高", icon: "none" });
return;
}
// 校验体重
if (!userInfo.weight) {
wx.showToast({ title: "请输入体重", icon: "none" });
return;
}
userInfo.sn = app.globalData.ppScale.device.mac.replace(/:/g, '')
userInfo.sn = sn;
$.ajax("weighingScale/v2/edit/user", userInfo, "POST", true, "正在添加...").then(res => {
wx.showToast({
title: "添加成功",
icon: "success"
})
wx.showToast({ title: "添加成功", icon: "success" });
this.triggerEvent('returnDate', { userInfo });
this.closeModal();
}).catch(() => {
wx.showToast({
title: "添加失败,请重试",
icon: "none"
})
})
wx.showToast({ title: "添加失败,请重试", icon: "none" });
});
} else {
// 家庭用户模式:校验手动填写的字段
const familyInfo = this.data.familyInfo;
if (!familyInfo.name.trim()) {
wx.showToast({ title: "请输入姓名", icon: "none" });
return;
}
if (!familyInfo.birthday) {
wx.showToast({ title: "请选择生日", icon: "none" });
return;
}
if (!familyInfo.height) {
wx.showToast({ title: "请输入身高", icon: "none" });
return;
}
if (!familyInfo.weight) {
wx.showToast({ title: "请输入体重", icon: "none" });
return;
}
const submitData = {
realname: familyInfo.name.trim(),
sex: familyInfo.sex,
birthday: familyInfo.birthday,
height: familyInfo.height,
weight: familyInfo.weight,
sn: sn
};
$.ajax("weighingScale/v2/edit/user", submitData, "POST", true, "正在添加...").then(res => {
wx.showToast({ title: "添加成功", icon: "success" });
this.triggerEvent('returnDate', { userInfo: submitData });
this.closeModal();
}).catch(() => {
wx.showToast({ title: "添加失败,请重试", icon: "none" });
});
}
}
}
});
@@ -8,13 +8,30 @@
<view>添加用户</view>
</view>
<view class="seaction">
<!-- 用户类型切换 -->
<view class="select">
<view
class="{{userType === 'employee' ? 'selectActive' : ''}}"
bindtap="switchUserType"
data-type="employee"
>员工</view>
<view
class="{{userType === 'family' ? 'selectActive' : ''}}"
bindtap="switchUserType"
data-type="family"
>家庭用户</view>
</view>
<!-- 员工模式 -->
<block wx:if="{{userType === 'employee'}}">
<!-- 工号输入 -->
<view class="input">
<view>工号:</view>
<view>
<input type="text" maxlength="8" placeholder="输入工号自动显示员工信息" value="{{workNo}}" bindinput="onWorkNoInput" bindconfirm="searchUser" />
</view>
<!-- <view class="searchBtn" bind:tap="searchUser">查询</view>-->
</view>
<!-- 姓名(只读) -->
<view class="only">
<view>姓名:</view>
<view>
@@ -29,6 +46,7 @@
<view></view>
</view>
</view>
<!-- 性别(只读) -->
<view class="only">
<view>性别:</view>
<view>
@@ -43,6 +61,7 @@
<view></view>
</view>
</view>
<!-- 生日(只读) -->
<view class="only">
<view>生日:</view>
<view>
@@ -57,6 +76,7 @@
<view></view>
</view>
</view>
<!-- 身高(可输入) -->
<view class="inputUnit">
<view>身高:</view>
<view>
@@ -66,6 +86,7 @@
<view>cm</view>
</view>
</view>
<!-- 体重(可输入) -->
<view class="inputUnit">
<view>体重:</view>
<view>
@@ -75,6 +96,67 @@
<view>kg</view>
</view>
</view>
</block>
<!-- 家庭用户模式 -->
<block wx:elif="{{userType === 'family'}}">
<!-- 姓名(手动输入) -->
<view class="input">
<view>姓名:</view>
<view>
<input type="text" placeholder="请输入姓名" value="{{familyInfo.name}}" bindinput="onFamilyNameInput" />
</view>
</view>
<!-- 性别(picker 选择) -->
<view class="only">
<view>性别:</view>
<view>
<view>
<picker range="{{genderOptions}}" value="{{genderIndex}}" bindchange="onFamilyGenderChange">
<view style="color: #252535; font-size: 32rpx; font-weight: 500; height: 100rpx; line-height: 100rpx;">
{{genderOptions[genderIndex]}}
</view>
</picker>
</view>
<view></view>
</view>
</view>
<!-- 生日(picker date 选择) -->
<view class="only">
<view>生日:</view>
<view>
<view>
<picker mode="date" value="{{familyInfo.birthday}}" start="1900-01-01" bindchange="onFamilyBirthdayChange">
<view style="color: {{familyInfo.birthday ? '#252535' : '#808080'}}; font-size: 32rpx; font-weight: 500; height: 100rpx; line-height: 100rpx;">
{{familyInfo.birthday || '请选择生日'}}
</view>
</picker>
</view>
<view></view>
</view>
</view>
<!-- 身高(手动输入) -->
<view class="inputUnit">
<view>身高:</view>
<view>
<view>
<input type="digit" value="{{familyInfo.height}}" bindinput="onFamilyHeightInput" placeholder="请输入身高" />
</view>
<view>cm</view>
</view>
</view>
<!-- 体重(手动输入) -->
<view class="inputUnit">
<view>体重:</view>
<view>
<view>
<input type="digit" value="{{familyInfo.weight}}" bindinput="onFamilyWeightInput" placeholder="请输入体重" />
</view>
<view>kg</view>
</view>
</view>
</block>
</view>
<view class="footer">
<view bind:tap="closeModal">取消</view>