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 f-c title ml-3">
					<text>{{gradeText}}</text>
					<text>我的佣金比例</text>
				</view>
			</view>
			<view class="ratio dis a-end " @click="ratiodetail">
				<text class="mr-1">0.8%</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">- 成为创始人已解锁的权益 -</text>
					<view class="benefits dis f-c ">
						<text>发展管理人</text>
						<text>邀请管理人加入，获得管理人车险订单0.1%的收益</text>
					</view>
					<view class="benefits dis f-c ">
						<text>成为管理人</text>
						<text>邀请合伙人，获得合伙人0.1-0.5的收益</text>
					</view>
					<view class="benefits dis f-c ">
						<text>成为合伙人</text>
						<text>邀请工作室，获得下辖团队出单业务的0.1-0.5的收益</text>
					</view>
					<view class="benefits dis f-c ">
						<text>成为工作室</text>
						<text>邀请团队，获得下辖团队出单业务的0.1-0.5的收益</text>
					</view>
				</view>
				<view class="content-wrap contentwrap2 dis f-c a-c" v-show="activeTab === 1">
					<text class="title">- 各类身份的佣金权益 -</text>
					<view class="ratio-benefits dis f-c ">
						<view class=" dis a-c j-s mb-5">
							<view class="item dis f-c a-c" v-for="(item,index) in ratioList"
								:class="{active:index==ratioindex}" :key="index" @click="itemclick(item,index)">
								<image :src="index==ratioindex?item.activeImg:item.img" mode=""></image>
								<text>{{item.title}}</text>
							</view>
						</view>
						<text class="content">{{content}}</text>
					</view>

				</view>
			</view>
		</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">
					<text>创始人</text>
					<text>0.1%</text>
				</view>
				<view class="ratioitem dis a-c j-s">
					<text>管理人</text>
					<text>0.1%</text>
				</view>
				<view class="ratioitem dis a-c j-s">
					<text>合伙人</text>
					<text>0.1%</text>
				</view>
				<view class="ratioitem dis a-c j-s">
					<text>工作室</text>
					<text>0.1%</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				ratiodetailshow: false, //佣金比例弹窗
				ratioindex: 0, //佣金权益选中下标
				content: "创始人身份可享受邀请的所有管理人发展的团队成员车险订单的0.1% \n例如：创始人邀请了管理人A，管理人A邀请了合伙人B，合伙人B邀请了工作室C，工作室C邀请了团队D，团队D内的成员出单保费1000元(除车船税)，管理人即可获得1000*0.1% = 1元",
				activeTab: 0,
				backLogo: '', //等级标志
				tabList: [{
						label: "身份权益"
					},
					{
						label: "佣金权益"
					}
				],
				ratioList: [{
						title: "创始人",
						img: "/static/image/my/benefits/1.png",
						activeImg: "/static/image/my/benefits/active1.png",
						Text: "创始人身份可享受邀请的所有管理人发展的团队成员车险订单的0.1% \n例如：创始人邀请了管理人A，管理人A邀请了合伙人B，合伙人B邀请了工作室C，工作室C邀请了团队D，团队D内的成员出单保费1000元(除车船税)，管理人即可获得1000*0.1% = 1元"
					},
					{
						title: "管理人",
						img: "/static/image/my/benefits/2.png",
						activeImg: "/static/image/my/benefits/active2.png",
						Text: "管理人身份可享受邀请的所有合伙人发展的团队成员车险订单的0.15-0.5%；\n 邀请合伙人1-3人，为0.1%，\n 邀请合伙人4-6人，为0.3，\n 邀请合伙人7人以上，为0.5\n 例如：管理人邀请了合伙人A，B，C，达成了0.1%的奖励；合伙人A邀请了工作室B，工作室B邀请了团队C，团队C内的成员出单保费1000元(除车船税)，管理人即可获得1000*0.1% = 1元"
					},
					{
						title: "合伙人",
						img: "/static/image/my/benefits/3.png",
						activeImg: "/static/image/my/benefits/active3.png",
						Text: "合伙人身份可享受邀请的所有工作室发展的团队成员车险订单的0.15-0.5%；\n 邀请工作室1-3人，为0.1%，\n 邀请工作室4-6人，为0.3，\n 邀请工作室7人以上，为0.5 \n例如：合伙人邀请了工作室A，B，C，达成了0.1%的奖励；合伙人A邀请了工作室B，工作室B邀请了团队C，团队C内的成员出单保费1000元(除车船税)，管理人即可获得1000*0.1% = 1元"
					}, {
						title: "工作室",
						img: "/static/image/my/benefits/4.png",
						activeImg: "/static/image/my/benefits/active4.png",
						Text: "工作室身份可享受邀请的所有发展的团队成员 车险订单的0.15-0.5%；\n 邀请团队1-3人，为0.1%，\n 邀请团队4-6人，为0.3，\n 邀请团队7人以上，为0.5 \n例如：工作室请了团队A，B，C，达成了0.1%的奖励；工作室邀请了团队A，团队A内的成员出单保费1000元(除车船税)，管理人即可获得1000*0.1% = 1元"
					}
				],
				//角色权益等级匹配列表
				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"]),
			gradeText() {
				const gradeMap = {
					1: '创始人',
					2: '管理人',
					3: '合伙人',
					4: '工作室'
				}
				return gradeMap[this.userInfo.sysUser.grade] || ''
			}
		},
		onShow() {
			this.backLogo = this.backLogoList.find(val => val.grade == this.userInfo.sysUser.grade).url;
			this.ratioindex = this.userInfo.sysUser.grade - 1;
		},
		onLoad() {

		},
		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>