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