From 63fe81b3da77cfab6a24b85677805871d2d8bed3 Mon Sep 17 00:00:00 2001 From: sexygoat <1538832180@qq.com> Date: Sat, 25 Apr 2026 15:19:44 +0800 Subject: [PATCH] fix: ui --- .../agent-system/enterprise-cards/index.vue | 501 ++++++++---------- 1 file changed, 223 insertions(+), 278 deletions(-) diff --git a/src/pages/agent-system/enterprise-cards/index.vue b/src/pages/agent-system/enterprise-cards/index.vue index 1ffccda..a654b76 100644 --- a/src/pages/agent-system/enterprise-cards/index.vue +++ b/src/pages/agent-system/enterprise-cards/index.vue @@ -7,99 +7,77 @@ import { getCarriers } from '@/api/carrier' import type { CarrierInfo } from '@/api/carrier' import SimplePicker from '@/components/SimplePicker.vue' -// 企业ID (用于调用企业接口) const enterpriseId = ref(0) - -// 卡片列表 const cardList = ref([]) - -// 加载状态 const loading = ref(false) -const loadingMore = ref(false) - -// 搜索关键词 const searchKeyword = ref('') - -// 状态筛选 (undefined 表示全部) const statusFilter = ref(undefined) - -// 运营商筛选 const carrierFilter = ref(undefined) const showCarrierPicker = ref(false) - -// 运营商列表 +const showSearchTypePicker = ref(false) const carrierList = ref([]) +const page = ref(1) +const pageSize = 20 +const hasMore = ref(true) + +const searchType = ref<'iccid' | 'virtual'>('iccid') -// 网络状态选项 (network_status: 0=停机, 1=正常) const statusOptions = [ { label: '全部', value: undefined }, { label: '正常', value: 1 }, { label: '停机', value: 0 }, ] -// 运营商选项 +const searchTypeOptions = [ + { label: 'ICCID', value: 'iccid' }, + { label: '虚拟号', value: 'virtual' } +] + const carrierOptions = computed(() => [ { label: '全部运营商', value: undefined }, ...carrierList.value.map(c => ({ label: c.carrier_name, value: c.id })) ]) -// 获取当前选中的运营商名称 const selectedCarrierName = computed(() => { if (carrierFilter.value === undefined) return '运营商' const option = carrierOptions.value.find(o => o.value === carrierFilter.value) return option?.label || '运营商' }) -// 分页参数 -const page = ref(1) -const pageSize = 20 -const hasMore = ref(true) - -// 直接显示卡片列表 (搜索由后端处理) -const filteredCards = computed(() => { - return cardList.value -}) - -// 统计数据 const stats = computed(() => { const total = cardList.value.length - // network_status: 0=停机, 1=正常 const active = cardList.value.filter(c => c.network_status === 1).length const inactive = cardList.value.filter(c => c.network_status === 0).length - // status: 1=可用, 2=已分销, 3=已停用等 const distributed = cardList.value.filter(c => c.status === 2).length - return { total, active, inactive, distributed } }) -// 加载运营商列表 async function loadCarriers() { try { - const response = await getCarriers({ page: 1, size: 20 }) + const response = await getCarriers({ page: 1, size: 50 }) carrierList.value = response?.items || [] } catch (error) { console.error('加载运营商列表失败:', error) } } -// 页面加载 -onMounted(() => { - loadCarriers() - loadEnterpriseCards() -}) +async function loadEnterpriseCards(isRefresh = false) { + if (loading.value) return + + if (isRefresh) { + page.value = 1 + hasMore.value = true + cardList.value = [] + } -// 加载企业卡列表 -async function loadEnterpriseCards() { loading.value = true try { - // 1. 获取企业ID (优先从本地存储获取) if (!enterpriseId.value) { const userInfo = uni.getStorageSync('user_info') if (userInfo?.enterprise_id) { enterpriseId.value = userInfo.enterprise_id } else { - // 如果本地存储没有,则调用接口获取 const apiUserInfo = await getUserInfo() if (!apiUserInfo.enterprise_id) { throw new Error('未找到企业ID') @@ -108,286 +86,276 @@ async function loadEnterpriseCards() { } } - // 2. 获取企业卡片列表 const params: any = { page: page.value, page_size: pageSize, } - // 只有选择了具体状态才传 status 参数 + if (statusFilter.value !== undefined) { params.status = statusFilter.value } - // 运营商筛选 if (carrierFilter.value !== undefined) { params.carrier_id = carrierFilter.value } - // 添加搜索关键词支持 (根据接口文档) if (searchKeyword.value) { - // 如果关键词看起来像ICCID (纯数字) - if (/^\d+$/.test(searchKeyword.value)) { + if (searchType.value === 'iccid') { params.iccid = searchKeyword.value } else { params.virtual_no = searchKeyword.value } } + const cardsData = await getEnterpriseCards(enterpriseId.value, params) + const items = cardsData?.items || [] if (page.value === 1) { - cardList.value = cardsData?.items || [] - } - else { - cardList.value.push(...(cardsData?.items || [])) + cardList.value = items + } else { + cardList.value.push(...items) } - // 判断是否还有更多数据 - const items = cardsData?.items || [] hasMore.value = items.length >= pageSize - } - catch (error: any) { + page.value++ + } catch (error: any) { console.error('加载企业卡列表失败:', error) - // 如果是前端逻辑错误（非 API 错误），需要手动显示提示 if (error instanceof Error && error.message && !error.statusCode) { uni.$u.toast(error.message) } - // API 请求错误已由拦截器统一处理 - } - finally { + } finally { loading.value = false } } -// 查看卡片详情 function viewCardDetail(card: any) { - // 跳转到资产详情页 uni.navigateTo({ url: `/pages/agent-system/asset-search/index?iccid=${card.iccid}`, }) } -// 获取网络状态文本 (使用后端返回的 network_status_name) function getNetworkStatusText(networkStatus: number, networkStatusName?: string) { - // 优先使用后端返回的状态名称 - if (networkStatusName) { - return networkStatusName - } - // 降级处理 - const map: Record = { - 0: '停机', - 1: '正常', - } - return map[networkStatus] ?? '未知' + if (networkStatusName) return networkStatusName + return networkStatus === 1 ? '正常' : networkStatus === 0 ? '停机' : '未知' } -// 获取网络状态颜色 function getNetworkStatusColor(networkStatus: number) { - const map: Record = { - 1: { bg: '#e8f5e9', text: '#2e7d32' }, // 正常 - 0: { bg: '#ffebee', text: '#c62828' }, // 停机 - } - return map[networkStatus] ?? { bg: '#f5f5f5', text: '#999' } + return networkStatus === 1 + ? { bg: '#e8f5e9', text: '#2e7d32' } + : networkStatus === 0 + ? { bg: '#ffebee', text: '#c62828' } + : { bg: '#f5f5f5', text: '#999' } } -// 获取卡状态文本 (使用后端返回的 status_name) function getCardStatusText(status: number, statusName?: string) { - // 优先使用后端返回的状态名称 - if (statusName) { - return statusName - } - // 降级处理 - const map: Record = { - 1: '可用', - 2: '已分销', - 3: '已停用', - } + if (statusName) return statusName + const map: Record = { 1: '可用', 2: '已分销', 3: '已停用' } return map[status] ?? '未知' } -// 清空搜索 -function clearSearch() { - searchKeyword.value = '' - page.value = 1 - hasMore.value = true - cardList.value = [] - loadEnterpriseCards() -} - -// 执行搜索 function handleSearch() { - page.value = 1 - hasMore.value = true - cardList.value = [] - loadEnterpriseCards() + loadEnterpriseCards(true) } -// 刷新列表 -function refreshList() { - page.value = 1 - hasMore.value = true - cardList.value = [] - loadEnterpriseCards() -} - -// 状态筛选变化 -function handleStatusChange(status: number | undefined) { - statusFilter.value = status - page.value = 1 - hasMore.value = true - cardList.value = [] - loadEnterpriseCards() -} - -// 运营商筛选变化 (SimplePicker确认时触发) function onCarrierConfirm(option: { label: string, value: any }) { carrierFilter.value = option.value - page.value = 1 - hasMore.value = true - cardList.value = [] - loadEnterpriseCards() + loadEnterpriseCards(true) } + +function onSearchTypeConfirm(option: { label: string, value: any }) { + searchType.value = option.value +} + +function handleStatusChange(status: number | undefined) { + statusFilter.value = status + loadEnterpriseCards(true) +} + +function loadMore() { + if (hasMore.value && !loading.value) { + loadEnterpriseCards() + } +} + +function onScroll(e: any) { + const { scrollTop, scrollHeight, clientHeight } = e.target + if (scrollHeight - scrollTop - clientHeight < 100) { + loadMore() + } +} + +onMounted(async () => { + loadCarriers() + loadEnterpriseCards() +})