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 style="margin-left:15px">
						<image @tap="tool" src="/static/image/my/Frame.png" mode=""></image>
						<text>设置</text>
					</view>

					<!-- <view style="margin-left:15px">
						<image @tap="logout" src="/static/image/my/tichu.png" mode="">
						</image>
						<text>退出</text>
					</view> -->
				</view>

			</view>
		</view>
		<image :src="backImage" mode="" style="width: 100%;height: 738rpx;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.userId}}</text>
						<text>工号：{{ userInfo.sysUser.mobile }}</text>
					</view>
				</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>
					<text @tap="accountTool('/pages/wallet/bankCard')">银行卡</text>
				</view>
				<view class="dis a-s j-c withdrawal-sum">
					<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>
					<view>
						<text>已经提现金额</text>
						<text>¥{{ 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>
					<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> -->
		<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>
		<!-- <view class="Personnel-title" @click="promotionCode">
			<image src="/static/icon/code.png" mode="">
			</image>
			推广码
		</view> -->
		<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 {
				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/grade1.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', //身份锁定

					},
					{
						grade: 2,
						backImageurl: "/static/image/my/grade2.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',

					},
					{
						grade: 3,
						backImageurl: "/static/image/my/grade3.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',

					},
					{
						grade: 4,
						backImageurl: "/static/image/my/grade4.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',
					}
				],
				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)
			},
			//获取上级


		},
		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']),
			async queryIdentityInformation() {
				let res = await this.$http.get('/newAppPartner/queryIdentityInformation'); //获取各级身份
				if (res.code == 200) {
					const merged = res.data.map(itemA => {
						const gradeimageinfo = this.gradeimageList.find(itemB => itemB.grade === itemA.grade);
						return {
							...itemA,
							...gradeimageinfo
						}; // 合并两个对象
					});
					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);
				} 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() {
				uni.navigateTo({
					url: "/pages/my/benefits?grade=" + this.userInfo.sysUser.grade,
				})
			},
			//完成任务
			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("/static/image/my/beijing.png")' : '';
				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 {
			// width: 100%;
			// height: 100%;
			// position: relative;
			position: absolute;
			right: 15px;
			// width: 70px;
			display: flex;
			justify-content: space-between;

			view {
				line-height: 8px;
			}

			text {
				font-size: 9px;
				color: #666666;
			}

			image {
				// position: absolute;
				// right: 0;
				width: 16px;
				height: 16px;
			}
		}


	}

	.Personnel {
		height: auto;
		width: 100%;
		background: transparent;
		background-size: 100% 100%;
		padding: 90px 30rpx 20rpx 30rpx;
		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;

	}

	.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 {
		margin-top: 13px;
		background: #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		padding: 18px 16px;

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

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

			text:last-child {
				position: absolute;
				right: 0;
				font-size: 10px;
				color: #2D6DFF;
				line-height: 12px;
			}
		}

		.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: 10px;

			view {
				width: 50%;
				text-align: center;

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

				}

				text:last-child {
					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;
		}
	}

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

		}
	}
</style>