WindowBird/HomeLease
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

安全验证-更换手机号-三个界面

Browse Source
This commit is contained in:
WindowBird 2025-08-16 12:03:51 +08:00
parent b72f752652
commit 656d923bde
3 changed files with 293 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
pages.json
View File

@ -31,15 +31,25 @@
"path": "pages/set/set",
"style": {
"navigationBarTitleText": "设置"
}
},
{
"path" : "pages/securityVerification/securityVerification",
"style" :
{
"navigationBarTitleText": "安全验证"
}
"path": "pages/securityVerification/securityVerification",
"style": {
"navigationBarTitleText": "安全验证"
}
},
{
"path": "pages/changePhone/changePhone",
"style": {
"navigationBarTitleText": "更换手机号"
}
},
{
"path": "pages/changePhone/changePhoneNext",
"style": {
"navigationBarTitleText": ""
}
}
],
"tabBar": {
@ -71,8 +81,6 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText": "设备租赁",
"navigationBarBackgroundColor": "#fff"
},
"uniIdRouter": {},
"mp-weixin": {

145
pages/changePhone/changePhone.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<view class="page">
<vue class="phone-box">
<text>当前绑定的手机号码为</text>
<view class="phone">{{ phone }}</view>
</vue>
<view class="new-phone">
<text class="country-code-selector">+86</text>
<input class="input-phone" placeholder="输入新的手机号" />
</view>
<view class="code">
<input class="input-code" placeholder="输入验证码" />
<text class="get-code" @click="getCode()">获取验证码</text>
</view>
<view class="ok">确定</view>
</view>
</template>
<script>
export default {
data() {
return {
phone: '+86 158****1232',
userInfoSettings: [
{
label: '头像',
value: '', // 实际项目中这里可能是图片URL
icon: '灰色圆形图标', // 描述性文字，实际可用图片路径替换
type: 'avatar',
},
{
label: '昵称',
value: '昵称', // 默认占位文字，实际应为用户昵称
type: 'nickname',
},
{
label: '手机号',
value: '158****5964', // 脱敏后的手机号
type: 'phone',
},
],
}
},
methods: {
getCode() {
console.log('code')
},
},
}
</script>
<style lang="scss" scoped>
.page {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 64rpx 50rpx 0 50rpx;
background: #ffffff;
.phone-box {
margin-bottom: 64rpx;
display: flex;
text {
font-size: 18px;
font-weight: 400;
color: #3d3d3d;
}
.phone {
font-size: 18px;
font-weight: 800;
color: #3d3d3d;
}
}
.new-phone {
width: 100%;
border-radius: 7px;
display: flex;
box-sizing: border-box;
border: 1px solid #808080;
align-items: center;
text {
width: 104rpx;
border-right: 1px solid #f15a04;
color: #f15a04;
text-align: center;
}
.input-phone {
line-height: 98rpx;
padding-left: 22rpx;
font-size: 16px;
font-weight: 500;
height: 98rpx;
border-radius: 7px;
}
}
.code {
width: 100%;
margin-top: 24rpx;
border-radius: 7px;
display: flex;
box-sizing: border-box;
border: 1px solid #808080;
align-items: center;
.input-code {
width: 460rpx;
line-height: 98rpx;
padding-left: 22rpx;
font-size: 16px;
font-weight: 500;
height: 98rpx;
border-radius: 7px;
}
text {
width: 190rpx;
border-left: 1px solid #f15a04;
color: #f15a04;
text-align: center;
}
}
.ok {
margin-top: 64rpx;
text-align: center;
line-height: 98rpx;
color: #ffffff;
font-size: 16px;
font-weight: 500;
width: 650rpx;
height: 98rpx;
background: #f15a04;
border-radius: 7px;
opacity: 0.5;
}
}
</style>

132
pages/changePhone/changePhoneNext.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<view class="page">
<view class="phone-box">
<text>输入短信验证码</text>
<view class="phone-row">
<text>已向</text>
<view class="phone">{{ phone }}</view>
<text> 发送验证码</text>
</view>
</view>
<view class="code">
<input class="input-code" placeholder="输入验证码" />
<text class="get-code" @click="getCode()">重新发送</text>
</view>
<view class="ok">提交</view>
</view>
</template>
<script>
export default {
data() {
return {
phone: '+86 158****1232',
userInfoSettings: [
{
label: '头像',
value: '', // 实际项目中这里可能是图片URL
icon: '灰色圆形图标', // 描述性文字，实际可用图片路径替换
type: 'avatar',
},
{
label: '昵称',
value: '昵称', // 默认占位文字，实际应为用户昵称
type: 'nickname',
},
{
label: '手机号',
value: '158****5964', // 脱敏后的手机号
type: 'phone',
},
],
}
},
methods: {
getCode() {
console.log('code')
},
},
}
</script>
<style lang="scss" scoped>
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 64rpx 50rpx 0 50rpx;
background: #ffffff;
.phone-box {
margin-bottom: 12rpx;
text {
font-size: 30px;
font-weight: 500;
color: #3d3d3d;
}
.phone-row {
margin-top: 12rpx;
display: flex;
//border: #4cd964 solid 1px;
text {
font-size: 18px;
font-weight: 400;
color: #3d3d3d;
}
.phone {
font-size: 18px;
font-weight: 400;
color: #f15a04;
}
}
}
.code {
width: 100%;
margin-top: 24rpx;
border-radius: 7px;
display: flex;
box-sizing: border-box;
border: 1px solid #808080;
align-items: center;
.input-code {
width: 460rpx;
line-height: 98rpx;
padding-left: 22rpx;
font-size: 16px;
font-weight: 500;
height: 98rpx;
border-radius: 7px;
}
text {
width: 190rpx;
border-left: 1px solid #f15a04;
color: #f15a04;
text-align: center;
}
}
.ok {
margin-top: 64rpx;
text-align: center;
line-height: 98rpx;
color: #ffffff;
font-size: 16px;
font-weight: 500;
width: 650rpx;
height: 98rpx;
background: #f15a04;
border-radius: 7px;
opacity: 0.5;
}
}
</style>