[AI Generated]: feat(Views): 新增完善个人信息页表单及身份证解析逻辑
This commit is contained in:
17792275749
@@ -1,4 +1,96 @@
|
||||
// 是否 mock 配网成功,false 则走失败态
|
||||
const MOCK_CONFIG_SUCCESS = true
|
||||
|
||||
// 模拟配网耗时(毫秒)
|
||||
const MOCK_CONFIG_DURATION = 2000
|
||||
|
||||
Page({
|
||||
data: {},
|
||||
onLoad() {}
|
||||
data: {
|
||||
/**
|
||||
* 页面状态
|
||||
* - idle: 未配网(进入页面默认态)
|
||||
* - configuring: 配网中
|
||||
* - success: 配网成功
|
||||
* - failed: 配网失败
|
||||
*/
|
||||
status: 'idle',
|
||||
|
||||
/* 配网表单 */
|
||||
form: {
|
||||
ssid: '', // WiFi 名称
|
||||
password: '', // WiFi 密码
|
||||
showPwd: false, // 是否明文显示密码
|
||||
},
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
/* 清除配网定时器,防止页面卸载后还触发 setData */
|
||||
if (this._configTimer) {
|
||||
clearTimeout(this._configTimer)
|
||||
this._configTimer = null
|
||||
}
|
||||
},
|
||||
|
||||
/* 输入 WiFi 名称 */
|
||||
onInputSsid(e) {
|
||||
this.setData({ 'form.ssid': e.detail.value })
|
||||
},
|
||||
|
||||
/* 输入 WiFi 密码 */
|
||||
onInputPwd(e) {
|
||||
this.setData({ 'form.password': e.detail.value })
|
||||
},
|
||||
|
||||
/* 切换密码明文/密文 */
|
||||
onTogglePwd() {
|
||||
this.setData({ 'form.showPwd': !this.data.form.showPwd })
|
||||
},
|
||||
|
||||
/* 主按钮:根据 status 路由到不同动作 */
|
||||
onSubmit() {
|
||||
const { status } = this.data
|
||||
if (status === 'configuring') return
|
||||
if (status === 'success') {
|
||||
this.onFinish()
|
||||
return
|
||||
}
|
||||
/* idle / failed 均触发开始配网 */
|
||||
this.onStartConfig()
|
||||
},
|
||||
|
||||
/* 开始配网 / 重新配网 */
|
||||
onStartConfig() {
|
||||
const { ssid, password } = this.data.form
|
||||
if (!ssid) {
|
||||
wx.showToast({ title: '请输入 WiFi 名称', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!password) {
|
||||
wx.showToast({ title: '请输入 WiFi 密码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
this.setData({ status: 'configuring' })
|
||||
|
||||
/* 模拟配网,后续接入真实配网 API 时删除 */
|
||||
this._configTimer = setTimeout(() => {
|
||||
this.setData({ status: MOCK_CONFIG_SUCCESS ? 'success' : 'failed' })
|
||||
}, MOCK_CONFIG_DURATION)
|
||||
},
|
||||
|
||||
/* 配网成功后点击完成 */
|
||||
onFinish() {
|
||||
/* TODO: 接入真实跳转逻辑,例如回到设备首页 */
|
||||
wx.navigateBack({ delta: 1 })
|
||||
},
|
||||
|
||||
/* 查看帮助 */
|
||||
onOpenHelp() {
|
||||
console.log('查看帮助')
|
||||
/* TODO: 跳帮助页 */
|
||||
},
|
||||
})
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
/* WiFi 配网页 —— 四态(idle / configuring / success / failed)共用 */
|
||||
.connected-wifi {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 48rpx 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.ripple {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 48rpx;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.hero {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 48rpx;
|
||||
background-color: rgba(19, 133, 250, 0.1);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #252535;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: #808080;
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 42rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.wifi-form {
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border: 2rpx solid #E6E6EA;
|
||||
border-radius: 16rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.form-row {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #F5F5F5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
color: #252535;
|
||||
width: 160rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
line-height: 30rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
color: #252535;
|
||||
font-size: 30rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.form-placeholder {
|
||||
color: #B0B0B0;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.form-eye {
|
||||
color: #1385FA;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
padding-left: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-success {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.result-icon-success {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(42, 199, 159, 0.1);
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
color: #2AC79F;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
color: #FFFFFF;
|
||||
width: 580rpx;
|
||||
height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
margin: 0 auto 32rpx;
|
||||
background-color: #1385FA;
|
||||
}
|
||||
|
||||
.submit-btn-disabled {
|
||||
background-color: #A8C9F0;
|
||||
}
|
||||
|
||||
.help {
|
||||
width: 100%;
|
||||
height: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 60rpx;
|
||||
|
||||
.help-text {
|
||||
color: #808080;
|
||||
font-size: 30rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.help-link {
|
||||
color: #1385FA;
|
||||
font-size: 30rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user