You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
461 lines
11 KiB
461 lines
11 KiB
5 months ago
|
<template>
|
||
|
|
<view class="normal-login-container">
|
||
|
|
<view style="width: 100%;height: 446rpx;position: relative;"><image src="../static/images/login/bg.png" style="width: 100%;height: 100%;"></image></view>
|
||
|
|
<view style="width: 372rpx;height: 401rpx;position: absolute;top: 10rpx;right: 0;">
|
||
|
|
<image src="../static/images/login/robot.gif" mode="" style="width: 100%;height: 100%;"></image>
|
||
|
|
</view>
|
||
|
|
<view class="t-login" style="position: absolute;top: 390rpx;">
|
||
|
|
<!-- 标题 -->
|
||
|
|
<!-- <view class="t-b">登录</view> -->
|
||
|
|
|
||
|
|
<!-- <form class="cl">
|
||
|
|
<view class="t-a">
|
||
|
|
<image src="../static/images/login/sj.png"></image>
|
||
|
|
<view class="line"></view>
|
||
|
|
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
|
||
|
|
</view>
|
||
|
|
<view class="t-a">
|
||
|
|
<image src="../static/images/login/yz.png"></image>
|
||
|
|
<view class="line"></view>
|
||
|
|
<input v-model="loginForm.password" class="input" placeholder="请输入密码" maxlength="20" type="password" v-if="showPwd" />
|
||
|
|
<input v-model="loginForm.password" class="input" placeholder="请输入密码" maxlength="20" type="text" v-else />
|
||
|
|
<image
|
||
|
|
:src="showPwd ? seeSrc : noseeSrc"
|
||
|
|
style="position: absolute;
|
||
|
|
left: 88%;
|
||
|
|
top: 28rpx;"
|
||
|
|
@click="changePsw"
|
||
|
|
></image>
|
||
|
|
</view> -->
|
||
|
|
<!-- <view style="width: 80%;margin: 0px;display: flex;">
|
||
|
|
<view class="t-a" v-if="captchaEnabled">
|
||
|
|
<image src="../static/images/login/yz.png"></image>
|
||
|
|
<view class="line"></view>
|
||
|
|
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码"
|
||
|
|
maxlength="4" />
|
||
|
|
</view>
|
||
|
|
<view style="width: 20%;margin: 0px;" class="login-code">
|
||
|
|
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
||
|
|
</view>
|
||
|
|
</view> -->
|
||
|
|
|
||
|
|
<!-- //记住密码 -->
|
||
|
|
<!-- <view style="margin: 5px auto;">
|
||
|
|
<u-checkbox-group>
|
||
|
|
<u-checkbox :checked="rememberPsw" v-model="rememberPsw" shape="circle" @change="saveps()" label="记住账号密码"></u-checkbox>
|
||
|
|
</u-checkbox-group>
|
||
|
|
</view>
|
||
|
|
<button @click="handleLogin" style="margin-top: 130rpx;background-color: #2289ff;">登录</button>
|
||
|
|
</form> -->
|
||
|
|
<!-- <u-loading-page color="#aaaaff" fontSize="20" :loading="xianshiPage" image="/static/images/none.png"
|
||
|
|
iconSize="220" loadingText="应急资源模块进入中..."></u-loading-page>
|
||
|
|
<u-loading-icon style="height: 90vh" color="#0e0e16" :show="xianshiPage"></u-loading-icon> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getCodeImg } from '@/api/login';
|
||
|
|
import { removeuserId } from '@/utils/auth';
|
||
|
|
import CryptoJS from 'crypto-js';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
xianshiPage: true,
|
||
|
|
showPwd: true,
|
||
|
|
rememberPsw: false,
|
||
|
|
codeUrl: '',
|
||
|
|
captchaEnabled: true,
|
||
|
|
// globalConfig: getApp().globalData.config,
|
||
|
|
seeSrc: '../static/images/login/cansee.png',
|
||
|
|
noseeSrc: '../static/images/login/nosee.png',
|
||
|
|
loginForm: {
|
||
|
|
cas: '',
|
||
|
|
password: '',
|
||
|
|
code: '',
|
||
|
|
uuid: ''
|
||
|
|
},
|
||
|
|
pwdFlag: true,
|
||
|
|
pwdIcon: '../static/images/login/cansee.png',
|
||
|
|
textIcon: '../static/images/login/nosee.png'
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
removeuserId();
|
||
|
|
|
||
|
|
let str = this.getRequestParams();
|
||
|
|
const params = str.split('&'); // 先用 '&' 分割参数
|
||
|
|
// 假设第一个参数总是需要的
|
||
|
|
const firstParam = params[0].split('='); // 分割第一个参数成键值对
|
||
|
|
const firstKey = firstParam[0];
|
||
|
|
const firstValue = firstParam[1];
|
||
|
|
|
||
|
|
console.log(firstKey);
|
||
|
|
console.log(firstValue);
|
||
|
|
this.pwdLogin(decodeURIComponent(firstValue));
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getRequestParams() {
|
||
|
|
let url = location.href;
|
||
|
|
console.log(url);
|
||
|
|
let str = '';
|
||
|
|
if (url.indexOf('?') !== -1) {
|
||
|
|
str = url.substr(url.indexOf('?') + 1); //截取?后面的内容作为字符串
|
||
|
|
console.log(str, '?后面的内容');
|
||
|
|
// let strs = str.split('&'); //将字符串内容以&分隔为一个数组
|
||
|
|
// console.log(strs, '以&切割的数组');
|
||
|
|
// for (let i = 0; i < strs.length; i++) {
|
||
|
|
// requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
|
||
|
|
// // 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
// console.log(requestParams, '处理后的对象');
|
||
|
|
return str;
|
||
|
|
},
|
||
|
|
|
||
|
|
//解密算法
|
||
|
|
decodeDes(message) {
|
||
|
|
console.log('00');
|
||
|
|
console.log(message);
|
||
|
|
console.log('11');
|
||
|
|
//秘钥
|
||
|
|
// com.ocse.http://www.key
|
||
|
|
// let aseKey = 'the_1234';
|
||
|
|
let aseKey = 'com.ocse.www.key';
|
||
|
|
let decrypt = CryptoJS.DES.decrypt(message, CryptoJS.enc.Utf8.parse(aseKey), {
|
||
|
|
mode: CryptoJS.mode.ECB,
|
||
|
|
padding: CryptoJS.pad.Pkcs7
|
||
|
|
}).toString(CryptoJS.enc.Utf8);
|
||
|
|
|
||
|
|
return decrypt;
|
||
|
|
},
|
||
|
|
changePsw() {
|
||
|
|
this.showPwd = !this.showPwd;
|
||
|
|
},
|
||
|
|
saveps() {
|
||
|
|
this.rememberPsw = !this.rememberPsw;
|
||
|
|
this.setPsw();
|
||
|
|
},
|
||
|
|
//记住密码操作
|
||
|
|
setPsw() {
|
||
|
|
//写在OBJECT参数名是success的登录请求里面
|
||
|
|
if (this.rememberPsw) {
|
||
|
|
//用户勾选“记住密码”
|
||
|
|
// console.log('记住密码');
|
||
|
|
uni.setStorageSync('Phone', this.loginForm.username);
|
||
|
|
uni.setStorageSync('userPwd', this.loginForm.password);
|
||
|
|
uni.setStorageSync('rememberPsw', this.rememberPsw);
|
||
|
|
} else {
|
||
|
|
//用户没有勾选“记住密码”
|
||
|
|
// console.log('没有记住密码');
|
||
|
|
uni.removeStorageSync('Phone');
|
||
|
|
uni.removeStorageSync('userPwd');
|
||
|
|
uni.removeStorageSync('rememberPsw');
|
||
|
|
this.loginForm.Phone = '';
|
||
|
|
this.loginForm.userPwd = '';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 隐私协议
|
||
|
|
handlePrivacy() {
|
||
|
|
let site = this.globalConfig.appInfo.agreements[0];
|
||
|
|
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
|
||
|
|
},
|
||
|
|
// 用户协议
|
||
|
|
handleUserAgrement() {
|
||
|
|
let site = this.globalConfig.appInfo.agreements[1];
|
||
|
|
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
|
||
|
|
},
|
||
|
|
// 获取图形验证码
|
||
|
|
|
||
|
|
// 登录方法
|
||
|
|
async handleLogin() {
|
||
|
|
if (this.loginForm.username === '') {
|
||
|
|
this.$modal.msgError('请输入您的账号');
|
||
|
|
} else if (this.loginForm.password === '') {
|
||
|
|
this.$modal.msgError('请输入您的密码');
|
||
|
|
}
|
||
|
|
// else if (this.loginForm.code === '' && this.captchaEnabled) {
|
||
|
|
// this.$modal.msgError('请输入验证码');
|
||
|
|
// } else {
|
||
|
|
this.$modal.loading('登录中，请耐心等待...');
|
||
|
|
this.pwdLogin();
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
// 密码登录
|
||
|
|
async pwdLogin(cas) {
|
||
|
|
// this.loginForm.cas = cas;
|
||
|
|
this.loginForm.cas = this.decodeDes(cas);
|
||
|
|
this.$store
|
||
|
|
.dispatch('Login', this.loginForm)
|
||
|
|
.then(() => {
|
||
|
|
this.xianshiPage = false;
|
||
|
|
this.$modal.closeLoading();
|
||
|
|
// 登录成功后，处理函数
|
||
|
|
this.loginSuccess();
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
// if (this.captchaEnabled) {
|
||
|
|
// this.getCode();
|
||
|
|
// }
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 登录成功后，处理函数
|
||
|
|
loginSuccess(result) {
|
||
|
|
// 设置用户信息
|
||
|
|
this.$store.dispatch('GetInfo').then(res => {
|
||
|
|
console.log(this.$store.getters.userId);
|
||
|
|
//链接websocket
|
||
|
|
// this.$store.dispatch('websocketInit');
|
||
|
|
//开屏提示消息
|
||
|
|
// this.$store.dispatch('getNewsList');
|
||
|
|
//获取app是否更新的
|
||
|
|
this.$store.dispatch('getNewsApplist');
|
||
|
|
this.$tab.reLaunch('/pages/index');
|
||
|
|
//获取消息条数
|
||
|
|
this.$store.dispatch('getNewsListOne');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.normal-login-container {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.img-a {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
top: -150rpx;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img-b {
|
||
|
|
position: absolute;
|
||
|
|
width: 50%;
|
||
|
|
bottom: 0;
|
||
|
|
left: -50rpx;
|
||
|
|
z-index: -1;
|
||
|
|
/* margin-bottom: -200rpx; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login {
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #000;
|
||
|
|
border-radius: 76rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 40rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login button {
|
||
|
|
font-size: 28rpx;
|
||
|
|
background: #5677fc;
|
||
|
|
color: #fff;
|
||
|
|
height: 90rpx;
|
||
|
|
line-height: 90rpx;
|
||
|
|
border-radius: 50rpx;
|
||
|
|
box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login input {
|
||
|
|
padding: 0 20rpx 0 120rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
line-height: 90rpx;
|
||
|
|
margin-bottom: 50rpx;
|
||
|
|
background: #f8f7fc;
|
||
|
|
border: 1px solid #e9e9e9;
|
||
|
|
font-size: 28rpx;
|
||
|
|
border-radius: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-a {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
//验证码图片
|
||
|
|
.login-code {
|
||
|
|
height: 38px;
|
||
|
|
float: right;
|
||
|
|
|
||
|
|
.login-code-img {
|
||
|
|
height: 90rpx;
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 10px;
|
||
|
|
width: 200rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-a image {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
position: absolute;
|
||
|
|
left: 40rpx;
|
||
|
|
top: 28rpx;
|
||
|
|
/* border-right: 2rpx solid #dedede; */
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-a .line {
|
||
|
|
width: 2rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
background-color: #dedede;
|
||
|
|
position: absolute;
|
||
|
|
top: 28rpx;
|
||
|
|
left: 98rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-b {
|
||
|
|
text-align: left;
|
||
|
|
font-size: 35rpx;
|
||
|
|
font-family: Noto Sans S Chinese;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #212121;
|
||
|
|
padding: 30rpx 0 30rpx 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-b2 {
|
||
|
|
text-align: left;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #aaaaaa;
|
||
|
|
padding: 0rpx 0 120rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-c {
|
||
|
|
position: absolute;
|
||
|
|
right: 22rpx;
|
||
|
|
top: 22rpx;
|
||
|
|
background: #5677fc;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 24rpx;
|
||
|
|
border-radius: 50rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
line-height: 50rpx;
|
||
|
|
padding: 0 25rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-d {
|
||
|
|
text-align: center;
|
||
|
|
color: #999;
|
||
|
|
margin: 80rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-e {
|
||
|
|
text-align: center;
|
||
|
|
width: 250rpx;
|
||
|
|
margin: 80rpx auto 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-g {
|
||
|
|
float: left;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-e image {
|
||
|
|
width: 50rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-f {
|
||
|
|
text-align: center;
|
||
|
|
margin: 200rpx 0 0 0;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .t-f text {
|
||
|
|
margin-left: 20rpx;
|
||
|
|
color: #aaaaaa;
|
||
|
|
font-size: 27rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-login .uni-input-placeholder {
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cl {
|
||
|
|
zoom: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cl:after {
|
||
|
|
clear: both;
|
||
|
|
display: block;
|
||
|
|
visibility: hidden;
|
||
|
|
height: 0;
|
||
|
|
content: '\20';
|
||
|
|
}
|
||
|
|
|
||
|
|
// .logo-content {
|
||
|
|
// width: 100%;
|
||
|
|
// font-size: 21px;
|
||
|
|
// text-align: center;
|
||
|
|
// padding-top: 15%;
|
||
|
|
|
||
|
|
// image {
|
||
|
|
// border-radius: 4px;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .title {
|
||
|
|
// margin-left: 10px;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// 原本css
|
||
|
|
// .login-form-content {
|
||
|
|
// text-align: center;
|
||
|
|
// margin: 20px auto;
|
||
|
|
// margin-top: 15%;
|
||
|
|
// width: 80%;
|
||
|
|
|
||
|
|
// .input-item {
|
||
|
|
// margin: 20px auto;
|
||
|
|
// background-color: #f5f6f7;
|
||
|
|
// height: 45px;
|
||
|
|
// border-radius: 20px;
|
||
|
|
|
||
|
|
// .icon {
|
||
|
|
// font-size: 38rpx;
|
||
|
|
// margin-left: 10px;
|
||
|
|
// color: #999;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .input {
|
||
|
|
// width: 100%;
|
||
|
|
// font-size: 14px;
|
||
|
|
// line-height: 20px;
|
||
|
|
// text-align: left;
|
||
|
|
// padding-left: 15px;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .login-btn {
|
||
|
|
// margin-top: 40px;
|
||
|
|
// height: 45px;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .xieyi {
|
||
|
|
// color: #333;
|
||
|
|
// margin-top: 20px;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .login-code {
|
||
|
|
// height: 38px;
|
||
|
|
// float: right;
|
||
|
|
|
||
|
|
// .login-code-img {
|
||
|
|
// height: 38px;
|
||
|
|
// position: absolute;
|
||
|
|
// margin-left: 10px;
|
||
|
|
// width: 200rpx;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
</style>
|