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>
				<image @click="tool" src="/static/image/my/Frame.png" mode="">
				</image>
			</view>
		</view>
		<view class="Personnel"  :style="{ 'background-image': 'url(' + backImage + ')' }">
			<!-- <view class="Personnel-title">
				职位/职级
			</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 class=" dis a-c">
						<image src="/static/icon/电话.png"  mode=""></image>
						<text>{{userInfo.sysUser.mobile}}</text>
					</view>
					<view v-if="userInfo.sysUser.weChat" class=" dis" style="padding-left: 20%;">
						<image src="/static/icon/微信.png"  mode=""></image>
						<text>{{userInfo.sysUser.weChat}}</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/向右.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>
</template>

<script>
	import myDatePicker from '../components/date-picker.vue';
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		 components: {
		        myDatePicker
		    },
		data() {
			return {
				info: ["", ""],
				current: 0,
				mode: 'default',
				headerStyle: {
					backgroundColor: '',
					backgroundImage: '',
					backgroundSize: '',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				showBackground: false,
				prevScrollTop: 0,
				avatar: "/static/image/my/无性别.png",
				getApplication:{},
				withdrawalData:[],
				backImage:'',
				backLogo:'',
				
			}
		},

		computed: {
			...mapState(['userInfo', "userCheckInfo", ]),
		},
		
		async onShow() {
			console.log(this.userInfo,222222)
			this.backImage= this.userInfo.sysUser.sysPartnerConfig.image
			this.backLogo=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/女.png"
			 } 
			 if (this.userInfo.sysUser.sex=='M') {
			 	this.avatar = "/static/image/my/男.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() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			uni.$on('scroll', this.handleScroll);
		},
		destroyed() {
			uni.$off('scroll', this.handleScroll);
		},
		methods: {
			...mapMutations(['setUserModules', 'setOrderType', 'setOrderStage']),
			searchPopup() {
				this.$refs.datePicker.open()
			},
			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/背景.png")' : '';
				this.headerStyle.backgroundSize = this.showBackground ? 'cover' : '';
				// this.headerStyle.backgroundPosition = this.showBackground ? 'center' : '';
				this.prevScrollTop = scrollTop;
			},
			tool() {
				uni.navigateTo({
					url: "/pages/set/set"
				})
			},
			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)
			},
			//跳转个人信息页面
			openDetail() {
				this.navigate({
					url: "/pages/user/userInfo"
				}, "navigateTo", false)
			},
			
		}
	}
</script>

<style lang="scss" scoped>

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 16px;
		padding-top: 40px;
		>view {
			width: 100%;
			height: 100%;
			position: relative;
		}
		text {
			font-size: 18px;
			font-weight: 700;
			color: #333333;
		}

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

	}

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