partnerApp/pages/my/benefits.vue

<template>
	<view class="page">
		<view class="header dis a-end j-s mb-2">
			<view class="dis a-c ">
				<image :src="backLogo" mode=""></image>
				<view class="dis a-c  title ml-3">
					<!-- <text>我的佣金比例</text> -->
					<text>{{gradeText}}</text>
				</view>
			</view>
			<!-- <view class="ratio dis a-end " @click="ratiodetail">
				<text class="mr-1">{{info.totalRate}}%</text>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view> -->
		</view>
		<view class="wrap ">
			<view class="tabs dis a-end">
				<view v-for="(item, index) in tabList" :key="index" class="tab dis a-c j-c" :class="{
		    active: activeTab === index,
		    tab1: activeTab !== index,
		    left: activeTab === 0,
		    right: activeTab === 1
		  }" @click="handleTab(index)">
					<view class="tabtitle">
						<image v-if="activeTab==index" src="/static/image/Vector 22.png" mode=""></image>
						<view class="">
							{{ item.label }}
						</view>
					</view>
				</view>
			</view>

			<view class="content-container">
				<view class="content-wrap contentwrap1 dis f-c a-c" v-show="activeTab === 0">
					<text class="title">- 成为{{gradeText}}已解锁的权益 -</text>
					<template v-if="this.grade==1">
						<view class="benefits dis f-c ">
							<text>发展管理人</text>
							<text>邀请管理人加入，获得管理人团队车险订单0.1%的收益</text>
						</view>
						<view class="benefits dis f-c"
							style="background-image: url('/static/image/my/benefits/benefits-back3.png')">
							<text>职级保护</text>
							<text>创始人职级无降级考核，同时其他职级不可晋升创始人，保护创始人专心做团队扩张。</text>
						</view>
					</template>
					<template v-if="this.grade==2">
						<view class="benefits dis f-c "
							style="background-image: url('/static/image/my/benefits/benefits-back3.png')">
							<text>发展合伙人</text>
							<text>邀请合伙人加入，获得合伙人团队车险订单0.1%-0.5%的收益</text>
						</view>
					</template>
					<template v-if="this.grade==3">
						<view class="benefits dis f-c "
							style="background-image: url('/static/image/my/benefits/benefits-back3.png')">
							<text>发展工作室</text>
							<text>邀请工作室加入，获得工作室团队车险订单0.1%-0.5%的收益</text>
						</view>
						<view class="benefits dis f-c ">
							<text>成为管理人</text>
							<text>可以晋升成为管理人，享受多重身份权益。</text>
						</view>
					</template>
					<template v-if="this.grade==4">
						<view class="benefits dis f-c ">
							<text>发展团队长</text>
							<text>邀请团队长加入，获得团队长所辖团队车险订单0.1%-0.5%的收益</text>
						</view>
						<view class="benefits dis f-c ">
							<text>成为合伙人</text>
							<text>可以晋升成为合伙人，享受多重身份权益。</text>
						</view>

					</template>
				</view>
				<view class="content-wrap contentwrap2 dis f-c a-c" v-show="activeTab === 1">
					<text class="title">- 成为{{gradeText}}的佣金权益 -</text>
					<view class="ratio-benefits dis f-c ">
						<text class="content">{{content}}</text>
					</view>

				</view>
			</view>
		</view>
		<!-- <uni-permission-view position="fixed" :genericText="`完成任务，解锁“合伙人”`" sum='250' days="25"
			padding="40rpx 40rpx 70rpx" :backimage="true" :imageStyle="{width:'102rpx',height:'100rpx'}">
		</uni-permission-view> -->
		<u-popup v-model="ratiodetailshow" mode="bottom" border-radius="20" :closeable="true">
			<view class=" dis a-c j-c " style="border-bottom: 1rpx solid #eee;padding: 24rpx;box-sizing: border-box;">
				<text class="font-weight" style="font-size: 36rpx;color: #333;">我的佣金比例</text>
			</view>
			<view class="p-3">
				<view class="ratioitem dis a-c j-s" v-for="(item,index) in info.data" :key="index">
					<text>{{item.gradeName}}</text>
					<text>{{item.commissionRate}}%</text>
				</view>

			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				grade: "",
				info: {},
				ratiodetailshow: false, //佣金比例弹窗
				ratioindex: 0, //佣金权益选中下标
				content: "创始人身份可以享受邀请的所有管理人发展的团队成员车险订单的0.1% \n例如：创始人A邀请了管理人B，管理人B所辖团队车险出单保费50000元，创始人A即可获得50000*0.1%=50元。",
				activeTab: 1,
				backLogo: '', //等级标志
				tabList: [{
						label: "身份权益"
					},
					{
						label: "佣金权益"
					}
				],
				ratioList: [{
						value: 1,
						title: "创始人",
						img: "/static/image/my/benefits/1.png",
						activeImg: "/static/image/my/benefits/active1.png",
						Text: "创始人身份可以享受邀请的所有管理人发展的团队成员车险订单的0.1% \n例如：创始人A邀请了管理人B，管理人B所辖团队车险出单保费50000元，创始人A即可获得50000*0.1%=50元。"
					},
					{
						value: 2,
						title: "管理人",
						img: "/static/image/my/benefits/2.png",
						activeImg: "/static/image/my/benefits/active2.png",
						Text: "管理人身份可以享受邀请的所有合伙人发展的团队成员车险订单的0.1%-0.5%；\n 管理人初始管理费用为0.5%，\n 当所辖合伙人发展工作室达到一定的数量则管理费用相对变化，比如所辖合伙人为0.3%时，管理人为0.3%。\n 例如：管理人A邀请了合伙人B，合伙人B所辖团队车险出单保费50000元，管理人A即可获得50000*0.1%=50元—50000*0.5%=250元。"
					},
					{
						value: 3,
						title: "合伙人",
						img: "/static/image/my/benefits/3.png",
						activeImg: "/static/image/my/benefits/active3.png",
						Text: "合伙人身份可以享受邀请的所有工作室发展的团队成员车险订单的0.1%-0.9%\n 合伙人初始管理费用为0.1%\n 邀请工作室2-3人，为0.2%\n 邀请工作室4-5人，为0.3% \n邀请工作室6-7人，为0.4%\n 邀请工作室8人及以上，为0.5%\n还可以获得工作室未达到0.5%管理费用的差额。\n  例如：合伙人A邀请了工作室B，工作室B所辖团队车险出单保费50000元，合伙人A即可获得50000*0.1%=50元—50000*0.9%=450元。"
					}, {
						value: 4,
						title: "工作室",
						img: "/static/image/my/benefits/4.png",
						activeImg: "/static/image/my/benefits/active4.png",
						Text: "工作室身份可以享受邀请的所有团队长发展的团队成员车险订单的0.1%-0.5%；\n 工作室初始管理费用为0.1%；\n 邀请团队长2-3人，为0.2%；\n 邀请团队长4-5人，为0.3%；\n 邀请团队长6-7人，为0.4%；\n 邀请团队长8人及以上，为0.5%； \n例如：工作室A邀请了团队长B，团队长B所辖团队车险出单保费50000元，工作室A即可获得50000*0.1%=50元—50000*0.5%=250元"
					}
				],
				ratioListInfo: {},
				//角色权益等级匹配列表
				backLogoList: [{
						grade: 1,
						url: "/static/image/my/benefits/active1.png"
					},
					{
						grade: 2,
						url: "/static/image/my/benefits/active2.png"
					},
					{
						grade: 3,
						url: "/static/image/my/benefits/active3.png"
					},
					{
						grade: 4,
						url: "/static/image/my/benefits/active4.png"
					}
				],
			}
		},
		computed: {
			...mapState(['userInfo', "userCheckInfo"]),
			//匹配等级title
			gradeText() {
				const gradeMap = {
					1: '创始人',
					2: '管理人',
					3: '合伙人',
					4: '工作室'
				}
				return gradeMap[this.grade] || ''
			}
		},
		async onShow() {
			this.backLogo = this.backLogoList.find(val => val.grade == this.grade).url; //获取对等身份logo标志
			this.ratioindex = this.userInfo.sysUser.grade - 1; //默认高亮显示对应等级
			let res = await this.$http.get('/partner/myCommissionRate');
			if (res.code == '200') {
				this.info = res.data;
			}
		},
		onLoad(options) {
			this.grade = options.grade;
			let text = this.ratioList.find(val => val.value == this.grade).Text;
			console.log(text);
			this.content = text;
		},
		methods: {
			//切换事件
			itemclick(item, index) {
				this.ratioindex = index;
				this.content = item.Text;
			},
			handleTab(index) {
				this.activeTab = index
			},
			//比例弹窗
			ratiodetail() {
				this.ratiodetailshow = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F7F7F7;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.header {
		height: 170rpx;
		background: #fff;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		background-image: url('/static/image/my/benefits/benefits-back1.png');
		background-size: 100% 100%;

		image {
			width: 96rpx;
			height: 110rpx;
		}

		.title {
			text:first-child {
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
			}

			// text:last-child {
			// 	font-size: 28rpx;
			// 	color: #666;
			// }
		}

		.ratio {
			text {
				font-size: 50rpx;
				color: #333;
				font-weight: bold;
				line-height: 0.8;
			}
		}
	}

	.wrap {
		position: relative;
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		border-radius: 0px 10rpx 10rpx 10rpx;

	}

	.tabs {
		display: flex;
		position: relative;
		overflow: hidden;
		border-radius: 10rpx 10rpx 0 0;
	}

	.tab {
		flex: 1;
		height: 90rpx;
		color: #999;
		font-size: 30rpx;
		position: relative;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;


		&.active {
			background: #fff;
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
			border-top-right-radius: 10rpx;
			border-top-left-radius: 10rpx;
		}


		&.left.active {
			border-top-right-radius: 0;

			&::after {
				content: "";
				position: absolute;
				top: 0;
				right: -50px;
				height: 100%;
				width: 50px;
				z-index: 2;
				background-color: #fff;
				clip-path: path("M0 0 C12.5 0 13.5 25 25 45 L0 50 Z");
			}
		}

		// 右侧标签的曲线
		&.right.active {
			border-top-left-radius: 0;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: -49px;
				height: 100%;
				width: 50px;
				z-index: 2;
				background-color: #fff;
				clip-path: path("M50 0 C37.5 0 37.5 25 25 45 L50 50 Z");
			}
		}
	}

	.tab1 {
		flex: 1;
		height: 90rpx;
		position: relative;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		background-color: #FAFAFA;
	}

	.tabtext {
		margin-left: 50rpx;
	}

	.tabtext1 {
		margin-right: 50rpx;
	}

	.content-container {
		position: relative;
		height: auto;
		background: #fff;
		;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.content-wrap {
		height: 100%;
		box-sizing: border-box;
		border: 4rpx solid #FFFFFF;
		border-top: none;

		.title {
			font-size: 26rpx;
			color: #333;
			margin-bottom: 30rpx;
		}

		.benefits {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-image: url('/static/image/my/benefits/benefits-back2.png');
			background-size: 100% 100%;
			margin-bottom: 30rpx;

			text:first-child {
				font-size: 30rpx;
				color: #333;
			}

			text:last-child {
				font-size: 22rpx;
				color: #666;
			}
		}

		.ratio-benefits {
			width: 100%;

			.item {
				font-size: 30rpx;
				color: #999;

				image {
					width: 72rpx;
					height: 82rpx;
				}
			}

			.active {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
		}
	}

	.contentwrap1 {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 30rpx 35rpx;
		box-sizing: border-box;
	}

	.contentwrap2 {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 30rpx 35rpx;
		box-sizing: border-box;
	}

	.tabtitle {
		position: relative;
		z-index: 1; // 父级降低层级

		// 文字部分
		&__text {
			position: relative; // 必须定位元素才能生效z-index
			z-index: 3; // 高于装饰图片
			display: inline-block;
		}

		// 装饰图片
		image {
			position: absolute;
			bottom: -14rpx; // 根据实际图片高度调整
			left: 50%;
			transform: translateX(-50%);
			z-index: 2; // 介于父级和文字之间
			width: 100%;
			height: 20rpx;
		}
	}

	.ratioitem {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 52rpx;
	}
</style>