71 lines
2.0 KiB
Vue
71 lines
2.0 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="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>
|
||
<button v-if="hasPackageName" class="renew-button" @tap.stop="emit('renew')">立即续费</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 !== '-');
|
||
});
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.user-info-card {
|
||
color: var(--text-primary);
|
||
|
||
.expiry-warning { color: var(--danger); }
|
||
|
||
.user-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.renew-button {
|
||
margin: 24rpx 0 0;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 12rpx;
|
||
font-size: 26rpx;
|
||
line-height: 2.6;
|
||
|
||
&::after { border: none; }
|
||
}
|
||
|
||
}
|
||
</style>
|