fix: 修改index数据来源

components/TrafficCard.vue

@@ -16,22 +16,22 @@
 			<view class="stat-item flex-col-center">
 				<view class="caption mb-xs">已使用</view>
 				<view class="stat-value-container">
-					<text class="stat-value">{{ formatDataSize(deviceInfo.totalBytesCnt) }}</text>
-					<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
+					<text class="stat-value">{{ usedValue }}</text>
+					<text class="stat-unit">{{ usedUnit }}</text>
 				</view>
 			</view>
 			<view class="stat-item flex-col-center">
 				<view class="caption mb-xs">总流量</view>
 				<view class="stat-value-container">
-					<text class="stat-value">{{ formatDataSize(deviceInfo.flowSize) }}</text>
-					<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
+					<text class="stat-value">{{ totalValue }}</text>
+					<text class="stat-unit">{{ totalUnit }}</text>
 				</view>
 			</view>
 			<view class="stat-item flex-col-center">
 				<view class="caption mb-xs">剩余</view>
 				<view class="stat-value-container">
-					<text class="stat-value">{{ formatDataSize(deviceInfo.flowSize - deviceInfo.totalBytesCnt) }}</text>
-					<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
+					<text class="stat-value">{{ remainValue }}</text>
+					<text class="stat-unit">{{ remainUnit }}</text>
 				</view>
 			</view>
 		</view>
@@ -39,26 +39,108 @@
 </template>
 
 <script setup>
-	import { computed } from 'vue';
+	import { ref, computed, watch } from 'vue';
+	import { assetApi } from '@/api/index.js';
+	import { useUserStore } from '@/store/index.js';
 
 	const props = defineProps({
-		deviceInfo: { type: Object, default: () => ({}) },
-		isDevice: { type: Boolean, default: true }
+		identifier: { type: String, default: '' }
 	});
 
-	const usedFlowPercent = computed(() => {
-		if (props.deviceInfo.flowSize && props.deviceInfo.totalBytesCnt) {
-			return (props.deviceInfo.totalBytesCnt / props.deviceInfo.flowSize * 100).toFixed(2);
+	const userStore = useUserStore();
+
+	// 流量数据
+	const usedMB = ref(0);
+	const totalMB = ref(0);
+	const remainMB = ref(0);
+
+	// 格式化流量数据（MB 转 GB）
+	const formatTraffic = (mb) => {
+		if (!mb || mb === 0) {
+			return { value: '0.00', unit: 'MB' };
 		}
-		return '0';
+
+		if (mb >= 1024) {
+			return {
+				value: (mb / 1024).toFixed(2),
+				unit: 'GB'
+			};
+		}
+
+		return {
+			value: mb.toFixed(2),
+			unit: 'MB'
+		};
+	};
+
+	// 已使用流量
+	const usedValue = computed(() => formatTraffic(usedMB.value).value);
+	const usedUnit = computed(() => formatTraffic(usedMB.value).unit);
+
+	// 总流量
+	const totalValue = computed(() => formatTraffic(totalMB.value).value);
+	const totalUnit = computed(() => formatTraffic(totalMB.value).unit);
+
+	// 剩余流量
+	const remainValue = computed(() => formatTraffic(remainMB.value).value);
+	const remainUnit = computed(() => formatTraffic(remainMB.value).unit);
+
+	// 使用百分比
+	const usedFlowPercent = computed(() => {
+		if (totalMB.value && usedMB.value) {
+			const percent = (usedMB.value / totalMB.value * 100);
+			return Math.min(percent, 100).toFixed(2);
+		}
+		return '0.00';
 	});
 
-	const formatDataSize = (size) => {
-		if (!size) return '0';
-		const num = parseFloat(size);
-		if (num < 0.01) return '0';
-		return num.toFixed(2);
+	// 加载套餐流量数据
+	const loadPackageData = async () => {
+		const identifier = props.identifier || userStore.state.identifier;
+		if (!identifier) return;
+
+		try {
+			const data = await assetApi.getPackageHistory(identifier, 1, 10, { status: 1 });
+
+			if (data.items && data.items.length > 0) {
+				// 只有一个生效中的套餐
+				const activePackage = data.items[0];
+
+				if (activePackage.enable_virtual_data) {
+					// 启用虚流量
+					usedMB.value = activePackage.virtual_used_mb || 0;
+					totalMB.value = activePackage.virtual_limit_mb || 0;
+					remainMB.value = activePackage.virtual_remain_mb || 0;
+				} else {
+					// 未启用虚流量，使用真流量
+					usedMB.value = activePackage.data_usage_mb || 0;
+					totalMB.value = activePackage.data_limit_mb || 0;
+					remainMB.value = totalMB.value - usedMB.value;
+				}
+			} else {
+				// 没有生效中的套餐
+				usedMB.value = 0;
+				totalMB.value = 0;
+				remainMB.value = 0;
+			}
+		} catch (e) {
+			console.error('加载套餐流量数据失败', e);
+		}
 	};
+
+	// 监听 identifier 变化
+	watch(() => props.identifier, (newVal) => {
+		if (newVal) {
+			loadPackageData();
+		}
+	}, { immediate: true });
+
+	// 如果没有传入 identifier，则使用 store 中的
+	watch(() => userStore.state.identifier, (newVal) => {
+		if (newVal && !props.identifier) {
+			loadPackageData();
+		}
+	}, { immediate: true });
 </script>
 
 <style scoped lang="scss">