feat(member): 身份证查询已存在时弹框确认,表单锁定只读
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
e2b44b4d63
commit
30d62a9bd0
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@@ -0,0 +1,139 @@
|
|||||||
|
.confirm-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
|
||||||
|
&.anim-visible {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
position: relative;
|
||||||
|
width: 660rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
transform: scale(0.9);
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.anim-visible {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
padding-top: 50rpx;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
width: 100%;
|
||||||
|
height: 36rpx;
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #252535;
|
||||||
|
line-height: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-sub-title {
|
||||||
|
width: 100%;
|
||||||
|
height: 32rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #1385FA;
|
||||||
|
line-height: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.modal-body-box {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background-color: #F6F6F6;
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 1px solid #EAECF1;
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
color: #77849E;
|
||||||
|
height: 80rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
color: #252535;
|
||||||
|
height: 80rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
width: 100%;
|
||||||
|
height: 110rpx;
|
||||||
|
display: flex;
|
||||||
|
border-top: 1rpx solid #EAECF1;
|
||||||
|
|
||||||
|
.modal-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 110rpx;
|
||||||
|
line-height: 110rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-btn-cancel {
|
||||||
|
color: #77849E;
|
||||||
|
border-right: 1rpx solid #EAECF1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-btn-confirm {
|
||||||
|
color: #1385FA;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
/**
|
||||||
|
* 用户信息确认弹框组件
|
||||||
|
* Properties: show(控制显示), userInfo(用户信息)
|
||||||
|
* Events: confirm(确认), cancel(取消)
|
||||||
|
*/
|
||||||
|
Component({
|
||||||
|
properties: {
|
||||||
|
/** 是否显示弹框 */
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
/** 用户信息数据 */
|
||||||
|
userInfo: {
|
||||||
|
type: Object,
|
||||||
|
value: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data: {
|
||||||
|
/** 控制 wx:if,DOM 是否存在 */
|
||||||
|
innerShow: false,
|
||||||
|
/** 控制 --visible 类,触发 CSS transition */
|
||||||
|
animVisible: false
|
||||||
|
},
|
||||||
|
|
||||||
|
observers: {
|
||||||
|
/**
|
||||||
|
* 监听外部 show 变化:
|
||||||
|
* 打开时先展示弹框再执行动画;关闭时移除动画类后移除 DOM
|
||||||
|
*/
|
||||||
|
show(val: boolean) {
|
||||||
|
if (val) {
|
||||||
|
this.setData({ innerShow: true })
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setData({ animVisible: true })
|
||||||
|
}, 20)
|
||||||
|
} else {
|
||||||
|
this.setData({ animVisible: false })
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setData({ innerShow: false })
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/** 点击遮罩关闭 */
|
||||||
|
onTapMask() {
|
||||||
|
this.triggerEvent('cancel')
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 点击取消按钮 */
|
||||||
|
onTapCancel() {
|
||||||
|
this.triggerEvent('cancel')
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 点击确认按钮 */
|
||||||
|
onTapConfirm() {
|
||||||
|
this.triggerEvent('confirm')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
<view class="confirm-modal" wx:if="{{ innerShow }}">
|
||||||
|
<!-- 遮罩层 -->
|
||||||
|
<view class="modal-mask {{ animVisible ? 'anim-visible' : '' }}" bind:tap="onTapMask"></view>
|
||||||
|
|
||||||
|
<!-- 弹框内容 -->
|
||||||
|
<view class="modal-content {{ animVisible ? 'anim-visible' : '' }}">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="modal-header">
|
||||||
|
<view class="modal-title">当前身份证号已存在</view>
|
||||||
|
<view class="modal-sub-title">是否直接复用信息?</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 用户信息展示 -->
|
||||||
|
<view class="modal-body" wx:if="{{ userInfo }}">
|
||||||
|
<view class="modal-body-box">
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="info-label">姓名:</text>
|
||||||
|
<text class="info-value">{{ userInfo.realname }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="info-label">身份证号:</text>
|
||||||
|
<text class="info-value">{{ userInfo.idCard }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="info-label">性别:</text>
|
||||||
|
<text class="info-value">{{ userInfo.sex_dictText }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="info-label">身高:</text>
|
||||||
|
<text class="info-value">{{ userInfo.height }}cm</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="info-label">体重:</text>
|
||||||
|
<text class="info-value">{{ userInfo.weight }}kg</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 按钮区域 -->
|
||||||
|
<view class="modal-footer">
|
||||||
|
<view class="modal-btn modal-btn-cancel" bind:tap="onTapCancel">取消</view>
|
||||||
|
<view class="modal-btn modal-btn-confirm" bind:tap="onTapConfirm">确认</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"navigationBarTitleText": "添加成员",
|
"navigationBarTitleText": "添加成员",
|
||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"select-member-drawer": "/components/selectMemberDrawer/selectMemberDrawer"
|
"select-member-drawer": "/components/selectMemberDrawer/selectMemberDrawer",
|
||||||
|
"user-info-confirm-modal": "/components/userInfoConfirmModal/userInfoConfirmModal"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -106,6 +106,10 @@ Page({
|
|||||||
hasQueried: false,
|
hasQueried: false,
|
||||||
/** 接口返回的用户信息,姓名 + 身份证联动校正性别年龄 */
|
/** 接口返回的用户信息,姓名 + 身份证联动校正性别年龄 */
|
||||||
serverResult: null as UserInfoFromServer | null,
|
serverResult: null as UserInfoFromServer | null,
|
||||||
|
/** 表单只读状态(code=101 时置为 true) */
|
||||||
|
readonly: false,
|
||||||
|
/** 是否显示确认弹框 */
|
||||||
|
showConfirmModal: false,
|
||||||
},
|
},
|
||||||
|
|
||||||
onLoad(options: Record<string, string>) {
|
onLoad(options: Record<string, string>) {
|
||||||
@@ -133,29 +137,30 @@ Page({
|
|||||||
|
|
||||||
onNameInput(e: WechatMiniprogram.Input) {
|
onNameInput(e: WechatMiniprogram.Input) {
|
||||||
const name = e.detail.value
|
const name = e.detail.value
|
||||||
this.setData({ 'form.name': name })
|
this.setData({
|
||||||
if (!name.trim()) {
|
'form.name': name,
|
||||||
this.setData({ serverResult: null, hasQueried: false })
|
'form.gender': '',
|
||||||
return
|
'form.age': '',
|
||||||
}
|
serverResult: null,
|
||||||
if (this.isIdCardValid(this.data.form.idCard)) {
|
hasQueried: false,
|
||||||
|
readonly: false
|
||||||
|
})
|
||||||
|
if (name.trim() && this.isIdCardValid(this.data.form.idCard)) {
|
||||||
this.fetchUserInfoByIdCard(name.trim(), this.data.form.idCard)
|
this.fetchUserInfoByIdCard(name.trim(), this.data.form.idCard)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onIdCardInput(e: WechatMiniprogram.Input) {
|
onIdCardInput(e: WechatMiniprogram.Input) {
|
||||||
const idCard = (e.detail.value || '').trim().toUpperCase()
|
const idCard = (e.detail.value || '').trim().toUpperCase()
|
||||||
const parsed = this.parseIdCard(idCard)
|
|
||||||
this.setData({
|
this.setData({
|
||||||
'form.idCard': idCard,
|
'form.idCard': idCard,
|
||||||
'form.gender': parsed.gender,
|
'form.gender': '',
|
||||||
'form.age': parsed.age
|
'form.age': '',
|
||||||
|
serverResult: null,
|
||||||
|
hasQueried: false,
|
||||||
|
readonly: false
|
||||||
})
|
})
|
||||||
if (!parsed.gender) {
|
if (this.data.form.name.trim() && this.isIdCardValid(idCard)) {
|
||||||
this.setData({ serverResult: null, hasQueried: false })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.data.form.name.trim()) {
|
|
||||||
this.fetchUserInfoByIdCard(this.data.form.name.trim(), idCard)
|
this.fetchUserInfoByIdCard(this.data.form.name.trim(), idCard)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -204,12 +209,14 @@ Page({
|
|||||||
/**
|
/**
|
||||||
* 调用服务端接口校验身份证与姓名,成功后用接口返回的身份证重新计算性别年龄
|
* 调用服务端接口校验身份证与姓名,成功后用接口返回的身份证重新计算性别年龄
|
||||||
* result 为 null 视为「查无此人」,标记 hasQueried 允许新增提交
|
* result 为 null 视为「查无此人」,标记 hasQueried 允许新增提交
|
||||||
|
* result.code 101 视为「信息已存在」,弹框提示并锁定表单
|
||||||
|
* result.code 102 视为正常,走原有逻辑
|
||||||
*/
|
*/
|
||||||
fetchUserInfoByIdCard(name: string, idCard: string) {
|
fetchUserInfoByIdCard(name: string, idCard: string) {
|
||||||
if (this.data.querying) return
|
if (this.data.querying) return
|
||||||
this.setData({ querying: true, serverResult: null, hasQueried: false })
|
this.setData({ querying: true, serverResult: null, hasQueried: false })
|
||||||
|
|
||||||
get<UserInfoFromServer>('weighingScale/v3/getUserInfoByIdcard', {
|
get<any>('weighingScale/v3/getUserInfoByIdcard', {
|
||||||
sn: lefuService.deviceInfo?.serialNumber ?? '',
|
sn: lefuService.deviceInfo?.serialNumber ?? '',
|
||||||
idCard,
|
idCard,
|
||||||
realname: name
|
realname: name
|
||||||
@@ -220,13 +227,38 @@ Page({
|
|||||||
this.setData({ hasQueried: true })
|
this.setData({ hasQueried: true })
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const parsed = this.parseIdCard(serverResult.idCard)
|
if (serverResult.code === 101) {
|
||||||
this.setData({
|
const parsed = this.parseIdCard(serverResult.idCard)
|
||||||
serverResult,
|
this.setData({
|
||||||
hasQueried: true,
|
serverResult,
|
||||||
'form.gender': parsed.gender,
|
hasQueried: true,
|
||||||
'form.age': parsed.age
|
readonly: true,
|
||||||
})
|
showConfirmModal: true,
|
||||||
|
'form.name': serverResult.realname ?? '',
|
||||||
|
'form.idCard': serverResult.idCard ?? '',
|
||||||
|
'form.gender': parsed.gender,
|
||||||
|
'form.age': parsed.age,
|
||||||
|
'form.height': serverResult.height ? String(serverResult.height) : '',
|
||||||
|
'form.weight': serverResult.weight ? String(serverResult.weight) : ''
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (serverResult.code === 102) {
|
||||||
|
const parsed = this.parseIdCard(serverResult.idCard)
|
||||||
|
const data: Record<string, any> = {
|
||||||
|
serverResult,
|
||||||
|
hasQueried: true,
|
||||||
|
'form.gender': parsed.gender,
|
||||||
|
'form.age': parsed.age
|
||||||
|
}
|
||||||
|
if (serverResult.height) {
|
||||||
|
data['form.height'] = String(serverResult.height)
|
||||||
|
}
|
||||||
|
if (serverResult.weight) {
|
||||||
|
data['form.weight'] = String(serverResult.weight)
|
||||||
|
}
|
||||||
|
this.setData(data)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
// 查询失败保留本地解析结果,hasQueried 维持 false 以便用户重试时再次触发
|
// 查询失败保留本地解析结果,hasQueried 维持 false 以便用户重试时再次触发
|
||||||
@@ -259,6 +291,28 @@ Page({
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/** 确认弹框 - 确认 */
|
||||||
|
onConfirmModalConfirm() {
|
||||||
|
this.setData({ showConfirmModal: false })
|
||||||
|
this.onSubmit()
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 确认弹框 - 取消 */
|
||||||
|
onConfirmModalCancel() {
|
||||||
|
this.setData({
|
||||||
|
showConfirmModal: false,
|
||||||
|
readonly: false,
|
||||||
|
form: {
|
||||||
|
name: '',
|
||||||
|
idCard: '',
|
||||||
|
gender: '',
|
||||||
|
age: '',
|
||||||
|
height: '',
|
||||||
|
weight: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
onCancel() {
|
onCancel() {
|
||||||
wx.navigateBack()
|
wx.navigateBack()
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -23,6 +23,7 @@
|
|||||||
placeholder="请填写真实姓名"
|
placeholder="请填写真实姓名"
|
||||||
placeholder-class="form-placeholder"
|
placeholder-class="form-placeholder"
|
||||||
value="{{ form.name }}"
|
value="{{ form.name }}"
|
||||||
|
disabled="{{ readonly }}"
|
||||||
bind:input="onNameInput" />
|
bind:input="onNameInput" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -40,6 +41,7 @@
|
|||||||
placeholder="请填写身份证号"
|
placeholder="请填写身份证号"
|
||||||
placeholder-class="form-placeholder"
|
placeholder-class="form-placeholder"
|
||||||
value="{{ form.idCard }}"
|
value="{{ form.idCard }}"
|
||||||
|
disabled="{{ readonly }}"
|
||||||
bind:input="onIdCardInput" />
|
bind:input="onIdCardInput" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -93,6 +95,7 @@
|
|||||||
placeholder="请填写身高"
|
placeholder="请填写身高"
|
||||||
placeholder-class="form-placeholder"
|
placeholder-class="form-placeholder"
|
||||||
value="{{ form.height }}"
|
value="{{ form.height }}"
|
||||||
|
disabled="{{ readonly }}"
|
||||||
bind:input="onHeightInput" />
|
bind:input="onHeightInput" />
|
||||||
<text class="form-suffix form-suffix-inside">cm</text>
|
<text class="form-suffix form-suffix-inside">cm</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -113,6 +116,7 @@
|
|||||||
placeholder="请填写体重"
|
placeholder="请填写体重"
|
||||||
placeholder-class="form-placeholder"
|
placeholder-class="form-placeholder"
|
||||||
value="{{ form.weight }}"
|
value="{{ form.weight }}"
|
||||||
|
disabled="{{ readonly }}"
|
||||||
bind:input="onWeightInput" />
|
bind:input="onWeightInput" />
|
||||||
<text class="form-suffix form-suffix-inside">kg</text>
|
<text class="form-suffix form-suffix-inside">kg</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -138,4 +142,12 @@
|
|||||||
bind:close="onSelectMemberClose"
|
bind:close="onSelectMemberClose"
|
||||||
bind:select="onSelectMember">
|
bind:select="onSelectMember">
|
||||||
</select-member-drawer>
|
</select-member-drawer>
|
||||||
|
|
||||||
|
<!-- 确认弹框 -->
|
||||||
|
<user-info-confirm-modal
|
||||||
|
show="{{ showConfirmModal }}"
|
||||||
|
userInfo="{{ serverResult }}"
|
||||||
|
bind:confirm="onConfirmModalConfirm"
|
||||||
|
bind:cancel="onConfirmModalCancel">
|
||||||
|
</user-info-confirm-modal>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
Reference in New Issue
Block a user