huoran
/
FE_middlePlatform_server
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 15 Wiki Activity

调登录，添加区分账号和手机，邮箱等

Browse Source
dev
e 4 years ago
parent 54875fca29
commit 9b78961b1b
2 changed files with 210 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/utils/api.js
  2. 220
      src/views/Login.vue

5
src/utils/api.js
Unescape View File

@ -8,8 +8,9 @@ export default {
upload:`${host}/nakadai/nakadai/oss/fileUpload`,// 上传文件-订单
logins: `${host}/users/users/user/login`, //登录
verification:`${host}/users/users/user/captcha`,// 验证码
verification:`${host}/users/users/user/captcha`,// 验证码图片
bindPhoneOrEmail:`${host}/users/users/userAccount/bindPhoneOrEmail`,// 绑定手机
sendPhoneOrEmailCode:`${host} /users/users/userAccount/sendPhoneOrEmailCode`,// 手机验证码
// 订单管理
orderAdd:`${host}/nakadai/nakadai/order/add`,// 订单添加
orderDelete:`${host}/nakadai/nakadai/order/delete`,// 删除定单

220
src/views/Login.vue
Unescape View File

@ -8,8 +8,12 @@
<div class="ms-login">
<div class="ms-title">
<p class="title">账号登录</p>
<el-form :model="param" :rules="rules" ref="login" label-width="0px" style="margin-top: 40px">
<!-- <p class="title">账号登录</p> -->
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">账号登录</el-menu-item>
<el-menu-item index="2">手机号/邮箱登录</el-menu-item>
</el-menu>
<el-form v-show="activeIndex==='1'" :model="param" :rules="rules" ref="login" label-width="0px" style="margin-top: 40px">
<el-form-item prop="account">
<el-input @blur="blur" v-model="param.account" placeholder="请输入账号"></el-input>
</el-form-item>
@ -21,7 +25,7 @@
>
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-form-item prop="code" v-if="showVerify">
<el-input
placeholder="请输入验证码"
v-model="param.code"
@ -38,8 +42,56 @@
<el-button type="primary" @click="submitForm()">马上登录</el-button>
</div>
</el-form>
<el-form v-show="activeIndex==='2'" :model="phoneOrEmail" :rules="phoneOrEmailrules" ref="phoneOrEmail" label-width="0px" style="margin-top: 40px">
<el-form-item prop="account">
<el-input @blur="phoneBlur" v-model="phoneOrEmail.account" placeholder="请输入电话/邮箱"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
placeholder="请输入密码"
v-model="phoneOrEmail.password"
>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="showPhoneVerify">
<el-input
placeholder="请输入验证码"
v-model="phoneOrEmail.code"
@keyup.enter.native="submitForm('phone')"
>
</el-input>
<img style="cursor: pointer;" @click="phoneBlur" :src="PhoneVerificationIMG" class="verification" alt="">
</el-form-item>
<div style="width:100%;display:flex;justify-content: flex-end;">
<el-button type="text" class="forget">忘记密码?</el-button>
</div>
<div class="login-btn">
<el-button type="primary" @click="submitForm('phone')">马上登录</el-button>
</div>
</el-form>
</div>
</div>
<el-dialog title="绑定手机号" :visible.sync="phoneVisible" :close-on-click-modal="false" width="30%">
<el-form ref="form" label-width="60px">
<el-form-item label="手机号">
<el-input placeholder="请输入手机号" v-model="phone" maxlength="11"></el-input>
</el-form-item>
<el-form-item label="验证码">
<div style="display:flex;">
<el-input v-model="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input>
<el-button style="margin-left:10px" @click="sendPhoneCode" :disabled="phoneDisabled">{{phoneBtnText}}</el-button>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="phoneVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="phoneSubmit">确 定</el-button>
</span>
</el-dialog>
<v-footer class="footer" ref="footer"></v-footer>
</div>
</template>
@ -48,36 +100,97 @@
import vFooter from '../components/Footer'
export default {
data: function() {
var regPhoneOrEmail = (rule, value, callback) => {// 验证手机或邮箱
let emailReg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
if (value === '') {
callback(new Error('请输入手机或邮箱！'));
} else if (!emailReg.test(value)&&!phoneReg.test(value)) {
callback(new Error('输入的手机/邮箱格式不正确!'));
} else {
callback();
}
};
return {
activeIndex:"1",
showVerify:false,// 账号-验证码展示
verificationIMG:'',// 账号验证码拼接链接
// 账号
param: {
account: 'test',
password: '111aaa',
code:'',
platform:3,
random:''
random:'',
distinguish:1
},
rules: {
account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
},
// 手机+邮箱
showPhoneVerify:false,// 邮箱-验证码展示
PhoneVerificationIMG:'',// 电话或邮箱验证码拼接链接
phoneOrEmail: {
account: '',
password: '',
code:'',
platform:3,
random:'',
distinguish:2
},
phoneOrEmailrules:{
account: [{ validator: regPhoneOrEmail, trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
},
activeName: 'first',
verificationIMG:''
phoneVisible:false,
phone:'',
phoneCode:'',
phoneDisabled:false,
phoneBtnText: '发送验证码',
phoneTimer:'',
phoneOpener:''
};
},
components: {
vFooter
},
watch:{
verificationIMG:function(val){// 监听账号--展示验证码框
if(val){
this.showVerify = true
}else{
this.showVerify = false
}
},
PhoneVerificationIMG:function(val){// 监听账号--展示验证码框
if(val){
this.showPhoneVerify = true
}else{
this.showPhoneVerify = false
}
},
},
created(){
if(this.param.account){
this.showVerify = true
}
this.blur()
},
methods: {
submitForm() {
this.$refs.login.validate(valid => {
submitForm(val) {
let ref = val==='phone'?'phoneOrEmail':'login'
let param = val==='phone'?this.phoneOrEmail:this.param
this.$refs[ref].validate(valid => {
if (valid) {
this.$post(this.api.logins,this.param).then(res => {
this.$post(this.api.logins,param).then(res => {
this.$message.success(res.message);
sessionStorage.setItem('token',res.data.token)
this.$router.push({
@ -89,6 +202,9 @@ export default {
// this.$store.commit("userLoginData", { userLogin_id : user.userId,userName: user.userName,roleId: user.roleId});
}).catch(err => {
console.log(err,'reserr');
if(err.status===30001){
this.phoneVisible = true
}
// this.$message.error(err.message)
});
} else {
@ -96,6 +212,7 @@ export default {
return false;
}
});
},
handleClick(tab, event) {
console.log(tab, event);
@ -106,7 +223,79 @@ export default {
}
this.param.random = Math.floor(Math.random()*999999999)
this.verificationIMG = this.api.verification+'?random='+`${this.param.random}`
}
},
phoneBlur(){
console.log(this.phoneOrEmail.account,'this.phoneOrEmail.account');
if(!this.phoneOrEmail.account){
return this.PhoneVerificationIMG = ''
}
console.log(123,'後續');
this.phoneOrEmail.random = Math.floor(Math.random()*999999999)
this.PhoneVerificationIMG = this.api.verification+'?random='+`${this.phoneOrEmail.random}`
console.log(this.PhoneVerificationIMG,'this.PhoneVerificationIMG');
},
handleSelect(val){
this.activeIndex = val
},
sendPhoneCode(){
if(!this.phone) return this.$message.warning('请输入手机号')
if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号')
let data = {
phone: this.phone,
types: 2
}
this.$post(this.api.sendPhoneOrEmailCode,data).then(res => {
console.log(res,'当前绑定手机否');
this.phoneCountdown()// 倒计时
if(res.message.opener){
this.phoneOpener = res.message.opener
}else{
this.$message(res.message)
}
}).catch(res => {})
},
phoneSubmit(){
if(!this.phone) return this.$message.warning('请输入手机号')
if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号')
if(!this.phoneCode) return this.$message.warning('请输入验证码')
let data = {
phone: this.phone,
types: 2,
code: this.phoneCode,
opener: this.phoneOpener,
platform: 3,
account: this.param.account
}
this.$post(this.api.bindPhoneOrEmail,data).then(res => {
sessionStorage.setItem('token',res.token)
this.$router.push({
path:'/customer'
});
localStorage.setItem('ms_username', this.param.username);
this.$message.success('绑定成功')
// this.form.phone = this.phone
// this.phoneVisible = false
}).catch(res => {})
},
phoneCountdown(){
let count = 60
if(!this.phoneTimer){
this.phoneDisabled = true
this.phoneTimer = setInterval(() => {
console.log('倒计时中')
if(count > 0){
count--
this.phoneBtnText = `${count}秒后重试`
}else{
this.phoneDisabled = false
clearInterval(this.phoneTimer)
this.phoneTimer = null
this.phoneBtnText = `发送验证码`
}
},1000)
}
},
},
};
</script>
@ -214,4 +403,9 @@ img{
width: 160px;
height: 78px;
}
.el-menu-demo{
display: flex;
justify-content: space-between;
border-bottom: 0;
}
</style>
Write Preview
Loading…
Cancel
Save