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>
		<view class="Personnel" :style="{ 'background-image': 'url(' + backImage + ')' }">
			<view class="Personnel-title" @click="promotionCode">
				<image src="/static/icon/code.png" mode="">
				</image>
				推广码
			</view>
			<view class="dis a-c  Personnel-info">
				<view class="Personnel-img">
					<image :src="avatar" class="avatar" mode=""></image>
					<image :src="backLogo" mode=""></image>
				</view>
				<view class="full-name">
					<text>{{ userInfo.sysUser.userName }}</text>
					<!-- <text >司龄 1年</text> -->
				</view>
				<text style="line-height: 17px;">{{ userInfo.sysUser.deptName }}</text>
				<view class=" dis j-s digit">
					<view v-if="userInfo.sysUser.weChat" class=" dis" style="padding-left: 20%;">
						<image src="/static/icon/weixin.png" mode=""></image>
						<text>{{ userInfo.sysUser.weChat }}</text>
					</view>
					<view class=" dis a-c">
						<image src="/static/icon/dianhua.png" mode=""></image>
						<text>{{ userInfo.sysUser.mobile }}</text>
					</view>
				</view>
			</view>
			<!-- 权益 -->
			<view class="benefits mt-3 dis a-c j-s">
				<view class="dis a-c ">
					<image :src="backLogo" mode=""></image>
					<view class="dis f-c title ml-2">
						<text>创始人权益</text>
						<text>多项权益已解锁</text>
					</view>
				</view>
				<view class="tag" @click="benefitsNavigate">查看权益</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>自定义时间<i></i></text>
			</view>
		</view>
		<view class="withdrawal-flow">
			<!-- 	<view style="border-bottom: 1px solid #EEEEEE;padding: 15px 0;
    margin: 0 15px;" v-for="val in withdrawalData" :key="val"> -->
			<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" />
		<!-- <view style="width: 323px;" id="gxxImg">
		 	<canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
		 	<view class="ShowModalCode-style">
		 		<text>推广码</text>
		 		<text @tap="ShowModalCode=false" >×</text>
		 	</view>
		 	<view class="ShowModalCode-con">
		 		<text>请扫码下载掌柜科技APP</text>
		 		<image :src="workImg" mode="widthFix" lazy-load style="width: 150px;"></image>
		 	</view>
		 </view> -->
		<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="type==2">请扫码下载掌柜科技APP</text>
					<text v-if="type==1">请扫码下载掌柜合伙人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>
</template>

<script>
	import myDatePicker from '../components/date-picker.vue';
	import QR from "@/common/wxqrcode.js"
	import html2canvas from 'html2canvas'
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {
			myDatePicker
		},
		data() {
			return {
				supportStaffUrl: '',
				ShowModalCode: false,
				info: ["", ""],
				current: 0,
				mode: 'default',
				headerStyle: {
					backgroundColor: '',
					backgroundImage: '',
					backgroundSize: '',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				showBackground: false,
				prevScrollTop: 0,
				avatar: "/static/image/my/wuxingb.png",
				getApplication: {},
				withdrawalData: [],
				backImage: '',
				backLogo: '',
				workImg: '',
				pathUrl: '',
				type: uni.getStorageSync('type'),

			}
		},

		computed: {
			...mapState(['userInfo', "userCheckInfo", ]),
		},

		async onShow() {
			// level:0 工作室
			this.backImage = this.userInfo.sysUser.sysPartnerConfig ? this.userInfo.sysUser.sysPartnerConfig.image : ''
			this.backLogo = this.userInfo.sysUser.sysPartnerConfig ? this.userInfo.sysUser.sysPartnerConfig.logo : ''
			let res = await this.$http.get('/APPPartner/getFee');
			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"
			}

			this.WithdrawalqueryData()
			// if (this.userInfo.sysUser.headSculpture) {
			// 	this.avatar = this.$base.baseUrl + this.userInfo.sysUser.headSculpture;
			// } else {
			// 	this.avatar = "/static/image/my/avatar1.png"
			// }
		},

		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']),
			// 权益跳转
			benefitsNavigate() {
				uni.navigateTo({
					url: "/pages/my/benefits"
				})
			},
			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.type == 2 ? "__UNI__D4FE29A" : '__UNI__3FA05C4',
						}
					}
				}
				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) {
				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() {
				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>
	.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: #F7F7F7;
		background-size: 100% 100%;
		padding: 90px 16px 8px 16px;
		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: 30px;
			height: 30px;
			position: absolute;
			bottom: -5px;
			right: -8px;
		}
	}

	/* 我的钱包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 {
		flex-direction: column;
		font-size: 14px;
		color: #152F63;

	}

	.full-name {
		margin-top: 8px;
		// margin-left: 12%;
		color: #152F63;

		text:first-child {
			font-weight: 700;
			font-size: 18px;
			line-height: 22px;
		}

		// text:last-child{
		// 	margin-left: 10px;
		// 	font-weight: 400;
		// 	font-size: 10px;
		// 	line-height: 12px;
		// }	
	}

	.digit {
		margin-top: 8px;

		view {
			// width: 110px; 
		}

		image {
			width: 20px;
			height: 20px;
			display: inline-block;
		}
	}

	.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 {
		height: 122rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background-image: url("/static/image/my/benefits.png");
		background-size: 100% 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

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

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

			}

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

		.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;
		}
	}
</style>