huoran
/
FE_occupationlab_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

登录及解绑手机号

Browse Source
dev_2022-04-07
yujialong 3 years ago
parent eb66e79c8e
commit 4eff988c3a
4 changed files with 189 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/login/workNumber.png
  2. 303
      src/pages/account/login/index.vue
  3. 14
      src/pages/setting/person/info.vue
  4. 4
      src/setting.js

BIN
src/assets/img/login/workNumber.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 418 B

303
src/pages/account/login/index.vue
Unescape View File

@ -7,26 +7,42 @@
<li v-for="(item,index) in tabList" :key="index" :class="{active: form.distinguish == item.id}" @click="typeClick(item)">{{item.label}}</li> <li v-for="(item,index) in tabList" :key="index" :class="{active: form.distinguish == item.id}" @click="typeClick(item)">{{item.label}}</li>
</ul> </ul>
<el-form :model="form" :rules="loginRules" ref="form" style="margin-top: 20px"> <el-form :model="form" :rules="loginRules" ref="form" style="margin-top: 20px">
<el-form-item prop="school"> <!-- 学号工号 -->
<label class="school"></label> <div v-show="!form.distinguish">
<el-select v-model="form.schoolId" clearable filterable placeholder="请选择学校"> <div class="items" style="margin-bottom: 20px">
<el-option v-for="(item, i) in schoolList" :key="i" :label="item.schoolName" :value="item.schoolId"></el-option> <el-form-item class="school-select" prop="schoolId">
</el-select> <label class="label school"></label>
</el-form-item> <el-select v-model="form.schoolId" clearable filterable placeholder="请选择学校">
<el-form-item v-if="form.distinguish == '1'" prop="account"> <el-option v-for="(item, i) in schoolList" :key="i" :label="item.schoolName" :value="item.schoolId"></el-option>
<label class="account"></label> </el-select>
<el-input v-model.trim="form.account" placeholder="请输入学号"></el-input> </el-form-item>
</el-form-item> <el-checkbox v-model="setDefault">设置为默认学校</el-checkbox>
<el-form-item v-if="form.distinguish == '2'" prop="account"> </div>
<label class="account"></label> <div class="items">
<el-input v-model.trim="form.account" placeholder="请输入工号"></el-input> <el-form-item prop="type" style="width: 35%;margin-right: 15px">
<label class="label workNumber"></label>
<el-select v-model="form.type" placeholder="请选择类型" @change="typeChange">
<el-option label="学生学号" :value="1"></el-option>
<el-option label="老师工号" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="workNumber">
<label class="label account"></label>
<el-input v-model.trim="form.workNumber" :placeholder="'请输入' + (form.type ? '学生学号' : '老师工号')"></el-input>
</el-form-item>
</div>
</div>
<!-- 手机号登录 -->
<el-form-item v-show="form.distinguish === 1" prop="account">
<label class="label account"></label>
<el-input v-model.trim="form.account" placeholder="请输入账号"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="form.distinguish == '3'" prop="account"> <el-form-item v-show="form.distinguish === 2" prop="account">
<label class="account"></label> <label class="label account"></label>
<el-input v-model.trim="form.account" placeholder="请输入手机号/邮箱"></el-input> <el-input v-model.trim="form.account" placeholder="请输入手机号"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<label class="password"></label> <label class="password label"></label>
<el-input <el-input
type="password" type="password"
placeholder="请输入密码" placeholder="请输入密码"
@ -35,7 +51,7 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code"> <el-form-item prop="code">
<label class="code"></label> <label class="label code"></label>
<el-input <el-input
placeholder="请输入验证码" placeholder="请输入验证码"
v-model.trim="form.code" v-model.trim="form.code"
@ -114,29 +130,34 @@ export default {
return { return {
tabList: [ tabList: [
{ {
id: '1', id: 0,
label: '学生学号登录' label: '学号/工号登录'
}, { }, {
id: '2', id: 1,
label: '老师工号登录' label: '学校管理员登录'
}, { }, {
id: '3', id: 2,
label: '手机号/邮箱' label: '手机号/邮箱'
} }
], ],
setDefault: !!util.local.get('schoolId'),
verificationIMG: "", verificationIMG: "",
schoolList: [], schoolList: [],
form: { form: {
account: "", schoolId: '',
workNumber: '',
account: '',
password: "", password: "",
code: "", // 验证码 code: "", // 验证码
random: "", // 随机数 random: "", // 随机数
distinguish: 1, // 区分手机号账号登录,1为账号登录,2为手机号或邮箱登录 distinguish: 0, // 区分手机号账号登录,1为账号登录,2为手机号或邮箱登录
type: 1, // 平台端区分：0->教师端 1->学生端 2->无端 type: 1, // 平台端区分：0->教师端 1->学生端 2->无端
platform: Setting.platformId platform: Setting.platformId
}, },
loginRules: { loginRules: {
account: [{ required: true, message: "请输入账号", trigger: "blur" }], schoolId: [{ required: true, message: "请选择学校", trigger: "change" }],
workNumber: [{ required: true, message: "请输入学生学号", trigger: "blur" }],
account: [{ required: false, message: "请输入账号", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }], password: [{ required: true, message: "请输入密码", trigger: "blur" }],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }] code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
}, },
@ -155,11 +176,9 @@ export default {
components: { components: {
vFooter vFooter
}, },
created() {
this.getVerImg();
},
mounted() { mounted() {
// this.getSchool() this.getVerImg()
this.getSchool()
// 页面离开的时候销毁手机和邮箱验证码定时器 // 页面离开的时候销毁手机和邮箱验证码定时器
this.$once("hook:beforeDestroy", function() { this.$once("hook:beforeDestroy", function() {
clearInterval(this.phoneTimer); clearInterval(this.phoneTimer);
@ -179,22 +198,36 @@ export default {
cityId: '' cityId: ''
}).then(res => { }).then(res => {
this.schoolList = res.list this.schoolList = res.list
const schoolId = util.local.get('schoolId')
if (schoolId) this.form.schoolId = schoolId
}).catch(res => {}) }).catch(res => {})
}, },
getVerImg() { // 获取验证码图片 getVerImg() { // 获取验证码图片
this.form.random = Math.floor(Math.random() * 999999999); this.form.random = Math.floor(Math.random() * 999999999);
this.verificationIMG = this.api.verification + "?random=" + `${this.form.random}`; this.verificationIMG = this.api.verification + "?random=" + `${this.form.random}`;
}, },
typeClick(tab) { // 切换标签 // 切换标签
typeClick(tab) {
const { id } = tab const { id } = tab
this.form.distinguish = id const form = this.form
this.form.account = ""; // 切换了后，学校等清空
this.$refs.form.clearValidate(); form.account = ''
this.loginRules.account[0].message = id === '1' ? form.workNumber = ''
'请输入学号' : form.schoolId = ''
id === '2' ? form.type = 1
'请输入工号' : form.distinguish = id
'请输入手机号/邮箱' this.$refs.form.clearValidate()
// 切换了登录方式后，校验规则要变化
const rules = this.loginRules
rules.account[0].required = id === 1
rules.schoolId[0].required = id === 0
rules.workNumber[0].required = id === 0
},
// 学号工号切换
typeChange(id) {
this.loginRules.workNumber[0].message = id === 1 ?
'请输入学生学号' :
'请输入老师工号'
}, },
// 刷新官网 // 刷新官网
reloadIndex() { reloadIndex() {
@ -211,21 +244,24 @@ export default {
submit() { // 提交登录 submit() { // 提交登录
this.$refs.form.validate(valid => { this.$refs.form.validate(valid => {
if (valid) { if (valid) {
this.form.distinguish = Number(this.form.distinguish); const form = this.form
this.$post(this.api.logins, this.form).then(({ status, data, message }) => { if (!form.distinguish && this.setDefault) util.local.set('schoolId', form.schoolId)
this.$post(this.api.logins, form).then(({ status, data, message }) => {
// 未绑定手机号，则弹框去绑定
if (status == 30001) { if (status == 30001) {
this.phoneVisible = true this.phoneVisible = true
this.getVerImg() this.getVerImg()
this.form.code = '' form.code = ''
} else if (status == 200) { } else if (status == 200) {
const { token } = data const { token } = data
this.token = token this.token = token
// 查询是否是客户，如果是客户，则弹出选择端的页面去选择跳转到哪个端 // 查询是否是客户，如果是客户，则弹出选择端的页面去选择跳转到哪个端
// this.setLogin()
axios.get(this.api.isClient, { axios.get(this.api.isClient, {
headers: { headers: {
token token
} }
}).then(res => { }).then(({ data }) => {
// 如果是客户 // 如果是客户
if (data.customer) { if (data.customer) {
this.SET_CUSTOMERNAME(data.customerName) this.SET_CUSTOMERNAME(data.customerName)
@ -239,7 +275,7 @@ export default {
} }
}).catch(res => { }).catch(res => {
this.getVerImg() this.getVerImg()
this.form.code = '' form.code = ''
}) })
} }
}); });
@ -256,7 +292,7 @@ export default {
}) })
this.reloadIndex() this.reloadIndex()
// 跳转到教师端的重定向页面 // 跳转到教师端的重定向页面
location.href = process.env.NODE_ENV === 'development' ? location.href = Setting.isDev ?
'http://192.168.31.125:8081/#/redirect?auth=' + btoa(this.token) : 'http://192.168.31.125:8081/#/redirect?auth=' + btoa(this.token) :
`${location.origin}/admin/#/redirect?auth=${window.btoa(this.token)}` `${location.origin}/admin/#/redirect?auth=${window.btoa(this.token)}`
} }
@ -308,7 +344,7 @@ export default {
code: this.phoneCode, code: this.phoneCode,
opener: this.phoneOpener, opener: this.phoneOpener,
platform: Setting.platformId, platform: Setting.platformId,
account: this.form.account account: this.form.workNumber
}; };
this.$post(this.api.bindPhoneOrEmail, data).then(res => { this.$post(this.api.bindPhoneOrEmail, data).then(res => {
util.successMsg("绑定成功"); util.successMsg("绑定成功");
@ -336,6 +372,32 @@ export default {
url(../../../assets/img/shapes/shape4.png) (right 50%)/auto no-repeat, url(../../../assets/img/shapes/shape4.png) (right 50%)/auto no-repeat,
url(../../../assets/img/shapes/shape5.png) (right 80%)/auto no-repeat, url(../../../assets/img/shapes/shape5.png) (right 80%)/auto no-repeat,
url(../../../assets/img/shapes/shape6.png) (right bottom)/auto no-repeat; url(../../../assets/img/shapes/shape6.png) (right bottom)/auto no-repeat;
.tab{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
border-bottom: 2px solid #E1E6F2;
li{
padding: 18px 0;
margin-bottom: -1px;
font-size: 16px;
color: #555;
cursor: pointer;
border-bottom: 4px solid transparent;
&:last-child{
margin-right: 0;
}
&.active{
color: $main-color;;
border-bottom-color: $main-color;
}
}
}
.items {
display: flex;
align-items: center;
}
.form{ .form{
width: 436px; width: 436px;
padding: 38px 38px 60px; padding: 38px 38px 60px;
@ -348,89 +410,72 @@ export default {
color: #0B1D30; color: #0B1D30;
letter-spacing: 4px; letter-spacing: 4px;
} }
.tab{ }
display: flex; /deep/.el-form-item{
justify-content: space-between; margin-bottom: 20px;
align-items: center; }
margin-bottom: 24px; /deep/.el-input__inner{
border-bottom: 2px solid #E1E6F2; position: relative;
li{ height: 52px;
padding: 18px 0; padding: 0 20px 0 34px;
margin-bottom: -1px; line-height: 50px;
font-size: 18px; background-color: #FBFBFB;
color: #555; border: 1px solid #E1E6F2;
cursor: pointer; border-radius: 4px !important;
border-bottom: 4px solid transparent; }
&:last-child{ .school-select {
margin-right: 0; flex: 1;
} margin-right: 10px;
&.active{ margin-bottom: 0;
color: $main-color;; }
border-bottom-color: $main-color; .el-select {
} width: 100%;
} }
} .label {
.label{ z-index: 1;
margin-bottom: 10px; position: absolute;
color: #105CB2; top: 17px;
} left: 11px;
/deep/.el-form-item{ width: 18px;
margin-bottom: 20px; height: 18px;
} background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat;
/deep/.el-input__inner{ }
position: relative; .school{
height: 52px; background-image: url(../../../assets/img/login/school.png);
padding: 0 20px 0 34px; }
line-height: 50px; .workNumber{
background-color: #FBFBFB; width: 17px;
border: 1px solid #E1E6F2; background-image: url(../../../assets/img/login/workNumber.png);
border-radius: 4px !important; }
} .password{
.el-select { top: 18px;
width: 100%; background-image: url(../../../assets/img/login/password.png);
} }
label { .code{
z-index: 1; top: 18px;
position: absolute; background-image: url(../../../assets/img/login/code.png);
top: 17px; }
left: 11px; .ver-img{
width: 18px; position: absolute;
height: 18px; top: 1px;
background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat; right: 1px;
} }
.school{ /deep/.el-form-item__error{
background-image: url(../../../assets/img/login/school.png); top: 105%;
} left: auto;
.password{ right: 0;
top: 18px; color: #FFA94E;
background-image: url(../../../assets/img/login/password.png); }
} .submit{
.code{ width: 100%;
top: 18px; height: 48px;
background-image: url(../../../assets/img/login/code.png); margin-top: 30px;
} line-height: 48px;
.ver-img{ padding: 0;
position: absolute; font-size: 20px;
top: 1px; background-color: $main-color;
right: 1px; border-radius: 4px;
} border: 0;
/deep/.el-form-item__error{
top: 105%;
left: auto;
right: 0;
color: #FFA94E;
}
.submit{
width: 100%;
height: 48px;
margin-top: 30px;
line-height: 48px;
padding: 0;
font-size: 20px;
background-color: $main-color;
border-radius: 4px;
border: 0;
}
} }
} }
.copyright{ .copyright{

14
src/pages/setting/person/info.vue
Unescape View File

@ -142,7 +142,8 @@
<li> <li>
<label>手机号：</label> <label>手机号：</label>
<el-input class="m-r-10" type="text" size="small" v-model="form.phone" disabled></el-input> <el-input class="m-r-10" type="text" size="small" v-model="form.phone" disabled></el-input>
<el-button type="text" size="small" @click="bindPhone">更换</el-button> <el-button type="text" size="small" @click="bindPhone">{{ form.phone ? '更换' : '绑定' }}</el-button>
<el-button v-if="form.phone" type="text" size="small" @click="unbind">解绑</el-button>
</li> </li>
</div> </div>
<div class="line info imp"> <div class="line info imp">
@ -542,6 +543,17 @@ export default {
bindPhone() { bindPhone() {
this.phoneVisible = true this.phoneVisible = true
}, },
// 解绑手机号
unbind() {
this.$confirm('确定要解绑该手机号吗？', '提示', {
type: 'warning'
}).then(() => {
this.$get(this.api.unbindMobilePhone).then(res => {
this.$message.success('解绑成功')
this.getdata()
}).catch(res => {})
}).catch(() => {})
},
bindPassword() { bindPassword() {
this.passwordVisible = true this.passwordVisible = true
}, },

4
src/setting.js
Unescape View File

@ -30,8 +30,8 @@ if (isHh) {
} else if (isDev) { } else if (isDev) {
// 本地 // 本地
systemPath = `http://192.168.31.125:8093` systemPath = `http://192.168.31.125:8093`
host = "http://39.108.250.202:9000/"; // 中台测试服 // host = "http://39.108.250.202:9000/"; // 中台测试服
// host = "http://192.168.31.151:9000/"; // 榕 host = "http://192.168.31.151:9000/"; // 榕
// host = "http://192.168.31.137:9000"; // 赓 // host = "http://192.168.31.137:9000"; // 赓
} }

Write Preview
Loading…
Cancel
Save