76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<template>
|
||
<view class="card user-info-card interactive">
|
||
<view class="flex-row-g20">
|
||
<view class="user-details flex-col-g8">
|
||
<view class="flex-row-g20">
|
||
<view class="title">{{ currentCardNo || '-' }}</view>
|
||
</view>
|
||
<view class="iccid-row caption">
|
||
<text>ICCID: {{ deviceInfo.iccid || '-' }}</text>
|
||
<button
|
||
v-if="deviceInfo.iccid && deviceInfo.iccid !== '-'"
|
||
class="copy-btn"
|
||
@tap.stop="$emit('copy', deviceInfo.iccid)"
|
||
>
|
||
复制
|
||
</button>
|
||
</view>
|
||
<view class="caption">套餐名称：{{ deviceInfo.packageName || '-' }}</view>
|
||
<view class="caption">套餐到期时间：{{ deviceInfo.expireDate || '-' }}</view>
|
||
</view>
|
||
<view v-if="isDevice" class="tag-apple" :class="onlineStatus === '在线' ? 'tag-success' : 'tag-warning'">
|
||
{{ onlineStatus }}
|
||
</view>
|
||
<view v-else class="tag-apple" :class="networkStatus == 1 ? 'tag-success' : 'tag-warning'">
|
||
{{ networkStatus == 1 ? '正常' : '停机' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
currentCardNo: { type: String, default: '' },
|
||
deviceInfo: { type: Object, default: () => ({}) },
|
||
onlineStatus: { type: String, default: '离线' },
|
||
networkStatus: { type: [String, Number], default: '离线' },
|
||
isDevice: { type: Boolean, default: true }
|
||
});
|
||
|
||
defineEmits(['copy']);
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.user-info-card {
|
||
color: var(--text-primary);
|
||
|
||
.user-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.iccid-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.copy-btn {
|
||
margin: 0;
|
||
padding: 0 12rpx;
|
||
min-height: 36rpx;
|
||
line-height: 36rpx;
|
||
border: none;
|
||
border-radius: 6rpx;
|
||
background: rgba(10, 132, 255, 0.12);
|
||
color: var(--primary);
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.copy-btn::after {
|
||
border: none;
|
||
}
|
||
}
|
||
</style>
|