partnerApp/pages/institutional/wallet.vue

<template>
	<view>
		<!-- view class="headers ">
			<view class="dis a-c j-start ">
				<u-icon name="arrow-left" style="color: #fff;" size="40" @tap="back"></u-icon>
				<text style="margin: auto;">钱包</text>
			</view>
		</view> -->

		<view class="amount-money">
			<view class="team dis" style="height: 11vh;">
				<image src="/static/img/touxiang.png"></image>
				<view style="color:#fff">
					<view>{{totalList.userName}}</view>
					<view>{{totalList.userId}}</view>
				</view>
			</view>
			<view class="amount-total" style="margin:12px 15px">
				<view style="font-size: 13px;">总金额</view>
				<view class="dis a-c j-s">
					<view class="amount-tixian">
						<text>￥</text>
						<text>{{totalList.cashFee}}</text>
					</view>
					<view>
						<u-button class="view-now" @click="toWithdraw">提现</u-button>
					</view>
				</view>
				<view class="dis total">
					<view>贡献总保费</view>
					<view>抽成比例</view>
				</view>
				<view class="dis total" style="color: #343EEF ;">
					<view>￥<text style="font-size: 20px">{{totalList.sumpremium}}</text></view>
					<view text style="font-size: 20px">{{totalList.proportional}}%</view>
				</view>
			</view>
			<view class="withdrawal">
				<view class="withdrawal-background ">
					<view class="dis j-s" style="margin:5px 0 10px 0;font-weight: 700;font-size: 14px;">
						<text>提现记录</text>
						<!-- <view class="statisticsDate dis a-c ">
							<view style="width: 180upx;flex-shrink: 0;" class="dis a-c j-c">
								<picker style="padding: 0;margin-right: 5px;" @change="bindPickerChange"
									:value="queryTimeTypeIndex" :range="queryTimeTypeArray">
									<view>{{queryTimeTypeArray[queryTimeTypeIndex]}}</view>
								</picker>
								<u-icon name="arrow-down-fill" color="#333" size="16"></u-icon>
							</view>
							<view class="d-flex a-center j-center flex-1" @click="onShowDatePicker">
								{{dateRange[0].replace('/','-')}} -
								{{dateRange[1]}}
							</view>
							<view class="d-flex a-center j-center" style="width: 60upx;flex-shrink: 0;">
								<view class="icon iconfont icon-search-1-copy"></view>
							</view>
						</view> -->
					</view>
					<view class="withdrawal-con">
						<view style="border-bottom: 1px solid #ccc;padding: 10px 0;" v-for="val in withdrawalList"
							:key="val.number">
							<view class="dis j-s ">
								<view class="dis " style="line-height: normal;">
									<image v-if="val.status=='1'" class="Withdrawal-icon"
										src="/static/icon/chenggong.png"></image>
									<image v-if="val.status=='0'" class="Withdrawal-icon"
										src="/static/icon/tixianzhong.png"></image>
									<image v-if="val.status=='2'" class="Withdrawal-icon" src="/static/icon/bohui.png">
									</image>
									<text>提现-{{ val.status=='0'?'提现中':val.status=='1'?'成功':val.status=='2'?'驳回':'无' }}</text>
								</view>
								<text style="font-weight: 700;">-{{val.cashFee}}</text>
							</view>
							<view>交易号：{{val.number}}</view>
							<view class="dis j-s">
								<text style="color: rgba(51,51,51,0.8);">{{val.createTime}}</text>
								<text class="view" @click="detail(val.id)">查看详情</text>
							</view>
						</view>
						<o-empty v-if="withdrawalList.length==0" height="20vh" />

					</view>
				</view>
			</view>
		</view>
		<mx-date-picker :show="showDatePicker" type="range" :value="dateRange" :show-tips="true" @confirm="onSelected"
			@cancel="onSelected" />
	</view>
</template>

<script>
	import MxDatePicker from "@/components/modules/tools/team/mx-datepicker/mx-datepicker.vue";
	import {
		mapState,
	} from "vuex"
	export default {
		data() {
			return {
				totalList: {},
				queryTimeTypeArray: ['本月查询', '本年查询', '自定义查询'],
				queryTimeTypeIndex: 0,
				dateRange: [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-01', new Date()
					.getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
				],
				showDatePicker: false,
				teamTabIndex: 0,
				withdrawalList: []
			}
		},
		computed: {
			...mapState(['userInfo', "userCheckInfo", ]),
		},
		components: {
			MxDatePicker
		},
		async onLoad() {
			this.queryData()
			this.WithdrawalqueryData()
		},
		methods: {
			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
				// uni.navigateTo({
				// 	url: "/pages/index/index"
				// })

			},
			detail(id) {
				uni.navigateTo({
					url: "/pages/institutional/walletDetail?id=" + id
				})
			},
			async queryData() {
				let res = await this.$http.get('/agency/queryExtractFee');
				if (res.code == '200') {
					this.totalList = res.data
				}
			},
			async WithdrawalqueryData() {
				let params = {
					// "endTime": this.dateRange[1],
					// "beginTime": this.dateRange[0],
				}
				// let res = await this.$http.post('/sysAgencyFeeApproval/queryOperateInfo', params);
				// if (res.code == '200') {
				// 	this.withdrawalList=res.data
				// }
			},
			onShowDatePicker() { //显示
				this.showDatePicker = true;
			},
			onSelected(e) { //选择
				this.showDatePicker = false;
				if (e) {
					this.dateRange = e.value;
					this.WithdrawalqueryData();
				}
			},
			bindPickerChange: function(e) {
				this.queryTimeTypeIndex = e.target.value
				if (e.target.value == 0) {
					this.dateRange = [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + '01',
						new Date()
						.getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
					];
					this.WithdrawalqueryData();
				}
				if (e.target.value == 1) {
					this.dateRange = [new Date().getFullYear() + '-01-01', new Date().getFullYear() + '-12-31'];
					this.WithdrawalqueryData();
				}
				if (e.target.value == 2) {
					this.showDatePicker = true;
				}
			},
			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.totalList.cashFee}`,
					}, "navigateTo", true)
				} else {
					uni.showToast({
						title: '暂无审核通过的银行卡，不可提现',
						duration: 3000,
						icon: "none"
					});

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.amount-money {
		background-color: #343EEF;
		background-image: url(/static/img/group.png);
		background-repeat: no-repeat;
		background-size: 50%;
		background-position: right top;
	}

	.team {
		padding: 15px 20px;

		image {
			width: 50px;
			height: 50px;
			margin-right: 20px;
		}
	}

	.amount-total {
		background: linear-gradient(90deg, #E6E9FE 0%, #F6F7FF 50%, #E4E7FE 100%);
		border-radius: 12px 12px 12px 12px;
		padding: 13px
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999999;
		padding-top: 15px;
		height: auto;
		color: #fff;
		background: #343EEF;

		text {
			font-size: 18px;
			font-weight: bold;
		}
	}

	.amount-tixian {
		color: #343EEF;
	}

	.amount-tixian>text:last-child {
		font-weight: bold;
		font-size: 34px;
		background: linear-gradient(0deg, #3447EF 0%, #3492EF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.view-now {
		background: linear-gradient(90deg, #6D75F3 0%, #343EEF 100%);
		color: #fff;
		font-size: 13px;
	}

	.total>view {
		width: 50%;
	}

	.statisticsDate {
		color: rgba(51, 51, 51, 0.8);
		height: 34px;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 6px;
	}

	.withdrawal {
		height: 50vh;
		border-radius: 40px 40px 0px 0px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		background-color: #fff;
		padding: 20px;
	}

	.withdrawal-background {
		padding: 5px;
		background: #E7E8FD;
		border-radius: 12px 12px 12px 12px;
	}

	.withdrawal-con {
		background: #fff;
		border-radius: 12px 12px 12px 12px;
		padding: 0 10px;
		height: 40vh;
		overflow-y: auto;
	}

	.view {
		background: linear-gradient(90deg, #7E99D1 0%, #4F78B1 100%);
		border-radius: 20px 20px 20px 20px;
		padding: 3px 10px;
		font-size: 11px;
		color: #fff;
	}

	.Withdrawal-icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}
</style>