b1f223554b
Some checks failed
CI / Test (ubuntu-latest) (push) Has been cancelled
CI / Test (windows-latest) (push) Has been cancelled
CI / Lint (ubuntu-latest) (push) Has been cancelled
CI / Lint (windows-latest) (push) Has been cancelled
CI / Check (ubuntu-latest) (push) Has been cancelled
CI / Check (windows-latest) (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
Deploy Website on push / Deploy Push Playground Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Docs Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Antd Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Element Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Naive Ftp (push) Has been cancelled
Release Drafter / update_release_draft (push) Has been cancelled
CI / CI OK (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Issue Close Require / close-issues (push) Has been cancelled
Close stale issues / stale (push) Has been cancelled
1. 创建就诊人功能增强 2. 优化交互细节
107 lines
2.7 KiB
Vue
107 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
/**
|
|
* 诊所设置「基础资料」会员卡片
|
|
* 大尺寸等级徽标 + 期限丝带叠加，展示等级名与到期时间
|
|
*/
|
|
import { computed } from 'vue';
|
|
|
|
import VipBadgeCombo from './VipBadgeCombo.vue';
|
|
|
|
const props = defineProps<{
|
|
vip?: Record<string, any> | null;
|
|
}>();
|
|
|
|
const hasVipVisual = computed(() => {
|
|
const v = props.vip;
|
|
return !!(v && (v.badge_url || v.duration_badge_url));
|
|
});
|
|
|
|
const expireText = computed(() => {
|
|
const v = props.vip;
|
|
if (!v) return '默认会员';
|
|
if (v.is_lifetime) return '永久有效';
|
|
const expireAt = Number(v.expire_at || 0);
|
|
if (!expireAt) {
|
|
if ((v.level_code || 'V0') === 'V0') return '默认会员';
|
|
return '永久有效';
|
|
}
|
|
if (typeof v.expire_at === 'string' && String(v.expire_at).includes('-')) {
|
|
return `有效期至 ${v.expire_at}`;
|
|
}
|
|
const d = new Date(expireAt * 1000);
|
|
const pad = (n: number) => String(n).padStart(2, '0');
|
|
return `有效期至 ${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="store-vip-card">
|
|
<VipBadgeCombo
|
|
v-if="hasVipVisual"
|
|
size="xl"
|
|
:badge-url="vip?.badge_url"
|
|
:duration-badge-url="vip?.duration_badge_url"
|
|
:level-name="vip?.level_name"
|
|
:duration-label="vip?.duration_label"
|
|
/>
|
|
<div v-else class="store-vip-card__placeholder">V</div>
|
|
<div class="store-vip-card__info">
|
|
<div class="store-vip-card__title">
|
|
{{ vip?.level_name || '普通会员' }}
|
|
</div>
|
|
<div class="store-vip-card__sub">
|
|
{{ vip?.duration_label || '普通会员' }}
|
|
</div>
|
|
<div class="store-vip-card__expire">{{ expireText }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.store-vip-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
padding: 20px 28px;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, #2c3e50 0%, #3d5a40 50%, #6acdbb 100%);
|
|
box-shadow: 0 8px 24px rgba(44, 62, 80, 0.16);
|
|
margin-bottom: 24px;
|
|
}
|
|
.store-vip-card__placeholder {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.18);
|
|
color: #fff;
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.store-vip-card__info {
|
|
min-width: 0;
|
|
color: #fff;
|
|
}
|
|
.store-vip-card__title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
margin-bottom: 6px;
|
|
}
|
|
.store-vip-card__sub {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
margin-bottom: 6px;
|
|
}
|
|
.store-vip-card__expire {
|
|
font-size: 13px;
|
|
opacity: 0.78;
|
|
}
|
|
html.dark .store-vip-card,
|
|
.dark .store-vip-card {
|
|
background: linear-gradient(135deg, #1a2332 0%, #243528 50%, #2d6b5f 100%);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
|
}
|
|
</style>
|