feat(user): 补充个人信息页接入身份证已存在复用弹框与登录引导
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
17792275749
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
9911dea32f
commit
90f84cc7df
@@ -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,42 @@
|
||||
<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>
|
||||
|
||||
<block wx:if="{{ userInfo }}">
|
||||
<view class="modal-body">
|
||||
<view class="modal-body-box">
|
||||
<view class="info-row">
|
||||
<view class="info-label">姓名：</view>
|
||||
<view class="info-value">{{ userInfo.realname }}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">身份证号：</view>
|
||||
<view class="info-value">{{ userInfo.idCard }}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">性别：</view>
|
||||
<view class="info-value">{{ userInfo.sex_dictText }}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">身高：</view>
|
||||
<view class="info-value">{{ userInfo.height }}cm</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">体重：</view>
|
||||
<view class="info-value">{{ userInfo.weight }}kg</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user