<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">
|
<el-button type="primary" @click="close">关闭</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup name="UkeyBind">
|
import BindStep2 from "./BindStep2";
|
import BindStep3 from "./BindStep3";
|
import {ref, watch} from "vue";
|
import { useUKeyStore } from '@/store/ukey';
|
import { storeToRefs } from 'pinia';
|
const ukeyStore = useUKeyStore();
|
const { id, isIn } = storeToRefs(ukeyStore);
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false
|
}
|
});
|
|
const active = ref(isIn.value ? 2 : 1);
|
const emit = defineEmits(["update:visible"]);
|
|
watch(
|
() => id.value,
|
() => {
|
if (id.value) {
|
active.value = 2;
|
} else {
|
active.value = 1;
|
}
|
},
|
{ immediate: true }
|
);
|
|
function next() {
|
active.value++;
|
}
|
|
function close() {
|
emit("update:visible", false);
|
}
|
|
</script>
|
|
<style scoped>
|
.params-container {
|
padding: 8px 8px 0 8px;
|
background-color: #ececec;
|
}
|
.form-footer {
|
text-align: right;
|
}
|
.el-step-text-content {
|
padding: 8px;
|
text-align: center;
|
font-size: 16px;
|
}
|
</style>
|
