提交 0a5a0cd5 编写于 作者: jiangzaicheng's avatar jiangzaicheng

登陆界面

上级 b6851288
<!--
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-04 16:24:00
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
* @LastEditTime: 2022-07-04 19:20:56
* @FilePath: \mcep-h5\src\components\common\Tatle.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<!-- <div> -->
<div class ="d-tatle">
<van-row class="el-icon-arrow-down">
<van-col span="9"><van-icon name="arrow-left" /></van-col>
<van-col span="15">{{tatle}}</van-col>
</van-row>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
/*
* title
*/
@Component({
name: "Tatle",
})
export default class Tatle extends Vue {
@Prop({ default: "" }) tatle: string | undefined
}
</script>
<style scoped lang="scss">
.van-col--9{
margin-top: 5%;
}
.van-col--15{
margin-top: 5%;
}
.d-tatle{
height: 50PX;
background: linear-gradient(90deg, rgba(118, 190, 250, 1) 0%, rgba(54, 114, 241, 1) 99%);
}
</style>
/*
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-04 15:41:06
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
* @LastEditTime: 2022-07-04 17:03:33
* @FilePath: \mcep-h5\src\main.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
......@@ -22,6 +30,7 @@ import nativeService from "@/services/native.service";
import { Step, Steps } from 'vant';
import vueEsign from 'vue-esign';
import Vconsole from 'vconsole';
// import { VanComponent } from "vant/types/component"
Vue.use(vueEsign)
Vue.use(Step);
......
/*
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-04 15:41:06
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
* @LastEditTime: 2022-07-04 17:42:48
* @FilePath: \mcep-h5\src\services\component-vue.service.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import Vue from "vue";
import { Button, Cell, CellGroup, Icon, Col, Row, Popup, Toast, Form, Field, Checkbox, CheckboxGroup, RadioGroup, Radio, Search, Picker, DatetimePicker, Loading, Dialog, NavBar, Tab, Tabs, IndexBar, IndexAnchor, Switch, List, PullRefresh } from "vant";
import TitleBar from "@/components/general/TitleBar.vue";
......@@ -12,6 +20,8 @@ import TabNav from "@/components/general/TabNav.vue";
import BaseList from "@/components/general/BaseList.vue";
import AnchorNav from "@/components/general/AnchorNav.vue";
import * as echarts from "echarts";
import Tatle from "@/components/common/Tatle.vue";
import ant from "ant-design-vue/es/locale/zh_CN"
declare module "vue/types/vue" {
interface Vue {
......@@ -76,6 +86,7 @@ class ComponentVueService {
Vue.component("tab-nav", TabNav);
Vue.component("base-list", BaseList);
Vue.component("anchor-nav", AnchorNav);
Vue.component("tatle-bar", Tatle);
}
}
const componentService = new ComponentVueService();
......
<!--
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-04 15:41:06
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
* @LastEditTime: 2022-07-04 20:14:28
* @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="d-page d-flex flex-column">
<div class="d-logb">
<img src="../../assets/images/chengdu-bank-logo.png" alt=""/>
<div class="d-logb-wen">移动信贷展业平台</div>
</div>
<div class="d-login-box">
<!-- <div class="d-login-box-top">个贷系统</div>-->
<!-- <div class="d-login-box-top-r">→对公系统</div>-->
<van-form style="width: 25vw" @submit="onSubmit">
<van-field class="username" label-width="20px" v-model="username" name="username" placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]">
<van-icon class="d-login-t1" name="manager" slot="label" props="center" size="25px"/>
</van-field>
<van-field class="password" label-width="20px" v-model="password" type="password" name="password"
placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]">
<van-icon class="d-login-t1" name="lock" slot="label" size="25px"/>
</van-field>
<div class="d-bottom">
<van-button round block type="info" class="d-login-box-bottom" native-type="submit">
<span class="d-login-text">登录</span>
</van-button>
</div>
</van-form>
</div>
<div class="loginform">
<div class="rarle"><tatle-bar :tatle="tatleName"></tatle-bar></div>
<div class="login">
<van-row class="el-icon-arrow-down" style="padding: 10% 0%;">
<van-col span="24"><p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">登录</span> </p></van-col>
<van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
}">请使用手机号登录</span></van-col>
</van-row>
<van-form @submit="onSubmit">
<div class="logindiv">
<span class="sopan">手机号</span>
<van-field
v-model="phone"
label="+86 |"
:border="true"
placeholder="请输入手机号"
/>
<van-divider />
</div>
<div class="logindiv">
<span class="sopan">密码</span>
<van-field
v-model="password"
type="password"
center
clearable
placeholder="请填写密码"
/>
<van-divider />
</div>
<span class="sopan">验证码</span>
<van-field
center
clearable
placeholder="请输入验证码"
/>
<template #right-icon>
<van-image :src="imageSrc" width="80" height="40" @click="_updatePicCode" />
</template>
<span class="sopan">短信验证码</span>
<div>
<van-row class="el-icon-arrow-down">
<van-col span="16"><van-field
v-model="sms"
center
clearable
placeholder="请输入短信验证码"
>
<van-divider />
</van-field></van-col>
<van-col span="8"><a href="javascript">获取短信验证码</a></van-col>
</van-row>
</div>
<div style="margin: 16px;">
<van-button square block type="info" native-type="submit">登录</van-button>
</div>
<!-- <van-row>
<van-col span="12">忘记密码</van-col>
<van-col span="12">用户注册</van-col>
</van-row> -->
</van-form>
</div>
</div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import IF from "@/public/factory/InterFaceFactory";
import nettyApi from '@/constants/api/ms-netty/netty.api';
import {NativeUI} from "@/public/ts/NativeUI";
import systemApi from '@/constants/api/ms-system/system.api';
import DataDics from '@/services/dict.service.ts';
import { Image as VanImage } from 'vant';
@Component({
name: "LoginView",
[VanImage.name]: VanImage,
})
export default class LoginView extends Vue {
// 用户名
username: string | undefined = "";
// 密码
password: string | undefined = "";
columns: any = []; //['个贷系统', '网贷系统', '信贷系统'],
menu: string = "";
mounted() {
//初始化数据字典
DataDics.init();
}
onSubmit(data: any) {
// this.$router.push({
// path: "TYMHView",
// params: {},
// });
// this.$router.push({
// path: "/main",
// params: {},
// });
this.authenticationLogin();
}
//统一认证登录
authenticationLogin() {
const param = {
tc: nettyApi.TRADE_CODE.authenticationLogin,
accountType: '1',
account: this.username,//liuwt
password: this.password,//dev@1234
// account: "liuwt",//liuwt
// password: "dev@1234",//dev@1234
sysCode: 'MT',
isAppList: '0',
authenType: '1',
isReturnToken: '0'
},
that = this;
NativeUI.showWaiting();
IF.transferDataInter(nettyApi.unifiedLogin, param).then((res: any) => {
NativeUI.closeWaiting();
console.log(res);
if (res.rc == '1') {
that.selectRoleInfo(res.userData)
} else {
NativeUI.toast(res.msg)
}
});
}
selectRoleInfo(userData: any) {
const parm = {
tc: "MCEP",
loginType: "1", //系统源 1-手机
// hrCode: "86M1909695", //对公人力资源代码 //个人人力资源代码77F9600649
hrCode: userData.hrEmployeeNo,
idNum: '', //身份证号
};
NativeUI.showWaiting();
IF.transferDataInter(systemApi.commonRq, parm).then((res: any) => {
NativeUI.closeWaiting();
console.log(parm);
console.log("登录返回");
console.log(res);
if (res.code == 1) {
//成功
/**
* 成功操作:
* 1、存储人力资源编号
* 2、跳转页面
* */
if (res.data.mobileSysUserInfo.sysRoleInfos != "") {
this.menu = res.data.mobileSysUserInfo.sysRoleInfos;
let roles = "";
for (let obj of res.data.mobileSysUserInfo.sysRoleInfos) {
this.columns.push(obj.roleSystmName);
roles += obj.roleId + ",";
}
sessionStorage.setItem("workcode", res.data.mobileSysUserInfo.hrCode);
// this.setUserInfo(res.data.mobileSysUserInfo);
const token = res.data.token;
for (const key in token) {
sessionStorage.setItem(key, token[key]);
}
sessionStorage.setItem("hrCode", userData.hrEmployeeNo);
sessionStorage.setItem("userName", res.data.mobileSysUserInfo.userName);
sessionStorage.setItem("ORGNAME", res.data.mobileSysUserInfo.coreName);
sessionStorage.setItem("roleNo", roles);
}
//TODO 获取接口返回的数据
sessionStorage.setItem("branchNo", res.data.mobileSysUserInfo.orgId);
this.$router.push({
name: "TYMHView",
params: {
systemList: res.data.mobileSysUserInfo.sysRoleInfos,
hrCode: userData.hrEmployeeNo
},
});
} else {
//失败
/**
* 失败操作:
* 1、失败吐司
* 2、清空数据
* */
sessionStorage.setItem("workcode", "");
sessionStorage.setItem("branchNo", "");
NativeUI.toast(res.msg);
}
});
}
tatleName="用户登录"
phone:string="" //电话
password:string=""//密码
imageSrc:string =""//图形
sms:string =""//短信
//获取图形验证码
_updatePicCode() {
//请求图形验证码
this.imageSrc = 'http://localhost:8080/users/sendPicCode?=' + Math.random();
//this.imageSrc = 'D:\GitClone\H5\mcep-h5\src\assets\images\ZYXTimg.png' + Math.random()
}
onSubmit(values:any) {
console.log('submit', values);
}
created() {
this.$nextTick(() => this._updatePicCode())
}
}
</script>
<style lang="scss" scoped>
.d-login-box {
height: 64%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.d-login-box-top {
font-family: 思源黑体;
font-weight: bold;
font-size: 20px;
color: #333333;
margin-bottom: 30px;
float: left;
}
.d-login-t1 {
margin-top: 8px;
}
.d-login-box-top-r {
float: right;
line-height: 30px;
color: #808080;
font-size: 16px;
}
.d-login-box-bottom {
border: 0;
background: linear-gradient(270deg, rgba(255, 53, 65, 1) 1%, rgba(255, 141, 155, 1) 98%);
height: 48px;
}
.d-page {
background-image: url("../../assets/images/login-background.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
img {
width: 20%;
float: left;
}
.d-logb {
margin-left: 50px;
margin-top: 30px;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.d-logb-wen {
float: left;
margin-top: 40px;
margin-left: 20px;
font-size: 18px;
color: #666666;
}
.username {
width: 100%;
height: 62px;
margin-bottom: 15px;
line-height: 42px;
}
.password {
width: 100%;
height: 62px;
margin-bottom: 35px;
line-height: 42px;
}
.u16_div {
width: 326px;
height: 135px;
background-color: white;
border: 1px solid rgb(204, 204, 204);
margin: 30px auto auto;
text-align: center;
padding-top: 10px;
color: #666666;
}
.u16_div_text {
margin-right: 60px;
color: black;
}
.d-login-text {
font-size: 20px;
}
.loginform{
width: 100%;
height: 100%;
}
.logindiv{
line-height: 20px;
}
.van-button{
border-radius: 6px;
}
.polog{
margin: 0px;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1;
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
font-kerning: normal;
}
.van-col--15{
margin-top: 2%;
}
.van-col--24{
margin-left: 6%;
}
.sopan{
margin-top: 5px;
margin-left: 6%;
}
// .login{
// margin-top: 20%;
// }
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册