partnerApp/pages/wallet/billDetails2.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="white-box">
			<view class="tx">
				<view class="tx-grid">
					<view class="tx-grid-text">
						<view class="title">可提现余额</view>
						<view class="money">
							<text>{{ accountBalance }}</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>{{ applyAmount.toFixed(2) }}</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" >
						<view class="palace-grid-text-data">
							<text>{{ totalAmount.toFixed(2) }}</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>{{ payamount.toFixed(2) }}</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="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" @tap="toBillInfo(index)">
						<view class="content-box">
							<view class="des-box" v-if="active==0" >
								<view class="tit">订单号：{{item.applyno }}</view>
								<view class="time">提现时间：{{ item.createtime }}</view>
							</view>
							
							<view class="des-box" v-if="active==2">
								<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.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 */
				yearArray:[],	//订单的查询年份
				yearIndex:0,	//订单的年份选择
				monthArray:[],	//订单的查询月份
				monthIndex:0, 	//订单的月份选择
				dateArray:[],	//订单的查询月份
				dateIndex:0, 	//订单的月份选择
				/* 查询区域End */
				
				
				active:0,

				list: [],
				
				"totalAmount": 0, //计提现
				"applyAmount": 0,  //提现中
				"accountBalance": 0,  //可提现金额
				"payamount": 0 //已到账

			};
		},
		async onShow() {
			await this.getPayAccount();
		},
		methods: {
			//搜索年发生变化
			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 getPayAccount() {
				let res = await this.$http.get('/insPayApply/payAccount?userid=' + this.userInfo.sysUser.id, {},{load:false});
				if (res.code == 200) {
					this.totalAmount = res.data.totalAmount;
					this.applyAmount = res.data.applyAmount;
					this.accountBalance = res.data.accountBalance;
					this.payamount = res.data.payamount;
				}
			},

			//获取订单数据Start
			async getOrdersList(pageNo, pageSize) {
				var data = {
					"columnFilters": {
						"applytype": {
							"name": "applytype",
							"value": 'A'
						},
						"applystatus":{
							"name":"applystatus",
							"value":this.active
						},
						"userid": {
							"name": "userid",
							"value": this.userInfo.sysUser.id
						}
					},
					"pageNum": pageNo,
					"pageSize": pageSize
				};
				let res = await this.$http.post('/insPayApply/findPage',data);
				
				let content = [];
				if (res.code == 200) {
					if(res.data.content.length>0){
						content = res.data.content;
					}
				}
				this.$refs.paging.complete(content);
			},
			//获取订单数据End
			navTo(url) {
				console.log(url)
				this.navigate({
					url:url
				},"navigateTo",true)
			},
			// 去提现
			toWithdraw(){
				if((!!this.userInfo.esmUserInternal) && (!!this.userInfo.esmUserInternal.accountno)){
					this.navigate({
						url:'/pages/wallet/withdraw'
					},"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: 4;
}
.queryView>view:nth-child(2){
	flex: 3;
}
.queryView>view:nth-child(3){
	flex: 3;
}
.queryView>view:nth-child(4){
	border-right: 1px solid #FFC38F;
	flex: 4;
}
/* 查询区域End */
</style>