<template>
|
<div class="params-container">
|
<el-steps :active="active" finish-status="success" simple>
|
<el-step title="插入ukey">123</el-step>
|
<el-step title="ukey验证"></el-step>
|
<el-step title="用户验证"></el-step>
|
<el-step title="绑定状态"></el-step>
|
</el-steps>
|
<div class="el-step" v-if="active == 1">
|
<div class="el-step-text-content">
|
未插入ukey，请插入ukey
|
</div>
|
</div>
|
<bind-step2 :id="id" @next="next" v-if="active == 2"></bind-step2>
|
<bind-step3 :id="id" @next="next" v-if="active == 3"></bind-step3>
|
<div class="params-dialog" v-if="active == 4">
|
<div class="el-step-text-content">
|
已完成绑定
|
</div>
|
<div class="form-footer">
|
<three-btn @click="close">关闭</three-btn>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import BindStep2 from "@/components/UKeyBind/BindStep2";
|
import BindStep3 from "@/components/UKeyBind/BindStep3";
|
export default {
|
name: "UkeyBind",
|
components: { BindStep3, BindStep2 },
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
watch: {
|
"$store.state.ukey.id"(id) {
|
this.id = id;
|
if (id) {
|
this.active = 2;
|
} else {
|
this.active = 1;
|
}
|
},
|
},
|
data() {
|
let active = this.$store.state.ukey.isIn ? 2 : 1;
|
return {
|
active: active,
|
id: "",
|
};
|
},
|
methods: {
|
next() {
|
this.active++;
|
},
|
close() {
|
this.$emit("update:visible", false);
|
},
|
},
|
mounted() {
|
this.id = this.$store.state.ukey.id;
|
},
|
};
|
</script>
|
|
<style scoped>
|
.params-container {
|
padding: 8px 8px 0 8px;
|
background-color: #ececec;
|
}
|
.el-step-text-content {
|
padding: 8px;
|
text-align: center;
|
font-size: 16px;
|
}
|
</style>
|
