91 lines
3.2 KiB
Vue
91 lines
3.2 KiB
Vue
<template>
|
||
<div class="flex items-center justify-center card">
|
||
<div class="max-w-md w-full p-4">
|
||
<!-- 请求参数 -->
|
||
<h3 class="text-lg font-semibold text-gray-700 mb-2">核验对象</h3>
|
||
<div class="text-sm text-gray-600 space-y-2 mb-6">
|
||
<p>
|
||
<span class="font-medium text-gray-800">姓名：</span>
|
||
{{ maskedParams.name }}
|
||
</p>
|
||
<p>
|
||
<span class="font-medium text-gray-800">手机号：</span>
|
||
{{ maskedParams.mobile }}
|
||
</p>
|
||
</div>
|
||
<!-- 核验结果 -->
|
||
<h3 class="text-xl font-semibold text-gray-700 mb-4">手机二要素验证结果</h3>
|
||
<div v-if="data.code === '1000'" class="flex items-center space-x-4 mb-6">
|
||
<div class="h-12 w-12 rounded-full flex flex-shrink-0 items-center justify-center bg-green-500">
|
||
<span class="text-white text-lg font-bold">✔</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-lg font-medium text-gray-800">一致</p>
|
||
<p class="text-sm text-gray-500">姓名和手机号匹配成功。</p>
|
||
</div>
|
||
</div>
|
||
<div v-else class="flex items-center space-x-4 mb-6">
|
||
<div class="h-12 w-12 rounded-full flex items-center flex-shrink-0 justify-center bg-red-500">
|
||
<span class="text-white text-lg font-bold">✘</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-lg font-medium text-gray-800">不一致</p>
|
||
<p class="text-sm text-gray-500">手机二要素验证失败，请检查输入信息。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核验详情 -->
|
||
<h3 class="text-lg font-semibold text-gray-700 mb-2">附加信息</h3>
|
||
<div class="text-sm text-gray-600 space-y-2">
|
||
<p>
|
||
<span class="font-medium text-gray-800">运营商类型：</span>
|
||
{{ getPhoneType(data.data.phoneType) }}
|
||
</p>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
params: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
// 手机号类型映射
|
||
const getPhoneType = (type) => {
|
||
const phoneTypeMapping = {
|
||
CMCC: "中国移动",
|
||
CUCC: "中国联通",
|
||
CTCC: "中国电信",
|
||
};
|
||
return phoneTypeMapping[type] || "未知类型";
|
||
};
|
||
|
||
// 对请求参数进行脱敏处理
|
||
const maskValue = (value, type) => {
|
||
if (type === "name") {
|
||
// 姓名脱敏（保留首位）
|
||
return value.length > 1 ? value[0] + "*".repeat(value.length - 1) : "*";
|
||
} else if (type === "mobile") {
|
||
// 手机号脱敏（保留前三位和后四位）
|
||
return value.replace(/^(\d{3})(?:\d+)(\d{4})$/, "$1****$2");
|
||
}
|
||
return value;
|
||
};
|
||
|
||
const maskedParams = {
|
||
name: maskValue(props.params.name, "name"),
|
||
mobile: maskValue(props.params.mobile, "mobile"),
|
||
};
|
||
</script>
|
||
|
||
<style scoped></style> |