vue-insagent-app/pages/wallet/billDetails2.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<service-widget @btnClick="btn_click"></service-widget>
		<public-module></public-module>
		<view class="fixed">
			<view class="white-box">
				<view class="tx">
					<view class="tx-grid">
						<view class="tx-grid-text">
							<view class="title">可提现（元）</view>
							<view class="money">
								<text v-if="documentary">{{ documentary }}</text>
								<text v-else>0.00</text>
							</view>
						</view>
					</view>
					<view class="tx-grid-comm-sign dis j-c a-c" @click="toWithdraw">
						<image src="/static/image/bindBank/Frame1.png" mode="" style="width: 18px;height: 18px;">
						</image>
						<text>立即提现</text>
					</view>
				</view>
				<view class="palace  dis a-c j-s">
					<view class="palace-grid dis f-c">
						<text class="">预收金额</text>
						<text v-if="willDocumentary">{{ willDocumentary }}</text>
						<text v-else>0.00</text>
					</view>
					<view class="palace-grid dis f-c">
						<text class="">提现中</text>
						<text v-if="withdrawalDocumentary">{{ withdrawalDocumentary}}</text>
						<text v-else>0.00</text>
					</view>
					<view class="palace-grid dis f-c">
						<text class="">已提现</text>
						<text v-if="approvedDocumentary">{{ approvedDocumentary }}</text>
						<text v-else>0.00</text>
					</view>
				</view>
			</view>
			<!-- 查询区域Start -->
			<view class="queryCriteria dis j-s a-c ">
				<view class="dis a-c j-c" style="width: 49%;" @click="statusShow=true">
					<image src="/static/image/bindBank/time.png" mode="" style="width: 18px;height: 18px;"></image>
					<text>{{statusLabel}}</text>
				</view>
				<view class="" style="width: 1px;height: 90%;background-color: #D4D0D0;"></view>
				<view class="dis a-c j-c" style="width: 49%;" @click="timeShow=true">
					<image src="/static/image/bindBank/date.png" mode="" style="width: 18px;height: 18px;"></image>
					<text>{{pageRequest.Date}}</text>
				</view>
			</view>
			<!-- 查询区域End -->
		</view>
		<view class="list-view">
			<view v-for="(item,index) in list" :key="index" v-if="active==2 || active==3">
				<view class="list-item dis a-c j-s" @tap="toBillInfo(index)">
					<view class="">
						<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" v-if="item.paytime">到账时间：{{ item.paytime }}</view>
						</view>
					</view>
					<view class="money dis f-c a-c j-s" v-if="active==1">
						<view
							style="padding: 0 10px;border: 1px solid #229805;border-radius: 30px;font-size: 12px;color: #229805;">
							预收</view>
						<view v-if="item.amount">{{item.amount }}</view>
						<view v-else>0.00</view>
					</view>
					<view class="money dis f-c a-c j-s " v-if="active==2">
						<view
							style="padding: 0 10px;border: 1px solid #FF5600;border-radius: 30px;font-size: 12px;color: #FF5600;">
							提现中</view>
						<view v-if="item.amount">{{item.amount }}</view>
						<view v-else>0.00</view>
					</view>
					<view class="money dis f-c a-c j-s" v-if="active==3">
						<view
							style="padding: 0 10px;border: 1px solid #0052FF;border-radius: 30px;font-size: 12px;color: #0052FF;">
							已提现
						</view>
						<view v-if="item.amount">{{item.amount }}</view>
						<view v-else>0.00</view>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in yushouList" :key="index" v-if="active==0 || active==1">
				<view class="list-item dis a-c j-s" @tap="yushouInfo(index)">
					<view class="content-box">
						<view class="des-box">
							<view class="tit">订单号：{{item.id }}</view>
							<view class="time">签单时间：{{ item.signingTime }}</view>
							<view class="time">车牌号：{{ item.licenseno }}</view>
						</view>
					</view>
					<view class="money dis f-c a-c j-s" v-if="active==0">
						<view
							style="padding: 0 10px;border: 1px solid #229805;border-radius: 30px;font-size: 12px;color: #229805;">
							预收</view>
						<view v-if="item.willAmount">{{item.willAmount }}</view>
						<view v-else>0.00</view>
					</view>
					<view class="money dis f-c a-c j-s" v-if="active==1">
						<view
							style="padding: 0 10px;border: 1px solid #229805;border-radius: 30px;font-size: 12px;color: #229805;">
							实收</view>
						<view v-if="item.willAmount">{{item.willAmount }}</view>
						<view v-else>0.00</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="statusShow" mode="bottom" height="500">
			<view class="term dis f-c j-s">
				<view style="padding: 0 16px;">
					<view class="title dis j-c a-c">
						<text>状态筛选</text>
					</view>
					<text>订单状态</text>
					<view class="dis  a-c  " style="margin-top: 10px;">
						<view class="status-data" :class="item.value==active? 'active':''"
							v-for="(item,index) in statusList" @tap.stop.prevent="statusclick(item)" :key="index">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="operateBtn dis ">
					<view class="cancel dis a-c j-c" @click="statusShow=false">
						取消
					</view>
					<view class="confirm dis a-c j-c" @click="stausSearch">
						确定
					</view>
				</view>
			</view>
		</u-popup>

		<u-picker v-model="timeShow" mode="time" :params="params" @confirm="startconfirm"></u-picker>
	</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 {
				statusShow: false, //状态筛选
				timeShow: false, //日期筛选
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
				},
				//状态筛选list
				statusLabel: "提现中",
				statusList: [{
						label: '预收',
						value: 0,
						searchType: 1,
						src: "/static/image/car-insure/state2.png"
					},
					{
						label: '实收',
						value: 1,
						searchType: 2,
						src: "/static/image/car-insure/state2.png"
					},
					{
						label: '提现中',
						value: 2,
						src: "/static/image/car-insure/state3.png"
					},
					{
						label: '已提现',
						value: 3,
						src: "/static/image/car-insure/state4.png"
					},
				],

				/* 时间筛选相关 */
				pageRequest: { //查询的默认条件
					Date: "",
					pageNum: 1,
					pageSize: 20,
				},
				/* 查询区域Start */
				/* 查询区域End */
				currentPage: 1, //当前页码
				pageSize: 5, //每页展示条数
				totalPages: 0, //总页数
				totalSize: 0, //总条数
				list: [],
				loadStatus: 0,
				"documentary": 0, //可提现手续费金额
				willDocumentary: 0,
				withdrawalDocumentary: 0,
				approvedDocumentary: 0,
				yushouIds: '',
				yushouList: [],
				active: 2,
				searchType: "",
			};
		},
		onLoad(params) {
			this.pageRequest.Date = this.transformTime();
		},
		computed: {
			...mapState(['userInfo']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(356);
				return `height: ${height}px`;
			}
		},
		onShow() {
			this.getCarAdvanceMoney();
			this.getOrdersList(1, 20);
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			async stausSearch() {
				switch (this.active) {
					case 0:
					case 1:
						let res = await this.$http.post('/sysUserAccount/getInsOrders', {
							ids: this.yushouIds,
							timeFiltering: this.pageRequest.Date,
							amountType: "2",
							searchType: this.searchType,
						});
						if (res.code == 200 && res.data) {
							this.yushouList = res.data.insFeeOrderNewList;
							this.statusShow = false;
						}
						break;
					case 2:
					case 3:
						await this.getOrdersList(1, 20);
						this.statusShow = false;
						break;
					default:
						break;
				}
			},
			async startconfirm(e) {
				this.pageRequest.Date = e.year + '-' + e.month + "-" + e.day;
				switch (this.active) {
					case 0:
					case 1:
						let res = await this.$http.post('/sysUserAccount/getInsOrders', {
							ids: this.yushouIds,
							timeFiltering: this.pageRequest.Date,
							amountType: "2",
							searchType: this.searchType,
						});
						if (res.code == 200 && res.data) {
							this.yushouList = res.data.insFeeOrderNewList;
						}
						break;
					case 2:
					case 3:
						await this.getOrdersList(1, 20);
						break;
				}
			},
			//状态筛选
			statusclick(e) {
				this.active = e.value;
				this.statusLabel = e.label;
				this.searchType = e.searchType;
			},
			async changeTab(tabIndex) {
				this.active = tabIndex;
				this.list = [];
				await this.getOrdersList(1, 20);
			},
			// 去提现
			async toWithdraw() {
				let res = await this.$http.post('/userBank/getUserBankList', {
					auditStatus: '1',
				});
				if (res.data.length) {
					this.navigate({
						url: `/pages/wallet/withdraw?amountStatus=2&amount=${this.documentary}`,
					}, "navigateTo", true)
				} else {
					uni.showToast({
						title: '暂无审核通过的银行卡，不可提现',
						duration: 3000,
						icon: "none"
					});
					// this.navigate({
					// 	url: '/pages/wallet/bindBank',
					// 	complete: () => {
					// 		setTimeout(() => {
					// 			uni.showToast({
					// 				title: '请先绑定银行卡',
					// 				duration: 3000,
					// 				icon: "none"
					// 			});
					// 		}, 500);

					// 	}
					// }, "navigateTo", true)
				}
			},
			// 预收账户金额查询 
			async getCarAdvanceMoney() {
				let res = await this.$http.get('/sysUserAccount/getSysAllAmount');
				if (res.code == 200 && res.data) {
					this.documentary = res.data.documentary; //可提现
					this.willDocumentary = res.data.willDocumentary; //预收
					this.withdrawalDocumentary = res.data.withdrawalDocumentary; //提现中
					this.approvedDocumentary = res.data.approvedDocumentary; //已提现
					this.yushouIds = res.data.ids;
				} else {
					this.willDocumentary = 0; //手续费
					this.withdrawalDocumentary = 0; //非跟单
					this.approvedDocumentary = 0; //佣金
				}
			},
			toBillInfo(index) {
				this.navigate({
					url: '/pages/wallet/billInfo',
					success: (res) => {
						res.eventChannel.emit("acceptData", {
							item: this.list[index],
							active: this.active,
						})
					}
				}, "navigateTo", true)
			},
			yushouInfo(index) {
				this.navigate({
						url: "/pages/wallet/billInfo1?companyId=" + this.yushouList[index].id,
					},
					"navigateTo", true);
			},
			//获取订单数据Start
			async getOrdersList(pageNo, pageSize) {
				var data = {
					"pageNum": pageNo,
					"pageSize": pageSize,
					"amountStatus": '2',
					[this.active == 2 ? "withdrawalTime" : "timeFiltering"]: this.pageRequest.Date,
					"auditingStatus": this.active,
				};
				let res = await this.$http.post('/sysAmountAuditing/queryAppPage', data);
				if (res.code == 200) {
					this.list = res.data.content;
				}
			},
			//获取订单数据End
			//当前时间
			transformTime(day) {
				var date = new Date();
				date.setFullYear(date.getFullYear());
				date.setTime(date.getTime());
				var strYear = date.getFullYear();
				var strDay = day ? date.getDate() - day : date.getDate();
				var strMonth = date.getMonth() + 1;
				if (strMonth < 10) {
					strMonth = "0" + strMonth;
				}
				if (strDay < 10) {
					strDay = "0" + strDay;
				}
				var datastr = strYear + "-" + strMonth + "-" + strDay;
				return datastr;
			},
			transformTime1(month) {
				var date = new Date();
				date.setFullYear(date.getFullYear());
				date.setTime(date.getTime());
				var strYear = date.getFullYear();
				var strDay = date.getDate();
				var strMonth = month ? (date.getMonth() + 1) - month : date.getMonth() + 1;
				if (strMonth < 10) {
					strMonth = "0" + strMonth;
				}

				var datastr = strYear + "-" + strMonth;
				console.log(datastr);
				return datastr;
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	page {
		padding: 12px 16px;
		background-color: #fff;
	}

	.term {

		height: 100%;

		.title {
			font-size: 14px;
			font-weight: bold;
			color: #232832;
			padding: 10px 0;
			border-bottom: 1px solid #f2f2f2;
		}

		>text {
			font-size: 13px;
			font-weight: bold;
			color: #232832;
			margin-bottom: 10px;
		}

		.status-data {
			padding: 4px 10px;
			box-sizing: border-box;
			margin-right: 10px;
			font-size: 12px;
			border: 1px solid #eee;
			cursor: pointer;
		}

		.operateBtn {
			font-weight: bold;
			font-size: 16px;

			.cancel {
				width: 50%;
				height: 46px;
				color: #0052FF;
				background-color: #EAEAEA;
			}

			.confirm {
				width: 50%;
				height: 46px;
				color: #fff;
				background-color: #0052FF;
			}
		}
	}


	.active {
		position: relative;
		background: rgba(0, 82, 255, 0.1);
		color: #0052FF;
		border: 1px solid #0052FF;
		font-weight: 700;
	}

	.queryCriteria {
		width: 100%;
		height: 32px;
		background: #FFFBF2;
		border-radius: 6px;
		margin-top: 26px;
		font-size: 14px;
		color: rgba(51, 51, 51, 0.8);

		text {
			margin-left: 5px;
		}
	}

	.white-box {
		width: 100%;
		height: 155px;
		background: linear-gradient(270deg, #F9D27B 0%, #E5B25F 100%);
		box-shadow: 0px 10px 20px 0px rgba(224, 179, 106, 0.4);
		border-radius: 6px;
		padding: 34rpx 40rpx;
		position: relative;
	}

	.palace {
		color: #fff;
		margin-top: 8px;

		.palace-grid {
			font-size: 12px;

			text:last-child {
				font-size: 14px;
				font-family: DIN, DIN;
				font-weight: bold;
			}

		}

	}

	.white-box .tx {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-content: center;
		border-bottom: 1px solid #f2f2f2;
	}

	.white-box .tx .tx-grid {
		box-sizing: border-box;
	}



	.tx-grid-comm-sign {
		width: 90px;
		height: 30px;
		background: rgba(255, 255, 255, 0.6);
		box-shadow: -1px 4px 4px 0px rgba(204, 149, 57, 0.2);
		border-radius: 14px 0px 0px 14px;
		font-weight: bold;
		position: absolute;
		right: 0;
		top: 44px;

		text {
			font-size: 14px;
			color: #CC9539;
			margin-left: 2px;
		}

	}

	.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: #fff;
	}

	.white-box .tx .tx-grid .tx-grid-text .money {
		font-size: 24px;
		color: #fff;
	}

	.white-box .tx .tx-grid .tx-grid-text .money-b {
		font-size: 28rpx;
	}


	.list-view {
		height: 100vh;
		overflow-y: auto;
		padding-top: 225px;
	}

	.list-item {
		width: 100%;
		padding: 30rpx 28rpx;
		box-sizing: border-box;
		background: #fff;
		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: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

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

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		padding: 12px 16px 0 16px;
		background-color: #ffffff;
	}

	/* 查询区域End */
</style>