60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
<template>
|
||
<view class="card user-info-card interactive">
|
||
<view class="flex-row-g20">
|
||
<view class="user-avatar">
|
||
<image :src="avatarUrl" mode="aspectFill" alt="用户头像" />
|
||
</view>
|
||
<view class="user-details flex-col-g8">
|
||
<view class="flex-row-g20">
|
||
<view class="title">{{ currentCardNo || '-' }}</view>
|
||
</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>
|
||
import { computed } from 'vue';
|
||
import { useUserStore } from '@/store/index.js';
|
||
|
||
const userStore = useUserStore();
|
||
|
||
defineProps({
|
||
currentCardNo: { type: String, default: '' },
|
||
deviceInfo: { type: Object, default: () => ({}) },
|
||
onlineStatus: { type: String, default: '离线' },
|
||
networkStatus: { type: String, default: '离线' },
|
||
isDevice: { type: Boolean, default: true }
|
||
});
|
||
|
||
// 默认头像
|
||
const defaultAvatar = 'https://img1.baidu.com/it/u=2462918877,1866131262&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=500';
|
||
|
||
// 用户头像，优先使用 store 中的头像，否则使用默认头像
|
||
const avatarUrl = computed(() => {
|
||
return userStore.state.userInfo.avatar || defaultAvatar;
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.user-info-card {
|
||
color: var(--text-primary);
|
||
.user-avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: var(--radius-medium);
|
||
overflow: hidden;
|
||
border: 2rpx solid var(--border-light);
|
||
image { width: 100%; height: 100%; object-fit: cover; }
|
||
}
|
||
.user-details { flex: 1; }
|
||
}
|
||
</style>
|