我的

pages/my/my.vue

@@ -21,7 +21,7 @@
 
 			</view>
 		</view>
-		<image :src="backImage" mode="" style="width: 100%;height: 738rpx;position: absolute;"></image>
+		<image :src="backImage" mode="" style="width: 100%;height: 771rpx;position: absolute;"></image>
 		<view class="Personnel">
 			<view class="dis a-c  Personnel-info">
 				<view class="Personnel-img" @click="updateAvatar">
@@ -37,10 +37,55 @@
 						<text>工号：{{ userInfo.sysUser.mobile }}</text>
 					</view>
 				</view>
+			</view>
+			<!-- 角色选项卡切换 -->
+			<view class="customTab dis a-c j-s" :style="{ backgroundImage: `url(${superiorIdentityData.tabline})` }">
+				<view class="tab-item" :class="index==customTabIndex?'tab-item-active':''"
+					v-for="(item,index) in roleIdentityList" :key="index" @click="customTabChange(item,index)">
+					{{item.gradeName}}
+				</view>
+			</view>
+			<!-- 角色名片 -->
+			<view class="characterCard mt-3 dis a-c j-s"
+				:style="{ backgroundImage: `url(${superiorIdentityData.roleCard})` }">
+				<!-- 角色状态标签 -->
+				<view class="statusTag" :style="{background:superiorIdentityData.statusTagbackColor}">
+					{{superiorIdentityData.lockingState==0?'未解锁':superiorIdentityData.lockingState==1?'已解锁':'已过期'}}
+				</view>
+				<!-- icon -->
+				<image class="gradeIcon" :src="gradeIconstyle" mode=""></image>
+				<view class="dis f-c content">
+					<!-- name -->
+					<view class="title dis mb-1" :style="{color:superiorIdentityData.titleColor}">
+						<text class="font-weight">{{superiorIdentityData.gradeName}}会员</text>
+						<u-icon name="arrow-right" :color="superiorIdentityData.titleColor" size="36"></u-icon>
+						<text class="expiryTime" :style="{color:superiorIdentityData.textColor}">2025.10.23过期</text>
+					</view>
+					<!-- 进度条 -->
+					<view class="progressBar">
+						<text
+							:style="{color:superiorIdentityData.textColor}">{{superiorIdentityData.proportional}}/100</text>
+						<view class="line" :style="{background:superiorIdentityData.progressBarlineColor}">
+							<view class="jindu"
+								:style="{width: `${ Number(superiorIdentityData.proportional)}%`,background:superiorIdentityData.progressBarColor}">
+							</view>
+						</view>
+					</view>
+					<!-- 提示信息 -->
+					<view class="comment mt-2 dis a-c ">
+						<image class="commenticon" src="/static/image/my/grade/crown.png" mode=""></image>
+						<text class="ml-1" :style="{color:superiorIdentityData.textColor}">
+							{{superiorIdentityData.lockingState==0?'完成任务即可升级为该会员等级':superiorIdentityData.lockingState==1?'在期限内完成任务，可继续保持该会员等级身份':`截止2025.02.28完成任务,可重新成为改为该会员等级`}}
+						</text>
+					</view>
+				</view>
+				<view class="btn" :style="{color:superiorIdentityData.textColor}">
+					{{superiorIdentityData.lockingState==1?'去保级':'去升级'}}
+				</view>
 
 			</view>
 			<!-- 权益 -->
-			<view class="benefits mt-3 dis f-c">
+			<!-- <view class="benefits mt-3 dis f-c">
 				<view class="dis j-s a-c header">
 					<view class="dis title">
 						<image :src="backLogo" mode=""></image>
@@ -79,20 +124,17 @@
 						<text v-else>每单保费的佣金比例</text>
 					</view>
 				</view>
-
-			</view>
+			</view> -->
 			<!-- 身份解锁进度条 -->
-			<view class="multiIdentityUnlockProgress  dis ">
+			<!-- <view class="multiIdentityUnlockProgress  dis ">
 				<view class="step dis f-c" v-for="(item,index) in filteredBackLogoList" :key="index"
 					v-if="item.grade!=1">
 					<view class="dis a-c">
-						<!-- 进度指示条 -->
 						<view class="progressBar">
 							<view class="sche-bg-jindu"
 								:style="{width:progressBarClass(item),borderRadius:borderRadiusClass(item)}">
 							</view>
 						</view>
-						<!-- 身份显示 -->
 						<view class=" dis a-c j-c " :class="roleStatusClass(item)">
 							<image class="rolelogo" :src="getRoleImage(item)" mode="">
 							</image>
@@ -100,7 +142,7 @@
 					</view>
 					<text class="title dis j-end">{{item.gradeName}}</text>
 				</view>
-			</view>
+			</view> -->
 			<!-- 身份解锁进度条 -->
 			<view class="withdrawal-box">
 				<view class="dis a-c j-c  withdrawal-title">
@@ -111,55 +153,44 @@
 					<text>¥</text>
 					<text>{{ getApplication.cashFee || 0 }} </text>
 				</view>
-				<view class="withdrawal-income dis">
-					<view style="border-right: 1px solid #C5E7FF;">
-						<text @click="incomeClick">佣金总收入金额
-							<image style="display: inline-block; width: 9px;height:9px;vertical-align: -1px;"
-								src="/static/icon/right.png" mode=""></image>
-						</text>
-						<text>¥{{ getApplication.extractFee || 0 }} </text>
+				<view class="withdrawal-income dis f-wrap">
+					<view class="dis f-c a-c">
+						<view class="dis">
+							<text @click="incomeClick">佣金总收入</text>
+							<u-icon name="arrow-right" color="#666" size="18"></u-icon>
+						</view>
+						<text class="sum">¥{{ getApplication.extractFee || 0 }} </text>
 					</view>
-					<view>
-						<text>已经提现金额</text>
-						<text>¥{{ getApplication.historyFee || 0 }}</text>
+					<view class="dis f-c a-c">
+						<view class="dis ">
+							<text>已经提现</text>
+							<u-icon name="arrow-right" color="#666" size="18"></u-icon>
+						</view>
+						<text class="sum">¥{{ getApplication.historyFee || 0 }}</text>
 					</view>
-				</view>
-				<view class="withdrawal-fun" @click="toWithdraw">提现</view>
-			</view>
-		</view>
-		<!-- <view class=" dis a-c j-s" style="margin: 0px 16px;">
-			<view class="withdrawal-record">
-				<i></i>
-				<text>提现记录</text>
-			</view>
-			<view class="search" @click="searchPopup">
-				<text>自定义时间</text>
-				<i></i>
-			</view>
-		</view> -->
-		<!-- <view class="withdrawal-flow">
-			<view class="withdrawal-card" v-for="(val,index) in withdrawalData" :key="index"
-				@click="viewWithdrawal(val)">
-				<view class="dis j-s">
-					<view>
-						<view style="line-height: 18px;">提现</view>
-						<text style="font-size: 10px;color: #999999;">{{ val.createTime }}</text>
+					<view class="dis f-c a-c">
+						<view class="dis ">
+							<text>已冻结</text>
+							<u-icon name="arrow-right" color="#666" size="18"></u-icon>
+						</view>
+						<text class="sum">¥{{ getApplication.historyFee || 0 }}</text>
 					</view>
-					<view class="dis a-c">
-						<view style="text-align: right;">
-							<view style="line-height: 18px;">-{{ val.cashFee }}</view>
-							<text class="withdrawal-status" v-if="val.status == '0'"
-								style="background: #EAF0FF;color: #2D6DFF;">提现中</text>
-							<text class="withdrawal-status" v-if="val.status == '1'"
-								style="background: #E3FBE7;color: #18B63B;">已提现</text>
-							<text class="withdrawal-status" v-if="val.status == '2'"
-								style="background: #FFECEC ;color: #F74141;">提现失败</text>
+					<view class="dis f-c a-c">
+						<view class="dis ">
+							<text>已过期</text>
+							<u-icon name="arrow-right" color="#666" size="18"></u-icon>
 						</view>
-						<image src="/static/icon/you.png" mode=""></image>
+						<text class="sum">¥{{ getApplication.historyFee || 0 }}</text>
 					</view>
 				</view>
+				<view class="withdrawal-fun" @click="toWithdraw">提现</view>
 			</view>
-		</view> -->
+			<view class="cell-item mt-2">
+				<view class="item">
+
+				</view>
+			</view>
+		</view>
 		<my-date-picker ref="datePicker" @confirmPickDate="confirmPickDate" />
 		<u-popup v-model="ShowModalCode" mode="center" border-radius="15">
 			<view style="width: 323px;" id="pdfContentsDiv">
@@ -212,6 +243,8 @@
 		},
 		data() {
 			return {
+
+				customTabIndex: 0,
 				updateAvatarShow: false, //头像工具
 				Avatarlist: [{
 					text: '点赞',
@@ -248,38 +281,61 @@
 				//身份图片list
 				gradeimageList: [{
 						grade: 1,
-						backImageurl: "/static/image/my/grade1.png", //身份背景图
+						backImageurl: "/static/image/my/grade/gradeback1.png", //身份背景图
 						logourl: "/static/image/my/benefits/active1.png", //身份logo
-						isUnlockedurl: '/static/image/my/benefits/isUnlocked.png', //身份未解锁
-						waitingToUnlockurl: '/static/image/my/benefits/waitingToUnlock1.png', //身份待解锁
-						isLockedurl: '/static/image/my/benefits/isLocked2.png', //身份锁定
-
+						lockedUrl: '/static/image/my/grade/locked1.png', //已解锁
+						tabline: "/static/image/my/grade/tabline1.png", //tab切换图
+						roleCard: "/static/image/my/grade/roleCard1.png", //card卡片图
+						statusTagbackColor: "linear-gradient( 80deg, #FFC525 0%, #FFE16D 100%)", //状态背景色
+						titleColor: "#FF6D20", //标题颜色
+						progressBarColor: "#FFD032", //进度条颜色
+						progressBarlineColor: "#FFD032", //进度条背景色
+						textColor: "#FF790C", //其他文字颜色
 					},
 					{
 						grade: 2,
-						backImageurl: "/static/image/my/grade2.png",
+						backImageurl: "/static/image/my/grade/gradeback2.png",
 						logourl: "/static/image/my/benefits/active2.png",
-						isUnlockedurl: '/static/image/my/benefits/isUnlocked.png',
-						waitingToUnlockurl: '/static/image/my/benefits/waitingToUnlock2.png',
-						isLockedurl: '/static/image/my/benefits/isLocked2.png',
-
+						unlockedUrl: '/static/image/my/grade/unlocked.png', //未解锁
+						lockedUrl: '/static/image/my/grade/locked2.png', //已解锁
+						expiredUrl: '/static/image/my/grade/expired2.png', //已锁定
+						tabline: "/static/image/my/grade/tabline2.png", //tab切换图
+						roleCard: "/static/image/my/grade/roleCard2.png",
+						statusTagbackColor: "linear-gradient( 80deg, #A87CFF 0%, #CCBFFF 100%)", //状态背景色
+						titleColor: "#632FFE", //标题颜色
+						progressBarColor: "#9A83FF", //进度条颜色
+						progressBarlineColor: "linear-gradient( 90deg, #FFFFFF 0%, #F2EBFF 100%)", //进度条背景色
+						textColor: "#6B41F1", //其他文字颜色
 					},
 					{
 						grade: 3,
-						backImageurl: "/static/image/my/grade3.png",
+						backImageurl: "/static/image/my/grade/gradeback3.png",
 						logourl: "/static/image/my/benefits/active3.png",
-						isUnlockedurl: '/static/image/my/benefits/isUnlocked.png',
-						waitingToUnlockurl: '/static/image/my/benefits/waitingToUnlock3.png',
-						isLockedurl: '/static/image/my/benefits/isLocked3.png',
-
+						unlockedUrl: '/static/image/my/grade/unlocked.png', //未解锁
+						lockedUrl: '/static/image/my/grade/locked3.png', //已解锁
+						expiredUrl: '/static/image/my/grade/expired3.png', //已锁定
+						tabline: "/static/image/my/grade/tabline3.png", //tab切换图
+						roleCard: "/static/image/my/grade/roleCard3.png",
+						statusTagbackColor: "linear-gradient( 80deg, #3AB4FF 0%, #7DCCFF 100%)", //状态背景色
+						titleColor: "#0963D9", //标题颜色
+						progressBarColor: "#2B99FF", //进度条颜色
+						progressBarlineColor: "linear-gradient( 90deg, #FFFFFF 0%, #D1F6FF 100%)", //进度条背景色
+						textColor: "#1766E4", //其他文字颜色
 					},
 					{
 						grade: 4,
-						backImageurl: "/static/image/my/grade4.png",
+						backImageurl: "/static/image/my/grade/gradeback4.png",
 						logourl: "/static/image/my/benefits/active4.png",
-						isUnlockedurl: '/static/image/my/benefits/isUnlocked.png',
-						waitingToUnlockurl: '/static/image/my/benefits/waitingToUnlock4.png',
-						isLockedurl: '/static/image/my/benefits/isLocked4.png',
+						unlockedUrl: '/static/image/my/grade/unlocked.png', //未解锁
+						lockedUrl: '/static/image/my/grade/locked4.png', //已解锁
+						expiredUrl: '/static/image/my/grade/expired4.png', //已锁定
+						tabline: "/static/image/my/grade/tabline4.png", //tab切换图
+						roleCard: "/static/image/my/grade/roleCard4.png",
+						statusTagbackColor: "linear-gradient( 80deg, #5FCAFC 0%, #84D0FF 100%)", //状态背景色
+						titleColor: "#004385", //标题颜色
+						progressBarColor: "#70CEFF", //进度条颜色
+						progressBarlineColor: "linear-gradient( 90deg, #FFFFFF 0%, #D1F6FF 100%)", //进度条背景色
+						textColor: "#0066AA", //其他文字颜色
 					}
 				],
 				superiorIdentityData: {},
@@ -302,8 +358,11 @@
 			filteredBackLogoList() {
 				return this.roleIdentityList.filter(item => item.grade != 1)
 			},
-			//获取上级
-
+			gradeIconstyle() {
+				return this.superiorIdentityData.lockingState == 0 ? this.superiorIdentityData.unlockedUrl :
+					this.superiorIdentityData.lockingState == 1 ?
+					this.superiorIdentityData.lockedUrl : this.superiorIdentityData.expiredUrl
+			}
 
 		},
 		async onLoad() {
@@ -360,6 +419,14 @@
 		},
 		methods: {
 			...mapMutations(['emptyUserInfo']),
+			//角色tab切换
+			customTabChange(item, index) {
+				this.superiorIdentityData = item;
+				this.backImage = this.superiorIdentityData.backImageurl; //切换背景
+				this.customTabIndex = index;
+			},
+
+			//获取角色列表
 			async queryIdentityInformation() {
 				let res = await this.$http.get('/newAppPartner/queryIdentityInformation'); //获取各级身份
 				if (res.code == 200) {
@@ -371,13 +438,8 @@
 						}; // 合并两个对象
 					});
 					this.roleIdentityList = merged;
-					const isLocked = this.roleIdentityList[0].lockingState; //获取最低身份锁定状态
-					console.log(isLocked);
-					let grade = this.userInfo.sysUser.grade == 1 ? this.userInfo.sysUser
-						.grade : this.userInfo.sysUser.grade == 4 && isLocked == 2 ? this.userInfo.sysUser.grade : this
-						.userInfo.sysUser.grade - 1;
-					this.superiorIdentityData = this.roleIdentityList.find(item => item.grade == grade)
-					console.log(this.superiorIdentityData);
+					this.superiorIdentityData = this.roleIdentityList.find(item => item.grade == this.userInfo.sysUser
+						.grade)
 				} else {
 					uni.showToast({
 						title: res.msg,
@@ -385,6 +447,7 @@
 					})
 				}
 			},
+
 			//申请解锁
 			async requestUnlock() {
 				console.log(this.superiorIdentityData);
@@ -986,13 +1049,13 @@
 			margin: 10px 0;
 			background: rgba(240, 248, 255, 0.5);
 			border-radius: 2px 2px 2px 2px;
-			padding: 10px;
+			padding: 20rpx 20rpx 0;
 
-			view {
+			>view {
 				width: 50%;
-				text-align: center;
+				margin-bottom: 20rpx;
 
-				text:first-child {
+				text {
 					font-weight: 400;
 					font-size: 10px;
 					color: #666666;
@@ -1000,7 +1063,7 @@
 
 				}
 
-				text:last-child {
+				.sum {
 					margin-top: 3px;
 					font-weight: 700;
 					font-size: 17px;
@@ -1022,6 +1085,14 @@
 		}
 	}
 
+	.cell-item {
+		height: 270rpx;
+		background: #FFFFFF;
+		border-radius: 10rpx 10rpx 10rpx 10rpx;
+		padding: 0 30rpx;
+		box-sizing: border-box;
+	}
+
 	.withdrawal-record {
 
 		font-weight: 700;
@@ -1273,4 +1344,123 @@
 
 		}
 	}
+
+	//tab切换
+	.customTab {
+		width: 100%;
+		height: 85rpx;
+		margin-top: 30rpx;
+		background-size: 100% 100%;
+		padding: 0 40rpx;
+		box-sizing: border-box;
+
+		.tab-item {
+			padding: 23rpx 0;
+			box-sizing: border-box;
+			font-size: 28rpx;
+			color: #999;
+		}
+
+		.tab-item-active {
+			font-size: 32rpx;
+			color: #333;
+			font-weight: bold;
+		}
+	}
+
+	// 角色名片
+	.characterCard {
+		position: relative;
+		background-size: 100% 100%;
+		padding: 58rpx 48rpx 25rpx 30rpx;
+		box-sizing: border-box;
+		border-radius: 20rpx;
+
+		.statusTag {
+			position: absolute;
+			top: 0;
+			left: 0;
+			padding: 5rpx 20rpx;
+			box-sizing: border-box;
+			border-radius: 20rpx 0rpx 20rpx 0rpx;
+			font-size: 20rpx;
+			color: #fff;
+			font-weight: bold;
+		}
+
+		.gradeIcon {
+			width: 140rpx;
+			height: 168rpx;
+			position: absolute;
+			top: 0;
+			right: 40rpx;
+		}
+
+		.content {
+			flex: 1;
+
+			.title {
+				font-size: 36rpx;
+
+				.font-weight {
+					line-height: 1.5;
+				}
+
+				.expiryTime {
+					font-size: 20rpx;
+					margin-left: auto;
+					margin-top: 16rpx;
+				}
+			}
+
+			.progressBar {
+				text {
+					font-size: 26rpx;
+				}
+
+				.line {
+					position: relative;
+					width: 100%;
+					height: 8rpx;
+					background: linear-gradient(90deg, #FFFFFF 0%, #D1F6FF 100%);
+					border-radius: 100px;
+					overflow: hidden;
+
+					.jindu {
+						position: absolute;
+						left: 0;
+						top: 0;
+						height: 8rpx;
+						background: #70CEFF;
+						border-radius: 100px;
+					}
+				}
+
+			}
+
+			.comment {
+				.commenticon {
+					width: 60rpx;
+					height: 60rpx;
+				}
+
+				text {
+					font-size: 24rpx;
+					line-height: 1.4;
+					flex: 1;
+				}
+			}
+		}
+
+
+		.btn {
+			align-self: flex-end;
+			background: rgba(255, 255, 255, 0.8);
+			border-radius: 50rpx 50rpx 50rpx 50rpx;
+			margin-left: 45rpx;
+			font-size: 28rpx;
+			padding: 3rpx 20rpx;
+			box-sizing: border-box;
+		}
+	}
 </style>