fix: 优化界面以及更新接口
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 1m27s

This commit is contained in:
sexygoat
2026-04-15 11:54:43 +08:00
parent 0d0b5ec14a
commit 91d7d4c21f
30 changed files with 1863 additions and 1742 deletions

View File

@@ -17,7 +17,7 @@
// 套餐列表
const packageList = ref<AssetPackage[]>([])
// 是否展开套餐列表
const showPackageList = ref(false)
const showPackageList = ref(true)
// 是否为卡片
const isCard = computed(() => assetType.value === 'card')
@@ -39,10 +39,11 @@
assetType.value = result.asset_type
assetInfo.value = result
// 加载实时状态和当前套餐
if (result.asset_type && result.asset_id) {
loadRealtimeStatus(result.asset_type, result.asset_id)
loadCurrentPackage(result.asset_type, result.asset_id)
// 加载实时状态和当前套餐 (使用 identifier)
if (searchKeyword.value.trim()) {
loadRealtimeStatus(searchKeyword.value.trim())
loadCurrentPackage(searchKeyword.value.trim())
loadPackageList(searchKeyword.value.trim())
}
} catch (error : any) {
console.error('查询失败:', error)
@@ -53,9 +54,9 @@
}
// 加载实时状态
async function loadRealtimeStatus(type : 'card' | 'device', id : number) {
async function loadRealtimeStatus(identifier : string) {
try {
const status = await getAssetRealtimeStatus(type, id)
const status = await getAssetRealtimeStatus(identifier)
realtimeStatus.value = status
} catch (error : any) {
console.error('加载实时状态失败:', error)
@@ -63,10 +64,10 @@
}
// 加载当前套餐
async function loadCurrentPackage(type : 'card' | 'device', id : number) {
async function loadCurrentPackage(identifier : string) {
try {
console.log('开始加载当前套餐:', type, id)
const pkg = await getCurrentPackage(type, id)
console.log('开始加载当前套餐:', identifier)
const pkg = await getCurrentPackage(identifier)
console.log('当前套餐数据:', pkg)
currentPackage.value = pkg
} catch (error : any) {
@@ -77,10 +78,10 @@
}
// 加载套餐列表
async function loadPackageList(type : 'card' | 'device', id : number) {
async function loadPackageList(identifier : string) {
try {
console.log('开始加载套餐列表:', type, id)
const response = await getAssetPackages(type, id, { page: 1, page_size: 50 })
console.log('开始加载套餐列表:', identifier)
const response = await getAssetPackages(identifier, { page: 1, page_size: 50 })
console.log('套餐列表数据:', response)
packageList.value = response?.items || []
} catch (error : any) {
@@ -93,8 +94,8 @@
async function togglePackageList() {
showPackageList.value = !showPackageList.value
// 第一次展开时加载套餐列表
if (showPackageList.value && packageList.value.length === 0 && assetType.value && assetInfo.value?.asset_id) {
await loadPackageList(assetType.value, assetInfo.value.asset_id)
if (showPackageList.value && packageList.value.length === 0 && searchKeyword.value.trim()) {
await loadPackageList(searchKeyword.value.trim())
}
}
@@ -325,9 +326,9 @@
</text>
</view>
<!-- 电话号码 -->
<!-- msisdn -->
<view v-if="cardInfo.msisdn" class="flex items-start justify-between">
<text class="text-12px text-[#999] w-70px">电话号码</text>
<text class="text-12px text-[#999] w-70px">msisdn</text>
<text class="flex-1 text-13px text-[#212121] text-right">
{{ cardInfo.msisdn }}
</text>
@@ -376,7 +377,7 @@
<!-- 累计充值 -->
<view v-if="cardInfo.accumulated_recharge !== undefined" class="flex items-start justify-between">
<text class="text-12px text-[#999] w-70px">累计充值</text>
<text class="flex-1 text-13px font-600 text-[#ff6700] text-right">
<text class="flex-1 text-13px font-600 text-[var(--brand-primary)] text-right">
¥{{ cardInfo.accumulated_recharge }}
</text>
</view>
@@ -424,7 +425,7 @@
<!-- 本月用量 -->
<view class="flex items-center justify-between">
<text class="text-12px text-[#666]">本月用量</text>
<text class="text-13px font-600 text-[#ff6700]">
<text class="text-13px font-600 text-[var(--brand-primary)]">
{{
realtimeStatus.current_month_usage_mb !== null && realtimeStatus.current_month_usage_mb !== undefined
? formatDataSize(realtimeStatus.current_month_usage_mb)
@@ -495,7 +496,7 @@
<view class="flex items-center gap-2">
<i :class="[
'text-16px',
currentPackage.package_type === 'formal' ? 'i-mdi-package-variant text-[#ff6700]' : 'i-mdi-gas-station text-[#2e7d32]',
currentPackage.package_type === 'formal' ? 'i-mdi-package-variant text-[var(--brand-primary)]' : 'i-mdi-gas-station text-[#2e7d32]',
]" />
<text class="text-14px font-600 text-[#212121]">
{{ currentPackage.package_name }}
@@ -564,7 +565,7 @@
<view class="flex items-center gap-1.5">
<i :class="[
'text-14px',
pkg.package_type === 'formal' ? 'i-mdi-package-variant text-[#ff6700]' : 'i-mdi-gas-station text-[#2e7d32]',
pkg.package_type === 'formal' ? 'i-mdi-package-variant text-[var(--brand-primary)]' : 'i-mdi-gas-station text-[#2e7d32]',
]" />
<text class="text-13px font-600 text-[#212121]">{{ pkg.package_name }}</text>
<text v-if="pkg.master_usage_id" class="text-10px text-[#999]">(加油包)</text>
@@ -697,7 +698,7 @@
<!-- 绑定卡数 -->
<view v-if="deviceInfo.bound_card_count !== undefined" class="flex items-start justify-between">
<text class="text-12px text-[#999] w-80px">绑定卡数</text>
<text class="flex-1 text-13px font-600 text-[#ff6700] text-right">
<text class="flex-1 text-13px font-600 text-[var(--brand-primary)] text-right">
{{ deviceInfo.bound_card_count }}
</text>
</view>
@@ -753,7 +754,7 @@
<!-- 累计充值 -->
<view v-if="deviceInfo.accumulated_recharge !== undefined" class="flex items-start justify-between">
<text class="text-12px text-[#999] w-80px">累计充值</text>
<text class="flex-1 text-13px font-600 text-[#ff6700] text-right">
<text class="flex-1 text-13px font-600 text-[var(--brand-primary)] text-right">
¥{{ deviceInfo.accumulated_recharge }}
</text>
</view>
@@ -876,7 +877,7 @@
<!-- 今日用量 -->
<view v-if="realtimeStatus.device_realtime.daily_usage" class="flex items-center justify-between text-11px">
<text class="text-[#666]">今日用量</text>
<text class="text-[#ff6700] font-600">{{ formatBytes(realtimeStatus.device_realtime.daily_usage) }}</text>
<text class="text-[var(--brand-primary)] font-600">{{ formatBytes(realtimeStatus.device_realtime.daily_usage) }}</text>
</view>
<!-- 下载流量 -->
@@ -1017,7 +1018,7 @@
<view class="flex items-center gap-2">
<i :class="[
'text-16px',
currentPackage.package_type === 'formal' ? 'i-mdi-package-variant text-[#ff6700]' : 'i-mdi-gas-station text-[#2e7d32]',
currentPackage.package_type === 'formal' ? 'i-mdi-package-variant text-[var(--brand-primary)]' : 'i-mdi-gas-station text-[#2e7d32]',
]" />
<text class="text-14px font-600 text-[#212121]">
{{ currentPackage.package_name }}
@@ -1086,7 +1087,7 @@
<view class="flex items-center gap-1.5">
<i :class="[
'text-14px',
pkg.package_type === 'formal' ? 'i-mdi-package-variant text-[#ff6700]' : 'i-mdi-gas-station text-[#2e7d32]',
pkg.package_type === 'formal' ? 'i-mdi-package-variant text-[var(--brand-primary)]' : 'i-mdi-gas-station text-[#2e7d32]',
]" />
<text class="text-13px font-600 text-[#212121]">{{ pkg.package_name }}</text>
<text v-if="pkg.master_usage_id" class="text-10px text-[#999]">(加油包)</text>