sct/pagesT/Distribution/Application.vue

<template>
	<!-- 提现详情 -->
	<view class="application">
		<view class="application_e">
			<text class="num">+{{ detail_data.money || 0 }}</text>
			<text class="examine">
				{{
					detail_data.auditStatus === 1
						? '待审核'
						: detail_data.auditStatus === 2
						? '打款成功'
						: detail_data.auditStatus === 3
						? '无效'
						: detail_data.auditStatus === 4
						? '待打款'
						: ''
				}}
			</text>
		</view>
		<view class="application_t">
			<view class="application_type">
				<text class="application_txt">提现类型</text>
				<view style="float: right;">
					<text class="ibonfont ibonweixinzhifu application_img" v-if="detail_data.type === 1"></text>
					<text class="ibonfont application_img ibonumidd17" v-if="detail_data.type === 2"></text>
					<text class="ibonfont application_img ibonhuodaofukuan" v-if="detail_data.type === 3"></text>
					<text class="application_name">{{ detail_data.type === 1 ? '微信钱包' : detail_data.type === 2 ? '支付宝' : detail_data.type === 3 ? '银行卡' : '' }}</text>
				</view>
			</view>
			<view style="margin:30upx 0 0 60upx;">
				<u-time-line>
					<u-time-line-item node-top="2">
						<template v-slot:node>
							<view class="u-node" :style="{ background: detail_data.auditStatus >= 1 ? '#19be6b' : '#d0d0d0' }">
								<u-icon name="checkbox-mark" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view class="u-line-box" :style="{ color: detail_data.auditStatus >= 1 ? '#333' : '#999999' }">
								<view class="u-order-desc">申请时间</view>
								<view class="u-order-time">{{ $_utils.formatDate(detail_data.createTime) }}</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item node-top="2">
						<template v-slot:node>
							<view class="u-node" :style="{ background: [2, 4].includes(detail_data.auditStatus) ? '#19be6b' : '#d0d0d0' }">
								<u-icon name="checkbox-mark" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view class="u-line-box" :style="{ color: [2, 4].includes(detail_data.auditStatus) ? '#333' : '#999999' }">
								<view class="u-order-desc">审核时间</view>
								<view class="u-order-time" v-if="detail_data.auditTime">{{ $_utils.formatDate(detail_data.auditTime) }}</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item node-top="2">
						<template v-slot:node>
							<view class="u-node" :style="{ background: detail_data.auditStatus === 2 ? '#19be6b' : '#d0d0d0' }">
								<u-icon name="checkbox-mark" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view class="u-line-box" :style="{ color: detail_data.auditStatus === 2 ? '#333' : '#999999' }">
								<view class="u-order-desc">完成打款</view>
								<view class="u-order-time" v-if="detail_data.payTime">{{ $_utils.formatDate(detail_data.payTime) }}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			withdrawals_id: 0,
			isLoding: false,
			detail_data: {}
		};
	},
	onLoad(options) {
		this.withdrawals_id = options.id;
	},
	onShow() {
		this.CommissionWithdrawalsDetail();
	},
	methods: {
		CommissionWithdrawalsDetail() {
			this.$u.api.CommissionWithdrawalsDetail(this.withdrawals_id).then(res=>{
				this.detail_data = res.data;
			})

		}
	}
};
</script>

<style lang="scss">
body {
	background-color: $page-color-base;
}

.application {
	.application_e {
		text-align: center;
		height: 300upx;
		background-color: #ffffff;

		.num {
			font-weight: bold;
			font-size: 80upx;
			display: block;
			padding-top: 80upx;
		}

		.examine {
			color: #fd463e;
			font-size: 30upx;
			padding-top: 40upx;
			display: block;
		}
	}

	.application_t {
		margin-top: 20upx;
		background-color: #ffffff;
		height: 400upx;

		.application_type {
			height: 80upx;
			line-height: 80upx;
			border-bottom: 1px solid $page-color-base;
			font-size: 28upx;

			.application_txt {
				font-size: 26upx;
				padding-left: 20upx;
				float: left;
			}

			.application_img {
				margin-right: 10upx;
				font-size: 46;
				vertical-align: middle;
			}
			.ibonweixinzhifu {
				color: #04be02;
			}
			.ibonumidd17 {
				color: #108ee9;
			}
			.ibonhuodaofukuan {
				color: #f2b844;
			}
			.application_name {
				margin-right: 20upx;
			}
		}

		.u-node {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		.u-line-box {
			color: #999999;
			position: relative;
		}
		.u-order-desc {
			font-size: 28rpx;
			margin-bottom: 26rpx;
		}

		.u-order-time {
			font-size: 26rpx;
			float: right;
			margin-right: 20upx;
			position: absolute;
			top: 10upx;
			right: 20upx;
		}
	}
}
</style>