71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
<template>
|
|
<view class="card voice-card">
|
|
<view class="card-header flex-row-sb mb-lg">
|
|
<view class="title">通话使用</view>
|
|
<view class="date-range-selector" @tap="$emit('openDatePicker')">
|
|
<text>{{ dateRangeText }}</text>
|
|
<text class="ml-10">▼</text>
|
|
</view>
|
|
</view>
|
|
<view class="voice-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">{{ voiceStats.totalVoice }}</text>
|
|
<text class="stat-unit">分钟</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">{{ voiceStats.usedVoice }}</text>
|
|
<text class="stat-unit">分钟</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">{{ voiceStats.remainingVoice }}</text>
|
|
<text class="stat-unit">分钟</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
voiceStats: { type: Object, default: () => ({ totalVoice: 0, usedVoice: 0, remainingVoice: 0 }) },
|
|
dateRangeText: { type: String, default: '' }
|
|
});
|
|
|
|
defineEmits(['openDatePicker']);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.voice-card {
|
|
.date-range-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8rpx 20rpx;
|
|
background: var(--gray-100);
|
|
border-radius: var(--radius-small);
|
|
cursor: pointer;
|
|
font-size: 22rpx;
|
|
color: var(--text-primary);
|
|
max-width: 360rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
&:active { opacity: 0.7; }
|
|
}
|
|
.voice-stats {
|
|
background: var(--gray-100);
|
|
border-radius: var(--radius-small);
|
|
padding: 20rpx;
|
|
.stat-item { flex: 1; }
|
|
}
|
|
}
|
|
.ml-10 { margin-left: 10rpx; }
|
|
</style>
|