first commit

src/ui/YYSY7D3E/index.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="mobile-portability card">
+        <div class="verification-section mb-4">
+            <div class="bg-white rounded-xl border border-gray-200 p-4 relative">
+                <div class="flex items-center mb-3">
+                    <div class="w-8 h-8 flex items-center justify-center mr-3">
+                        <img src="@/assets/images/report/sjh.png" alt="手机携号转网" class="w-8 h-8 object-contain" />
+                    </div>
+                    <span class="font-bold text-gray-800">手机携号转网</span>
+                </div>
+                <!-- 查询结果列表 -->
+                <div class="verification-details">
+                    <div v-if="queryResults.length > 0" class="space-y-3">
+                        <div v-for="(item, index) in queryResults" :key="index" 
+                            class="rounded-xl p-4 border border-gray-200 bg-white">
+                            <div class="space-y-3">
+                                <!-- 手机号 -->
+                                <div class="flex justify-between items-center">
+                                    <span class="text-sm text-gray-600">手机号</span>
+                                    <span class="text-sm font-bold text-gray-800">{{ item.mobile }}</span>
+                                </div>
+
+                                <!-- 是否转网 -->
+                                <div class="flex justify-between items-center">
+                                    <span class="text-sm text-gray-600">是否转网</span>
+                                    <div class="flex items-center">
+                                        <span class="px-2 py-1 text-xs text-white rounded-md mr-2"
+                                            :class="getPortabilityTagClass(item.result)">
+                                            {{ getPortabilityText(item.result) }}
+                                        </span>
+                                    </div>
+                                </div>
+
+                                <!-- 原始运营商 -->
+                                <div class="flex justify-between items-center">
+                                    <span class="text-sm text-gray-600">原始运营商</span>
+                                    <span class="text-sm font-medium text-gray-800">{{ getOperatorText(item.before) }}</span>
+                                </div>
+
+                                <!-- 转网后运营商 -->
+                                <div v-if="item.result === '1'" class="flex justify-between items-center">
+                                    <span class="text-sm text-gray-600">转网后运营商</span>
+                                    <span class="text-sm font-medium text-gray-800">{{ getOperatorText(item.after) }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="p-8 text-center text-gray-500">
+                        <div class="flex flex-col items-center justify-center">
+                            <van-empty description="暂无查询结果" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRiskNotifier } from '@/composables/useRiskNotifier'
+
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+        default: () => ({})
+    },
+    apiId: {
+        type: String,
+        default: '',
+    },
+    index: {
+        type: Number,
+        default: 0,
+    },
+    notifyRiskStatus: {
+        type: Function,
+        default: () => { },
+    },
+})
+
+// 获取数据
+const reportData = computed(() => {
+    return props.data?.data?.data || props.data?.data || props.data || {}
+})
+
+// 批次号
+const batchNo = computed(() => {
+    return reportData.value.batchNo || ''
+})
+
+// 查询结果列表
+const queryResults = computed(() => {
+    return reportData.value.queryResult || []
+})
+
+// 是否转网文本
+const getPortabilityText = (result) => {
+    if (result === '1') return '是'
+    if (result === '0') return '否'
+    return '未知'
+}
+
+// 是否转网标签颜色
+const getPortabilityTagClass = (result) => {
+    if (result === '1') return 'bg-[#B71C1C]' // 转网 - 深红色
+    if (result === '0') return 'bg-[#4CAF50]' // 未转网 - 绿色
+    return 'bg-gray-500' // 未知 - 灰色
+}
+
+// 运营商类型文本
+const getOperatorText = (operator) => {
+    const operatorMap = {
+        '-1': '未知',
+        '1': '中国移动',
+        '2': '中国联通',
+        '3': '中国电信',
+        '4': '中国广电'
+    }
+    return operatorMap[String(operator)] || '未知'
+}
+
+// 计算风险评分（转网次数越多，风险越高）
+const riskScore = computed(() => {
+    const portabilityCount = queryResults.value.filter(item => item.result === '1').length
+    const totalCount = queryResults.value.length
+
+    if (totalCount === 0) {
+        return 100 // 无数据，默认安全
+    }
+
+    if (portabilityCount === 0) {
+        return 100 // 未转网，最安全
+    }
+
+    // 转网次数越多，分数越低
+    const portabilityRatio = portabilityCount / totalCount
+    return Math.max(10, Math.round(100 * (1 - portabilityRatio * 0.6)))
+})
+
+// 使用 composable 通知父组件风险评分
+useRiskNotifier(props, riskScore)
+
+// 暴露给父组件
+defineExpose({
+    riskScore
+})
+</script>
+
+<style lang="scss" scoped>
+.mobile-portability {
+    @apply space-y-4;
+}
+
+.verification-section {
+    .verification-details {
+        @apply mt-3;
+    }
+}
+</style>
+