<template>
|
<div class="auth-checker">
|
<!-- 授权码过期提示窗口 -->
|
<div v-if="showAuthModal" class="auth-modal">
|
<div class="auth-modal-content">
|
<h3 style="padding-bottom: 20px; text-align: center">注册授权码</h3>
|
<!-- 使用 Element Plus 时间线展示授权信息 -->
|
<el-timeline class="auth-timeline">
|
<el-timeline-item placement="top" type="primary" size="large" :timestamp="'当前机器码'">
|
<el-card shadow="hover">
|
<p class="auth-info-text">{{ machineCode }}</p>
|
</el-card>
|
</el-timeline-item>
|
<el-timeline-item placement="top" type="primary" size="large" :timestamp="'当前授权码'">
|
<el-card shadow="hover">
|
<p class="auth-info-text">{{ currentAuthCode }}</p>
|
</el-card>
|
</el-timeline-item>
|
|
<el-timeline-item placement="top" :type="isAuthExpired ? 'danger' : 'success'" size="large" :timestamp="'截止日期'">
|
<el-card shadow="hover">
|
<p class="auth-info-text">{{ expiryDate }}</p>
|
<p v-if="isAuthExpired" class="auth-expired-text">
|
<el-icon><warning /></el-icon> 已过期
|
</p>
|
<p v-else class="auth-valid-text">
|
<el-icon><success-filled /></el-icon> 有效
|
</p>
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
|
<div class="auth-form">
|
<el-form :model="authForm" label-width="120px">
|
<el-form-item label="输入新授权码:">
|
<el-input v-model="newAuthCode" placeholder="请输入新的授权码" clearable />
|
</el-form-item>
|
</el-form>
|
|
<el-form-item style="float: right">
|
<el-button type="primary" @click="submitNewAuthCode" :loading="submitting"> 授权 </el-button>
|
</el-form-item>
|
</div>
|
|
<el-alert v-if="authError" :title="authError" type="error" show-icon closable />
|
|
<el-alert
|
v-if="isAuthExpired"
|
title="该授权码已经过期。请联系管理员获取最新授权码。"
|
type="warning"
|
show-icon
|
:closable="false"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent, ref, onMounted } from "vue";
|
import { Warning, SuccessFilled } from "@element-plus/icons-vue";
|
import { FindMac } from "@/api/modules/login";
|
|
export default defineComponent({
|
name: "AuthChecker",
|
components: {
|
Warning,
|
SuccessFilled
|
},
|
setup() {
|
// 状态管理
|
const showAuthModal = ref(false);
|
const machineCode = ref("");
|
const currentAuthCode = ref("");
|
const newAuthCode = ref("");
|
const authError = ref("");
|
const isAuthExpired = ref(false);
|
const expiryDate = ref("");
|
const submitting = ref(false);
|
|
// 解析授权码中的日期信息
|
// 解析授权码中的日期信息
|
const parseAuthCode = (authCode: string) => {
|
if (!authCode) return { expiryDate: "未设置", days: 0 };
|
|
try {
|
// 假设 authCode.passmac 是 Base64 编码的过期时间戳（或日期字符串）
|
const decodedString = atob(authCode.passmac); // Base64 解码
|
const expiryTimestamp = parseInt(decodedString, 10);
|
|
// 检查是否是有效的时间戳
|
if (isNaN(expiryTimestamp)) {
|
return { expiryDate: "无效授权码", days: 0 };
|
}
|
|
const expiryDate = new Date(expiryTimestamp);
|
const now = new Date();
|
const diffTime = expiryDate.getTime() - now.getTime();
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); // 计算剩余天数
|
|
return {
|
expiryDate: expiryDate.toLocaleDateString(),
|
days: diffDays > 0 ? diffDays : 0 // 如果已过期则返回0
|
};
|
} catch (error) {
|
console.error("解析授权码失败:", error);
|
return { expiryDate: "解析失败", days: 0 };
|
}
|
};
|
const authCode = {
|
mac: "some-mac-value",
|
passmac: "MTYzMDQwMDAwMDAw" // 假设这是 Base64 编码的时间戳（例如 1630400000000）
|
};
|
|
const result = parseAuthCode(authCode);
|
console.log(result.expiryDate); // 输出格式化日期（如 "2021/8/31"）
|
console.log(result.days); // 输出剩余天数
|
// 检查授权码是否过期
|
const checkAuthExpired = (authCode: string): boolean => {
|
const { days, isValid } = parseAuthCode(authCode);
|
if (!isValid) return true;
|
|
return days <= 0;
|
};
|
|
// 获取机器码
|
const getMachineCode = async () => {
|
try {
|
const data = await FindMac();
|
return data;
|
} catch (error) {
|
console.error("获取机器码失败:", error);
|
throw error;
|
}
|
};
|
|
// 加载授权信息
|
const loadAuthInfo = () => {
|
getMachineCode()
|
.then(mac => {
|
currentAuthCode.value = mac.passmac;
|
machineCode.value = mac.mac;
|
|
const authInfo = parseAuthCode(mac);
|
expiryDate.value = authInfo.expiryDate;
|
isAuthExpired.value = checkAuthExpired(currentAuthCode.value);
|
|
if (!authInfo.isValid || isAuthExpired.value) {
|
showAuthModal.value = true;
|
}
|
})
|
.catch(error => {
|
console.error("获取机器码失败:", error);
|
showAuthModal.value = true;
|
});
|
};
|
|
// 提交新授权码
|
const submitNewAuthCode = async () => {
|
submitting.value = true;
|
authError.value = "";
|
|
try {
|
if (!newAuthCode.value) {
|
throw new Error("请输入有效的授权码");
|
}
|
|
const authInfo = parseAuthCode(newAuthCode.value);
|
if (!authInfo.isValid) {
|
throw new Error("授权码无效");
|
}
|
|
isAuthExpired.value = checkAuthExpired(newAuthCode.value);
|
if (isAuthExpired.value) {
|
throw new Error("授权码已过期");
|
}
|
|
// 模拟API请求延迟
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
// 更新授权信息
|
currentAuthCode.value = newAuthCode.value;
|
expiryDate.value = authInfo.expiryDate;
|
localStorage.setItem("authCode", newAuthCode.value);
|
|
// 关闭模态窗口
|
showAuthModal.value = false;
|
} catch (error) {
|
authError.value = error.message;
|
} finally {
|
submitting.value = false;
|
}
|
};
|
|
onMounted(() => {
|
loadAuthInfo();
|
});
|
|
return {
|
showAuthModal,
|
machineCode,
|
currentAuthCode,
|
newAuthCode,
|
authError,
|
isAuthExpired,
|
expiryDate,
|
submitting,
|
submitNewAuthCode
|
};
|
}
|
});
|
</script>
|
|
<style scoped>
|
.auth-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 1000;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
height: 100%;
|
background-color: rgb(0 0 0 / 50%);
|
}
|
.auth-modal-content {
|
width: 90%;
|
max-width: 600px;
|
padding: 2rem;
|
background-color: white;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
}
|
.auth-timeline {
|
margin: 1.5rem 0;
|
}
|
.auth-info-text {
|
margin: 0;
|
font-family: monospace;
|
word-break: break-all;
|
}
|
.auth-expired-text {
|
display: flex;
|
gap: 5px;
|
align-items: center;
|
margin: 0.5rem 0 0;
|
color: #f56c6c;
|
}
|
.auth-valid-text {
|
display: flex;
|
gap: 5px;
|
align-items: center;
|
margin: 0.5rem 0 0;
|
color: #67c23a;
|
}
|
.auth-form {
|
margin: 1.5rem 0;
|
}
|
.el-alert {
|
margin: 1rem 0;
|
}
|
</style>
|
