partnerApp/pages/wallet/billInfo.vue

<template>
	<view class="pay-success" v-if="!loading">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="pay-section bg-1 dis f-c" :style="{background:style.back}">
			<image class="bg" src="/static/image/wallet/money-bg.png"></image>
			<text v-if="[2,3].includes(auditingStatus)"
				style="font-size: 32px;font-weight: 500;font-family: DIN, DIN;">{{orderDetail.amount.toFixed(2)}}</text>
			<text v-else
				style="font-size: 32px;font-weight: 500;font-family: DIN, DIN;">{{orderDetail.willAmount.toFixed(2)}}</text>
			<view class="tips-wrapper">
				<image :src="style.icon" mode="" style="width: 20px;height: 20px;margin-right: 5px;"></image>
				<view class="content">
					<text class="title" v-if="auditingStatus=='1'">预收金额！</text>
					<text class="title" v-if="auditingStatus=='2'">后台审核中</text>
					<text class="title" v-if="auditingStatus=='3'">提现成功</text>
				</view>
			</view>
		</view>
		<view class="pay-card" v-if="[2,3].includes(auditingStatus)">
			<view class="item dis j-s a-c" v-if='orderDetail.id'><text>交易编号：</text> <text>{{ orderDetail.id }}</text>
			</view>
			<view class="item dis j-s a-c" v-if='orderDetail.createTime'><text>申请时间：</text>
				<text>{{ orderDetail.createTime}}</text>
			</view>
			<view class="item dis j-s a-c" v-if="orderDetail.auditingStatus=='3' && orderDetail.paytime">
				<text>到账时间：</text>{{ orderDetail.paytime }}
			</view>
			<view class="item dis j-s a-c" v-if="orderDetail.bankNumber"><text>提现账户：</text>{{ orderDetail.bankNumber }}
			</view>
			<view class="item dis j-s a-c" v-if="orderDetail.bankAccount">
				<text>提现银行：</text>{{ orderDetail.bankAccount }}
			</view>
			<view class="item dis j-s a-c" v-if="orderDetail.applytype=='A'"><text>提现类型：</text>账户余额提现</view>
			<view class="item dis j-s a-c" v-if="orderDetail.applytype=='B'"><text>提现类型：</text>推广佣金提现</view>
		</view>
		<view class="pay-card" v-else>
			<view class="item dis j-s a-c" v-if="orderDetail.id"><text>订单编号：</text> <text>{{ orderDetail.id }}</text>
			</view>
			<view class="item dis j-s a-c" v-if="orderDetail.signingTime"><text>签单时间：</text>
				<text>{{ orderDetail.signingTime}}</text>
			</view>
			<view class="item dis j-s a-c" v-if="orderDetail.licenseno"><text>车牌号：</text>{{ orderDetail.licenseno }}
			</view>
		</view>
		<view class="btn-group dis j-c a-c" v-if="style.btncolor">
			<u-button type="primary" :style="{width:'100%',background:style.btncolor,color:'#fff'}"
				@click="toHome">返回首页</u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading: false,
				auditingStatus: "",
				orderId: '',
				orderDetail: {},
				style: {},
				StyleSheet: [{
						id: 1,
						title: "预收金额",
						back: 'linear-gradient( 270deg, #46CE24 0%, #229805 100%)',
						icon: "/static/image/bindBank/yushou.png",
						btncolor: '#229805',
					}, {
						id: 2,
						title: "后台审核中",
						back: 'linear-gradient( 270deg, #FFBA53 0%, #FF9900 100%)',
						icon: "/static/image/bindBank/shenhezhong.png",
						btncolor: '#FF9900',
					},
					{
						id: 3,
						title: "提现成功",
						back: 'linear-gradient( 270deg, #5187FA 0%, #0052FF 100%)',
						btncolor: '#0052FF',
						icon: "/static/image/bindBank/tixian.png"
					},

				]
			};
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptData事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptData', (data) => {
				console.log(data);
				if (!!data) {
					this.orderDetail = data.item; //车辆信息
					this.auditingStatus = data.active;
					let obj = this.StyleSheet.find(val => val.id == data.active);
					this.style = obj;
				}
			})
		},
		methods: {
			// 返回主页
			toHome() {
				this.navigate({
					url: '/pages/index/index'
				}, 'reLaunch', true)
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	page {
		background-color: #f5f5f5;
	}

	.bg-1 {
		color: #FFFFFF;
	}

	.pay-success {
		.pay-section {
			height: 400upx;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				height: 60vw;
			}

			.tips-wrapper {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;

				.iconfont {
					font-size: 110upx;
					margin-right: 20upx;
				}

				.content {
					.title {
						font-size: 36upx;
					}

					.tip {
						font-size: 26upx;
					}
				}
			}
		}

		.pay-card {
			width: 90%;
			height: auto;
			background-color: #fff;
			border-radius: 12upx;
			margin: -80upx 5% 0;
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px #DAE3F4;
			border-radius: 6px;
			padding: 0 10px;

			.pay-card-money {
				text-align: center;
				font-size: 44upx;
				padding: 20upx 0;
				color: #000;
				font-weight: 500;
				border-bottom: 1upx solid rgba(0, 0, 0, 0.05);
			}

			.item {
				padding: 10px 0;
				color: #232832;
				border-bottom: 1px solid #f2f2f2;
			}
		}

		.btn-group {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 62px;
			background: #FFFFFF;
			box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.05);
			padding: 16px;

			.confirm-btn {
				width: 100%;
				height: 100%;

			}
		}
	}
</style>