74 lines
2.0 KiB
Vue
74 lines
2.0 KiB
Vue
<template>
|
||
<div class="card">
|
||
<div class="pb-4">
|
||
<h3 class="text-xl font-semibold mb-4">校验对象</h3>
|
||
<ul>
|
||
<li class="flex justify-between py-2 border-b">
|
||
<span class="font-medium">手机号码</span>
|
||
<span>{{ maskMobile(params?.mobile) }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 手机在网时长状态展示 -->
|
||
<div class=" bg-blue-100 text-blue-700 p-4 rounded-lg mb-6">
|
||
<h3 class="text-xl font-semibold">手机在网时长</h3>
|
||
<p class="text-lg font-medium">{{ getTimeDuration(data?.code) }}</p>
|
||
<p class="text-sm mt-2">运营商：{{ getPhoneType(data?.phoneType) }}</p>
|
||
</div>
|
||
|
||
<!-- 手机号码展示 -->
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps } from 'vue';
|
||
|
||
// 接收父组件传入的 props
|
||
const props = defineProps({
|
||
data: Object,
|
||
params: Object,
|
||
});
|
||
|
||
// 脱敏函数：手机号码脱敏（保留前三位和后四位）
|
||
const maskMobile = (mobile) => {
|
||
if (!mobile) return '';
|
||
return mobile.replace(/^(\d{3})(?:\d+)(\d{4})$/, "$1****$2");
|
||
};
|
||
|
||
// 根据 code 获取手机在网时长描述
|
||
const getTimeDuration = (code) => {
|
||
switch (code) {
|
||
case 1006:
|
||
return "0 - 3 个月";
|
||
case 1007:
|
||
return "3 - 6 个月";
|
||
case 1008:
|
||
return "6 - 12 个月";
|
||
case 1009:
|
||
return "12 - 24 个月";
|
||
case 1010:
|
||
return "24 个月以上";
|
||
default:
|
||
return "未知时长";
|
||
}
|
||
};
|
||
|
||
// 根据 phoneType 获取运营商名称
|
||
const getPhoneType = (phoneType) => {
|
||
switch (phoneType) {
|
||
case "CMCC":
|
||
return "中国移动";
|
||
case "CUCC":
|
||
return "中国联通";
|
||
case "CTCC":
|
||
return "中国电信";
|
||
default:
|
||
return "未知运营商";
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 自定义样式 */
|
||
</style> |