241 lines
6.8 KiB
Vue
241 lines
6.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 空状态提示 -->
|
|
<view v-if="packageList.length === 0 && !loading" class="empty-state">
|
|
<view class="empty-icon">📦</view>
|
|
<view class="empty-title">暂无套餐记录</view>
|
|
<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.package_type === 'formal' ? '普通套餐' : '加油包' }}</view>
|
|
</view>
|
|
<view class="info-row flex-row-sb">
|
|
<view class="info-label">使用类型</view>
|
|
<view class="info-value">{{ item.usage_type === 'single_card' ? '单卡' : '设备' }}</view>
|
|
</view>
|
|
<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.created_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 class="info-row flex-row-sb">
|
|
<view class="info-label">优先级</view>
|
|
<view class="info-value">{{ item.priority }}</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">{{ formatMB(item.data_usage_mb) }}</view>
|
|
</view>
|
|
<view class="flow-item">
|
|
<view class="flow-label">总量真流量</view>
|
|
<view class="flow-value">{{ formatMB(item.data_limit_mb) }}</view>
|
|
</view>
|
|
<view class="flow-item">
|
|
<view class="flow-label">剩余虚流量</view>
|
|
<view class="flow-value">{{ formatMB(item.virtual_remain_mb) }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="progress-section">
|
|
<view class="progress-apple">
|
|
<view class="progress-fill" :style="{width: getUsagePercent(item) + '%'}"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多 -->
|
|
<view class="load-more" v-if="packageList.length > 0">
|
|
<text v-if="loading">加载中...</text>
|
|
<text v-else-if="noMore">没有更多了</text>
|
|
<text v-else @tap="loadMore">点击加载更多</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import { assetApi } from '@/api/index.js';
|
|
import { useUserStore } from '@/store/index.js';
|
|
|
|
const userStore = useUserStore();
|
|
|
|
let packageList = reactive([]);
|
|
let loading = ref(false);
|
|
let noMore = ref(false);
|
|
let page = ref(1);
|
|
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) return '0';
|
|
if (mb >= 1024) {
|
|
return (mb / 1024).toFixed(2) + ' GB';
|
|
}
|
|
return mb + ' MB';
|
|
};
|
|
|
|
const getUsagePercent = (item) => {
|
|
if (!item.data_limit_mb) return 0;
|
|
return Math.min((item.data_usage_mb / item.data_limit_mb) * 100, 100).toFixed(2);
|
|
};
|
|
|
|
const formatDate = (dateStr) => {
|
|
if (!dateStr) return '-';
|
|
return dateStr.split('T').join(' ').slice(0, 19);
|
|
};
|
|
|
|
const loadPackageList = async (append = false) => {
|
|
if (loading.value || noMore.value) return;
|
|
loading.value = true;
|
|
|
|
try {
|
|
const data = await assetApi.getPackageHistory(
|
|
userStore.state.identifier,
|
|
page.value,
|
|
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) : ''
|
|
}));
|
|
|
|
if (append) {
|
|
packageList.push(...newData);
|
|
} else {
|
|
packageList.splice(0, packageList.length, ...newData);
|
|
}
|
|
|
|
if (newData.length < pageSize) {
|
|
noMore.value = true;
|
|
} else {
|
|
page.value++;
|
|
}
|
|
} catch (e) {
|
|
console.error('加载套餐历史失败', e);
|
|
}
|
|
loading.value = false;
|
|
};
|
|
|
|
const loadMore = () => {
|
|
if (!noMore.value) {
|
|
loadPackageList(true);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
loadPackageList();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120rpx 40rpx;
|
|
min-height: 400rpx;
|
|
.empty-icon { font-size: 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; }
|
|
}
|
|
|
|
.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);
|
|
color: var(--text-tertiary);
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.tag-secondary { background: var(--gray-200) !important; color: var(--gray-600) !important; }
|
|
</style>
|