<template>
|
<div>
|
<Modal title="身份验证" v-model="passCheckVisible" fullscreen footer-hide>
|
<div class="pass-check" @keydown.enter="checkPass">
|
<Icon type="md-lock" size="30" style="margin-bottom:10px;"/>
|
<div class="title" style="margin-bottom:40px;">密码认证</div>
|
<div class="desc">请输入您的密码</div>
|
<Input
|
autofocus
|
v-model="password"
|
password
|
size="large"
|
placeholder="请输入您的密码"
|
type="password"
|
style="width:300px;margin-bottom:40px;"
|
/>
|
<div style="margin-bottom:60px;">
|
<Button size="large" @click="passCheckVisible=false" style="margin-right:20px;">取消</Button>
|
<Button
|
:loading="loading"
|
:disabled="!password"
|
@click="checkPass"
|
type="primary"
|
size="large"
|
>提交</Button>
|
</div>
|
</div>
|
</Modal>
|
</div>
|
</template>
|
|
<script>
|
import { unlock } from "@/api/index";
|
export default {
|
name: "circleLoading",
|
data() {
|
return {
|
loading: false,
|
passCheckVisible: false, // 密码验证
|
password: ""
|
};
|
},
|
methods: {
|
checkPass() {
|
this.loading = true;
|
unlock({ password: this.password }).then(res => {
|
this.loading = false;
|
if (res.success) {
|
this.passCheckVisible = false;
|
this.$emit("on-success", true);
|
}
|
});
|
},
|
show(){
|
this.password = "";
|
this.passCheckVisible = true;
|
}
|
}
|
};
|
</script>
|
|
<style lang="less">
|
.pass-check {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
.title {
|
font-weight: 600;
|
font-size: 16px;
|
color: #2f3033;
|
}
|
.desc {
|
font-size: 14px;
|
line-height: 28px;
|
margin: 15px 0;
|
}
|
}
|
</style>
|
