luo/device-voice-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 套餐加油包变子

Browse Source
This commit is contained in:
luo
2026-09-08 09:56:16 +08:00
parent 484a807dce
commit 8b6ce505b5
7 changed files with 572 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
pages/asset-package-history/asset-package-history.vue
View File

@@ -1,6 +1,5 @@
<template>
<view class="container">
<!-- 空状态提示 -->
<view v-if="!historyLoaded || (loading && packageList.length === 0)" class="loading-state">
<up-loading-icon text="加载中" size="30"></up-loading-icon>
</view>
@@ -10,169 +9,81 @@
<view class="empty-desc">当前账号下暂无套餐历史信息</view>
</view>
<!-- 套餐列表 -->
<view v-else class="card package-card" v-for="(item, index) in packageList" :key="index">
<view class="package-header flex-row-sb">
<view class="package-name">{{ item.package_name }}</view>
<view class="tag-apple" :class="getStatusClass(item.status)">{{ item.status_name }}</view>
</view>
<view class="package-info">
<view class="info-row flex-row-sb">
<view class="info-label">激活时间</view>
<view class="info-value">{{ item.activated_at || '-' }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">到期时间</view>
<view class="info-value">{{ item.expires_at || '-' }}</view>
</view>
</view>
<view class="divider"></view>
<view class="flow-info">
<view class="flow-title">流量信息</view>
<view class="flow-stats">
<view class="flow-item">
<view class="flow-label">已使用</view>
<view class="flow-value">{{ getUsedFlow(item) }}</view>
</view>
<view class="flow-item">
<view class="flow-label">总流量</view>
<view class="flow-value">{{ getTotalFlow(item) }}</view>
</view>
<view class="flow-item">
<view class="flow-label">剩余</view>
<view class="flow-value">{{ getRemainFlow(item) }}</view>
</view>
</view>
<view class="progress-section">
<view class="progress-apple">
<view class="progress-fill" :style="{width: getUsagePercent(item) + '%'}"></view>
</view>
</view>
</view>
<view v-else>
<PackageHistoryNode
v-for="(item, index) in packageList"
:key="getGroupKey(item, index)"
:node="item"
/>
</view>
<!-- 加载更多 -->
<view class="load-more" v-if="packageList.length > 0">
<view v-if="packageList.length > 0" class="load-more">
<text v-if="loading">加载中...</text>
<text v-else-if="noMore">没有更多了</text>
<text v-else @tap="loadMore">点击加载更多</text>
<text v-else-if="noMore">没有更多套餐</text>
<text v-else role="button" tabindex="0" @tap="loadMore">点击加载更多</text>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ref, onMounted } from 'vue';
import { assetApi } from '@/api/index.js';
import PackageHistoryNode from '@/components/PackageHistoryNode.vue';
import { useUserStore } from '@/store/index.js';
const userStore = useUserStore();
let packageList = reactive([]);
let loading = ref(false);
let historyLoaded = ref(false);
let noMore = ref(false);
let page = ref(1);
const packageList = ref([]);
const loading = ref(false);
const historyLoaded = ref(false);
const noMore = ref(false);
const page = ref(1);
const total = ref(0);
const pageSize = 10;
const getStatusClass = (status) => {
const classMap = {
'0': 'tag-warning',
'1': 'tag-success',
'2': 'tag-primary',
'3': 'tag-secondary',
'4': 'tag-danger'
};
return classMap[status] || '';
};
const formatMB = (mb) => {
if (!mb && mb !== 0) return '0 MB';
if (mb >= 1024) {
return (mb / 1024).toFixed(2) + ' GB';
}
return mb.toFixed(2) + ' MB';
};
// 获取已使用流量
const getUsedFlow = (item) => {
if (item.enable_virtual_data) {
return formatMB(item.virtual_used_mb || 0);
} else {
return formatMB(item.real_used_mb || 0);
}
};
// 获取总流量
const getTotalFlow = (item) => {
return formatMB(item.real_total_mb || 0);
};
// 获取剩余流量
const getRemainFlow = (item) => {
const total = item.real_total_mb || 0;
const used = item.enable_virtual_data ? (item.virtual_used_mb || 0) : (item.real_used_mb || 0);
const remain = Math.max(total - used, 0);
return formatMB(remain);
};
// 获取使用百分比
const getUsagePercent = (item) => {
const used = item.real_used_mb || 0;
const total = item.real_total_mb || 0;
if (!total) return 0;
return Math.min((used / total) * 100, 100).toFixed(2);
};
const formatDate = (dateStr) => {
if (!dateStr) return '-';
return dateStr.split('T').join(' ').slice(0, 19);
};
const getGroupKey = (item, index) => item.package_usage_id ?? `group-${index}`;
const loadPackageList = async (append = false) => {
if (loading.value || noMore.value) return;
if (loading.value || (append && noMore.value)) return;
loading.value = true;
const requestedPage = page.value;
try {
const data = await assetApi.getPackageHistory(
userStore.state.identifier,
page.value,
requestedPage,
pageSize
);
const newData = (data.items || []).map(item => ({
...item,
activated_at: item.activated_at ? formatDate(item.activated_at) : '',
created_at: formatDate(item.created_at),
expires_at: item.expires_at ? formatDate(item.expires_at) : ''
}));
const groups = data.items;
const responsePage = Number.isInteger(data.page) && data.page > 0
? data.page
: requestedPage;
const responseSize = Number.isInteger(data.size) && data.size > 0
? data.size
: pageSize;
const responseTotal = Number.isFinite(data.total) && data.total >= 0
? data.total
: 0;
if (append) {
packageList.push(...newData);
packageList.value.push(...groups);
} else {
packageList.splice(0, packageList.length, ...newData);
packageList.value = groups;
}
if (newData.length < pageSize) {
noMore.value = true;
} else {
page.value++;
}
} catch (e) {
console.error('加载套餐历史失败', e);
total.value = responseTotal;
noMore.value = responsePage * responseSize >= total.value;
page.value = responsePage + 1;
} catch (error) {
// The shared request layer handles the API's unified error response and authentication errors.
console.error('加载套餐历史失败', error);
} finally {
loading.value = false;
historyLoaded.value = true;
}
loading.value = false;
historyLoaded.value = true;
};
const loadMore = () => {
if (!noMore.value) {
loadPackageList(true);
}
};
const loadMore = () => loadPackageList(true);
onMounted(() => {
loadPackageList();
@@ -180,83 +91,46 @@
</script>
<style lang="scss" scoped>
.container {
.loading-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 500rpx;
.loading-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 500rpx;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400rpx;
padding: 120rpx 40rpx;
.empty-icon {
width: 120rpx;
height: 120rpx;
margin-bottom: 30rpx;
opacity: 0.6;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 40rpx;
min-height: 400rpx;
.empty-icon { width: 120rpx; height: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
.empty-title {
margin-bottom: 16rpx;
font-size: 32rpx;
font-weight: 600;
color: var(--text-primary);
}
.package-card {
margin-bottom: var(--space-md);
.package-header {
margin-bottom: var(--space-md);
.package-name { font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
}
.package-info {
.info-row {
padding: var(--space-xs) 0;
.info-label { font-size: 24rpx; color: var(--text-tertiary); }
.info-value { font-size: 24rpx; color: var(--text-primary); }
}
}
.divider {
height: 1rpx;
background: var(--gray-200);
margin: var(--space-md) 0;
}
.flow-info {
.flow-title { font-size: 26rpx; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); }
.flow-stats {
display: flex;
justify-content: space-between;
margin-bottom: var(--space-sm);
.flow-item {
text-align: center;
.flow-label { font-size: 20rpx; color: var(--text-tertiary); margin-bottom: 4rpx; }
.flow-value { font-size: 26rpx; font-weight: 600; color: var(--text-primary); }
}
}
.progress-section {
.progress-apple {
width: 100%;
height: 8rpx;
background: var(--gray-200);
border-radius: var(--radius-small);
overflow: hidden;
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
border-radius: var(--radius-small);
}
}
}
}
}
.load-more {
text-align: center;
padding: var(--space-lg);
.empty-desc {
font-size: 26rpx;
color: var(--text-tertiary);
font-size: 24rpx;
text-align: center;
}
}
.tag-secondary { background: var(--gray-200) !important; color: var(--gray-600) !important; }
.load-more {
padding: var(--space-lg);
font-size: 24rpx;
color: var(--text-tertiary);
text-align: center;
}
</style>