partnerApp/pages/institutional/walletDetail.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view style="z-index: 99;" class="flexd">
			<view class="search dis  a-c j-s">
				<u-icon name="arrow-left" size="40" @tap="back"></u-icon>
				<text class="center">账单详情</text>
			</view>
		</view>
		<view class="" style="padding:100px 16px 16px;">
			<view class="assets dis f-c j-s" >
				<view class="dis f-c j-s a-c">  
					<text>提现到银行卡</text>
					<text>￥{{MoneyData.cashFee}}</text>
					<!-- <text>{{MoneyData.status}}</text> -->
				</view>
				<view class="yushou dis f-c">
					<u-steps :list="numList"  :current="numList.length" direction="column" mode="number"
						active-color="#13C15A">
					</u-steps>
				</view>
			</view>
			<view class="assets1 dis f-c j-s">
					<view class="dis j-s a-c" v-if="MoneyData.number">
						<text>交易编号：</text>
						<text>{{MoneyData.number}}</text>
					</view>
					<view class="dis j-s a-c" v-if="MoneyData.remark && numList.length==2 && numList[1].processingStatusName=='2'">
						<text>驳回原因：</text>
						<text>{{MoneyData.remark}}</text>
					</view>
					<view class="dis j-s a-c" v-if="MoneyData.createTime">
						<text>申请时间：</text>
						<text>{{MoneyData.createTime}}</text>
					</view>
					<view class="dis j-s a-c" v-if="MoneyData.auditTime">
						<text>到账时间：</text>
						<text>{{MoneyData.auditTime}}</text>
					</view>
					<view class="dis j-s a-c" v-if="MoneyData.bankNumber">
						<text>到账账户：</text>
						<text>{{MoneyData.bankNumber}}</text>
					</view>
					<view class="dis j-s a-c" v-if="MoneyData.bankAccount">
						<text>到账银行：</text>
						<text>{{MoneyData.bankAccount}}</text>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				numList: [],
				MoneyData: {},
				promotionData: {},
				refundData: {},
				trajectoryLength: 0,
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {

		},
		async onLoad(params) {
			if (params.id) {
                    let res = await this.$http.post('/sysAgencyFeeApproval/operateInfo/' + params.id);
                    this.MoneyData = res.data;
                    if(res.data.statusList.length==2){
                        if(res.data.statusList[1].processingStatusName=='2'){
                            res.data.statusList[1].processingStatus='3'
                        }
                    }
                    res.data.statusList.forEach(element => {
                        switch (element.processingStatusName) {
                            case '0':
                            element.processingStatusName='提现申请'
                                break;
                                case '1':
                            element.processingStatusName='提现成功'
                                break;
                                case '2':
                            element.processingStatusName='提现驳回'
                                break;
                            default:
                                break;
                        }
                    });
                    this.numList = res.data.statusList;
                    // const filteredArray = this.numList.filter(item => item.processingStatusFlag === true).length -
                    //     1;
                    // this.trajectoryLength = filteredArray;

			}
		},
		onShow() {},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},


		}
	}
</script>

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

	page {
		background: #F8FAFE;
	}

	.flexd {
		position: fixed;
		left: 0;
		right: 0;
	}

	.assets1 {
		width: 100%;
		height: auto;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%);
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;

		>view {
			border-bottom: 1px solid #f2f2f2;
			font-size: 14px;
			color: #232832;
			padding: 10px;
		}
	}

	.assets {
		width: 100%;
		height: auto;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%);
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		
		border-radius: 10px;
		border: 1px solid #FFFFFF;
		padding: 0 12px;
		margin-bottom: 12px;

		>view:nth-child(1) {
			// border-bottom: 1px solid #CFCFCF;
			padding: 16px 0;
			color: #333;

			text:nth-child(1) {
				font-size: 14px;
			}

			text:nth-child(2) {
				font-size: 30px;
				font-weight: bold;
				margin: 6px 0;
			}
		}

		.yushou {
			padding: 8px;


			image {
				width: 20px;
				height: 20px;
				margin-top: 5px;
			}
		}
	}

	/* 银行卡信息Start */

	.search {
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 50px 16px 30px;
		height: auto;
		background: #F8FAFE;
		background-image: url("/static/image/wallet/qianbao.png");
		background-size: 100% 100%;
		position: relative;

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

		.bank {
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}

		.center {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}

		image {
			width: 22px;
			height: 22px;
			margin-left: 20px;
		}
	}
</style>