95 lines
2.8 KiB
Vue
95 lines
2.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="info-copy-row">
|
||
<view class="title">{{ currentCardNo || '-' }}</view>
|
||
<image class="copy-icon" src="/static/复制.png" mode="aspectFit"
|
||
@tap.stop="copyText(currentCardNo, '号码')" aria-label="复制号码"></image>
|
||
</view>
|
||
<view v-if="!isDevice" class="info-copy-row">
|
||
<view class="caption">ICCID：{{ deviceInfo.iccid || '-' }}</view>
|
||
<image class="copy-icon" src="/static/复制.png" mode="aspectFit"
|
||
@tap.stop="copyText(deviceInfo.iccid, 'ICCID')" aria-label="复制ICCID"></image>
|
||
</view>
|
||
<view class="caption">套餐名称：{{ deviceInfo.packageName || '-' }}</view>
|
||
<view class="caption" :class="{ 'expiry-warning': isExpiring }">
|
||
套餐到期时间：{{ deviceInfo.expireDate || '-' }}
|
||
<text v-if="isExpiring && expiryDays !== null">（剩余 {{ expiryDays }} 天）</text>
|
||
</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>
|
||
<up-button v-if="hasPackageName" class="renew-button" type="primary" size="small"
|
||
@tap.stop="emit('renew')">立即续费</up-button>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue';
|
||
|
||
const emit = defineEmits(['renew']);
|
||
|
||
const props = defineProps({
|
||
currentCardNo: { type: String, default: '' },
|
||
deviceInfo: { type: Object, default: () => ({}) },
|
||
onlineStatus: { type: String, default: '离线' },
|
||
networkStatus: { type: [String, Number], default: '离线' },
|
||
isDevice: { type: Boolean, default: true },
|
||
isExpiring: { type: Boolean, default: false },
|
||
expiryDays: { type: [Number, String], default: null }
|
||
});
|
||
|
||
const hasPackageName = computed(() => {
|
||
const packageName = String(props.deviceInfo?.packageName || '').trim();
|
||
return Boolean(packageName && packageName !== '-');
|
||
});
|
||
|
||
const copyText = (value, label) => {
|
||
const text = String(value || '').trim();
|
||
if (!text || text === '-') return;
|
||
uni.setClipboardData({
|
||
data: text,
|
||
success: () => uni.showToast({ title: `${label}已复制`, icon: 'success' })
|
||
});
|
||
};
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.user-info-card {
|
||
color: var(--text-primary);
|
||
|
||
.expiry-warning { color: var(--danger); }
|
||
|
||
.user-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.info-copy-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.copy-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.renew-button {
|
||
margin: 24rpx 0 0;
|
||
width: 180rpx;
|
||
margin-left: auto;
|
||
}
|
||
|
||
}
|
||
</style>
|