one-pipe-system/src/views/asset-management/iot-card-query/index.vue

<template>
  <div class="card-search-page">
    <!-- 搜索区域 -->
    <ElCard shadow="never" class="search-card">
      <template #header>
        <div class="card-header">
          <span>单卡查询</span>
        </div>
      </template>

      <div class="search-content">
        <ElForm :model="searchForm" label-width="100px">
          <ElFormItem label="ICCID">
            <ElInput
              v-model="searchForm.iccid"
              placeholder="请输入ICCID"
              clearable
              @keyup.enter="handleSearch"
            >
              <template #append>
                <ElButton type="primary" :loading="loading" @click="handleSearch"> 查询 </ElButton>
              </template>
            </ElInput>
          </ElFormItem>
        </ElForm>
      </div>
    </ElCard>

    <!-- 卡片详情区域 -->
    <ElCard v-if="cardDetail" shadow="never" class="detail-card" style="margin-top: 16px">
      <template #header>
        <div class="card-header">
          <span>卡片详情</span>
        </div>
      </template>

      <ElDescriptions :column="3" border>
        <ElDescriptionsItem label="卡ID">{{ cardDetail.id }}</ElDescriptionsItem>
        <ElDescriptionsItem label="ICCID" :span="2">{{ cardDetail.iccid }}</ElDescriptionsItem>

        <ElDescriptionsItem label="IMSI">{{ cardDetail.imsi || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="卡接入号">{{ cardDetail.msisdn || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="运营商">{{ cardDetail.carrier_name }}</ElDescriptionsItem>

        <ElDescriptionsItem label="运营商类型">{{
          getCarrierTypeText(cardDetail.carrier_type)
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="卡类型">{{ cardDetail.card_type }}</ElDescriptionsItem>
        <ElDescriptionsItem label="卡业务类型">{{
          getCardCategoryText(cardDetail.card_category)
        }}</ElDescriptionsItem>

        <ElDescriptionsItem label="状态">
          <ElTag :type="getStatusTagType(cardDetail.status)">
            {{ getStatusText(cardDetail.status) }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="激活状态">
          <ElTag :type="cardDetail.activation_status === 1 ? 'success' : 'info'">
            {{ cardDetail.activation_status === 1 ? '已激活' : '未激活' }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="网络状态">
          <ElTag :type="cardDetail.network_status === 1 ? 'success' : 'danger'">
            {{ cardDetail.network_status === 1 ? '开机' : '停机' }}
          </ElTag>
        </ElDescriptionsItem>

        <ElDescriptionsItem label="实名状态">
          <ElTag :type="cardDetail.real_name_status === 1 ? 'success' : 'warning'">
            {{ cardDetail.real_name_status === 1 ? '已实名' : '未实名' }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="批次号">{{ cardDetail.batch_no }}</ElDescriptionsItem>
        <ElDescriptionsItem label="供应商">{{ cardDetail.supplier || '--' }}</ElDescriptionsItem>

        <ElDescriptionsItem label="店铺名称">{{ cardDetail.shop_name || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="成本价">{{
          formatPrice(cardDetail.cost_price)
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="分销价">{{
          formatPrice(cardDetail.distribute_price)
        }}</ElDescriptionsItem>

        <ElDescriptionsItem label="累计流量使用"
          >{{ cardDetail.data_usage_mb }} MB</ElDescriptionsItem
        >
        <ElDescriptionsItem label="激活时间">{{
          cardDetail.activated_at || '--'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="创建时间">{{ cardDetail.created_at }}</ElDescriptionsItem>
      </ElDescriptions>
    </ElCard>

    <!-- 空状态 -->
    <ElEmpty v-if="searched && !cardDetail && !loading" description="未找到相关卡片信息" />
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import { CardService } from '@/api/modules/card'

  defineOptions({ name: 'CardSearch' })

  const loading = ref(false)
  const searched = ref(false)
  const searchForm = reactive({
    iccid: ''
  })
  const cardDetail = ref<any>(null)

  // 查询卡片详情
  const handleSearch = async () => {
    if (!searchForm.iccid.trim()) {
      ElMessage.warning('请输入ICCID')
      return
    }

    loading.value = true
    searched.value = true
    cardDetail.value = null

    try {
      const res = await CardService.getIotCardDetailByIccid(searchForm.iccid.trim())
      if (res.code === 0 && res.data) {
        cardDetail.value = res.data
        ElMessage.success('查询成功')
      } else {
        ElMessage.error(res.message || '查询失败')
      }
    } catch (error: any) {
      console.error('查询卡片详情失败:', error)
      ElMessage.error(error?.message || '查询失败，请检查ICCID是否正确')
    } finally {
      loading.value = false
    }
  }

  // 获取运营商类型文本
  const getCarrierTypeText = (type: string) => {
    const typeMap: Record<string, string> = {
      CMCC: '中国移动',
      CUCC: '中国联通',
      CTCC: '中国电信',
      CBN: '中国广电'
    }
    return typeMap[type] || type
  }

  // 获取卡业务类型文本
  const getCardCategoryText = (category: string) => {
    const categoryMap: Record<string, string> = {
      normal: '普通卡',
      industry: '行业卡'
    }
    return categoryMap[category] || category
  }

  // 获取状态文本
  const getStatusText = (status: number) => {
    const statusMap: Record<number, string> = {
      1: '在库',
      2: '已分销',
      3: '已激活',
      4: '已停用'
    }
    return statusMap[status] || '未知'
  }

  // 获取状态标签类型
  const getStatusTagType = (status: number) => {
    const typeMap: Record<number, any> = {
      1: 'info',
      2: 'warning',
      3: 'success',
      4: 'danger'
    }
    return typeMap[status] || 'info'
  }

  // 格式化价格（分转元）
  const formatPrice = (price: number) => {
    return `¥${(price / 100).toFixed(2)}`
  }
</script>

<style lang="scss" scoped>
  .card-search-page {
    padding: 16px;

    .card-header {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }

    .search-content {
      max-width: 800px;
    }

    .detail-card {
      animation: fadeIn 0.3s ease-in;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>