81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
<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>
|