720 lines
14 KiB
Vue
720 lines
14 KiB
Vue
<template>
|
||
<div class="wealth-level-page">
|
||
<!-- 顶部导航栏 -->
|
||
<div class="header">
|
||
<div class="back-btn" @click="goBack">
|
||
<i class="icon-back">‹</i>
|
||
</div>
|
||
<div class="title-section">
|
||
<h1 class="main-title">财富等级</h1>
|
||
<span class="sub-title">主播等级</span>
|
||
</div>
|
||
<div class="help-btn" @click="showHelp">
|
||
<i class="icon-help">?</i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 等级进度环形图 -->
|
||
<div class="level-progress-section">
|
||
<div class="progress-ring-container">
|
||
<!-- 等级标签 -->
|
||
<div class="level-labels">
|
||
<div
|
||
class="level-label"
|
||
v-for="(level, index) in levels"
|
||
:key="index"
|
||
:class="{ active: currentLevelIndex >= index }"
|
||
>
|
||
<span class="level-name">{{ level.name }}</span>
|
||
<div
|
||
class="level-dot"
|
||
:class="{ active: currentLevelIndex >= index }"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中心头像和信息 -->
|
||
<div class="center-info">
|
||
<div class="avatar">
|
||
<img :src="userAvatar" alt="用户头像" />
|
||
</div>
|
||
<div class="experience-info">
|
||
<div class="current-exp">
|
||
<span class="exp-number">{{ currentExp }}</span>
|
||
<span class="exp-label">当前经验</span>
|
||
</div>
|
||
<div class="next-level-exp">
|
||
<span class="exp-number">{{ nextLevelExp }}</span>
|
||
<span class="exp-label">距离下一个等级</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 进度弧线 -->
|
||
<svg class="progress-ring" viewBox="0 0 200 200">
|
||
<circle
|
||
class="progress-ring-bg"
|
||
cx="100"
|
||
cy="100"
|
||
r="85"
|
||
fill="none"
|
||
stroke="#2a2a2a"
|
||
stroke-width="4"
|
||
/>
|
||
<circle
|
||
class="progress-ring-progress"
|
||
cx="100"
|
||
cy="100"
|
||
r="85"
|
||
fill="none"
|
||
stroke="#00ff88"
|
||
stroke-width="4"
|
||
stroke-linecap="round"
|
||
:stroke-dasharray="circumference"
|
||
:stroke-dashoffset="progressOffset"
|
||
transform="rotate(-90 100 100)"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 当前等级卡片 -->
|
||
<div class="current-level-card">
|
||
<div class="level-badge">
|
||
<img :src="currentLevel.badge" alt="等级徽章" />
|
||
</div>
|
||
<div class="level-info">
|
||
<h2 class="level-title">{{ currentLevel.name }}</h2>
|
||
<p class="level-description">{{ currentLevel.description }}</p>
|
||
<div class="level-progress-bar">
|
||
<div class="progress-track">
|
||
<div
|
||
class="progress-fill"
|
||
:style="{ width: levelProgress + '%' }"
|
||
></div>
|
||
</div>
|
||
<div class="progress-labels">
|
||
<span>Lv.{{ currentLevel.level }}</span>
|
||
<span>Lv.{{ currentLevel.level + 1 }}</span>
|
||
</div>
|
||
</div>
|
||
<p class="next-level-requirement">{{ nextLevelRequirement }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 每日奖励 -->
|
||
<div class="daily-rewards-section">
|
||
<h3 class="section-title">每日奖励</h3>
|
||
<div class="reward-item">
|
||
<div class="reward-icon">
|
||
<img src="/icons/coin.png" alt="金币" />
|
||
</div>
|
||
<div class="reward-info">
|
||
<p class="reward-title">段位达到富豪8</p>
|
||
<p class="reward-desc">可每日领取金币</p>
|
||
</div>
|
||
<button
|
||
class="claim-btn"
|
||
@click="claimDailyReward"
|
||
:disabled="dailyRewardClaimed"
|
||
>
|
||
{{ dailyRewardClaimed ? "已领取" : "立即领取" }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 等级需求及福利 -->
|
||
<div class="level-benefits-section">
|
||
<h3 class="section-title">等级需求及福利</h3>
|
||
<div class="benefits-grid">
|
||
<div
|
||
class="benefit-item"
|
||
v-for="(benefit, index) in levelBenefits"
|
||
:key="index"
|
||
>
|
||
<div class="benefit-icon">
|
||
<img :src="benefit.icon" alt="福利图标" />
|
||
</div>
|
||
<p class="benefit-value">{{ benefit.value }}</p>
|
||
<p class="benefit-desc">{{ benefit.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 财富特权 -->
|
||
<div class="wealth-privileges-section">
|
||
<h3 class="section-title">财富特权</h3>
|
||
<div class="privileges-grid">
|
||
<div
|
||
class="privilege-item"
|
||
v-for="(privilege, index) in wealthPrivileges"
|
||
:key="index"
|
||
>
|
||
<div class="privilege-icon">
|
||
<img :src="privilege.icon" alt="特权图标" />
|
||
</div>
|
||
<p class="privilege-name">{{ privilege.name }}</p>
|
||
<p class="privilege-level">{{ privilege.level }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "WealthLevelPage",
|
||
data() {
|
||
return {
|
||
// 用户信息
|
||
userAvatar: "",
|
||
currentExp: 1608,
|
||
nextLevelExp: 1608,
|
||
currentLevelIndex: 1,
|
||
dailyRewardClaimed: false,
|
||
|
||
// 等级配置
|
||
levels: [
|
||
{ name: "新人", value: 0 },
|
||
{ name: "富豪", value: 1000 },
|
||
{ name: "星爵", value: 5000 },
|
||
{ name: "星侯", value: 15000 },
|
||
{ name: "星王", value: 50000 },
|
||
],
|
||
|
||
// 当前等级信息
|
||
currentLevel: {
|
||
name: "星爵",
|
||
level: 1,
|
||
description: "进30天保段已成功",
|
||
badge: "",
|
||
requirement: 10000,
|
||
},
|
||
|
||
// 等级福利
|
||
levelBenefits: [
|
||
{
|
||
icon: "",
|
||
value: "100万",
|
||
description: "所需经验值",
|
||
},
|
||
{
|
||
icon: "",
|
||
value: "100万",
|
||
description: "保段经验值",
|
||
},
|
||
{
|
||
icon: "",
|
||
value: "100万",
|
||
description: "每日可领",
|
||
},
|
||
{
|
||
icon: "",
|
||
value: "吉普",
|
||
description: "专属座驾",
|
||
},
|
||
],
|
||
|
||
// 财富特权
|
||
wealthPrivileges: Array(12)
|
||
.fill()
|
||
.map((_, index) => ({
|
||
name: "吉普",
|
||
level: "富豪6解锁",
|
||
icon: "",
|
||
})),
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
// 计算圆形进度条
|
||
circumference() {
|
||
return 2 * Math.PI * 85;
|
||
},
|
||
|
||
progressOffset() {
|
||
const progress = this.levelProgress / 100;
|
||
return this.circumference - progress * this.circumference;
|
||
},
|
||
|
||
// 计算当前等级进度
|
||
levelProgress() {
|
||
const currentLevelExp = this.levels[this.currentLevelIndex].value;
|
||
const nextLevelExp =
|
||
this.levels[this.currentLevelIndex + 1]?.value ||
|
||
currentLevelExp + 10000;
|
||
const progress =
|
||
((this.currentExp - currentLevelExp) /
|
||
(nextLevelExp - currentLevelExp)) *
|
||
100;
|
||
return Math.min(Math.max(progress, 0), 100);
|
||
},
|
||
|
||
// 下一等级需求
|
||
nextLevelRequirement() {
|
||
const nextLevel = this.levels[this.currentLevelIndex + 1];
|
||
if (nextLevel) {
|
||
const remaining = nextLevel.value - this.currentExp;
|
||
return `距离下一个段位还差${remaining.toLocaleString()}经验`;
|
||
}
|
||
return "已达到最高等级";
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
// 返回上一页
|
||
goBack() {
|
||
this.$router.go(-1);
|
||
},
|
||
|
||
// 显示帮助
|
||
showHelp() {
|
||
this.$toast("帮助信息");
|
||
},
|
||
|
||
// 领取每日奖励
|
||
claimDailyReward() {
|
||
if (this.dailyRewardClaimed) return;
|
||
|
||
this.dailyRewardClaimed = true;
|
||
this.$toast("领取成功！");
|
||
|
||
// 这里可以调用API
|
||
this.apiClaimDailyReward();
|
||
},
|
||
|
||
// API调用示例
|
||
async apiClaimDailyReward() {
|
||
try {
|
||
// const response = await this.$api.claimDailyReward()
|
||
console.log("API: 领取每日奖励");
|
||
} catch (error) {
|
||
console.error("领取失败:", error);
|
||
this.dailyRewardClaimed = false;
|
||
}
|
||
},
|
||
|
||
// 获取用户等级数据
|
||
async fetchUserLevelData() {
|
||
try {
|
||
// const response = await this.$api.getUserLevel()
|
||
// this.currentExp = response.currentExp
|
||
// this.currentLevelIndex = response.levelIndex
|
||
console.log("API: 获取用户等级数据");
|
||
} catch (error) {
|
||
console.error("获取数据失败:", error);
|
||
}
|
||
},
|
||
},
|
||
|
||
mounted() {
|
||
this.fetchUserLevelData();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.wealth-level-page {
|
||
min-height: 100vh;
|
||
background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #f5f5f5 50%);
|
||
color: #fff;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
/* 顶部导航 */
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 44px 20px 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.back-btn,
|
||
.help-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.back-btn:hover,
|
||
.help-btn:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.icon-back {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.icon-help {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.title-section {
|
||
text-align: center;
|
||
}
|
||
|
||
.main-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin: 0 0 4px 0;
|
||
}
|
||
|
||
.sub-title {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
/* 等级进度环形图 */
|
||
.level-progress-section {
|
||
padding: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.progress-ring-container {
|
||
position: relative;
|
||
width: 280px;
|
||
height: 280px;
|
||
}
|
||
|
||
.level-labels {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 2;
|
||
}
|
||
|
||
.level-label {
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.level-label:nth-child(1) {
|
||
top: 10px;
|
||
left: 20px;
|
||
} /* 新人 */
|
||
.level-label:nth-child(2) {
|
||
top: 40px;
|
||
right: 10px;
|
||
} /* 富豪 */
|
||
.level-label:nth-child(3) {
|
||
bottom: 40px;
|
||
right: 10px;
|
||
} /* 星爵 */
|
||
.level-label:nth-child(4) {
|
||
bottom: 10px;
|
||
left: 20px;
|
||
} /* 星侯 */
|
||
.level-label:nth-child(5) {
|
||
top: 50%;
|
||
right: 0;
|
||
transform: translateY(-50%);
|
||
} /* 星王 */
|
||
|
||
.level-name {
|
||
margin-bottom: 4px;
|
||
color: #999;
|
||
}
|
||
|
||
.level-label.active .level-name {
|
||
color: #00ff88;
|
||
}
|
||
|
||
.level-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: #333;
|
||
border: 2px solid #555;
|
||
}
|
||
|
||
.level-dot.active {
|
||
background: #00ff88;
|
||
border-color: #00ff88;
|
||
}
|
||
|
||
.center-info {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
z-index: 3;
|
||
}
|
||
|
||
.avatar {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin: 0 auto 16px;
|
||
border: 3px solid #00ff88;
|
||
}
|
||
|
||
.avatar img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.experience-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 200px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.current-exp,
|
||
.next-level-exp {
|
||
text-align: center;
|
||
}
|
||
|
||
.exp-number {
|
||
display: block;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #00ff88;
|
||
}
|
||
|
||
.exp-label {
|
||
font-size: 10px;
|
||
color: #999;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.progress-ring {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.progress-ring-progress {
|
||
transition: stroke-dashoffset 0.5s ease;
|
||
}
|
||
|
||
/* 当前等级卡片 */
|
||
.current-level-card {
|
||
margin: 20px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.level-badge {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-right: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.level-badge img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.level-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.level-title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
margin: 0 0 4px 0;
|
||
color: #00ff88;
|
||
}
|
||
|
||
.level-description {
|
||
font-size: 12px;
|
||
color: #ccc;
|
||
margin: 0 0 12px 0;
|
||
}
|
||
|
||
.level-progress-bar {
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.progress-track {
|
||
height: 4px;
|
||
background: #333;
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #00ff88, #00ccff);
|
||
border-radius: 2px;
|
||
transition: width 0.5s ease;
|
||
}
|
||
|
||
.progress-labels {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 10px;
|
||
color: #999;
|
||
}
|
||
|
||
.next-level-requirement {
|
||
font-size: 11px;
|
||
color: #999;
|
||
margin: 8px 0 0 0;
|
||
}
|
||
|
||
/* 每日奖励和福利区域 */
|
||
.daily-rewards-section,
|
||
.level-benefits-section,
|
||
.wealth-privileges-section {
|
||
background: #fff;
|
||
color: #333;
|
||
padding: 20px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin: 0 0 16px 0;
|
||
color: #333;
|
||
}
|
||
|
||
.reward-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16px;
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.reward-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.reward-icon img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.reward-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.reward-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
margin: 0 0 2px 0;
|
||
}
|
||
|
||
.reward-desc {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin: 0;
|
||
}
|
||
|
||
.claim-btn {
|
||
background: #00ff88;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 20px;
|
||
padding: 8px 16px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.claim-btn:hover:not(:disabled) {
|
||
background: #00e67a;
|
||
}
|
||
|
||
.claim-btn:disabled {
|
||
background: #ccc;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 福利网格 */
|
||
.benefits-grid,
|
||
.privileges-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.benefit-item,
|
||
.privilege-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 12px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.benefit-icon,
|
||
.privilege-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.benefit-icon img,
|
||
.privilege-icon img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.benefit-value,
|
||
.privilege-name {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
margin: 0 0 2px 0;
|
||
color: #333;
|
||
}
|
||
|
||
.benefit-desc,
|
||
.privilege-level {
|
||
font-size: 10px;
|
||
color: #666;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 375px) {
|
||
.progress-ring-container {
|
||
width: 240px;
|
||
height: 240px;
|
||
}
|
||
|
||
.experience-info {
|
||
width: 160px;
|
||
}
|
||
|
||
.benefits-grid,
|
||
.privileges-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
</style>
|