YNUtdPlatform/pages/login.vue

608 lines
18 KiB
Vue
Raw Normal View History

2024-08-07 14:53:53 +08:00
<template>
2024-10-25 18:21:10 +08:00
<view class="normal-login-container">
<view class="logo-content align-center justify-center flex">
<view class="logo-img"></view>
<view class="title">作业管控智慧平台</view>
</view>
<view class="login-form-content">
<view class="login-form">
<view class="login-form-tab">
<view class="login-tab" :class="{ active: selectTab == 1 }" @click="selectTab = 1">密码登录</view>
<view class="login-tab" :class="{ active: selectTab == 2 }" @click="selectTab = 2">验证码登录</view>
</view>
<view class="login-box" v-if="selectTab == 1">
<u-form :model="loginForm" ref="uForm" :rules="rules">
<u-form-item label="" prop="phone">
<u--input
class="login-input"
placeholder="请输入您的手机号"
border="surround"
prefixIcon="account"
v-model="loginForm.phone"
save="false"
></u--input>
</u-form-item>
<u-form-item label="" prop="pd">
<u-input
class="login-input"
:type="isOpen ? 'text' : 'password'"
placeholder="请输入密码"
prefixIcon="lock"
v-model="loginForm.pd"
save="false"
autocomplete="new-password"
>
<template slot="suffix">
<image
@click="isOpen = !isOpen"
style="width: 40rpx; height: 40rpx; margin-right: 10rpx; z-index: 1"
:src="
isOpen
? '../static/images/design_ic_visibility.png'
: '../static/images/design_ic_visibility_off.png'
"
></image>
</template>
</u-input>
</u-form-item>
<view style="text-align: right; color: #00367a; float: right; font-size: 30rpx" @click="restPas">
忘记密码
</view>
2024-11-01 08:37:33 +08:00
<u-button class="loginBtn" style="margin-top: 70rpx" @click="submit" color="#00367a">登录</u-button>
2024-10-25 18:21:10 +08:00
</u-form>
</view>
<view class="login-box" v-show="selectTab == 2">
<u--form :model="loginForm0" ref="uForm0" :rules="rules0">
<u-form-item label="" prop="phone">
<u--input
class="login-input"
placeholder="请输入您的手机号"
border="surround"
prefixIcon="account"
v-model="loginForm0.phone"
></u--input>
</u-form-item>
<u-form-item label="" prop="code">
<!-- 注意由于兼容性差异如果需要使用前后插槽nvue下需使用u--input非nvue下需使用u-input -->
<!-- #ifndef APP-NVUE -->
<u-input
prefixIcon="email"
class="login-input"
placeholder="验证码"
border="surround"
v-model="loginForm0.code"
>
<template slot="suffix">
<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
<u-button
@tap="getCode(2)"
:text="tips"
type="success"
size="normal"
style="margin: -6px 10px"
color="#00367a"
></u-button>
</template>
</u-input>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<u--input
prefixIcon="email"
class="login-input"
placeholder="验证码"
border="surround"
v-model="loginForm0.code"
>
<template slot="suffix">
<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
<u-button @tap="getCode(2)" :text="tips" type="success" size="mini" color="#00367a"></u-button>
</template>
</u--input>
<!-- #endif -->
</u-form-item>
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
<u-button class="loginBtn" style="margin-top: 30rpx" @click="submit0" color="#00367a">登录</u-button>
</u--form>
</view>
</view>
</view>
<view>
<!-- 普通弹窗 -->
<uni-popup ref="popup" background-color="#fff" @change="change">
<view class="popup-content">
<u--form :model="restForm" ref="uForm3" :rules="rules3" labelWidth="60">
<u-form-item label="手机号" prop="phone">
<u--input
class="login-input"
placeholder="请输入您的手机号"
border="surround"
prefixIcon="account"
v-model="restForm.phone"
save="false"
></u--input>
</u-form-item>
<u-form-item label="新密码" prop="password">
<u-input
class="login-input"
:type="isOpen2 ? 'text' : 'password'"
placeholder="请输入密码"
prefixIcon="lock"
v-model="restForm.password"
save="false"
autocomplete="new-password"
>
<template slot="suffix">
<image
@click="isOpen2 = !isOpen2"
style="width: 40rpx; height: 40rpx; margin-right: 10rpx; z-index: 999"
:src="
isOpen2
? '../static/images/design_ic_visibility.png'
: '../static/images/design_ic_visibility_off.png'
"
></image>
</template>
</u-input>
</u-form-item>
<u-form-item label="新密码" prop="passwordA">
<u-input
class="login-input"
:type="isOpen3 ? 'text' : 'password'"
placeholder="请再次输入密码"
prefixIcon="lock"
v-model="restForm.passwordA"
save="false"
autocomplete="new-password"
>
<template slot="suffix">
<image
@click="isOpen3 = !isOpen3"
style="width: 40rpx; height: 40rpx; margin-right: 10rpx; z-index: 999"
:src="
isOpen3
? '../static/images/design_ic_visibility.png'
: '../static/images/design_ic_visibility_off.png'
"
></image>
</template>
</u-input>
</u-form-item>
<u-form-item label="验证码" prop="code">
<!-- 注意由于兼容性差异如果需要使用前后插槽nvue下需使用u--input非nvue下需使用u-input -->
<!-- #ifndef APP-NVUE -->
<u-input
prefixIcon="email"
class="login-input"
placeholder="验证码"
border="surround"
v-model="restForm.code"
>
<template slot="suffix">
<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
<u-button
@tap="getCode(3)"
:text="tips"
type="success"
size="normal"
style="margin: -6px 10px"
color="#00367a"
></u-button>
</template>
</u-input>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<u--input
prefixIcon="email"
class="login-input"
placeholder="验证码"
border="surround"
v-model="restForm.code"
>
<template slot="suffix">
<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
<u-button @tap="getCode(3)" :text="tips" type="success" size="mini" color="#00367a"></u-button>
</template>
</u--input>
<!-- #endif -->
</u-form-item>
<u-button class="loginBtn" style="margin-top: 70rpx" @click="submit3" color="#00367a">确认</u-button>
</u--form>
</view>
</uni-popup>
</view>
<u-toast ref="uToast"></u-toast>
</view>
2024-08-07 14:53:53 +08:00
</template>
<script>
2024-10-25 18:21:10 +08:00
import { sendCodeByPhone, forgetPwdByApp } from '@/api/index.js'
import { getDeleteUser } from '@/utils/auth.js'
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
export default {
data() {
const equalToPassword = (rule, value, callback) => {
if (this.restForm.password !== value) {
callback(new Error('两次输入的密码不一致'))
} else {
callback()
}
}
// 密码校验 长度不能小于8位且不能大于16位字符,必须包含大写字母、小写字母、数字和特殊符号
var ISPWD = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,16}$/
// 密码校验
const validatePassword = (rule, value, callback) => {
if (!ISPWD.test(this.restForm.password)) {
callback(new Error('用户密码必须包含大写字母、小写字母、数字和特殊符号'))
} else {
callback()
}
}
return {
// globalConfig: getApp().globalData.config,
selectTab: 1,
loginForm: {
phone: '', // 18955734761 18700000001 17681010134 15955147005
pd: '' //YNsbd@123456 Lv@200018
},
loginForm0: {
phone: this.$store.state.user.phone,
code: ''
},
restForm: {
phone: '',
password: '',
passwordA: '',
code: ''
},
rules: {
phone: [
{
required: true,
message: '请输入手机号',
trigger: ['blur', 'change']
}
],
pd: [
{
required: true,
message: '请输入密码',
trigger: ['blur', 'change']
}
]
},
rules0: {
phone: [
{
required: true,
message: '请输入手机号',
trigger: ['blur', 'change']
}
],
code: [
{
required: true,
message: '请输入验证码',
trigger: ['blur', 'change']
}
]
},
rules3: {
phone: [
{
required: true,
message: '请输入手机号',
trigger: ['blur', 'change']
}
],
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
code: [
{
required: true,
message: '请输入验证码',
trigger: ['blur', 'change']
}
],
password: [
{
required: true,
trigger: 'blur',
message: '请输入您的密码'
},
{
min: 8,
max: 16,
message: '用户密码长度必须介于 8 和 16 之间',
trigger: 'blur'
},
{
required: true,
validator: validatePassword,
trigger: 'blur'
}
],
passwordA: [
{
required: true,
message: '请再次输入新密码',
trigger: ['blur', 'change']
},
{
required: true,
validator: equalToPassword,
trigger: 'blur'
}
]
},
tips: '',
type: 'center',
isOpen: false,
isOpen2: false,
isOpen3: false
}
},
created() {},
methods: {
change(e) {
console.log('当前模式:' + e.type + ',状态:' + e.show)
},
restPas() {
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popup.open(this.type)
},
// // 登录方法
// async handleLogin() {
// if (this.loginForm.username === "") {
// this.$modal.msgError("请输入您的账号")
// } else if (this.loginForm.password === "") {
// this.$modal.msgError("请输入您的密码")
// } else if (this.loginForm.code === "") {
// this.$modal.msgError("请输入验证码")
// } else {
// this.$modal.loading("登录中,请耐心等待...")
// this.pwdLogin()
// }
// },
// // 密码登录
// async pwdLogin() {
// this.$store.dispatch('Login', this.loginForm).then(() => {
// this.$modal.closeLoading()
// this.loginSuccess()
// }).catch(() => {})
// },
// // 登录成功后,处理函数
// loginSuccess(result) {
// // 设置用户信息
// this.$store.dispatch('GetInfo').then(res => {
// this.$tab.reLaunch('/pages/index')
// })
// },
codeChange(text) {
this.tips = text
},
getCode(type) {
if ((type == 2 && this.loginForm0.phone == '') || (type == 3 && this.restForm.phone == '')) {
uni.$u.toast('请输入手机号')
return
}
if (this.$refs.uCode.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码'
})
let params = {
type: type
}
if (type == 2) {
params.phone = this.loginForm0.phone
} else {
params.phone = this.restForm.phone
}
sendCodeByPhone(params).then(response => {
uni.hideLoading()
if (response.code == 200) {
// 这里此提示会被this.start()方法中的提示覆盖
uni.$u.toast('验证码已发送')
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start()
} else {
uni.$u.toast('验证码发送失败')
}
})
} else {
uni.$u.toast('倒计时结束后再发送')
}
},
submit() {
uni.removeStorageSync('Delete-User')
var user = getDeleteUser() || []
console.log(user)
if (user.includes(this.loginForm.phone)) {
uni.$u.toast('该账号已注销')
return
}
this.$refs.uForm
.validate()
.then(res => {
this.$store
.dispatch('Login', this.loginForm)
.then(res => {
console.log(res)
if (res.code == 200) {
this.isLogin = true
uni.reLaunch({
url: '/pages/gzt/index'
})
} else {
uni.$u.toast(res.msg)
this.isLogin = false
}
})
.catch(err => {
uni.$u.toast('登录失败')
this.$store.dispatch('LogOut').then(() => {
2024-12-06 18:49:44 +08:00
console.log(err + '999')
2024-10-25 18:21:10 +08:00
uni.showToast({
title: err,
icon: 'none'
})
})
})
})
.catch(errors => {
// uni.$u.toast('校验失败')
})
},
submit0() {
var user = getDeleteUser() || []
if (user.includes(this.loginForm.phone)) {
uni.$u.toast('该账号已注销')
return
}
// console.log(this.loginForm0)
this.$refs.uForm0
.validate()
.then(res => {
this.$store
.dispatch('LoginCode', this.loginForm0)
.then(res => {
console.log(res)
if (res.code == 200) {
this.isLogin = true
uni.switchTab({
url: '/pages/gzt/index'
})
} else {
uni.$u.toast(res.msg)
this.isLogin = false
}
})
.catch(err => {
uni.$u.toast('登录失败')
this.$store.dispatch('LogOut').then(() => {
console.log(err)
uni.showToast({
title: err,
icon: 'none'
})
})
})
})
.catch(errors => {
// uni.$u.toast('校验失败')
})
},
submit3() {
let _this = this
this.$refs.uForm3
.validate()
.then(res => {
let form = {
phone: this.restForm.phone,
pd: this.restForm.password,
code: this.restForm.code,
type: 3
}
forgetPwdByApp(form).then(res => {
if (res.code == 200) {
this.closePwd()
this.$refs.uToast.show({
type: 'success',
message: '密码修改成功'
})
// setTimeout(_this.logout(), 50000);
} else {
uni.$u.toast(res.msg)
}
})
})
.catch(errors => {
// uni.$u.toast('校验失败')
})
},
closePwd() {
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popup.close('center')
}
}
}
2024-08-07 14:53:53 +08:00
</script>
<style lang="scss">
2024-10-25 18:21:10 +08:00
page {
background-color: #ffffff;
}
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
.popup-content {
@include flex;
align-items: center;
justify-content: center;
padding: 15px;
height: 750rpx;
background-color: #fff;
max-width: 600rpx;
}
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
.normal-login-container {
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, #00367a 70%, #fff 30%);
background-size: 100% 100%;
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
.logo-content {
width: 100%;
font-size: 40rpx;
font-weight: 600;
padding-top: 20%;
padding-bottom: 20%;
letter-spacing: 8rpx;
color: #fff;
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
.title {
text-align: center;
padding-top: 50rpx;
}
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
.logo-img {
background-image: url('../static/images/logo.png');
width: 150rpx;
height: 150rpx;
background-size: 100%;
margin: auto;
}
}
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
.login-form-content {
background-color: #fff;
border-top-left-radius: 100rpx;
width: 100%;
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
.login-form {
padding: 60rpx 60rpx 20rpx 60rpx;
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
.login-form-tab {
display: flex;
justify-content: space-around;
font-size: 35rpx;
color: rgb(150, 150, 150);
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
.login-tab {
width: 200rpx;
text-align: center;
}
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
.active {
color: #00367a;
padding-bottom: 10rpx;
border-bottom: 5rpx solid #00367a;
}
}
2024-08-07 14:53:53 +08:00
2024-10-25 18:21:10 +08:00
.login-box {
width: 85%;
margin: 30rpx auto;
}
}
}
}
2024-08-07 16:43:03 +08:00
</style>