2026-08-04 14:53:11 +08:00
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
|
/**
|
2026-08-10 15:33:08 +08:00
|
|
|
|
* 诊所列表 VIP 单元格：徽标+会员名，点击打开 VIP 入口弹窗
|
2026-08-04 14:53:11 +08:00
|
|
|
|
*/
|
|
|
|
|
|
import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
|
|
|
|
|
|
|
|
|
|
|
|
defineProps<{
|
|
|
|
|
|
vip?: Record<string, any> | null;
|
|
|
|
|
|
}>();
|
|
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
|
|
|
click: [];
|
|
|
|
|
|
}>();
|
|
|
|
|
|
</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">
|
2026-08-10 15:33:08 +08:00
|
|
|
|
{{ vip?.duration_label || '点击管理' }}
|
2026-08-04 14:53:11 +08:00
|
|
|
|
</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: var(--foreground, #1f1f1f);
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
}
|
|
|
|
|
|
.store-vip-cell__sub {
|
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
|
color: #8c8c8c;
|
|
|
|
|
|
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);
|
|
|
|
|
|
}
|
|
|
|
|
|
html.dark .store-vip-cell__name,
|
|
|
|
|
|
.dark .store-vip-cell__name {
|
|
|
|
|
|
color: #f4f4f5;
|
|
|
|
|
|
}
|
|
|
|
|
|
html.dark .store-vip-cell__sub,
|
|
|
|
|
|
.dark .store-vip-cell__sub {
|
|
|
|
|
|
color: #a1a1aa;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
