123 lines
2.4 KiB
Vue
123 lines
2.4 KiB
Vue
<template>
|
||
<Dialog
|
||
v-model:visible="dialogVisible"
|
||
modal
|
||
header="个人信息"
|
||
:style="{ width: '500px' }"
|
||
@hide="handleClose"
|
||
>
|
||
<div class="info-content">
|
||
<div class="info-item">
|
||
<label>用户名：</label>
|
||
<span>{{ userInfo.userName || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>手机号：</label>
|
||
<span>{{ userInfo.phone || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>设备SN码：</label>
|
||
<span>{{ userInfo.snCode || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>设备ID：</label>
|
||
<span>{{ userInfo.deviceId || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>剩余天数：</label>
|
||
<span :class="remainingDaysClass">
|
||
{{ userInfo.remainingDays !== null ? userInfo.remainingDays + ' 天' : '-' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<Button label="关闭" @click="handleClose" />
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { Dialog, Button } from '../components/PrimeVue';
|
||
|
||
export default {
|
||
name: 'UserInfoDialog',
|
||
components: {
|
||
Dialog,
|
||
Button
|
||
},
|
||
props: {
|
||
visible: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
userInfo: {
|
||
type: Object,
|
||
default: () => ({
|
||
userName: '',
|
||
phone: '',
|
||
snCode: '',
|
||
deviceId: '',
|
||
remainingDays: null
|
||
})
|
||
}
|
||
},
|
||
computed: {
|
||
dialogVisible: {
|
||
get() {
|
||
return this.visible;
|
||
},
|
||
set(value) {
|
||
if (!value) {
|
||
this.handleClose();
|
||
}
|
||
}
|
||
},
|
||
remainingDaysClass() {
|
||
if (this.userInfo.remainingDays === null) return '';
|
||
if (this.userInfo.remainingDays <= 0) return 'text-error';
|
||
if (this.userInfo.remainingDays <= 3) return 'text-warning';
|
||
return '';
|
||
}
|
||
},
|
||
methods: {
|
||
handleClose() {
|
||
this.$emit('close');
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.info-content {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
|
||
label {
|
||
font-weight: 600;
|
||
color: #333;
|
||
min-width: 100px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
span {
|
||
color: #666;
|
||
flex: 1;
|
||
|
||
&.text-error {
|
||
color: #f44336;
|
||
}
|
||
|
||
&.text-warning {
|
||
color: #ff9800;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|