ui库和web端产品库合并版本(还需修复细节)
This commit is contained in:
333
ui/packages/common/AiSign/signIn.vue
Normal file
333
ui/packages/common/AiSign/signIn.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<el-form ref="loginForm" :model="sign" class="signIn">
|
||||
<el-form-item class="ai-sign__header">
|
||||
<el-tabs v-model="currentWay" v-if="!isScan">
|
||||
<el-tab-pane label="账号登录"></el-tab-pane>
|
||||
<el-tab-pane label="短信登录" v-if="showPhoneLogin"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<h2 class="scan-title" v-if="isScan">手机扫码，安全登录</h2>
|
||||
<div class="ai-scan" @click="changeLoginType" v-if="showScanLogin">
|
||||
<div class="poptip-arrow">
|
||||
<span>{{ tipContent }}</span>
|
||||
<a/>
|
||||
<em/>
|
||||
</div>
|
||||
<i class="iconfont" :class="[isScan ? 'iconAccount_Login' : 'iconQR_code']"></i>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div class="qrcode" id="qrcode" v-show="isScan"/>
|
||||
<template v-if="!isScan">
|
||||
<el-form-item v-if="isAccountSignIn" prop="username"
|
||||
:rules="[{required: true, message: '请输入您的手机号', trigger: 'change'}]">
|
||||
<el-input v-model="sign.username" placeholder="请输入您的手机号" clearable
|
||||
@keyup.enter.native="$refs.validInput.focus()">
|
||||
<i slot="prefix" class="iconfont iconProlife"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-else prop="mobile" :rules="[{required: true, message: '请输入您的手机号', trigger: 'change'}]">
|
||||
<el-input v-model="sign.mobile" placeholder="请输入您的手机号" clearable
|
||||
@keyup.enter.native="$refs.validInput.focus()">
|
||||
<i slot="prefix" class="iconfont iconPhone"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isAccountSignIn" prop="password"
|
||||
:rules="[{required: true, message: '请输入您的密码', trigger: 'change'}]">
|
||||
<el-input ref="validInput" type="password" placeholder="请输入您的密码" show-password
|
||||
v-model="sign.password" @keyup.enter.native="handleClick" clearable>
|
||||
<i slot="prefix" class="iconfont iconPassword"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-else prop="code" :rules="[{required: true, message: '请输入短信验证码', trigger: 'change'}]">
|
||||
<el-input ref="validInput" placeholder="请输入短信验证码" v-model="sign.code" clearable
|
||||
@keyup.enter.native="handleClick">
|
||||
<i slot="prefix" class="iconfont iconMessage"></i>
|
||||
<el-button slot="suffix" style="padding-right: 14px" type="text" :disabled="verCodeTimer>0"
|
||||
@click="sendMessage">
|
||||
{{ verCodeTimer ? verCodeTimer + "秒" : "获取验证码" }}
|
||||
</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="login-btn" @click="handleClick">登录</el-button>
|
||||
<div class="reset-password-row">
|
||||
<el-button type="text" class="reset-password" @click="$emit('resetPwd')">忘记密码?</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueQr from 'vue-qr'
|
||||
import identify from './identify'
|
||||
|
||||
export default {
|
||||
name: "signIn",
|
||||
inject: ["actions"],
|
||||
props: {
|
||||
instance: Function,
|
||||
showPhoneLogin: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showScanLogin: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentWay: 0,
|
||||
verCodeTimer: 0,
|
||||
sign: {
|
||||
username: "",
|
||||
password: "",
|
||||
mobile: "",
|
||||
code: "",
|
||||
randomStr: ""
|
||||
},
|
||||
code: {
|
||||
src: "/code",
|
||||
value: "",
|
||||
len: 4,
|
||||
type: "image"
|
||||
},
|
||||
isScan: true,
|
||||
validFocus: false,
|
||||
QRkey: '',
|
||||
timer: null,
|
||||
isInvalid: false,
|
||||
isLoginSuccess: false,
|
||||
identifyCodes: '1234567890',
|
||||
identifyCode: '',
|
||||
errorNum: 0,
|
||||
appid: '',
|
||||
agentid: ''
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
VueQr,
|
||||
identify
|
||||
},
|
||||
|
||||
computed: {
|
||||
isAccountSignIn() {
|
||||
return this.currentWay == 0
|
||||
},
|
||||
|
||||
tipContent() {
|
||||
return this.isScan ? '返回账号登录' : '扫码登录更安全'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentWay() {
|
||||
this.sign = {
|
||||
username: "",
|
||||
password: "",
|
||||
mobile: "",
|
||||
code: "",
|
||||
randomStr: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
localStorage.removeItem('ui-token')
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('vuex')
|
||||
if (this.showScanLogin) {
|
||||
this.getLoginInfo()
|
||||
this.isScan = true
|
||||
} else {
|
||||
this.isScan = false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeLoginType() {
|
||||
if (!this.isScan) {
|
||||
this.isScan = true
|
||||
this.getQRkey()
|
||||
} else {
|
||||
this.isScan = false
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
},
|
||||
|
||||
getLoginInfo() {
|
||||
this.instance.post(`/app/wxcp/portal/getCpParams`).then(res => {
|
||||
if (res && res.data) {
|
||||
this.agentid = res.data.agentid
|
||||
this.appid = res.data.corpid
|
||||
this.getQRkey()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getErrorNum(phone) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.instance.post(this.actions.failTimes, null, {
|
||||
params: {phone}
|
||||
}).then(res => {
|
||||
resolve(Number(res.data.status) || 0)
|
||||
}).catch(() => {
|
||||
reject('error')
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
handleInput() {
|
||||
},
|
||||
handleClick() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.currentWay == 0) {
|
||||
this.$emit("signIn", this.sign, this.actions.login)
|
||||
} else {
|
||||
this.$emit("signIn", this.sign, this.actions.mobile)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
sendMessage() {
|
||||
if (this.currentWay == 1) {
|
||||
if (this.sign.mobile) {
|
||||
this.$emit("sendMessage", this.sign.mobile)
|
||||
this.verCodeTimer = 60
|
||||
const timer = setInterval(() => {
|
||||
this.verCodeTimer--
|
||||
if (this.verCodeTimer == 0) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, 1000)
|
||||
} else {
|
||||
this.$message.error("请输入手机号!")
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getQRkey() {
|
||||
this.$injectLib('https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js', () => {
|
||||
window.WwLogin({
|
||||
id: 'qrcode',
|
||||
appid: this.appid,
|
||||
agentid: this.agentid,
|
||||
redirect_uri: `${location.origin}/login`,
|
||||
state: '',
|
||||
href: 'https://cdn.cunwuyun.cn/dvcp/wechat-login.css',
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.signIn {
|
||||
.imgcode {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-input {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.imgcode-img {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.scan-success {
|
||||
padding-top: 64px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
font-size: 64px;
|
||||
color: #2EA222;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 16px 0;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
}
|
||||
|
||||
.qrlogin-bottom {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primaryColor;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-sign__header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
::v-deep.el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep.el-tabs__header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep.el-tabs__item {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
::v-deep.el-form-item {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.el-tabs__item {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
margin: 16px auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.reset-password-row {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
height: 296px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user