product_platform/oms-ui-admin
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新建项目

Browse Source
This commit is contained in:
guoxing
2024-07-02 17:40:15 +08:00
commit e4c2a52560
449 changed files with 38782 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

862
src/views/login/login.vue Normal file
View File

@@ -0,0 +1,862 @@
<template>
<div class="login">
<div class="logoTitle" style="margin-left: 50px;margin-top: 50px;">
<img src="../../assets/loginImg/yxt-logo.png" style="width: 250px;height:50px; margin-right: 10px;" />
</div>
<div class="main">
<img src="../../assets/loginImg/login_left.png" style="width:50%;height:100%; " />
<div class="main-right" v-show="register==0">
<span class="main-right-title">欢迎登录商享通OMS</span>
<div class="main-right-table">
<div :class="tableIndex == 1 ? 'main-right-table-text1' : 'main-right-table-text3'" @click="tableClick(1)">
密码登录</div>
<div :class="tableIndex == 2 ? 'main-right-table-text2' : 'main-right-table-text4'" @click="tableClick(2)">
验证码登录</div>
</div>
<div class="main-right-table-password" v-show="tableIndex==1">
<el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
<el-input class="input" placeholder="请输入密码" type="password" show-password v-model="loginForm.password" />
</div>
<div class="main-right-table-code" v-show="tableIndex==2">
<el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
<div style="display: flex;flex-direction: row;align-items: center;width: 100%;">
<el-input class="input" style="flex: 1; margin-right: 10px;" maxlength="6" placeholder="请输入验证码"
v-model="loginForm.verifyCode" />
<span :class="sendCodeType ? 'sendCode1' : 'sendCode2'" @click="sendCode">{{sendCodeText}}</span>
</div>
</div>
<el-button type="primary" size="small" style="width: 65%;margin-top: 30px; font-size: 25px;line-height: 40px;"
@click="login">登录</el-button>
<div class="main-right-bom">
<el-checkbox class="main-right-bom-left" v-model="checkbox">7天内免登录</el-checkbox>
<div class="main-right-bom-right">
<span @click="forgetClick">忘记密码</span>
<div style="margin-left: 8px;margin-right: 8px;width: 1px; height: 18px;background: #999;"></div>
<span @click="registerClick">去注册</span>
</div>
</div>
</div>
<div class="main-right" v-show="register==1">
<div v-show="registerStep==1" class="registerStep1">
<span class="main-right-title2">欢迎注册商享通OMS</span>
<span style="width: 100%; margin-top: 15px;">手机号码</span>
<el-input class="input" style="flex: 1; margin-right: 10px;margin-top: 5px;" maxlength="11"
placeholder="请输入手机号码" v-model="registerInfo.mobile" />
<span style="width: 100%;margin-top: 15px;">密码</span>
<el-input class="input" style="flex: 1; margin-right: 10px;margin-top: 5px;" maxlength="6" placeholder="请输入密码"
v-model="registerInfo.password" show-password />
<span style="width: 100%;margin-top: 15px;">验证码</span>
<div
style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 5px;margin-left: -10px;">
<el-input class="input" style="flex: 1; margin-right: 10px;" maxlength="6" placeholder="请输入验证码"
v-model="registerInfo.code" />
<span :class="sendCodeType2 ? 'sendCode1' : 'sendCode2'" @click="sendCode2">{{sendCodeText2}}</span>
</div>
<div style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 5px;"
@click="goLogin">
<span>已有账号？</span>
<span style="color: #5084D2;">登录</span>
</div>
<el-button type="primary" size="small"
style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
@click="registerStep1()">注册</el-button>
<div style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 10px;">
<el-checkbox style="margin-right: 5px;" v-model="check"></el-checkbox>
<span style="font-size: 12px;">我已阅读并同意</span>
<span style="font-size: 12px;">《宇信通服务协议》</span>
<span style="font-size: 12px;">与</span>
<span style="font-size: 12px;">《隐私协议》</span>
</div>
</div>
<div v-show="registerStep==2" class="registerStep2">
<span class="main-right-title">请选择公司进入OMS</span>
<div style="height: 300px;width: 100%; margin-top: 15px;overflow: auto;
display: flex;flex-direction: column;">
<div v-for="(item,index) in companyList" :key="index" @click="itemClick(item)"
style="display: flex;flex-direction: column;width: 100%;">
<div style="display: flex;flex-direction: row;align-items: center;
background: #EDF1F7; border-radius: 8px;width: 100%;margin-bottom: 20px;
height: 50px;">
<img src="../../assets/images/company_icon.png" style="width: 25px; height: 25px;
margin-left: 10px;margin-right: 10px;" />
<span style="flex: 1;margin-right: 10px;">{{item.orgName}}</span>
<img v-show="item.type=='1'" src="../../assets/images/overdue.png" style=" height: 100%;" />
<img v-show="item.type=='2'" src="../../assets/images/experience.png" style=" height: 100%;" />
<img v-show="item.type=='3'" src="../../assets/images/formal.png" style=" height: 100%;" />
</div>
</div>
</div>
<el-button type="primary" size="small"
style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
@click="registerStep2()">新建企业信息</el-button>
</div>
<div v-show="registerStep==3" class="registerStep3">
<span class="main-right-title2">欢迎注册商享通OMS</span>
<span style="width: 100%; font-size: 16px;color: #000; margin-top: 40px;">请填写您的企业信息</span>
<div style="display: flex;flex-direction: row;align-items: center; margin-top: 15px;width: 100%; ">
<span>企业名称：</span>
<el-input class="input" style="flex: 1; " placeholder="请输入公司名称" v-model="registerInfo.companyName" />
</div>
<div style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;width: 100%; ">
<span>联系人员：</span>
<el-input class="input" style="flex: 1;" placeholder="请输入联系人" v-model="registerInfo.contacts" />
</div>
<div style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;width: 100%; ">
<span>所在区域：</span>
<!-- <el-input class="input" style="flex: 1; margin-right: 10px;" placeholder="请输入公司名称"
v-model="registerInfo.company" /> -->
<el-cascader v-model="selectedOptions" :options="options" filterable clearable class="input"
style="flex: 1;" @change="handleChange" />
</div>
<el-button type="primary" size="small"
style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
@click="registerStep3()">创建并进入</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import {
doLogin,
registerSendMessageCode,
bindOrganization,
selOrganization,
getUserById,
registUser
} from '@/api/user.js'
// 导入省市区数据组件
import {
regionData,
codeToText,
TextToCode
} from 'element-china-area-data'
import {
setCookie,
getCookie,
removeCookie,
} from '@/utils/functions.js.js'
export default {
data() {
return {
checkbox: false,
register: 0,
registerStep: 1,
tableIndex: 1,
sendCodeText: "发送验证码",
sendCodeType: false,
totalTime: 10, //一般是60
timer: '', //定时器
sendCodeText2: "发送验证码",
sendCodeType2: false,
totalTime2: 10, //一般是60
timer2: '', //定时器
check: false,
registerInfo: {
mobile: '',
userSid: ""
},
loginForm: {
userName: '',
password: '',
verifyCode: "",
type: "1"
},
loading: false,
loginCode: false,
showMsg: false,
forgetPwd: false,
nopassword: {
userPhone: '',
userName: '',
},
// 将省市区数据赋给级联选择器
options: regionData,
// 存放用户选择后省市区的信息
selectedOptions: [],
companyList: [
// {
// sid: "1",
// name: "撒打算打算1阿斯顿撒大撒打算打算大萨达",
// type: "1"
// }, {
// sid: "2",
// name: "撒打算打算2",
// type: "2"
// }, {
// sid: "3",
// name: "撒打算打算3",
// type: "3"
// }, {
// sid: "4",
// name: "撒打算打算4",
// type: "1"
// }, {
// sid: "5",
// name: "撒打算打算5",
// type: "1"
// }, {
// sid: "6",
// name: "撒打算打算6",
// type: "1"
// }, {
// sid: "7",
// name: "撒打算打算7",
// type: "1"
// }, {
// sid: "1",
// name: "撒打算打算1",
// type: "1"
// }, {
// sid: "1",
// name: "撒打算打算1",
// type: "1"
// }, {
// sid: "1",
// name: "撒打算打算1",
// type: "1"
// },
]
}
},
created() {
if (getCookie("pas") && getCookie("name")) { //判断页面是否有对应Cookie
this.loginForm.userName = getCookie("name"); //有则写入
this.loginForm.password = getCookie("pas");
console.log(" created", this.loginForm)
this.checkbox = true
} else {
this.loginForm.userName = ""; //无则写空
this.loginForm.password = "";
}
},
methods: {
// 省市区级联选择器选择后更新用户前端
handleChange(value) {
console.log(" handleChange", value)
var province = ''
var city = ''
var country = ''
for (let i = 0; i < this.selectedOptions.length; i++) {
if (i === 0) {
var province = codeToText[this.selectedOptions[i]]
}
if (i === 1) {
var city = codeToText[this.selectedOptions[i]]
}
if (i === 2) {
var country = codeToText[this.selectedOptions[i]]
}
}
console.log(" handleChange", province + "/" + city + "/" + country)
this.registerInfo.region = province + "/" + city + "/" + country
},
tableClick(index) {
this.tableIndex = index
this.loginForm.type = index + ""
},
// 验证码倒计时
sendCode() {
if (this.sendCodeType) return
// this.getCode() // 获取验证码的接口
this.sendCodeType = true
this.sendCodeText = this.totalTime + 's'
this.timer = setInterval(() => {
this.totalTime--
this.sendCodeText = this.totalTime + 's'
if (this.totalTime < 0) {
clearInterval(this.timer)
this.sendCodeText = '发送验证码'
this.totalTime = 10
this.sendCodeType = false
}
}, 1000)
},
// 验证码倒计时
sendCode2() {
if (this.registerInfo.mobile == '') {
this.$message({
message: '请输入手机号码',
type: 'warning'
})
return
}
var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
console.log(" reg", reg.test(this.registerInfo.mobile))
if (!reg.test(this.registerInfo.mobile)) {
this.$message({
message: '手机号码格式错误',
type: 'warning'
})
return
}
if (this.sendCodeType2) return
// this.getCode() // 获取验证码的接口
this.sendCodeType2 = true
this.sendCodeText2 = this.totalTime2 + 's'
this.timer2 = setInterval(() => {
this.totalTime2--
this.sendCodeText2 = this.totalTime2 + 's'
if (this.totalTime2 < 0) {
clearInterval(this.timer2)
this.sendCodeText2 = '发送验证码'
this.totalTime2 = 10
this.sendCodeType2 = false
}
}, 1000)
registerSendMessageCode(this.registerInfo.mobile).then((response) => {}).catch(() => {})
},
login() {
if (this.checkbox) { //判断多选框是否选中
setCookie("name", this.loginForm.userName, 7); //如选中则添加Cookie，添加内容为用户输入的密码和用户名
setCookie("pas", this.loginForm.password, 7);
} else {
removeCookie("name"); //如没选中，则删除掉对应的Cookie
removeCookie("pas");
}
// this.register = 1
// this.registerStep = 2
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
doLogin(this.loginForm).then((response) => {
if (response.code == 200) {
loading.close()
this.register = 1
this.companyList = response.data.sysOrganizationVos
this.registerInfo.userSid = response.data.sid
if (this.companyList.length == 0) {
// 1. 新用户 无关联企业
this.registerStep = 3
} else {
// 2. 注册过 选择企业登录
this.registerStep = 2
}
} else {
loading.close()
}
}).catch(() => {
loading.close()
})
},
forgetClick() {
},
registerClick() {
this.register = 1
this.registerStep = 1
},
goLogin() {
this.register = 0
this.registerStep = 0
},
registerStep1() {
if (!this.check) {
this.$message({
message: '请阅读并同意《宇信通服务协议》与《隐私协议》',
type: 'warning'
})
return
}
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
registUser(this.registerInfo).then((response) => {
if (response.code == 200) {
loading.close()
this.companyList = response.data.sysOrganizationVos
this.registerInfo.userSid = response.data.sid
if (this.companyList.length == 0) {
// 1. 新用户 无关联企业
this.registerStep = 3
} else {
// 2. 注册过 选择企业登录
this.registerStep = 2
}
} else {
loading.close()
}
}).catch(() => {
loading.close()
})
},
registerStep2() {
this.registerStep = 3
},
registerStep3() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
bindOrganization(this.registerInfo).then((response) => {
if (response.code == 200) {
this.$router.push({
path: '/index'
})
loading.close()
window.sessionStorage.setItem('token', response.data.token)
window.sessionStorage.setItem('userSid', response.data.sid)
window.sessionStorage.setItem('staffSid', response.data.staffSid)
window.sessionStorage.setItem('userName', response.data.userName)
window.sessionStorage.setItem('orgName', response.data.orgName)
window.sessionStorage.setItem('mobile', response.data.mobile)
window.sessionStorage.setItem('orgSid', response.data.orgSid)
window.sessionStorage.setItem('departmentName', response.data.departmentName)
window.sessionStorage.setItem('departmentSid', response.data.departmentSid)
window.sessionStorage.setItem('defaultOrgPath', response.data.orgSid)
window.sessionStorage.setItem('orgNamePath', response.data.orgNamePath)
window.sessionStorage.setItem('orgSidPath', response.data.orgSidPath)
window.sessionStorage.setItem('pNameAndDepartmentNameAndPostName', response.data
.pNameAndDepartmentNameAndPostName)
}
}).catch(() => {
loading.close()
})
},
itemClick(item) {
console.log(" itemClick", item)
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
var params = {
userSid: this.registerInfo.userSid,
orgSid: item.orgSid
}
selOrganization(params).then((response) => {
if (response.code == 200) {
this.$router.push({
path: '/index'
})
loading.close()
window.sessionStorage.setItem('token', response.data.token)
window.sessionStorage.setItem('userSid', response.data.sid)
window.sessionStorage.setItem('staffSid', response.data.staffSid)
window.sessionStorage.setItem('userName', response.data.userName)
window.sessionStorage.setItem('orgName', response.data.orgName)
window.sessionStorage.setItem('mobile', response.data.mobile)
window.sessionStorage.setItem('orgSid', response.data.orgSid)
window.sessionStorage.setItem('departmentName', response.data.departmentName)
window.sessionStorage.setItem('departmentSid', response.data.departmentSid)
window.sessionStorage.setItem('defaultOrgPath', response.data.orgSid)
window.sessionStorage.setItem('orgNamePath', response.data.orgNamePath)
window.sessionStorage.setItem('orgSidPath', response.data.orgSidPath)
window.sessionStorage.setItem('pNameAndDepartmentNameAndPostName', response.data
.pNameAndDepartmentNameAndPostName)
}
}).catch(() => {
loading.close()
})
},
getUserInfo(id) {
getUserById(id).then((response) => {
if (response.code == 200) {
console.log(" response", response)
let user = response.data
// 结果存入缓存
window.sessionStorage.setItem('staffSid', user.staffSid)
window.sessionStorage.setItem('sid', user.sid)
window.sessionStorage.setItem('userName', user.userName)
}
}).catch(() => {})
},
codeShow() {
if (this.loginForm.password == '' || this.loginForm.userName == '') {
this.loginCode = false
this.showMsg = true
return
}
this.$refs.imgCodeRole.getCodeImage()
},
reGetPwd() {
user.reGetPwd(this.nopassword).then((res) => {})
},
},
}
</script>
<style lang="scss">
// .el-input__inner {
// border: none;
// color: #000;
// font-size: 16px;
// }
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
-webkit-text-fill-color: #000;
}
.login {
position: relative;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-image: url(../../assets/home/bj.png);
background-position: center;
overflow: hidden;
.logoTitle {
margin: 30px;
}
.main {
width: 60%;
height: 500px;
background: #ffffff;
box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
opacity: 0.8;
border-radius: 5px;
position: absolute;
right: 20%;
top: 25%;
display: flex;
flex-direction: row;
.main-right {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
height: 100%;
.main-right-title {
margin-top: 40px;
font-size: 24px;
font-weight: 600;
}
.main-right-title2 {
margin-top: 40px;
font-size: 24px;
font-weight: 600;
color: #467CCF;
}
.main-right-table {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 30px;
width: 70%;
.main-right-table-text1 {
flex: 1;
font-size: 22px;
text-align: center;
color: #3E77CD;
}
.main-right-table-text1:after {
content: '';
display: block;
width: 60px;
border-bottom: 2px solid #3E77CD;
margin: 0 auto;
padding-bottom: 8px;
}
.main-right-table-text3 {
flex: 1;
font-size: 22px;
text-align: center;
color: #333;
border-bottom: none;
padding-bottom: 8px;
}
.main-right-table-text2 {
flex: 1;
font-size: 22px;
text-align: center;
color: #3E77CD;
}
.main-right-table-text2:after {
content: '';
display: block;
width: 80px;
border-bottom: 2px solid #3E77CD;
margin: 0 auto;
padding-bottom: 8px;
}
.main-right-table-text4 {
flex: 1;
font-size: 22px;
text-align: center;
color: #333;
border-bottom: none;
padding-bottom: 8px;
}
}
.main-right-table-password {
display: flex;
width: 65%;
margin-top: 10px;
flex-direction: column;
align-items: center;
.input {
margin-top: 10px;
width: 100%;
height: 50px;
}
}
.main-right-table-code {
display: flex;
width: 65%;
margin-top: 10px;
flex-direction: column;
align-items: center;
.input {
margin-top: 10px;
width: 100%;
height: 50px;
}
.sendCode1 {
font-size: 16px;
color: #c9c9c9;
}
.sendCode2 {
font-size: 16px;
color: #3E77CD;
}
}
.main-right-bom {
padding-left: 10px;
padding-right: 10px;
display: flex;
width: 65%;
margin-top: 10px;
flex-direction: row;
align-items: center;
justify-content: space-between;
.main-right-bom-left {
color: #000;
align-items: center;
}
.main-right-bom-right {
display: flex;
flex-direction: row;
align-items: center;
span {
color: #666;
}
}
}
.registerStep1 {
display: flex;
flex-direction: column;
align-items: center;
width: 65%;
.input {
width: 100%;
height: 50px;
}
.main-right-title2 {
font-size: 24px;
font-weight: 600;
color: #467CCF;
}
.sendCode1 {
font-size: 16px;
color: #c9c9c9;
}
.sendCode2 {
font-size: 16px;
color: #3E77CD;
}
}
.registerStep2 {
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
.input {
width: 100%;
height: 50px;
}
.main-right-title {
font-size: 24px;
font-weight: 600;
}
}
.registerStep3 {
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
.input {
width: 100%;
height: 50px;
}
}
}
}
}
</style>