80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
|
/**
|
|
* 诊所列表 VIP 单元格：徽标+会员名+到期时间，点击打开 VIP 入口弹窗
|
|
*/
|
|
import { computed } from 'vue';
|
|
|
|
import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
|
|
import { formatVipDurationExpireLine } from '#/utils/vip';
|
|
|
|
const props = defineProps<{
|
|
vip?: Record<string, any> | null;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
click: [];
|
|
}>();
|
|
|
|
/** 副行展示时长类型与到期，方便列表一眼看到过期时间 */
|
|
const subText = computed(() => formatVipDurationExpireLine(props.vip));
|
|
</script>
|
|
<template>
|
|
<div
|
|
class="store-vip-cell"
|
|
role="button"
|
|
tabindex="0"
|
|
@click.stop="emit('click')"
|
|
@keydown.enter.prevent="emit('click')"
|
|
>
|
|
<VipBadgeCombo
|
|
size="sm"
|
|
:badge-url="vip?.badge_url"
|
|
:duration-badge-url="vip?.duration_badge_url"
|
|
:level-name="vip?.level_name"
|
|
:duration-label="vip?.duration_label"
|
|
/>
|
|
<div class="store-vip-cell__text">
|
|
<div class="store-vip-cell__name">{{ vip?.level_name || '普通会员' }}</div>
|
|
<div class="store-vip-cell__sub">{{ subText }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.store-vip-cell {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
padding: 4px 8px 4px 4px;
|
|
border-radius: 10px;
|
|
transition: background 0.15s ease;
|
|
max-width: 100%;
|
|
}
|
|
.store-vip-cell:hover {
|
|
background: rgba(106, 205, 187, 0.12);
|
|
}
|
|
.store-vip-cell__text {
|
|
min-width: 0;
|
|
line-height: 1.25;
|
|
}
|
|
.store-vip-cell__name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.store-vip-cell__sub {
|
|
font-size: 11px;
|
|
color: hsl(var(--muted-foreground));
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
html.dark .store-vip-cell:hover,
|
|
.dark .store-vip-cell:hover {
|
|
background: rgba(106, 205, 187, 0.2);
|
|
}
|
|
</style>
|