ui库和web端产品库合并版本(还需修复细节)
This commit is contained in:
231
ui/packages/common/AiSign/AiSign.vue
Normal file
231
ui/packages/common/AiSign/AiSign.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<section class="ai-sign" v-if="visible">
|
||||
<el-row type="flex">
|
||||
<el-card :class="{'sign-in-hidden':!signInState}">
|
||||
<ai-sign-in
|
||||
v-if="!sassLogin"
|
||||
ref="signIn"
|
||||
@signIn="SignIn"
|
||||
:showPhoneLogin="showPhoneLogin"
|
||||
:showScanLogin="showScanLogin"
|
||||
:instance="instance"
|
||||
@qrlogin="onQRlogin"
|
||||
@sendMessage="sendMsg"
|
||||
@resetPwd="signInState=false"/>
|
||||
<h2 class="scan-title sassLogin" v-else>手机扫码，安全登录</h2>
|
||||
<template v-if="tpLoginList.length>0">
|
||||
<div class="divider" v-text="`第三方账号登录`"/>
|
||||
<el-row class="tpLogin" type="flex" align="middle">
|
||||
<el-tooltip v-for="(tp,i) in tpLoginList" :key="i" :content="tp.label" placement="top">
|
||||
<ai-icon class="item" v-bind="tp" @click.native.stop="tp.click"/>
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-card>
|
||||
<el-card class="change-password" :class="{'change-password-hidden':signInState}">
|
||||
<ai-change-pwd @signUp="ChangePwd" :instance="instance" @toLogin="signInState=true"/>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiSignIn from "./signIn";
|
||||
import AiChangePwd from "./changePwd";
|
||||
|
||||
export default {
|
||||
name: "AiSign",
|
||||
components: {AiChangePwd, AiSignIn},
|
||||
props: {
|
||||
/**
|
||||
* 是否展示
|
||||
*/
|
||||
visible: Boolean,
|
||||
/**
|
||||
* 显示手机号登陆模块
|
||||
*/
|
||||
showPhoneLogin: {default: true},
|
||||
/**
|
||||
* 显示扫码登录
|
||||
*/
|
||||
showScanLogin: {default: true},
|
||||
/**
|
||||
* 接口工具类
|
||||
*/
|
||||
instance: {required: true, type: Function},
|
||||
/**
|
||||
* 请求接口类
|
||||
* login :手机密码登录;mobile:手机验证码登录;
|
||||
* qr:手机扫码登录 qrStatus:扫码状态
|
||||
* changePwd:更换密码 verification:验证码验证
|
||||
*/
|
||||
action: Object,
|
||||
/**
|
||||
* 第三方登录列表: wxwork:企业微信
|
||||
*/
|
||||
tps: {default: () => []},
|
||||
/**
|
||||
* 是否是sass版本登录
|
||||
*/
|
||||
sassLogin: Boolean
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
actions: this.actions,
|
||||
sassLogin: this.sassLogin
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
actions() {
|
||||
let action = {
|
||||
login: "/auth/oauth/token",
|
||||
mobile: "/auth/mobile/token",
|
||||
qr: "/auth/qr-con/token",
|
||||
qrStatus: "/admin/user/getQrStatus",
|
||||
qrKey: "/admin/user/getQrKey",
|
||||
code: "/auth/token/code",
|
||||
failTimes: "/admin/user/getloginFailNum",
|
||||
changePwd: "/admin/user/update-pwd",
|
||||
verification: "/admin/user/checkPhone"
|
||||
}
|
||||
return {...action, ...this.action}
|
||||
},
|
||||
tpLoginList() {
|
||||
let list = [
|
||||
{
|
||||
label: "企微登录", icon: "iconqiwei", key: 'wxwork', type: 'svg', click: () => {
|
||||
location.href = `https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?appid=ww596787bb70f08288&redirect_uri=${encodeURIComponent(location.href)}&usertype=member`
|
||||
}
|
||||
}
|
||||
]
|
||||
return list.filter(e => this.tps.includes(e.key)) || []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
signInState: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ChangePwd(params) {
|
||||
this.instance.post(this.actions.changePwd, null, {
|
||||
params: {
|
||||
phone: params.account,
|
||||
code: params.verifictCode,
|
||||
newPwd: params.password
|
||||
}
|
||||
}).then(res => {
|
||||
if (res) {
|
||||
this.$message.success("修改成功!")
|
||||
this.signInState = true
|
||||
}
|
||||
})
|
||||
},
|
||||
SignIn(params, url) {
|
||||
let password = this.$encryption(params)
|
||||
this.instance.post(url, null, {
|
||||
auth: {
|
||||
username: 'villcloud',
|
||||
password: "villcloud"
|
||||
},
|
||||
params: {
|
||||
grant_type: 'password',
|
||||
scope: 'server',
|
||||
...params,
|
||||
password
|
||||
}
|
||||
}).then(data => {
|
||||
if (!data) {
|
||||
this.$refs.signIn.handleInput()
|
||||
} else {
|
||||
this.$emit("login", data)
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$refs.signIn.handleInput()
|
||||
})
|
||||
},
|
||||
getNowDate() {
|
||||
const date = new Date()
|
||||
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
|
||||
},
|
||||
sendMsg(phone) {
|
||||
this.instance.post(this.actions.verification, null, {
|
||||
auth: {},
|
||||
params: {phone}
|
||||
}).then(() => this.$message.success("发送成功!"))
|
||||
},
|
||||
onQRlogin(data) {
|
||||
this.$emit('login', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ai-sign {
|
||||
width: 400px;
|
||||
display: inline-block;
|
||||
transition: 2s;
|
||||
|
||||
.el-row {
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.sign-in-hidden {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.change-password {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.change-password-hidden {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
width: 400px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
margin: 12px 0;
|
||||
|
||||
&:before, &:after {
|
||||
content: "——";
|
||||
margin: 0 11px;
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.tpLogin {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
cursor: pointer;
|
||||
margin: 8px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
font-size: 28px;
|
||||
border-radius: 50%;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.scan-title {
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
|
||||
&.sassLogin {
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user