mechanicStore-app/pages/myEdit/level.uvue

<template>
	<view class="page-container">
		<!-- 头部 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<u-icon name="arrow-left" size="24" color="#333"/>
			</view>
			<view class="header-title">
				我的等级
			</view>
			<view class="header-right"></view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 等级信息 -->
			<view class="level-info">
				<view class="growth-info">
					<text class="growth-value">60</text>
					<text class="growth-label">当前成长值</text>
				</view>
				
				<view class="level-icon">
					<view class="level-circle">
						<text class="level-text">V</text>
					</view>
					<text class="level-title">当前等级 V1</text>
				</view>
				
				<view class="daily-info">
					<text class="daily-value">-12</text>
					<text class="daily-label">每日成长值</text>
				</view>
			</view>
			
			<!-- 进度条 -->
			<view class="progress-section">
				<view class="progress-labels">
					<text>V1</text>
					<text>还差15成长值可升至V2</text>
					<text>V2</text>
				</view>
				<view class="progress-bar">
					<view class="progress-fill" :style="{ width: '60%' }"></view>
				</view>
				<view class="progress-values">
					<text>0</text>
					<text>65</text>
				</view>
			</view>
			
			<!-- 成长等级介绍 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">成长等级介绍</text>
				</view>
				<text class="section-desc">
					成长等级由有效成长值决定的，共分为30个等级，成长值越高，等级越高，享受的分成比例越多。
				</text>
			</view>
			
			<!-- 等级表格 -->
			<view class="level-table">
				<view class="table-header">
					<text>等级</text>
					<text>对应成长值</text>
					<text>对应收益比例</text>
					<u-icon name="info-o" size="20" color="#999"/>
				</view>
				
				<view class="table-row">
					<text>V1</text>
					<text>50</text>
					<text>1%</text>
				</view>
				
				<view class="table-row">
					<text>V2</text>
					<text>65</text>
					<text>2%</text>
				</view>
				
				<view class="table-row">
					<text>V3</text>
					<text>85</text>
					<text>3%</text>
				</view>
				
				<view class="table-row">
					<text>V4</text>
					<text>111</text>
					<text>4%</text>
				</view>
				
				<view class="table-row">
					<text>V5</text>
					<text>144</text>
					<text>5%</text>
				</view>
			</view>
			
			<!-- 表格底部说明 -->
			<text class="table-note">注：其余等级需解锁后查看</text>
			
			<!-- 什么是成长值 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">什么是成长值？</text>
					<u-icon name="info-o" size="20" color="#999"/>
				</view>
				<text class="section-desc">
					成长值是商户在小丁到家平台赚取实际金额（包含项目分成、佣金、车费、红包、加钟分成、用户评价、复购、转单、用户投诉）对相应比例算出的数值。成长值不能兑换，仅可用于成长等级提升。
				</text>
			</view>
			
			<!-- 如何获取成长值 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">如何获取成长值？</text>
				</view>
				<view class="growth-rules">
					<view class="rule-item">
						<text class="rule-number">1.</text>
						<text class="rule-text">使用小丁到家平台进行接单并完成，所获得的成长值均可计入有效成长值。</text>
					</view>
					<view class="rule-item">
						<text class="rule-number">2.</text>
						<text class="rule-text">若用户发生退款、取消订单、差评、投诉等行为，或识别到账户安全风险及其它违法行为，则扣除相应成长值，不计入有效成长值。</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	.page-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.header-left, .header-right {
		width: 60rpx;
	}
	
	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.content {
		padding: 30rpx;
	}
	
	.level-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.growth-info, .daily-info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.growth-value, .daily-value {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}
	
	.growth-label, .daily-label {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}
	
	.level-icon {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.level-circle {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
	}
	
	.level-text {
		font-size: 48rpx;
		font-weight: bold;
		color: #ffffff;
	}
	
	.level-title {
		font-size: 24rpx;
		color: #333;
		font-weight: bold;
	}
	
	.progress-section {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.progress-labels {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
	
	.progress-bar {
		width: 100%;
		height: 12rpx;
		background-color: #f0f0f0;
		border-radius: 6rpx;
		overflow: hidden;
		margin-bottom: 5rpx;
	}
	
	.progress-fill {
		height: 100%;
		background: linear-gradient(to right, #667eea, #764ba2);
		border-radius: 6rpx;
	}
	
	.progress-values {
		display: flex;
		justify-content: space-between;
		font-size: 22rpx;
		color: #999;
	}
	
	.section {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}
	
	.section-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}
	
	.section-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}
	
	.level-table {
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 15rpx;
	}
	
	.table-header, .table-row {
		display: flex;
		align-items: center;
		padding: 15rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.table-header {
		background-color: #f5f5f5;
		font-weight: bold;
	}
	
	.table-header text, .table-row text {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #333;
	}
	
	.table-note {
		font-size: 24rpx;
		color: #999;
		text-align: center;
		margin-bottom: 30rpx;
		display: block;
	}
	
	.growth-rules {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}
	
	.rule-item {
		display: flex;
		align-items: flex-start;
	}
	
	.rule-number {
		font-size: 26rpx;
		color: #ff6b35;
		font-weight: bold;
		margin-right: 10rpx;
	}
	
	.rule-text {
		flex: 1;
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}
</style>