Skip to content

Commit 9f03474

Browse files
dfhfg123dfhfg123
authored
Fix/add vip style (#138)
* adjust vip style * version * auto prettier format code
1 parent f1d8723 commit 9f03474

5 files changed

Lines changed: 193 additions & 24 deletions

File tree

‎src/assets/user_level/headerVipLogo.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎src/assets/user_level/vipLogo.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎src/locales/zh.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -466,7 +466,7 @@
466466
"freeDescription": "免费使用，高质量的设计体验",
467467
"activate": "已激活",
468468
"usingNow": "正在体验中",
469-
"renewNow": "立即续费",
469+
"renewNow": "续费",
470470
"dailyLoginReward": "每日登陆可获取 1000 币",
471471
"regularImageLimit": "约生产 30 张图片或 1 个视频",
472472
"regularRpdLimit": "每日调用次数限制 (RPD) 为 1000 次/日",

‎src/views/btnProfile/DialogInfo.vue‎

Lines changed: 162 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,15 @@
88
content-style="padding: 0 32px 24px 32px;"
99
:bordered="false"
1010
>
11-
<div class="info-container" :class="{ 'vip-container': statusStore.usersMetadata.level === 2 }">
12-
<div
13-
class="avatar-wrapper"
14-
:class="{ 'vip-avatar-wrapper': statusStore.usersMetadata.level === 2 }"
15-
>
11+
<div class="info-container" :class="{ 'vip-container': isVip }">
12+
<div class="avatar-wrapper" :class="{ 'vip-avatar-wrapper': isVip }">
1613
<img class="avatar" :src="statusStore.usersMetadata.avatar || statusStore.userAvatar" />
17-
<n-tooltip v-if="statusStore.usersMetadata.level === 2" placement="bottom" trigger="hover">
18-
<template #trigger>
19-
<img class="vip-frame" src="@/assets/vip.png" />
20-
</template>
21-
{{ $t('btnProfile.userInfo.vipRemaining', { days: remainingDays }) }}
22-
</n-tooltip>
14+
<img v-if="isVip" class="vip-corner-badge" src="@/assets/user_level/headerVipLogo.svg" />
2315
</div>
2416
<div class="info" @click="toUploadInfo">
25-
<p class="user-name" :class="{ 'vip-name': statusStore.usersMetadata.level === 2 }">
17+
<p class="user-name" :class="{ 'vip-name': isVip }">
2618
{{ statusStore.usersMetadata.name }}
19+
<span v-if="isVip" class="vip-badge">VIP</span>
2720
</p>
2821
<p class="user-title">
2922
{{ statusStore.usersMetadata.introduction || $t('btnProfile.userInfo.lazyText') }}
@@ -63,7 +56,31 @@
6356
</svg>
6457
</span>
6558
</div>
66-
<div class="financial">
59+
<!-- VIP会员卡片 -->
60+
<div v-if="isVip" class="vip-membership-card">
61+
<div class="vip-membership-content">
62+
<div class="vip-membership-info">
63+
<div class="vip-membership-title">
64+
<svg class="vip-crown-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
65+
<path
66+
d="M510.955102 831.738776c-23.510204 0-45.453061-9.926531-61.64898-27.167347L138.971429 468.114286c-28.734694-31.346939-29.779592-79.412245-1.567347-111.804082l117.55102-135.314286c15.673469-18.285714 38.661224-28.734694 63.216327-28.734694H705.306122c24.032653 0 47.020408 10.44898 62.693878 28.734694l118.073469 135.314286c28.212245 32.391837 27.689796 80.457143-1.567347 111.804082L572.081633 804.571429c-15.673469 17.240816-38.138776 27.167347-61.126531 27.167347z"
67+
fill="#fcb002"
68+
/>
69+
<path
70+
d="M506.77551 642.612245c-5.22449 0-10.971429-2.089796-15.15102-6.269388l-203.755102-208.979592c-7.836735-8.359184-7.836735-21.420408 0.522449-29.779592 8.359184-7.836735 21.420408-7.836735 29.779592 0.522449l189.12653 193.828572 199.053061-194.351021c8.359184-7.836735 21.420408-7.836735 29.779592 0.522449 7.836735 8.359184 7.836735 21.420408-0.522449 29.779592l-214.204081 208.979592c-4.179592 3.657143-9.404082 5.746939-14.628572 5.746939z"
71+
fill="#FFF7E1"
72+
/>
73+
</svg>
74+
<span>{{ vipLevelName }}</span>
75+
</div>
76+
<div class="vip-membership-expire">有效期至{{ vipExpireDate }}</div>
77+
</div>
78+
<n-button class="vip-renew-button" @click="handleRenewClick">{{
79+
$t('btnProfile.product.renewNow')
80+
}}</n-button>
81+
</div>
82+
</div>
83+
<div class="financial" :class="{ 'vip-connected': isVip }">
6784
<div class="balance-title">
6885
<img
6986
class="coin-icon"
@@ -214,16 +231,31 @@
214231
statusStore.showUploadInfoDialog = true
215232
}
216233
217-
const remainingDays = computed(() => {
218-
const subExpireAt = (statusStore.usersMetadata as any).sub_expire_at
219-
if (!subExpireAt?.[2]) return 0
234+
// const remainingDays = computed(() => {
235+
// const subExpireAt = (statusStore.usersMetadata as any).sub_expire_at
236+
// if (!subExpireAt?.[2]) return 0
237+
238+
// const expireDate = new Date(subExpireAt[2])
239+
// const today = new Date()
240+
// // 计算两个日期之间的差值（毫秒）
241+
// const diffTime = expireDate.getTime() - today.getTime()
242+
// // 转换为天数并向上取整
243+
// return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
244+
// })
245+
246+
const isVip = computed(() => {
247+
const level = statusStore.usersMetadata.level
248+
return level === 10 || level === 20
249+
})
220250
221-
const expireDate = new Date(subExpireAt[2])
222-
const today = new Date()
223-
// 计算两个日期之间的差值（毫秒）
224-
const diffTime = expireDate.getTime() - today.getTime()
225-
// 转换为天数并向上取整
226-
return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
251+
const vipExpireDate = computed(() => {
252+
const metadata = statusStore.usersMetadata as any
253+
if (!metadata || !metadata.sub_expire_at || !metadata.level) return ''
254+
return metadata.sub_expire_at[metadata.level] || ''
255+
})
256+
257+
const vipLevelName = computed(() => {
258+
return (statusStore.usersMetadata as any).user_level_str || '会员'
227259
})
228260
229261
const copyID = () => {
@@ -254,6 +286,16 @@
254286
})
255287
if (res) window.open('https://bizyair.cn', '_blank')
256288
}
289+
290+
const handleRenewClick = async () => {
291+
const res = await useConfirm({
292+
title: '提示',
293+
content: '插件不再支持支付功能，请前往 bizyair.cn 操作',
294+
cancelText: '取消',
295+
continueText: '前往 bizyair.cn'
296+
})
297+
if (res) window.open('https://bizyair.cn', '_blank')
298+
}
257299
</script>
258300
<style scoped lang="less">
259301
p,
@@ -276,6 +318,7 @@
276318
border-radius: 12px;
277319
padding: 32px 16px 0 16px;
278320
}
321+
279322
.avatar-wrapper {
280323
position: relative;
281324
}
@@ -293,6 +336,15 @@
293336
z-index: 2;
294337
}
295338
339+
.vip-corner-badge {
340+
position: absolute;
341+
width: 20px;
342+
height: 20px;
343+
bottom: 0;
344+
right: 0;
345+
z-index: 2;
346+
}
347+
296348
.crown-icon {
297349
width: 100%;
298350
height: 100%;
@@ -310,6 +362,7 @@
310362
.info {
311363
flex: 1;
312364
cursor: pointer;
365+
313366
p {
314367
white-space: nowrap;
315368
overflow: hidden;
@@ -330,6 +383,18 @@
330383
color: #ffdb07;
331384
}
332385
386+
.vip-badge {
387+
display: inline-block;
388+
margin-left: 4px;
389+
padding: 2px 8px;
390+
font-size: 12px;
391+
font-weight: 500;
392+
background: linear-gradient(90deg, #fbbf24, #eab308);
393+
color: #000;
394+
border-radius: 4px;
395+
line-height: 1.4;
396+
}
397+
333398
.user-title {
334399
font-size: 12px;
335400
line-height: 22px;
@@ -338,6 +403,7 @@
338403
display: flex;
339404
align-items: center;
340405
gap: 6px;
406+
341407
span {
342408
font-size: 10px;
343409
}
@@ -360,6 +426,7 @@
360426
user-select: none;
361427
border: 1px solid #2c2c32;
362428
box-sizing: content-box;
429+
363430
&:hover {
364431
background-color: #1f2937;
365432
border: 1px solid #334155;
@@ -381,6 +448,12 @@
381448
box-sizing: content-box;
382449
background: linear-gradient(105deg, #fff3e2 0.27%, #fceacf 33.67%, #ffdba6 67.07%);
383450
451+
&.vip-connected {
452+
margin-top: 0;
453+
border-top-left-radius: 0;
454+
border-top-right-radius: 0;
455+
}
456+
384457
.coin-icon {
385458
width: 24px;
386459
height: 24px;
@@ -473,28 +546,33 @@
473546
}
474547
}
475548
}
549+
476550
.handles {
477551
display: flex;
478552
padding-top: 24px;
479553
flex-wrap: wrap;
480554
width: 100%;
481555
box-sizing: border-box;
556+
482557
.handles-item {
483558
width: 50%;
484559
box-sizing: border-box;
485560
padding: 6px;
486561
cursor: pointer;
487562
transition: all 0.3s;
488563
user-select: none;
564+
489565
&:hover {
490566
background-color: rgba(124, 58, 237, 0.2);
491567
}
492568
}
569+
493570
.icon {
494571
display: block;
495572
width: 16px;
496573
margin: 0 auto;
497574
}
575+
498576
.word {
499577
display: block;
500578
width: 100%;
@@ -503,4 +581,66 @@
503581
// margin-top: 4px;
504582
}
505583
}
584+
585+
/* VIP会员卡片样式 */
586+
.vip-membership-card {
587+
margin-top: 16px;
588+
padding: 14px 16px;
589+
background: #ffd18e;
590+
border-top-left-radius: 8px;
591+
border-top-right-radius: 8px;
592+
border-bottom-left-radius: 0;
593+
border-bottom-right-radius: 0;
594+
}
595+
596+
.vip-membership-content {
597+
display: flex;
598+
justify-content: space-between;
599+
align-items: center;
600+
}
601+
602+
.vip-membership-info {
603+
display: flex;
604+
flex-direction: column;
605+
gap: 8px;
606+
}
607+
608+
.vip-membership-title {
609+
display: flex;
610+
align-items: center;
611+
gap: 6px;
612+
font-size: 16px;
613+
font-weight: normal;
614+
color: #1f2937;
615+
616+
.vip-crown-icon {
617+
width: 18px;
618+
height: 18px;
619+
}
620+
}
621+
622+
.vip-renew-button {
623+
height: 32px;
624+
padding: 10px;
625+
padding-top: 4px;
626+
font-size: inherit;
627+
font-weight: normal;
628+
color: #fff;
629+
background: linear-gradient(270deg, #ff740a 0%, #ffb200 100%);
630+
border: none;
631+
border-radius: 40px;
632+
cursor: pointer;
633+
text-align: center;
634+
box-sizing: border-box;
635+
flex-shrink: 0;
636+
637+
&:hover {
638+
background: linear-gradient(270deg, #ffb200 0%, #ffb200 100%);
639+
}
640+
}
641+
642+
.vip-membership-expire {
643+
font-size: 12px;
644+
color: #6b7280;
645+
}
506646
</style>

‎version.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
1.2.68
1+
1.2.69

0 commit comments

Comments
 (0)