新增注册,找回密码功能页面

This commit is contained in:
fengerli
2025-09-17 16:05:50 +08:00
parent 48da6d0e1c
commit d8f281a891
9 changed files with 1051 additions and 49 deletions

View File

@ -8,11 +8,26 @@
<view class='ver_item'>
<input type="number" v-model="phone" :maxlength="11" placeholder="请输入手机号" class="input" />
</view>
<view class='ver_item'>
<view class='ver_item' v-if="isCodeLogin">
<input type="number" v-model="code" :maxlength="6" placeholder="请输入验证码" class="input" />
<button :class="showView?' get_phone_number blue':'get_phone_number grad'"
@click="getPhoneCode">{{ isCounting ? `${countdown}s后重新获取` : '获取验证码' }}</button>
</view>
<view class='ver_item' v-else>
<input type="password" v-model="password" placeholder="请输入密码" class="input" />
</view>
<view class="switch-flex">
<view class="switch-login" @click="switchLogin">
{{ isCodeLogin ? '密码登录' : '验证码登录' }}
</view>
<view v-if="!isCodeLogin" @click="forgotPassword">忘记密码</view>
</view>
<!-- 登录按钮 -->
<button class="login-btn" @click="handleLogin">
登录
</button>
<view class="login-title">没有账号<text class="gologin" @click="goLogin">去注册</text></view>
<!-- 协议勾选 -->
<view class="agreement">
<view class="custom-checkbox" @click="toggleCheck">
@ -24,10 +39,6 @@
@click.stop="goToPage('privacy')">隐私政策</a></text>
</view>
</view>
<!-- 登录按钮 -->
<button class="login-btn" @click="handleLogin">
登录
</button>
</view>
<!-- 弹框 -->
<view class="agreement-mask" v-if="showAgreement">
@ -52,6 +63,7 @@
</template>
<script>
import md5 from 'blueimp-md5'
import {
login,
resourceSmsCode
@ -62,37 +74,48 @@
showView: false,
phone: '13800138002', //手机号码
code: "123456", //验证码
password: "",
agreed: false,
isCounting: false,
countdown: 0,
isChecked: true,
showAgreement: false, // 控制弹窗显示
isCodeLogin: false,
}
},
onLoad() {
if (uni.getStorageSync("token") && uni.getStorageSync("clientID")) { //免登陆
let time = uni.getStorageSync("tokenTime");
if (!time) {
time = 0;
}
let currTime = new Date().getTime();
if (currTime < time) {
console.log("登陆过,并且没过期,自动进入设备页");
uni.switchTab({
url: '/pages/common/index/index'
});
return;
} else {
//token过期了
uni.removeStorageSync("token")
uni.removeStorageSync("clientID")
uni.removeStorageSync("tokenTime")
}
}
},
onLoad(){
if(uni.getStorageSync("token") && uni.getStorageSync("clientID")){//免登陆
let time=uni.getStorageSync("tokenTime");
if(!time){
time=0;
}
let currTime=new Date().getTime();
if(currTime<time){
console.log("登陆过并且没过期自动进入设备页");
uni.switchTab({
url: '/pages/common/index/index'
});
return;
}else{
//token过期了
uni.removeStorageSync("token")
uni.removeStorageSync("clientID")
uni.removeStorageSync("tokenTime")
}
}
},
methods: {
// 验证码密码切换
switchLogin() {
this.isCodeLogin = !this.isCodeLogin;
// 切换时重置相关输入和状态
this.code = "";
this.password = "";
this.isCounting = false;
this.countdown = 0;
this.showView = false;
},
// 获取验证码
async getPhoneCode() {
const phoneNumber = this.phone
@ -146,6 +169,18 @@
toggleCheck() {
this.isChecked = !this.isChecked
},
// 去登录
goLogin() {
uni.navigateTo({
url: '/pages/common/register/index'
})
},
// 忘记密码
forgotPassword() {
uni.navigateTo({
url: '/pages/common/forgotPassword/index'
})
},
// 登录
async handleLogin() {
if (this.phone == '') {
@ -155,13 +190,25 @@
duration: 1000
})
return false
} else if (this.code == '') {
uni.showToast({
title: '验证码不能为空',
icon: 'none',
duration: 1000
})
return false
}
if (this.isCodeLogin) {
if (this.code == '') {
uni.showToast({
title: '验证码不能为空',
icon: 'none',
duration: 1000
})
return false
}
} else {
if (this.password == '') {
uni.showToast({
title: '密码不能为空',
icon: 'none',
duration: 1000
})
return false
}
}
if (!this.isChecked) {
this.showAgreement = true
@ -171,17 +218,25 @@
uni.showLoading({
title: '登录中...'
})
// 调用登录接口
const res = await login({
let loginParams = {
phonenumber: this.phone,
smsCode: this.code,
tenantId: '894078' //租户ID
})
tenantId: '894078' // 租户ID
};
if (this.isCodeLogin) {
loginParams.smsCode = this.code;
//登录方式 1:手机验证码登录 2:密码登录
loginParams.loginType=1
} else {
loginParams.loginPassword = md5(this.password);
loginParams.loginType=2
}
// 调用登录接口
const res = await login(loginParams)
if (res.code == 200) {
uni.hideLoading()
uni.setStorageSync('token', res.data.access_token) // 缓存token
uni.setStorageSync('clientID', res.data.client_id) // 缓存token
uni.setStorageSync('tokenTime',new Date().getTime()+86400000);//过期时间
uni.setStorageSync('tokenTime', new Date().getTime() + 86400000); //过期时间
uni.showToast({
title: '登录成功',
icon: 'success'
@ -271,6 +326,20 @@
position: relative;
}
.switch-flex {
display: flex;
justify-content: space-between;
margin-top: 40rpx;
color: rgba(255, 255, 255, 0.6);
}
.switch-login {
color: rgb(187, 230, 0);
font-size: 28rpx;
}
.get_phone_number {
position: absolute;
right: 0px;
@ -297,10 +366,12 @@
align-items: center;
font-size: 28rpx;
color: #666;
position: absolute;
bottom: 8rpx
}
.login-btn {
margin-top: 150rpx;
margin-top: 90rpx;
background-color: rgb(187, 230, 0);
color: rgb(35, 35, 35);
border-radius: 50rpx;
@ -310,6 +381,16 @@
background-color: #ccc;
}
.login-title {
text-align: center;
color: rgba(255, 255, 255, 0.6);
padding-top: 20rpx;
}
.gologin {
color: rgba(187, 230, 0, 1);
}
.custom-checkbox {
display: flex;
align-items: center;