<template>
|
<view class="login-container">
|
<!-- 背景装饰 -->
|
<view class="bg-decoration">
|
<view class="circle circle-1"></view>
|
<view class="circle circle-2"></view>
|
<view class="circle circle-3"></view>
|
</view>
|
|
<!-- 登录内容 -->
|
<view class="login-content">
|
<!-- Logo 和标题 -->
|
<u-transition :show="true" mode="fade-up">
|
<view class="header-section">
|
<image class="login-logo" mode="aspectFit" src="/static/image/jk.jpeg"></image>
|
<view class="login-title">{{ title }}</view>
|
<view class="login-subtitle">欢迎使用物流调度系统</view>
|
</view>
|
</u-transition>
|
|
<!-- 登录表单卡片 -->
|
<u-transition :show="true" mode="fade-up">
|
<view class="form-card">
|
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
|
<!-- 账户输入 -->
|
<u-form-item label=" " labelWidth="0" prop="username" borderBottom>
|
<view class="input-wrapper">
|
<view class="input-icon">
|
<u-icon name="account" size="20" color="#909399"></u-icon>
|
</view>
|
<u--input
|
v-model="form.username"
|
placeholder="请输入账户"
|
border="none"
|
placeholderStyle="color: #c0c4cc"
|
></u--input>
|
</view>
|
</u-form-item>
|
|
<!-- 密码输入 -->
|
<u-form-item label=" " labelWidth="0" prop="password" borderBottom>
|
<view class="input-wrapper">
|
<view class="input-icon">
|
<u-icon name="lock" size="20" color="#909399"></u-icon>
|
</view>
|
<u--input
|
:type="passwordType"
|
v-model="form.password"
|
placeholder="请输入密码"
|
border="none"
|
placeholderStyle="color: #c0c4cc"
|
:focus="noFocus"
|
ref="passwordInput"
|
></u--input>
|
<view class="input-icon-right" @click="togglePasswordVisibility">
|
<u-icon
|
size="20"
|
color="#909399"
|
:name="passwordIcon"
|
></u-icon>
|
</view>
|
</view>
|
</u-form-item>
|
</u--form>
|
|
<!-- 记住密码 -->
|
<view class="remember-section">
|
<u-checkbox-group v-model="rememberPassword">
|
<u-checkbox
|
label="记住密码"
|
name="remember"
|
activeColor="#409eff"
|
size="16"
|
></u-checkbox>
|
</u-checkbox-group>
|
</view>
|
|
<!-- 登录按钮 -->
|
<view class="login-btn-wrapper">
|
<u-button
|
@click="loginSubmit"
|
type="primary"
|
shape="circle"
|
:customStyle="{
|
background: 'linear-gradient(135deg, #66b1ff 0%, #409eff 100%)',
|
border: 'none',
|
height: '88rpx',
|
fontSize: '32rpx',
|
fontWeight: '500'
|
}"
|
>
|
<text>登 录</text>
|
</u-button>
|
</view>
|
</view>
|
</u-transition>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { loginPda } from "@/common/api";
|
import {encryptSm4} from "@/common/Sm4Utils"
|
import config from '@/config'
|
|
export default {
|
name: "index",
|
|
data() {
|
return {
|
version: '',
|
title: config.title,
|
noFocus:false,
|
form: {
|
username: '',
|
password: ''
|
},
|
rules: {
|
'username': {
|
type: 'string',
|
required: true,
|
message: '请填写账户',
|
trigger: ['blur', 'change']
|
},
|
'password': {
|
type: 'string',
|
required: true,
|
message: '请填写密码',
|
trigger: ['blur', 'change']
|
},
|
},
|
passwordType: 'password', // 密码显示类型
|
passwordIcon: 'eye-off', // 密码显示图标
|
rememberPassword: [] // 初始不选中 // 记住密码状态
|
}
|
},
|
onShow() {
|
// 读取记住的密码
|
let _this = this;
|
const savedUsername = uni.getStorageSync('username');
|
const savedPassword = uni.getStorageSync('password');
|
if (savedUsername && savedPassword) {
|
_this.form.username = savedUsername;
|
_this.form.password = savedPassword;
|
_this.rememberPassword = ['remember'];
|
} else {
|
_this.rememberPassword = [];
|
}
|
},
|
methods: {
|
getSubMsg() {
|
let _this = this;
|
uni.requestSubscribeMessage({
|
tmplIds: ['C7ybfYRejH-nUxoCZV3p7dXeTc3C1MeCz8RaICQifd8'],
|
success(res) {
|
_this.goToURL()
|
}, fail(err) {
|
_this.goToURL()
|
}
|
})
|
},
|
goToURL(){
|
setTimeout(function () {
|
uni.$u.route('/pages/beReferred/index');
|
}, 1000)
|
|
},
|
loginSubmit() {
|
let _this = this;
|
this.$refs.uForm.validate().then(res => {
|
if (res) {
|
loginPda({ username: this.form.username, password: encryptSm4(this.form.password),openId:_this.car_open_id }).then(response => {
|
|
if (response.code == 200) {
|
_this.$u.vuex('sso_user_token', 'Bearer ' + response.token);
|
uni.$u.toast('登录成功！')
|
if (_this.rememberPassword.length > 0) {
|
uni.setStorageSync('username', _this.form.username);
|
uni.setStorageSync('password', _this.form.password);
|
this.goToURL()
|
} else {
|
uni.removeStorageSync('username');
|
uni.removeStorageSync('password');
|
this.goToURL()
|
}
|
// _this.getSubMsg();
|
}
|
})
|
}
|
})
|
},
|
togglePasswordVisibility() {
|
if (this.passwordType === 'password') {
|
this.passwordType = 'text';
|
this.noFocus = true;
|
this.passwordIcon = 'eye';
|
} else {
|
this.passwordType = 'password';
|
this.noFocus = false;
|
this.passwordIcon = 'eye-off';
|
}
|
}
|
},
|
onReady() {
|
this.$refs.uForm.setRules(this.rules)
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.login-container {
|
min-height: 100vh;
|
background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
|
position: relative;
|
overflow: hidden;
|
}
|
|
/* 背景装饰 */
|
.bg-decoration {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
overflow: hidden;
|
z-index: 0;
|
}
|
|
.circle {
|
position: absolute;
|
border-radius: 50%;
|
background: rgba(255, 255, 255, 0.1);
|
animation: float 20s infinite ease-in-out;
|
}
|
|
.circle-1 {
|
width: 300rpx;
|
height: 300rpx;
|
top: -100rpx;
|
right: -50rpx;
|
animation-delay: 0s;
|
}
|
|
.circle-2 {
|
width: 200rpx;
|
height: 200rpx;
|
bottom: 100rpx;
|
left: -50rpx;
|
animation-delay: 5s;
|
}
|
|
.circle-3 {
|
width: 150rpx;
|
height: 150rpx;
|
top: 50%;
|
right: 50rpx;
|
animation-delay: 10s;
|
}
|
|
@keyframes float {
|
0%, 100% {
|
transform: translateY(0) rotate(0deg);
|
}
|
50% {
|
transform: translateY(-40rpx) rotate(180deg);
|
}
|
}
|
|
/* 登录内容 */
|
.login-content {
|
position: relative;
|
z-index: 1;
|
padding: 160rpx 40rpx 40rpx;
|
}
|
|
/* 头部区域 */
|
.header-section {
|
text-align: center;
|
margin-bottom: 60rpx;
|
}
|
|
.login-logo {
|
width: 160rpx;
|
height: 160rpx;
|
border-radius: 50%;
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
background: #fff;
|
padding: 10rpx;
|
}
|
|
.login-title {
|
margin-top: 30rpx;
|
font-size: 48rpx;
|
color: #ffffff;
|
font-weight: bold;
|
letter-spacing: 2rpx;
|
}
|
|
.login-subtitle {
|
margin-top: 16rpx;
|
font-size: 26rpx;
|
color: rgba(255, 255, 255, 0.8);
|
letter-spacing: 1rpx;
|
}
|
|
/* 表单卡片 */
|
.form-card {
|
background: #ffffff;
|
border-radius: 24rpx;
|
padding: 50rpx 40rpx;
|
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
|
}
|
|
/* 输入框包装 */
|
.input-wrapper {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
}
|
|
.input-icon {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 60rpx;
|
flex-shrink: 0;
|
}
|
|
.input-icon-right {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 60rpx;
|
flex-shrink: 0;
|
cursor: pointer;
|
}
|
|
/* 记住密码 */
|
.remember-section {
|
margin-top: 30rpx;
|
padding-left: 10rpx;
|
}
|
|
/* 登录按钮 */
|
.login-btn-wrapper {
|
margin-top: 50rpx;
|
}
|
|
.login-btn-wrapper button {
|
box-shadow: 0 8rpx 24rpx rgba(64, 158, 255, 0.4);
|
}
|
</style>
|
