351 lines
7.8 KiB
Vue
351 lines
7.8 KiB
Vue
<template>
|
||
<view class="login-container">
|
||
<view class="login-title">
|
||
<view class="title">
|
||
用户登录
|
||
</view>
|
||
<view class="sub-title">
|
||
欢迎回到炬融圈
|
||
</view>
|
||
</view>
|
||
<image src="../../static/login/login-img.png" mode="" class="login-img"></image>
|
||
<view class="login-form">
|
||
<u-form :model="userLogin.userForm" ref="userLoginRef" :border-bottom="false" :error-type="['message']"
|
||
label-width="0">
|
||
<u-form-item :left-icon-style="inputIcon" left-icon="../../static/icon/user.png" prop="username">
|
||
<u-input v-model="userLogin.userForm.username" placeholder="请输入用户名或手机号" type="number" maxlength="11"
|
||
placeholder-style="color: #737373;" />
|
||
</u-form-item>
|
||
<u-form-item :left-icon-style="inputIcon" left-icon="../../static/icon/Lock.png" prop="password">
|
||
<u-input type="password" v-model="userLogin.userForm.password" placeholder="请输入密码" maxlength="20"
|
||
placeholder-style="color: #737373;" />
|
||
</u-form-item>
|
||
<u-form-item :left-icon-style="inputIcon" left-icon="../../static/icon/Globe.png" prop="captcha">
|
||
<u-input v-model="userLogin.userForm.captcha" placeholder="请输入验证码" maxlength="4"
|
||
placeholder-style="color: #737373;" />
|
||
<template v-slot:right>
|
||
<image @click="loadCaptcha" class="captcha-img" :src="captcha" mode=""></image>
|
||
</template>
|
||
</u-form-item>
|
||
<view class="reflash" @click="reflash">
|
||
<image class="reflash-icon" src="/static/icon/Repeat.png" mode=""></image>
|
||
刷新验证码
|
||
</view>
|
||
<view class="rember">
|
||
<u-checkbox v-model="userLogin.userForm.is_rember">记住我</u-checkbox>
|
||
</view>
|
||
<view class="forget-pwd">忘记密码？</view>
|
||
<u-button class="submit-btn" :ripple="true" shape="circle" type="primary" @click="submit">登录</u-button>
|
||
<view class="register">
|
||
<view class="register-text">没有账号？</view>
|
||
<view class="register-link" @click="handleRegister">点击注册？
|
||
<image class="register-link-icon" src="/static/icon/Chevron right.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</u-form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, reactive, ref } from 'vue';
|
||
import { onLoad, onReady } from '@dcloudio/uni-app';
|
||
import { captchaAPI } from '@/api/captcha.js';
|
||
import { authAPI } from '../../api/auth';
|
||
|
||
// 表单图标样式
|
||
const inputIcon = {
|
||
width: '32rpx',
|
||
verticalAlign: 'middle'
|
||
}
|
||
|
||
// 登录表单
|
||
const captcha = ref()
|
||
const captchaId = ref()
|
||
const userLoginRef = ref()
|
||
const userLogin = reactive({
|
||
userForm: {
|
||
username: '',
|
||
password: '',
|
||
captcha: '',
|
||
is_rember: false
|
||
},
|
||
ruls: {
|
||
username: [
|
||
{
|
||
required: true,
|
||
message: '请输入用户名或手机号',
|
||
trigger: ['change']
|
||
},
|
||
{
|
||
pattern: /^1[3-9]\d{9}$/,
|
||
message: '请输入正确的手机号格式',
|
||
trigger: ['blur']
|
||
}
|
||
],
|
||
password: [
|
||
{
|
||
required: true,
|
||
message: '请输入密码',
|
||
trigger: ['change']
|
||
}
|
||
],
|
||
captcha: [{
|
||
required: true,
|
||
message: '请输入验证码',
|
||
trigger: ['blur']
|
||
},
|
||
{
|
||
min: 4,
|
||
max: 4,
|
||
message: '验证码长度为4位',
|
||
trigger: 'blur'
|
||
}],
|
||
}
|
||
})
|
||
|
||
// 初始化绑定
|
||
onReady(() => {
|
||
userLoginRef.value.setRules(userLogin.ruls);
|
||
});
|
||
|
||
onMounted(() => {
|
||
try {
|
||
loadCaptcha()
|
||
loadCache()
|
||
} catch (err) {
|
||
console.log("login Error === ", err);
|
||
}
|
||
})
|
||
|
||
// 刷新
|
||
const reflash = () => {
|
||
// userLoginRef.value.resetFields()
|
||
loadCaptcha()
|
||
}
|
||
|
||
// 请求验证码
|
||
const loadCaptcha = () => {
|
||
captchaAPI.generate().then(res => {
|
||
captcha.value = res.data.image
|
||
captchaId.value = res.data.captchaId
|
||
})
|
||
}
|
||
|
||
const loadCache = () => {
|
||
let is_rember = uni.getStorageSync("rember")
|
||
if (is_rember) {
|
||
userLogin.userForm.is_rember = true
|
||
userLogin.userForm.username = is_rember.username
|
||
userLogin.userForm.password = is_rember.password
|
||
}
|
||
}
|
||
|
||
// 登录处理
|
||
const submit = () => {
|
||
userLoginRef.value.validate((valid : any) => {
|
||
if (valid) {
|
||
// 登录逻辑
|
||
const loginData = {
|
||
username: userLogin.userForm.username,
|
||
password: userLogin.userForm.password,
|
||
captchaId: captchaId.value,
|
||
captchaText: userLogin.userForm.captcha
|
||
}
|
||
authAPI.login(loginData).then(response => {
|
||
console.log('登录结果', response);
|
||
if (response.success) {
|
||
// 激活用户
|
||
uni.setStorageSync("token", response.token)
|
||
if (userLogin.userForm.is_rember) {
|
||
uni.setStorageSync("rember", {
|
||
username: userLogin.userForm.username,
|
||
password: userLogin.userForm.password,
|
||
})
|
||
}
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
icon: 'success',
|
||
success() {
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/pages/home/index'
|
||
})
|
||
}, 1000)
|
||
}
|
||
})
|
||
} else if (response.token) {
|
||
// 未激活用户
|
||
uni.setStorageSync("token", response.token)
|
||
if (userLogin.userForm.is_rember) {
|
||
uni.setStorageSync("rember", {
|
||
username: userLogin.userForm.username,
|
||
password: userLogin.userForm.password,
|
||
})
|
||
}
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
icon: 'success',
|
||
success() {
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/pages/home/index'
|
||
})
|
||
}, 1000)
|
||
}
|
||
})
|
||
}
|
||
}).catch((err) => {
|
||
setTimeout(() => {
|
||
userLogin.userForm.captcha = ''
|
||
loadCaptcha()
|
||
}, 1000)
|
||
})
|
||
}
|
||
});
|
||
}
|
||
|
||
// 注册
|
||
const handleRegister = () => {
|
||
uni.redirectTo({
|
||
url: '/pages/register/register'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.login-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: linear-gradient(180deg, #CAE5FF 0%, #FFFFFF 100%);
|
||
|
||
.login-title {
|
||
padding: 80rpx 0 0 0;
|
||
|
||
.title {
|
||
font-family: SF Pro;
|
||
font-weight: 650;
|
||
font-style: Expanded Semibold;
|
||
font-size: 60rpx;
|
||
leading-trim: NONE;
|
||
line-height: 80rpx;
|
||
letter-spacing: 0%;
|
||
text-align: center;
|
||
color: #7087FF;
|
||
}
|
||
|
||
.sub-title {
|
||
font-family: SF Pro;
|
||
font-weight: 700;
|
||
font-style: Bold;
|
||
font-size: 32rpx;
|
||
leading-trim: NONE;
|
||
line-height: 48rpx;
|
||
letter-spacing: 0%;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
}
|
||
|
||
.login-img {
|
||
width: 100%;
|
||
}
|
||
|
||
.login-form {
|
||
padding: 10rpx 32rpx;
|
||
|
||
.captcha-img {
|
||
width: 200rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.reflash {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
|
||
// 文字
|
||
font-family: Work Sans;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
leading-trim: NONE;
|
||
line-height: 100%;
|
||
letter-spacing: -2%;
|
||
color: #3781EF;
|
||
|
||
.reflash-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.forget-pwd {
|
||
text-align: center;
|
||
|
||
font-family: Work Sans;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
leading-trim: NONE;
|
||
line-height: 100%;
|
||
letter-spacing: -2%;
|
||
text-align: center;
|
||
color: #3781EF;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.submit-btn {
|
||
width: 240rpx;
|
||
height: 96rpx;
|
||
|
||
// 文字
|
||
font-family: SF Pro;
|
||
font-weight: 650;
|
||
font-style: Expanded Semibold;
|
||
font-size: 40rpx;
|
||
leading-trim: NONE;
|
||
line-height: 46rpx;
|
||
letter-spacing: 0%;
|
||
text-align: center;
|
||
}
|
||
|
||
.register {
|
||
margin: 40rpx 0 80rpx;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
// 文字
|
||
font-family: Work Sans;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
leading-trim: NONE;
|
||
line-height: 100%;
|
||
letter-spacing: -2%;
|
||
text-align: center;
|
||
|
||
|
||
.register-text {
|
||
color: #737373;
|
||
}
|
||
|
||
.register-link {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #3781EF;
|
||
|
||
.register-link-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |