<template>
|
<header class="Header">
|
<div class="container">
|
<div>国康商城</div>
|
<ul class="quick-menu">
|
<li class="quick-menu-item" @click="login">登录</li>
|
<li class="quick-menu-item shopping-car">购物车</li>
|
<li class="quick-menu-item">我的订单</li>
|
<li class="quick-menu-item">消息中心</li>
|
</ul>
|
</div>
|
<el-dialog
|
:visible.sync="dialogVisible"
|
width="500px"
|
:show-close="false">
|
<div class="login-header" slot="title">
|
帐号登录
|
</div>
|
<div class="loginForm">
|
<el-form :model="ruleForm" :role="rules"
|
ref="ruleForm" >
|
<el-form-item prop="name">
|
<el-input v-model="ruleForm.name" placeholder="请输入用户名">
|
<i slot="prefix" class="iconfont icon-icon-"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="pwd">
|
<el-input type="password" v-model="ruleForm.pwd" placeholder="请输入密码">
|
<i slot="prefix" class="iconfont icon-xiugaimima"></i>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<el-button type="primary" @click="submitForm()" :loading="loginFlag">{{loginFlag?`登录中...`:`登录`}}</el-button>
|
</div>
|
</el-dialog>
|
</header>
|
</template>
|
<script>
|
import { oatuthToken, userinfo } from '@api/oauth/index'
|
import config from '../app.config.js'
|
import { mapMutations } from 'vuex'
|
export default {
|
name: 'Header',
|
data () {
|
return {
|
dialogVisible: false,
|
loginFlag: false,
|
ruleForm: {
|
name: '',
|
pwd: ''
|
},
|
rules: {
|
name: [
|
{ required: true, message: '请输入用户名', trigger: 'change' }
|
],
|
pwd: [
|
{ required: true, message: '请输入密码', trigger: 'change' }
|
]
|
}
|
}
|
},
|
methods: {
|
...mapMutations(['setToken']),
|
login () {
|
this.dialogVisible = true
|
},
|
|
doSm3AndSm2Encrypt (sourceStr) {
|
// 密码加密
|
/* eslint-disable */
|
const sm2Utils = new Sm2Utils();
|
const public_key = config.public_key
|
const sm3_random_plain =
|
Sm3Utils.encryptFromText(sourceStr) +
|
'|' +
|
sm2Utils.randomWord(8) +
|
'|' +
|
sourceStr;
|
const sm3_sm2_plain = sm2Utils.encryptFromText(
|
public_key,
|
sm3_random_plain,
|
);
|
return '{crypto}' + sm3_sm2_plain;
|
/* eslint-enable */
|
},
|
submitForm () {
|
this.$refs.ruleForm.validate(async (valid) => {
|
if (valid) {
|
this.loginFlag = true
|
const param = {
|
client_id: config.client_id,
|
client_secret: config.client_secret,
|
username: this.ruleForm.name,
|
grant_type: 'password_double',
|
password: this.doSm3AndSm2Encrypt(this.ruleForm.pwd)
|
}
|
try {
|
const res = await oatuthToken(param, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
|
if (res && res.code) {
|
const r = await oatuthToken(Object.assign(param, { code: res.code }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
|
this.setToken({ token: r.access_token })
|
const user = await userinfo(r)
|
console.log(user)
|
}
|
this.loginFlag = false
|
} catch (error) {
|
this.loginFlag = false
|
}
|
} else {
|
console.log('error submit!!')
|
return false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped lang="stylus">
|
.Header
|
background var(--color-bg-header)
|
.container
|
max-width 1200px
|
width 100%
|
display flex
|
justify-content space-between
|
align-items center
|
height 36px
|
font-size 14px
|
margin 0 auto
|
padding 0 20px
|
box-sizing border-box
|
.quick-menu
|
display flex
|
.quick-menu-item
|
margin-right 40px
|
cursor pointer
|
&.shopping-car
|
color var(--color-red)
|
&:last-child
|
margin-right 0
|
/deep/ .el-dialog__header
|
padding 20px 50px
|
border-bottom 1px solid var(--color-border)
|
/deep/ .el-dialog__body
|
padding 40px 50px
|
.login-header
|
font-size:26px;
|
font-weight:600;
|
color:var(--color-text-blue)
|
line-height:32px;
|
.iconfont
|
color var(--color-text-blue)
|
/deep/ .el-button--primary
|
width 100%
|
height 60px
|
background-color: var(--color-text-blue);
|
border-color: var(--color-text-blue);
|
font-size:30px;
|
font-weight:400;
|
letter-spacing:3px
|
</style>
|
