partnerApp/pages/wallet/billDetails1.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>{{ handlingFee }}</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==2?'active':''" @tap="changeTab(2)">
						<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==3?'active':''" @tap="changeTab(3)">
						<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" :list.sync="list" :default-page-size="20"
			: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" @tap="toBillInfo(index)">
						<view class="content-box">
							<view class="des-box" v-if="active==2">
								<view class="tit">订单号：{{item.id }}</view>
								<view class="time">提现时间：{{ item.createTime }}</view>
							</view>

							<view class="des-box" v-if="active==3">
								<view class="tit">订单号：{{item.id }}</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==2">
							<view>{{item.amount.toFixed(2) }}</view>
							<view>提现金额</view>
						</view>
						<view class="money d-flex a-center j-center flex-column" v-if="active==3">
							<view>-{{item.amount.toFixed(2) }}</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
		},
		data() {
			return {
				/* 查询区域Start */
				typeIndex: 0, //订单的类型选择
				typeArray: ['车险', '意外险', '寿险'], //订单的类型
				yearArray: [], //订单的查询年份
				yearIndex: 0, //订单的年份选择
				monthArray: [], //订单的查询月份
				monthIndex: 0, //订单的月份选择
				dateArray: [], //订单的查询月份
				dateIndex: 0, //订单的月份选择
				/* 查询区域End */
				currentPage: 1, //当前页码
				pageSize: 5, //每页展示条数
				totalPages: 0, //总页数
				totalSize: 0, //总条数
				list: [],
				loadStatus: 0,
				"handlingFee": 0, //可提现手续费金额
				"totalAmount": 0, //总计提现
				"applyAmount": 0, //提现中
				"payamount": 0, //已到账
				active: 2,
			};
		},
		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
		},
		computed: {
			...mapState(['userInfo']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(356);
				return `height: ${height}px`;
			}
		},
		onShow() {
			this.getCarAdvanceMoney();
		},
		methods: {
			async changeTab(tabIndex) {
				this.active = tabIndex;
				this.list = [];
				await this.getOrdersList(1, 20);
			},
			// 去提现
			async toWithdraw() {
				let res = await this.$http.get('/userBank/getUserBankList');
				if (res.data) {
					this.navigate({
						url: `/pages/wallet/withdraw?amountStatus=1&amount=${this.handlingFee}`,
					}, "navigateTo", true)
				} else {
					this.navigate({
						url: '/pages/wallet/bindBank',
						complete: () => {
							setTimeout(() => {
								uni.showToast({
									title: '请先绑定银行卡',
									duration: 3000,
									icon: "none"
								});
							}, 500);

						}
					}, "navigateTo", true)
				}
			},
			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 getCarAdvanceMoney() {
				let res = await this.$http.get('/sysUserAccount/getSysUserAmount?userid=' + this.userInfo.sysUser.id);
				if (res.code == 200) {
					this.handlingFee = res.data.handlingFee;
				}
			},

			//获取订单数据Start
			async getOrdersList(pageNo, pageSize) {
				var data = {
					"pageNum": pageNo,
					"pageSize": pageSize,
					"amountStatus": '1',
					"auditingStatus": this.active,
				};
				let res = await this.$http.post('/sysAmountAuditing/queryAppPage', data);

				let content = [];
				if (res.code == 200) {
					if (res.data.content.length > 0) {
						content = res.data.content;
						this.applyAmount = content[0].amount
					}
				}
				this.$refs.paging.complete(content);
			},
			//获取订单数据End
		},
	};
</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 .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;
		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 .palace-grid-text-name {
		font-size: 26rpx;
		font-weight: normal;
		color: $themeColor;
	}

	.white-box .palace .palace-grid .palace-grid-text.active .palace-grid-text-name {
		color: #FFFFFF !important;
	}

	.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.active .palace-grid-text-data {
		color: #FFFFFF !important;
	}

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

	.source {
		margin: 12rpx 0;
	}

	.time {
		color: #888;
	}

	.money {
		font-size: 38rpx;
		font-weight: 500;
		color: #1E85FE;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 20rpx;
	}

	.less {
		color: #4caf50 !important;
	}

	.tip {
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		font-size: 24rpx;
		color: #888;
	}

	.nothing {
		position: absolute;
		top: 320upx;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.nothing>view {
		line-height: 1;
	}

	.nothing>view.icon {
		/* color: #66A3FF; */
		color: #989898;
		font-size: 260upx;
	}

	.nothing>view.text {
		font-size: 28upx;
		color: #989898;
	}


	/* 查询区域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>