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>
|