partnerApp/pages/my/my.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 头部信息Start -->
		<view class="headers " :style="headerStyle">
			<view class="dis a-c j-c">
				<text>我的</text>
				<view class="headers-right">
					<view class="dis a-c">
						<image src="/static/home/customerService1.png" mode=""></image>
						<text>客服</text>
					</view>
				</view>

			</view>
		</view>
		<image :src="superiorIdentityData.backImageurl" 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">
					<image :src="avatar" class="avatar" mode=""></image>
					<image src="/static/image/my/updateAvatar.png" mode=""></image>
				</view>
				<view class="dis f-c ml-3">
					<view class="full-name">
						<text>{{ userInfo.sysUser.userName }}</text>
					</view>
					<view class=" dis f-c  digit">
						<text>手机号：{{userInfo.sysUser.mobile}}</text>
						<text>工号：{{ userInfo.sysUser.userId}}</text>
					</view>
				</view>
			</view>
			<!-- 角色选项卡切换 -->
			<view class="customTab dis a-c j-s" :style="{ backgroundImage: `url(${superiorIdentityData.tabline})`}">
				<view class="tab-item dis a-c j-c" :class="index==customTabIndex?'tab-item-active':''"
					:style="{width:`${100/roleIdentityList.length}%`}" v-for="(item,index) in roleIdentityList"
					:key="index" @click="customTabChange(item,index)">
					{{item.gradeName}}
				</view>
			</view>
			<!-- 角色名片 -->
			<view class="characterCard  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" @click="benefitsNavigate(superiorIdentityData.grade)">
					<!-- 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" v-if="superiorIdentityData.grade!='1'"
							:style="{color:superiorIdentityData.textColor}">{{superiorIdentityData.lockingState==0?'':superiorIdentityData.lockingState==1?`${superiorIdentityData.expiryDate}过期`:`已过期${superiorIdentityData.expiryDate || 0}天`}}
						</text>
					</view>
					<!-- 进度条 -->
					<view class="progressBar">
						<text
							:style="{color:superiorIdentityData.textColor}">{{superiorIdentityData.grade=='1'?'100':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}"
							v-if="superiorIdentityData.grade=='1'">
							永久有效
						</text>
						<text v-else class="ml-1" :style="{color:superiorIdentityData.textColor}">
							{{superiorIdentityData.lockingState==0?'完成任务即可升级为该会员等级':superiorIdentityData.lockingState==2?`截止${superiorIdentityData.unlockDeadline}完成任务,可重新成为改为该会员等级`: superiorIdentityData.lockingState==1 && superiorIdentityData.prompt?'当前职级本阶段无需保级':'在期限内完成任务，可继续保持该会员等级身份'}}
						</text>
					</view>
				</view>
				<view class="btn" :style="{color:superiorIdentityData.textColor}" @click="upgradeNow"
					v-if="superiorIdentityData.grade!='1' && !superiorIdentityData.prompt">
					{{superiorIdentityData.lockingState==1?'去保级':'去升级'}}
				</view>

			</view>
			<!-- 权益 -->
			<!-- <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>
						<text class="ml-1"
							v-if="superiorIdentityData.lockingState==0 && !superiorIdentityData.upgrade || superiorIdentityData.lockingState==2">解锁成为“{{superiorIdentityData.gradeName}}”获取更多权益</text>
						<text class="ml-1"
							v-if="superiorIdentityData.lockingState==0 && superiorIdentityData.upgrade">恭喜您已达成升级为{{superiorIdentityData.gradeName}}的条件</text>
						<text class="ml-1"
							v-if="superiorIdentityData.lockingState==1">恭喜您成为{{superiorIdentityData.gradeName}}</text>
					</view>
					<view
						v-if="superiorIdentityData.lockingState==0 && !superiorIdentityData.upgrade || superiorIdentityData.lockingState==2 && !superiorIdentityData.upgrade"
						class="tag" @click="upgradeTask">完成任务</view>
					<view
						v-if="superiorIdentityData.lockingState==0 && superiorIdentityData.upgrade && !superiorIdentityData.upgradeStatus || superiorIdentityData.lockingState==2 && superiorIdentityData.upgrade && !superiorIdentityData.upgradeStatus"
						class="tag" @click="requestUnlock">申请解锁</view>
					<view v-if="superiorIdentityData.upgradeStatus" class="tag">申请中</view>
					<view v-if="superiorIdentityData.lockingState==1" class="tag" @click="benefitsNavigate">查看权益</view>
				</view>
				<view class="content">
					<view class="item dis f-c ">
						<view class="dis a-c">
							<text>发展{{superiorIdentityData.gradeName}}团队</text>
							<u-icon name="arrow-right" color="#333" size="26"></u-icon>
						</view>
						<text>横向扩展团队，为收益添薪</text>
					</view>
					<view class="item dis f-c ml-3">
						<view class="dis a-c ">
							<text
								v-if="superiorIdentityData.lockingState==2">{{superiorIdentityData.lockCommission || 0}}元佣金</text>
							<text v-else>{{superiorIdentityData.ratio}}%</text>
							<u-icon name="arrow-right" color="#333" size="26"></u-icon>
						</view>
						<text v-if="superiorIdentityData.lockingState==2">{{superiorIdentityData.zeroDays}}天后清0</text>
						<text v-else>每单保费的佣金比例</text>
					</view>
				</view>
			</view> -->
			<!-- 身份解锁进度条 -->
			<!-- <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>
						</view>
					</view>
					<text class="title dis j-end">{{item.gradeName}}</text>
				</view>
			</view> -->
			<!-- 身份解锁进度条 -->
			<view class="withdrawal-box">
				<view class="dis a-c j-c  withdrawal-title">
					<text>可提现总金额</text>
				</view>
				<view class="dis a-s j-c withdrawal-sum">
					<text>¥</text>
					<text>{{ getApplication.cashFee || 0 }} </text>
				</view>
				<view class="withdrawal-income dis f-wrap">
					<view class="dis f-c a-c" @click="incomeClick">
						<view class="dis">
							<text>累计佣金</text>
							<u-icon name="arrow-right" color="#666" size="18"></u-icon>
						</view>
						<text class="sum">¥{{ getApplication.totalAmount || 0 }} </text>
					</view>
					<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 f-c a-c" @click="incomingTransferLog">
						<view class="dis ">
							<text>已转入佣金</text>
							<u-icon name="arrow-right" color="#666" size="18"></u-icon>
						</view>
						<text class="sum">¥{{ getApplication.transferAmount || 0 }}</text>
					</view>
					<view class="dis f-c a-c" @click="untransferredRecords">
						<view class="dis ">
							<text>未转入佣金</text>
							<u-icon name="arrow-right" color="#666" size="18"></u-icon>
						</view>
						<text class="sum">¥{{ getApplication.unreportedAmount || 0 }}</text>
					</view>
					<view class="dis f-c a-c" @click="accountFreezeRecord">
						<view class="dis ">
							<text>已冻结佣金</text>
							<u-icon name="arrow-right" color="#666" size="18"></u-icon>
						</view>
						<text class="sum">¥{{ getApplication.frozenAmount || 0 }}</text>
					</view>
					<view class="dis f-c a-c" @click="accountExpireRecord">
						<view class="dis ">
							<text>已过期佣金</text>
							<u-icon name="arrow-right" color="#666" size="18"></u-icon>
						</view>
						<text class="sum">¥{{ getApplication.expiredAmount || 0 }}</text>
					</view>
				</view>
				<view class="withdrawal-fun" @click="toWithdraw">提现</view>
			</view>
			<view class="cell-item mt-2">
				<view class="item dis a-c " @click="promotionCode">
					<image src="/static/code.png" mode=""></image>
					<text>我的推广码</text>
					<u-icon name="arrow-right" color="#232832" size="22"></u-icon>
				</view>
				<view class="item dis a-c " @tap="accountTool('/pages/wallet/bankCard')">
					<image src="/static/image/my/bankCard.png" mode=""></image>
					<text>银行卡</text>
					<u-icon name="arrow-right" color="#232832" size="22"></u-icon>
				</view>
				<view class="item dis a-c " @tap="tool">
					<image src="/static/image/my/Frame.png" mode=""></image>
					<text>设置</text>
					<u-icon name="arrow-right" color="#232832" size="22"></u-icon>
				</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>
						<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>
							<image src="/static/icon/you.png" mode=""></image>
						</view>
					</view>
				</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">
				<view class="ShowModalCode-style">
					<text>推广码</text>
					<text @tap="ShowModalCode = false">×</text>
				</view>
				<view class="ShowModalCode-con">
					<text v-if="userInfo.sysUser.grade==4">请扫码下载掌柜科技APP</text>
					<text v-else>请扫码下载掌柜合伙人APP</text>
					<image :src="workImg" mode="widthFix" lazy-load style="width: 150px;"></image>
				</view>
				<view class="dis" style="justify-content: space-around;padding:0 60px 20px 60px;">
					<view class="share-style" @click="sendPayCode">
						<image src="/static/image/my/weixin.png" mode="">
							<text>微信好友</text>
					</view>
					<view class="share-style" @tap="saveImage()">
						<image src="/static/image/my/baocun.png" mode="">
							<text>保存图片</text>
					</view>
					<view class="share-style" @click="duplicate">
						<image src="/static/image/my/fenxiang.png" mode="">
							<text>链接分享</text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-action-sheet :list="Avatarlist" v-model="updateAvatarShow" border-radius="20"></u-action-sheet>
	</view>
</template>

<script>
	import myDatePicker from '../components/date-picker.vue';
	import QR from "@/common/wxqrcode.js"
	import html2canvas from 'html2canvas'
	import store from '@/store';
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {
			myDatePicker
		},
		data() {
			return {
				customTabPadding: '0 40rpx',
				customTabIndex: 0,
				updateAvatarShow: false, //头像工具
				Avatarlist: [{
					text: '点赞',
					color: 'blue',
					fontSize: 28,
					subText: '感谢您的点赞'
				}, {
					text: '分享'
				}, ],
				supportStaffUrl: '',
				ShowModalCode: false,
				info: ["", ""],
				current: 0,
				mode: 'default',
				headerStyle: {
					backgroundColor: 'transparent',
					backgroundImage: '',
					backgroundSize: '',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				showBackground: false,
				prevScrollTop: 0,
				avatar: "/static/image/my/wuxingb.png",
				getApplication: {},
				withdrawalData: [],
				backImage: '',
				backLogo: '',
				workImg: '',
				pathUrl: '',
				type: uni.getStorageSync('type'),
				roleIdentityList: [], //角色身份列表
				//身份图片list
				gradeimageList: [{
						grade: 1,
						backImageurl: "/static/image/my/grade/gradeback1.png", //身份背景图
						logourl: "/static/image/my/benefits/active1.png", //身份logo
						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/grade/gradeback2.png",
						logourl: "/static/image/my/benefits/active2.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/grade/gradeback3.png",
						logourl: "/static/image/my/benefits/active3.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/grade/gradeback4.png",
						logourl: "/static/image/my/benefits/active4.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: {},
			}

		},

		computed: {
			...mapState(['userInfo', "userCheckInfo", ]),
			gradeText() {
				const gradeMap = {
					1: '创始人',
					2: '管理人',
					3: '合伙人',
					4: '工作室'
				}
				return gradeMap[this.userInfo.sysUser.grade] || ''
			},
			//过滤数组
			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() {
			await this.queryIdentityInformation(); //获取身份列表
			this.backImage = this.roleIdentityList.find(val => val.grade == this.userInfo.sysUser.grade)
				.backImageurl; //获取背景图
			this.backLogo = this.roleIdentityList.find(val => val.grade == this.userInfo.sysUser.grade)
				.logourl; //获取logo
		},
		async onShow() {
			let userInfoRes = await this.$http.get('/newAppPartner/getUserInfo', {
				type: uni.getStorageSync('type')
			});
			if (userInfoRes) {
				store.commit('setUserModules', {
					title: 'userInfo',
					data: {
						sysUser: {
							...userInfoRes.data
						}
					}
				})
			}
			this.queryIdentityInformation();
			let res = await this.$http.get('/newAppPartner/newGetFee'); //获取账户金额
			if (res.code == 200) {
				this.getApplication = res.data || [];
			}
			if (this.userInfo.sysUser.sex == 'F') {
				this.avatar = "/static/image/my/nv.png"
			}
			if (this.userInfo.sysUser.sex == 'M') {
				this.avatar = "/static/image/my/nan.png"
			}
			if (this.userInfo.sysUser.insUploadFiles && this.userInfo.sysUser.insUploadFiles.url) {
				this.avatar = this.$base.baseUrl + this.userInfo.sysUser.insUploadFiles.url;
			}
			this.WithdrawalqueryData()
		},
		onPageScroll(e) {
			this.handleScroll(e);
		},
		mounted() {
			this.getWechatData()
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			uni.$on('scroll', this.handleScroll);

		},
		destroyed() {
			uni.$off('scroll', this.handleScroll);
		},
		methods: {
			...mapMutations(['emptyUserInfo']),
			//角色tab切换
			customTabChange(item, index) {
				this.superiorIdentityData = item;
				this.backImage = this.superiorIdentityData.backImageurl; //切换背景
				this.customTabIndex = index;
				this.handleScroll({
					scrollTop: 24
				});
			},
			//转入记录
			incomingTransferLog() {
				uni.navigateTo({
					url: '/pages/institutional/incomingTransferLog?grade='
				})
			},
			//未转入
			untransferredRecords() {
				uni.navigateTo({
					url: '/pages/institutional/untransferredRecords?grade='
				})
			},
			//过期
			accountExpireRecord() {
				uni.navigateTo({
					url: '/pages/institutional/accountFreezeRecord?appStatus=2&grade='
				})
			},
			//冻结
			accountFreezeRecord() {
				uni.navigateTo({
					url: '/pages/institutional/accountFreezeRecord?appStatus=1&grade='
				})
			},
			//获取角色列表
			async queryIdentityInformation() {
				let res = await this.$http.get('/newAppPartner/queryIdentityInformation'); //获取各级身份
				if (res.code == 200) {
					const hasGradeOne = res.data.some(item => item.grade == 1);
					if (!hasGradeOne) {
						this.customTabPadding = '0 80rpx',
							this.gradeimageList = this.gradeimageList.map((item, index) => {
								return {
									...item,
									tabline: `/static/image/my/grade/istabline${index+1}.png`
								};
							});
					}
					const merged = res.data.map(itemA => {
						const gradeimageinfo = this.gradeimageList.find(itemB => itemB.grade === itemA.grade);
						return {
							...itemA,
							...gradeimageinfo
						}; // 合并两个对象
					});
					this.roleIdentityList = merged;
					this.superiorIdentityData = this.roleIdentityList.find(item => item.grade == this.userInfo.sysUser
						.grade) //获取当前用户最高身份的数据信息
					const index = this.roleIdentityList.findIndex(item => item.grade == this.userInfo.sysUser.grade);
					this.customTabIndex = index;
					this.handleScroll({
						scrollTop: 24
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},

			//申请解锁
			async requestUnlock() {
				console.log(this.superiorIdentityData);
				let res = await this.$http.post('/partner/submitLiftingRecord', {
					grade: this.superiorIdentityData.grade,
					upgradeType: this.superiorIdentityData.lockingState == 2 ? '1' : '0'
				});
				if (res.code == '200') {
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
					this.queryIdentityInformation() //申请解锁后更新身份
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
				}
			},
			// 获取角色状态类名
			roleStatusClass(item) {
				return item.lockingState == 0 ? 'role-unlocked' : 'role-isUnlocked'
			},
			// 获取角色图片
			getRoleImage(item) {
				if (item.lockingState == 0) {
					return item.upgrade ? item.waitingToUnlockurl : item.isUnlockedurl
				} else if (item.lockingState == 1) {
					return item.logourl
				}
				return item.isLockedurl
			},
			//控制进度条占比
			progressBarClass(item) {
				if (item.progressBar == 0) {
					return '0%'
				} else if (item.progressBar == 1) {
					return '50%'
				} else {
					return '100%'
				}
			},
			//控制进度条圆角
			borderRadiusClass(item) {
				const {
					grade,
					progressBar
				} = item;

				if (grade == 4) {
					return progressBar == 1 ? '100px' : '100px 0 0 100px';
				}
				return progressBar == 1 ? '0 100px 100px 0' : '0';
			},
			// 权益跳转
			benefitsNavigate(grade) {
				uni.navigateTo({
					url: "/pages/my/benefits?grade=" + grade,
				})
			},
			//去升级
			async upgradeNow() {
				// let params = {
				// 	grade: Number(this.superiorIdentityData.grade),
				// 	lockingState: this.superiorIdentityData.lockingState,
				// 	lockCommission: this.superiorIdentityData.lockCommission,
				// 	zeroDays: this.superiorIdentityData.zeroDays,
				// 	fallAmount: this.superiorIdentityData.fallAmount,
				// }
				// uni.navigateTo({
				// 	url: "/pages/my/upgradeTask?info=" + JSON.stringify(params),
				// })
				if (this.superiorIdentityData.unlockedStatus) {
					let params = {
						grade: Number(this.superiorIdentityData.grade),
						lockingState: this.superiorIdentityData.lockingState,
						lockCommission: this.superiorIdentityData.lockCommission,
						zeroDays: this.superiorIdentityData.zeroDays,
						fallAmount: this.superiorIdentityData.fallAmount,
					}
					uni.navigateTo({
						url: "/pages/my/upgradeTask?info=" + JSON.stringify(params),
					})

				} else {
					uni.showToast({
						title: '先解锁上一级',
						icon: 'none',
					});
				}
			},
			//完成任务
			upgradeTask() {
				uni.navigateTo({
					url: "/pages/my/upgradeTask?info=" + JSON.stringify(this.superiorIdentityData),
				})
			},
			//修改头像
			async updateAvatar() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				if (chooseImageRes) {
					console.log(chooseImageRes);
					this.chooseAvatar(chooseImageRes.tempFilePaths[0]);

				} else {}
			},
			chooseAvatar(src) {
				uni.navigateTo({
					url: '/pages/my/avatarCropper?src=' + src,

				})
			},
			searchPopup() {
				this.$refs.datePicker.open()
			},
			sendPayCode() {
				if (this.pathUrl) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: this.pathUrl
					})
				}
			},
			showLoading() {
				uni.showLoading({
					title: '正在生成图片'
				});
			},
			hideLoading() {
				uni.hideLoading();
				this.loading = false;
			},
			//页面截图转路径
			receiveRenderData(val) {
				uni.downloadFile({
					url: val,
					success(res) {
						// 这时会产生一个临时路径，在应用本次启动期间可以正常使用。
						if (res.statusCode == 200) {
							// 需要将图片保存到相册
							uni.saveImageToPhotosAlbum({
								filePath: res
									.tempFilePath, // 图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
								success(res) {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									})
									// 如果保存成功需要打开查看，请使用以下方法，同时也支持打开文件
									uni.openDocument({
										filePath: res.savedFilePath,
										success(res) {},
										fail(err) {
											uni.showToast({
												title: '手机不支持该文件类型，请安装wps或office应用',
												icon: 'none'
											})
										}
									})
								},
								fail(err) {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									})
								}
							})
						} else {
							uni.showToast({
								title: '下载失败,请稍后再试',
								icon: 'none'
							})
						}
					},
					fail(err) {
						uni.showToast({
							title: '下载失败,请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			saveImage() {
				setTimeout(() => {
					this.$ownerInstance.callMethod('showLoading')
					const dom = document.getElementById('pdfContentsDiv') // 需要生成图片内容的 dom 节点
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域
						// allowTaint: false,
						scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
					}).then((canvas) => {
						// 生成成功
						this.$ownerInstance.callMethod('hideLoading')
						this.$ownerInstance.callMethod('receiveRenderData', canvas.toDataURL(
							'image/png'))
						console.log()
					}).catch(err => {
						// 生成失败 弹出提示弹窗
						this.$ownerInstance.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
					})
				}, 300)
			},

			// 链接分享
			duplicate() {
				uni.setClipboardData({
					data: this.pathUrl,
					success: function() {
						console.log('复制成功');
						uni.showToast({
							title: '链接已复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: function() {
						console.log('复制失败');
						// 可以添加错误处理或用户友好的提示
					}
				});
			},

			async promotionCode() {
				this.ShowModalCode = true
				let pageRequest = {
					pageNum: 1,
					pageSize: 50,
					columnFilters: {
						apptype: {
							name: "apptype",
							value: "apk",
						},
						appid: {
							name: "appid",
							value: this.userInfo.sysUser.grade == 4 ? "__UNI__D4FE29A" : '__UNI__2041321',
						}
					}
				}
				let res = await this.$http.post('/sysVersion/findPage', pageRequest);
				if (res.code == 200) {
					this.ShowModalCode = true
					this.pathUrl = res.data.content[0].path
					this.workImg = QR.createQrCodeImg(res.data.content[0].path, {
						size: parseInt(200) //二维码大小  
					})
				}

			},
			confirmPickDate(dateStr, dateStr1) {
				console.log(dateStr, dateStr1);
				if (dateStr) {
					dateStr += ' 00:00:01'
				}
				if (dateStr1) {
					dateStr1 += ' 23:59:59'
				}
				this.WithdrawalqueryData(dateStr, dateStr1)
			},
			viewWithdrawal(item) {
				uni.navigateTo({
					url: "/pages/my/withdrawalDetail?key=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			async toWithdraw() {
				let res = await this.$http.post('/userBank/getUserBankList', {
					auditStatus: "1",
					delFlag: '0'
				});
				if (res.data.length) {
					this.navigate({
						url: `/pages/wallet/withdraw?amount=${this.getApplication.cashFee}`,
					}, "navigateTo", true)
				} else {
					uni.showToast({
						title: '暂无审核通过的银行卡，不可提现',
						duration: 3000,
						icon: "none"
					});

				}
			},
			async accountTool(path) {

				if (path) {
					if (path == '/pages/wallet/bankCard') {
						let res = await this.$http.post('/userBank/getUserBankList', {
							auditStatus: '',
						});
						if (!res.data.length) {
							this.navigate({
								url: '/pages/wallet/bindBank',
								complete: () => {
									setTimeout(() => {
										uni.showToast({
											title: '请先绑定银行卡',
											duration: 3000,
											icon: "none"
										});
									}, 500);

								}
							}, "navigateTo", true)
						} else {
							this.navigate({
								url: path,
							}, "navigateTo", true)
						}
					} else {
						this.navigate({
							url: path,
						}, "navigateTo", true)
					}
				} else {
					uni.showToast({
						title: '功能待开发...',
						icon: "none"
					});
				}
			},
			async WithdrawalqueryData(beginTime, endTime) {
				let params = {
					"endTime": endTime || '',
					"beginTime": beginTime || '',
				}
				let res = await this.$http.post('/sysAgencyFeeApproval/queryOperateInfo', params);
				if (res.code == '200') {
					this.withdrawalData = res.data
				}
			},
			handleScroll(e) {
				const scrollTop = e.scrollTop;
				if (scrollTop > this.prevScrollTop) {
					// 向下滚动
					this.showBackground = true; // 显示背景图
				} else if (scrollTop < 50) {
					// 在顶部附近，隐藏背景图
					this.showBackground = false;
				} else {
					// 向上滚动
					this.showBackground = true; // 显示背景图
				}
				this.headerStyle.backgroundColor = this.showBackground ? '#fff' : 'transparent';
				this.headerStyle.backgroundImage = this.showBackground ?
					`url("${this.superiorIdentityData.backImageurl}")` : '';
				this.headerStyle.backgroundSize = this.showBackground ? 'cover' : '';
				// this.headerStyle.backgroundPosition = this.showBackground ? 'center' : '';
				this.prevScrollTop = scrollTop;
			},
			//跳转设置
			tool() {
				uni.navigateTo({
					url: "/pages/set/set"
				})
			},
			logout() {
				this.emptyUserInfo();
				uni.clearStorage({
					success: function() {}
				});
				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/login/login"
					})
					return true;
				}, 500);
			},
			incomeClick() {
				let info = this.roleIdentityList.find(item => item.grade == this.userInfo.sysUser.grade)
				uni.navigateTo({
					url: '/pages/institutional/myEarnings?info=' + JSON.stringify(info)
				})
				// uni.navigateTo({
				// 	url: "/pages/my/commission"
				// })

			},
			// 去账单明细
			toBillDetails(type) {
				this.navigate({
					url: `/pages/wallet/billDetails${type}`,
				}, "navigateTo", true)
			},
			// 去账单明细
			toWallet(type) {
				this.navigate({
					url: "/pages/wallet/wallet"
				}, "navigateTo", true)
			},
			//获取企业微信客服地址，是否展示
			getWechatData() {
				this.$http.get('/sys/qy/wechat/find/picture').then(res => {
					this.supportStaffUrl = res.data.supportStaffUrl
				})
			},
			//点击跳转企业微信客服
			weChatService() {
				uni.share({
					provider: "weixin",
					openCustomerServiceChat: true,
					customerUrl: this.supportStaffUrl, //企业微信地址
					corpid: 'wwfe67d19509d43ec5', //企业id
					success: (res) => {},
					fail: (err) => {}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	* {
		// outline: 1px solid red !important;
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 16px;
		padding-top: 40px;

		text {
			font-size: 18px;
			font-weight: 700;
			color: #333333;
		}

		.headers-right {

			position: absolute;
			right: 30rpx;
			display: flex;
			justify-content: space-between;


			text {
				font-size: 24rpx;
				color: #333;
			}

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 5rpx;
			}
		}


	}

	.Personnel {
		height: auto;
		width: 100%;
		background: transparent;
		background-size: 100% 100%;
		padding: 90px 0 20rpx 0;
		box-sizing: border-box;
		position: relative;

	}

	.Personnel-title {
		position: absolute;
		right: 0;
		top: 135px;
		background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
		border-radius: 16px 0px 0px 16px;
		color: #fff;
		padding: 2px 6px 2px 10px;

		image {
			display: inline-block;
			width: 15px;
			height: 15px;
			vertical-align: -2px;
			margin-right: 3px;

		}
	}

	.Personnel-img {
		position: relative;

		.avatar {
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}

		image:last-child {
			display: inline-block;
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			bottom: 0;
			right: 0;
		}
	}

	/* 我的钱包Start */
	.my-wallet {
		.wallet-body {
			width: 100%;
			height: auto;
			padding: 8px 16px;
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px #DAE3F4;
			border-radius: 6px;
			margin-top: 10px;

			.route {
				text {
					font-size: 12px;
					color: #333;
					font-weight: 400;
				}

				image {
					width: 45px;
					height: 40px;
				}
			}

			.money {
				padding: 8px 0;
				background-color: #F9F8FD;
				border-radius: 4px;
				margin-top: 8px;

				text {
					font-size: 12px;
					color: #333;
					font-weight: 400;
				}

			}
		}
	}

	.Personnel-info {
		font-size: 14px;
		color: #152F63;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.full-name {
		margin-top: 10rpx;
		color: #152F63;
		font-weight: bold;
		font-size: 36rpx;
		line-height: 1;
	}

	.digit {
		box-sizing: border-box;
		width: 100%;
		font-size: 24rpx;
		color: #152F63;
		margin-top: 26rpx;
		line-height: 1;

		text:first-child {
			margin-bottom: 20rpx;
		}

	}

	.withdrawal-box {
		background: #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		padding: 18px 16px;
		margin: 26rpx 30rpx 0;
		box-sizing: border-box;

		.withdrawal-title {
			width: 100%;
			height: 100%;

			text:first-child {
				font-weight: 400;
				font-size: 12px;
				color: #999999;
			}

		}

		.withdrawal-sum {
			color: #333333;
			font-weight: bold;
			line-height: 32px;

			text:first-child {
				font-size: 17px;
				line-height: 38px;
			}

			text:last-child {
				font-size: 26px;
			}
		}

		.withdrawal-income {
			margin: 10px 0;
			background: rgba(240, 248, 255, 0.5);
			border-radius: 2px 2px 2px 2px;
			padding: 20rpx 20rpx 0;

			>view {
				width: 50%;
				margin-bottom: 20rpx;

				text {
					font-weight: 400;
					font-size: 10px;
					color: #666666;
					display: block;

				}

				.sum {
					margin-top: 3px;
					font-weight: 700;
					font-size: 17px;
					color: #333333;
					line-height: 20px;
					display: block;
				}
			}

		}

		.withdrawal-fun {
			background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
			border-radius: 5px 5px 5px 5px;
			color: #fff;
			font-size: 16px;
			text-align: center;
			line-height: 42px;
		}
	}

	.cell-item {
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 0 30rpx;
		margin: 20rpx 30rpx 0;
		box-sizing: border-box;

		.item {
			padding: 25rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;
			font-size: 28rpx;
			color: #333;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.u-icon {
				margin-left: auto;
			}
		}

		.item:last-child {
			border: none;
		}
	}

	.withdrawal-record {

		font-weight: 700;
		font-size: 16px;
		color: #333333;

		i {
			display: inline-block;
			margin-right: 5px;
			width: 2px;
			height: 20px;
			background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
		}
	}

	.withdrawal-flow {
		margin: 8px 16px;
		overflow: hidden;
		background: #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		font-size: 16px;
		color: #333333;

		.withdrawal-card {
			border-bottom: 1px solid #EEEEEE;
			padding: 15px 0;
			margin: 0 15px;

			image {
				display: inline-block;
				width: 11px;
				height: 11px;
				margin-left: 5px;
			}

			.withdrawal-status {
				padding: 2px 5px;
				font-size: 10px;
				border-radius: 1px 1px 1px 1px;
			}
		}
	}

	.search {
		text {
			font-size: 14px;
			color: #666666;
		}

		i {
			margin-left: 2px;
			display: inline-block;
			width: 0;
			height: 0;
			border: 4px solid;
			border-color: #666666;
			border-bottom: 4px solid transparent;
			border-right: 4px solid transparent;
			border-left: 4px solid transparent;
		}
	}

	.ShowModalCode-style {
		// display: block;
		font-weight: 600;
		font-size: 16px;
		color: #333333;
		border-bottom: 1px solid #EEEEEE;
		padding: 15px;
		text-align: center;
		position: relative;

		text:last-child {
			position: absolute;
			right: 20px;
			color: #999999;
			font-size: 24px;
			line-height: 26px;
		}
	}

	.ShowModalCode-con {
		padding: 20px;
		text-align: center;
		font-size: 16px;
		color: #333333;

		image {
			margin: 0 auto;
			margin-top: 15px;
		}
	}

	.share-style {
		image {
			width: 45px;
			height: 45px
		}

		text {
			font-size: 12px;
		}

	}

	// 权益
	.benefits {
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 20rpx 0 0;
		box-sizing: border-box;

		.header {
			padding: 0 30rpx;
			box-sizing: border-box;

			image {
				width: 37rpx;
				height: 42rpx;
			}

			.tag {
				padding: 3rpx 17rpx;
				box-sizing: border-box;
				background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.title {
				font-size: 28rpx;
				color: #333;
			}
		}


		.content {
			width: 100%;
			padding: 20rpx 30rpx 30rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, #F0F8FF 0%, rgba(240, 248, 255, 0) 100%);
			border-radius: 0rpx 0rpx 10rpx 10rpx;
			margin-top: 16rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: auto;

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

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

				}
			}

			.item:first-child {
				border-right: 1rpx solid #E0F2FF;
			}
		}



	}

	///////
	.multiIdentityUnlockProgress {
		background-color: #fff;
		padding: 20rpx 46rpx 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin: 10px 0;

		.step {
			width: 38%;
			height: auto;

			.progressBar {
				position: relative;
				background-color: #F0F0F0;
				height: 14rpx;
				flex: 1;

				.sche-bg-jindu {
					position: absolute;
					left: 0;
					top: 0;
					height: 14rpx;
					background: #2DD9FF;

				}

			}

			//已解锁
			.role-isUnlocked {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				background: #F0F7FF;
				border: 4rpx solid #2DD9FF;
				padding: 7rpx 10rpx;
				box-sizing: border-box;
			}

			//未解锁
			.role-unlocked {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				background: #F0F0F0;
				padding: 7rpx 10rpx;
				box-sizing: border-box;
			}

			.rolelogo {
				width: 38rpx;
				height: 43rpx;
			}

			.title {
				font-size: 30rpx;
				color: #333;
				margin-top: 20rpx;
				margin-right: -12rpx;
			}
		}

		.step:first-child {
			width: 24%;

			.progressBar {
				border-radius: 100px 0 0 100px;

				.sche-bg-jindu {
					border-radius: 100px 0 0 100px;
				}
			}
		}

		.step:last-child {
			.role-isUnlocked {}

		}
	}

	//tab切换
	.customTab {
		width: 100%;
		height: 85rpx;
		margin-top: 30rpx;
		background-size: 100% 100%;

		.tab-item {
			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;
		margin: 30rpx 30rpx 0;

		.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 {
			width: 72%;

			.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>