device-voice-h5/components/DeviceStatusCard.vue

<template>
	<view class="device-status-card">
		<view class="card-header">
			<text class="text-heading">设备信息</text>
			<view class="operator-badge">
				<text class="operator-name">中国电信</text>
			</view>
		</view>

		<view class="status-row">
			<view class="status-item">
				<text class="status-label">当前卡</text>
				<text class="status-value iccid">{{ deviceInfo.currentIccid }}</text>
			</view>
			<view class="status-item">
				<text class="status-label">实名状态</text>
				<view class="auth-badge" :class="isRealName ? 'auth-done' : 'auth-pending'" @tap="$emit('authentication')">
					<text>{{ isRealName ? '已实名' : '未实名' }}</text>
					<text class="arrow">›</text>
				</view>
			</view>
		</view>

		<view class="status-row">
			<view class="status-item full-width">
				<text class="status-label">到期时间</text>
				<text class="status-value expire">{{ deviceInfo.expireDate }}</text>
			</view>
		</view>

		<view class="metrics-grid">
			<view class="metric-card">
				<view class="metric-icon signal">
					<image src="/static/signal.png" mode="aspectFit" v-if="false"></image>
					<text class="metric-icon-text">📶</text>
				</view>
				<text class="metric-label">信号强度</text>
				<text class="metric-value">{{ getSignalText(deviceInfo.rssi) }}</text>
			</view>
			<view class="metric-card">
				<view class="metric-icon battery">
					<text class="metric-icon-text">🔋</text>
				</view>
				<text class="metric-label">设备电量</text>
				<text class="metric-value">{{ deviceInfo.battery }}%</text>
			</view>
			<view class="metric-card">
				<view class="metric-icon connections">
					<text class="metric-icon-text">📱</text>
				</view>
				<text class="metric-label">连接数量</text>
				<text class="metric-value">{{ deviceInfo.connCnt }}/{{ deviceInfo.max_clients }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';

	const props = defineProps({
		deviceInfo: { type: Object, default: () => ({}) },
		isRealName: { type: Boolean, default: false },
		opratorList: { type: Array, default: () => [] }
	});

	defineEmits(['authentication']);

	const getSignalText = (rssi) => rssi || '强';
</script>

<style scoped lang="scss">
	.device-status-card {
		background: var(--bg-surface);
		border-radius: var(--radius-xl);
		padding: var(--space-5);
		box-shadow: var(--shadow-sm);
	}

	.card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: var(--space-4);
		border-bottom: 1rpx solid var(--gray-100);
		margin-bottom: var(--space-4);
	}

	.operator-badge {
		padding: var(--space-1) var(--space-3);
		background: var(--primary-tint);
		border-radius: var(--radius-full);
	}

	.operator-name {
		font-size: 22rpx;
		font-weight: 600;
		color: var(--primary);
	}

	.status-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-3) 0;

		& + .status-row {
			border-top: 1rpx solid var(--gray-50);
		}
	}

	.status-item {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);

		&.full-width {
			flex: 1;
		}
	}

	.status-label {
		font-size: 24rpx;
		color: var(--text-tertiary);
	}

	.status-value {
		font-size: 28rpx;
		font-weight: 600;
		color: var(--text-primary);

		&.iccid {
			font-family: "SF Mono", "Menlo", monospace;
			font-size: 24rpx;
		}

		&.expire {
			color: var(--primary);
		}
	}

	.auth-badge {
		display: inline-flex;
		align-items: center;
		gap: 4rpx;
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-full);
		font-size: 24rpx;
		font-weight: 600;
		cursor: pointer;
		transition: transform var(--duration-fast) var(--ease-out);

		&:active {
			transform: scale(0.96);
		}

		&.auth-done {
			background: var(--success-light);
			color: var(--success);
		}

		&.auth-pending {
			background: var(--warning-light);
			color: var(--warning);
		}

		.arrow {
			font-size: 28rpx;
			line-height: 1;
		}
	}

	.metrics-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-3);
		margin-top: var(--space-5);
		padding-top: var(--space-5);
		border-top: 1rpx solid var(--gray-100);
	}

	.metric-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-4);
		background: var(--gray-50);
		border-radius: var(--radius-md);
	}

	.metric-icon {
		width: 56rpx;
		height: 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius-sm);

		.metric-icon-text {
			font-size: 32rpx;
		}
	}

	.metric-label {
		font-size: 22rpx;
		color: var(--text-tertiary);
		text-align: center;
	}

	.metric-value {
		font-size: 28rpx;
		font-weight: 700;
		color: var(--text-primary);
		text-align: center;
	}
</style>