fix: 优化界面以及更新接口
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 1m27s
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 1m27s
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user