partnerApp/pages/wallet/billDetails3.vue

<template>
	<view>
			<view class="white-box">
				<view class="tx">
					<view class="tx-grid">
						<view class="tx-grid-text">
							<view class="title">可提现推广费</view>
							<view class="money">
								<text>{{ extendMoney }}</text>
								<text class="money-b">元</text>
							</view>
						</view>
					</view>
					<view class="tx-grid" @click="toWithdraw"><span class="tx-grid-comm-sign">立即提现</span></view>
				</view>
				<view class="palace palace-one">
					<view class="palace-grid">
						<view class="palace-grid-text" :class="active==0?'active':''" @tap="changeTab(0)">
							<view class="palace-grid-text-data">
								<text>{{ carExtendMoney }}</text>
								<text class="palace-grid-text-data-b">元</text>
							</view>
							<view class="palace-grid-text-name">车险推广订单</view>
						</view>
					</view>
					<view class="palace-grid">
						<view class="palace-grid-text"  :class="active==1?'active':''"  @tap="changeTab(1)">
							<view class="palace-grid-text-data">
								<text>{{ applyExtendMoney }}</text>
								<text class="palace-grid-text-data-b">元</text>
							</view>
							<view class="palace-grid-text-name">提现中订单</view>
						</view>
					</view>
					<view class="palace-grid">
						<view class="palace-grid-text"  :class="active==2?'active':''"  @tap="changeTab(2)">
							<view class="palace-grid-text-data">
								<text>{{ payExtendMoney }}</text>
								<text class="palace-grid-text-data-b">元</text>
							</view>
							<view class="palace-grid-text-name">已到账订单</view>
						</view>
					</view>
				</view>
			</view>
			
			<z-paging auto-show-back-to-top ref="paging" @query="getOrdersList" v-model="list" :default-page-size="10"  :mounted-auto-call-reload="true" :style="getHeight">
			<view class="list-view">
				
				<!-- 查询区域Start -->
				<!-- <view class="queryView d-flex">
					<view class="d-flex a-center j-center">
						<picker @change="bindPickerTypeChange" :value="typeIndex" :range="typeArray">
						    <view class="d-flex a-center">{{typeArray[typeIndex]}} <view class="icon iconfont icon-xiala"></view></view>
						</picker>
					</view>
					<view class="d-flex a-center j-center">
						<picker @change="bindPickerYearChange" :value="yearIndex" :range="yearArray">
						    <view class="d-flex a-center">{{yearArray[yearIndex]}}年 <view class="icon iconfont icon-xiala"></view></view>
						</picker>
					</view>
					<view class="d-flex a-center j-center">
						<picker @change="bindPickerMonthChange" :value="monthIndex" :range="monthArray">
						    <view class="d-flex a-center">{{monthArray[monthIndex]}}月 <view class="icon iconfont icon-xiala"></view></view>
						</picker>
					</view>
					<view class="d-flex a-center j-center">
						<picker @change="bindPickerDateChange" :value="dateIndex" :range="dateArray">
						    <view class="d-flex a-center">{{dateArray[dateIndex]}}日 <view class="icon iconfont icon-xiala"></view></view>
						</picker>
					</view>
					<view class="d-flex a-center j-center">
						<view class="d-flex a-center px-2">合计：0.00</view>
					</view>
				</view> -->
				<!-- 查询区域End -->
				
				<block v-for="(item,index) in list" :key="index">
				<view class="list-item">
					<view class="content-box">
						<view class="des-box" v-if="active==0">
							<view class="tit">订单号：{{item.orderno }}</view>
							<view class="tit">佣金级别：{{item.level}}</view>
							<view class="tit">佣金比例：{{ item.commissionrate*100 }}%</view>
							<view class="time">签单时间：{{ item.insuredtime }}</view>
						</view>
						<view class="des-box" v-if="active==1" @tap="toBillInfo(index)">
							<view class="tit">订单号：{{item.applyno }}</view>
							<view class="time">提现时间：{{ item.createtime }}</view>
						</view>
						<view class="des-box" v-if="active==2" @tap="toBillInfo(index)">
							<view class="tit">订单号：{{item.applyno }}</view>
							<view class="time">提现时间：{{ item.createtime }}</view>
							<view class="time">到账时间：{{ item.paytime }}</view>
						</view>
					</view>
					<view class="money d-flex a-center j-center flex-column" v-if="active==0">
						<view>+{{item.commissionamount}}</view>
						<view>推广佣金</view>
					</view>
					<view class="money d-flex a-center j-center flex-column" v-if="active==1">
						<view>{{item.applyamount}}</view>
						<view>佣金提现中</view>
					</view>
					<view class="money d-flex a-center j-center flex-column" v-if="active==2">
						<view>-{{item.applyamount}}</view>
						<view>提现成功</view>
					</view>
				</view>
				</block>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
	export default {
		components: {
			ZPagingMixin
		},
		computed:{
			...mapState(['userInfo']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(356);
				return `height: ${height}px`;
			}
		},
		onLoad() {
			// 搜索年选项Start
			this.yearArray=[(new Date().getFullYear()-2),(new Date().getFullYear()-1),new Date().getFullYear(),]
			this.yearIndex=this.yearArray.length-1;
			// 搜索年选项End
			
			// 搜索月选项Start
			var month = new Date().getMonth()+1;
			for(var i=1;i<=month;i++){
				if(i<10){
					this.monthArray.push('0'+i);
				}else{
					this.monthArray.push(i);
				}
			}
			this.monthIndex=this.monthArray.length-1;
			// 搜索月选项End
			// 搜索日选项Start
			var date = new Date().getDate();
			for(var i=1;i<=date;i++){
				if(i<10){
					this.dateArray.push('0'+i);
				}else{
					this.dateArray.push(i);
				}
			}
			this.dateIndex=this.dateArray.length-1;
			// 搜索日选项End
		},
		data() {
			return {
				/* 查询区域Start */
				typeIndex:0,	//订单的类型选择
				typeArray:['车险','意外险','寿险'],	//订单的类型
				yearArray:[],	//订单的查询年份
				yearIndex:0,	//订单的年份选择
				monthArray:[],	//订单的查询月份
				monthIndex:0, 	//订单的月份选择
				dateArray:[],	//订单的查询月份
				dateIndex:0, 	//订单的月份选择
				/* 查询区域End */
				
				active:0,
				
				list: [],

				extendMoney: 0, //预收金额
				carExtendMoney: 0, //车险预收金额
				applyExtendMoney: 0, //提现中金额
				payExtendMoney: 0, //已到账金额
			};
		},
		onShow() {
			this.getCarExtendMoney();
		},
		methods: {
			bindPickerTypeChange(e){
				this.typeIndex = e.target.value;
			},
			//搜索年发生变化
			bindPickerYearChange(e) {
				this.yearIndex = e.target.value;
				this.monthArray=[];
				if(this.yearIndex == (this.yearArray.length-1)){
					var month = new Date().getMonth()+1;
					for(var i=1;i<=month;i++){
						if(i<10){
							this.monthArray.push('0'+i);
						}else{
							this.monthArray.push(i);
						}
					}
					this.monthIndex=this.monthArray.length-1;
				}else{
					for(var i=1;i<=12;i++){
						if(i<10){
							this.monthArray.push('0'+i);
						}else{
							this.monthArray.push(i);
						}
					}
					this.monthIndex=0;
				}
			},
			//搜索月发生变化
			bindPickerMonthChange(e) {
				this.monthIndex = e.target.value;
			},
			bindPickerDateChange(e){
				this.dateIndex = e.target.value;
			},
			
			
			
			
			async changeTab(tabIndex){
				this.active = tabIndex;
				this.list = [];
				await this.getOrdersList(1,10);
			},
			// 可提现推广费查询 
			async getCarExtendMoney() {
				let res= await this.$http.get('/insPayApply/extendAccount?userid=' + this.userInfo.sysUser.id, {}, {load:false});
				if (res.code == 200) {
					this.carExtendMoney = ((res.data.totalAmount-0)+(res.data.accountBalance-0)).toFixed(2);
					this.extendMoney = res.data.accountBalance;
					this.applyExtendMoney = res.data.applyAmount;
					this.payExtendMoney = res.data.payamount;
				}
			},

			//获取订单数据Start
			async getOrdersList(pageNo, pageSize) {
				let result;
				
				if(this.active ==0){
					var data = {
						"columnFilters": {
							"userid": {
								"name": "userid",
								"value": this.userInfo.sysUser.id
							},
							"auditstatus": {
							  "name": "auditstatus",
							  "value": "1"
							}
						},
						"pageNum": pageNo,
						"pageSize": pageSize
					};
					 result = await this.$http.post('/insFeeDetail/queryCommission', data);
				}else if(this.active ==1){
					var data = {
						"columnFilters": {
							"userid": {
								"name": "userid",
								"value": this.userInfo.sysUser.id
							},
							"applytype": {
								"name": "applytype",
								"value": 'B'
							},
							"applystatus":{
								"name":"applystatus",
								"value":"0"
							}
						},
						"pageNum": this.currentPage,
						"pageSize": this.pageSize
					};
					 result = await this.$http.post('/insPayApply/findPage', data);
				}else if(this.active ==2){
					var data = {
						"columnFilters": {
							"userid": {
								"name": "userid",
								"value": this.userInfo.sysUser.id
							},
							"applytype": {
								"name": "applytype",
								"value": 'B'
							},
							"applystatus": {
								"name": "applystatus",
								"value": '2'
							}
						},
						"pageNum": this.currentPage,
						"pageSize": this.pageSize
					};
					 result = await this.$http.post('/insPayApply/findPage', data);
				}
				let res = result;
				let content = [];
				if (res.code == 200) {
					if(res.data.content.length>0){
						content = res.data.content;
					}
				}
				this.$refs.paging.complete(content);

			},
			//获取订单数据End
			
			//获取订单数据End
			// 去提现
			toWithdraw(){
				if((!!this.userInfo.esmUserInternal) && (!!this.userInfo.esmUserInternal.accountno)){
					this.navigate({
						url:'/pages/wallet/withdraw1'
					},"navigateTo",true)
				}else{
					this.navigate({
						url:'/pages/wallet/bindBank',
						complete:() => {
							setTimeout(() => {
								uni.showToast({ title: '请先绑定银行卡',duration:3000,icon:"none"});
							}, 500);
							
						}
					},"navigateTo",true)
				}
			},
			toBillInfo(index){
				this.navigate({
					url:'/pages/wallet/billInfo',
					success:(res) => {
						res.eventChannel.emit("acceptData",{
							item:this.list[index]
						})
					}
				},"navigateTo",true)
			}

		}
	};
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
page {
	background-color: #fff;
}
.white-box {
	width: 94%;
	background: white;
	border-radius: 10rpx;
	margin: 20rpx auto 20rpx;
	box-shadow: 0 6rpx 20rpx #e7e7e7;
}
.white-box .tx {
	padding-top: 26rpx;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	align-content: center;
}
.white-box .tx .tx-grid {
	box-sizing: border-box;
}
.white-box .tx .tx-grid:first-child {
	margin-left: 40rpx;
}
.white-box .tx .tx-grid .tx-grid-comm-sign {
	display: block;
	border-radius: 40rpx 0 0 40rpx;
	font-size: 26rpx;
	padding: 16rpx 44rpx;
	background: linear-gradient(to right, rgba($themeColor,0.8), rgba($themeColor,0.6));
	color: #fff;
	font-weight: bold;
}
.white-box .tx .tx-grid .tx-grid-text {
	display: block;
	color: #333;
	font-size: 26rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.white-box .palace .palace-grid .palace-grid-text.active{
	background-color: rgba($themeColor,0.6);
}
.white-box .palace .palace-grid .palace-grid-text.active>view{
	color: #FFFFFF;
}
.white-box .tx .tx-grid .tx-grid-text .title {
	font-size: 26rpx;
	font-weight: normal;
	color: $themeColor;
}
.white-box .tx .tx-grid .tx-grid-text .money {
	font-size: 60rpx;
	color: $themeColor;
	letter-spacing: 2rpx;
	margin-bottom: 10rpx;
}
.white-box .tx .tx-grid .tx-grid-text .money-b {
	font-size: 28rpx;
}
.white-box .palace {
	padding-bottom: 20rpx;
	overflow: hidden;
	display: flex;
	justify-content: center;
}
.white-box .palace .palace-grid {
	flex: 1;
	position: relative;
	box-sizing: border-box;
}

.white-box .palace .palace-grid .palace-grid-text {
	display: block;
	text-align: center;
	color: #333;
	font-size: 32rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.white-box .palace .palace-grid .palace-grid-text .palace-grid-text-name {
	font-size: 26rpx;
	font-weight: normal;
	color: $themeColor;
}
.white-box .palace .palace-grid .palace-grid-text .palace-grid-text-data {
	font-size: 32rpx;
	color: $themeColor;
	letter-spacing: 2rpx;
	margin-bottom: 5rpx;
}
.white-box .palace .palace-grid .palace-grid-text .palace-grid-text-data .palace-grid-text-data-b {
	font-size: 20rpx;
}

.list-view {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.list-item {
	width: 100%;
	padding: 30rpx 28rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 1rpx solid #eaeef1;
}
.item-last::after {
	left: 0 !important;
}
.content-box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.des-box {
	min-height: 80rpx;
	padding-left: 28rpx;
	box-sizing: border-box;
	vertical-align: top;
	color: #333;
	font-size: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.tit {
	font-size: 30rpx;
	max-width: 500rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.time {
	color: #888;
}
.money {
	font-size: 38rpx;
	font-weight: 500;
	color: $themeColor;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 20rpx;
}

/* 查询区域Start */
.queryView {
	justify-content: space-around;
	height: 82upx;
	line-height: 80upx;
}
.queryView>view{
	border-top: 1px solid #FFC38F;
	border-bottom: 1px solid #FFC38F;
	border-left: 1px solid #FFC38F;
	box-sizing: border-box;
	color: #FFC38F;
}
.queryView>view:nth-child(1){
	flex: 3;
}
.queryView>view:nth-child(2){
	flex: 4;
}
.queryView>view:nth-child(3){
	flex: 3;
}
.queryView>view:nth-child(4){
	border-right: 1px solid #FFC38F;
	flex: 3;
}
/* 查询区域End */
</style>