first commit

components/TrafficCard.vue

@@ -0,0 +1,80 @@
+<template>
+	<view class="card traffic-card">
+		<view class="card-header flex-row-sb mb-lg">
+			<view class="title">本月流量</view>
+			<view class="usage-percent">
+				<text class="title">{{ usedFlowPercent }}</text>
+				<text class="caption">%</text>
+			</view>
+		</view>
+		<view class="progress-section mb-lg">
+			<view class="progress-apple">
+				<view class="progress-fill" :style="{width: usedFlowPercent + '%'}"></view>
+			</view>
+		</view>
+		<view class="traffic-stats flex-row-sb">
+			<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>
+				</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>
+				</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>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { computed } from 'vue';
+
+	const props = defineProps({
+		deviceInfo: { type: Object, default: () => ({}) },
+		isDevice: { type: Boolean, default: true }
+	});
+
+	const usedFlowPercent = computed(() => {
+		if (props.deviceInfo.flowSize && props.deviceInfo.totalBytesCnt) {
+			return (props.deviceInfo.totalBytesCnt / props.deviceInfo.flowSize * 100).toFixed(2);
+		}
+		return '0';
+	});
+
+	const formatDataSize = (size) => {
+		if (!size) return '0';
+		const num = parseFloat(size);
+		if (num < 0.01) return '0';
+		return num.toFixed(2);
+	};
+</script>
+
+<style scoped lang="scss">
+	.traffic-card {
+		.usage-percent {
+			display: flex;
+			align-items: baseline;
+			gap: 4rpx;
+			.title { font-size: 35rpx; font-weight: 700; margin-right: 5rpx; }
+		}
+		.traffic-stats {
+			background: var(--gray-100);
+			border-radius: var(--radius-small);
+			padding: 20rpx;
+			margin-top: 16rpx;
+			.stat-item { flex: 1; }
+		}
+	}
+</style>