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="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 in withdrawalData" :key="val" @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']),
		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;
	}
}</style>