qingyuan/pages/subPages/dealer/withdraw/withdrawrecord.vue

<template>
	<view class="container">
		<far-bottom></far-bottom>
		<view class="container-box b-f p-r">
			<view class="header-withdraw-detail p-r">
				<view class="withdraw-title f-28 col-9 m-btm20 t-c">提现金额</view>
				<view class="col-3 f-48 t-c"><text class="f-36">￥</text>{{data.sapplymoney}}</view>
				<view class="cut-split-bf"></view>
				<view class="cut-split-af"></view>
			</view>
			<view class="content-course-box dis-flex flex-x-around">
				<view class="course-progress flex-box p-r">
					<view class="col-6 f-28">当前状态</view>
					<view class="course-progress-box">
						<view class="cut-dot p-r">
							<view class="cut-dot-circle cut-dot-circle-1"></view>
							<view class="cut-dot-circle cut-dot-circle-2"></view>
							<view class="iconfont" :class="data.status_title==='待审核'||'待打款'?'cut-dot-3 icon-jingshi':(data.status_title==='已完成'?'cut-dot-3 cut-dot-3-success icon-chenggong':'cut-dot-3 icon-shibai')"></view>
						</view>
					</view>
				</view>
				<view class="content-course-main flex-box">
					<view class="course-label-1">
						<view class="label-title col-9 f-28 m-btm10">开始提现</view>
						<view class="label-title col-9 f-24">{{data.applytime}}</view>
					</view>
					<view class="course-label-2">
						<view class="label-title col-9 f-28">系统审核中</view>
					</view>
					<view class="course-label-3">
						<view class="label-title col-9 f-28 m-btm10">{{data.status_title}}<text class="jinshi-icon iconfont icon-info"></text></view>
						<!-- <view class="label-title col-9 f-24">配置了留存额度，且留存额度大于等于基本户余额</view> -->
					</view>
				</view>
			</view>
			<view class="content-detals">
				<view class="dis-flex flex-y-center m-btm36">
					<view class="col-9 f-28 m-right50">提现时间</view>
					<view class="col-3 f-24">{{data.applytime}}</view>
				</view>
				<view class="dis-flex flex-y-center m-btm36">
					<view class="col-9 f-28 m-right50">到账类型</view>
					<view class="col-3 f-24">{{data.payment_type==="1"?(examineing==0?'支付宝':'渠道1'):(data.payment_type==="2"?'微信零钱':(data.payment_type==="3"?(examineing==0?'银行卡':'渠道2'):'余额'))}}</view>
				</view>
				<view class="dis-flex flex-y-center details-3">
					<view class="col-9 f-28 m-right50">手续费</view>
					<view class="col-3 f-24">￥{{data.spercentmoney}}</view>
				</view>
				<view class="dis-flex flex-y-center">
					<view class="col-9 f-28 m-right50">到账金额</view>
					<view class="col-3 f-24">￥{{data.sgetmoney}}</view>
				</view>
			</view>
			<view class="record_btmbg" :style="{'background-image':'url('+imageRoot+'record_btmbg.png)'}"></view>
		</view>
	</view>
</template>
<script>
	import App from '@/common/js/app.js'
	export default {
		data() {
			return {
				data: {},
				examineing:1
			}
		},
		onLoad(option) {
			let TextSubstitution = uni.getStorageSync('TextSubstitution');
		this.examineing = TextSubstitution.examineing || 0;
			this.getDrawInfo(option.draw_id)
		},
		components: {

		},
		computed: {

		},
		onShow() {

		},
		mounted() {

		},
		methods: {
			getDrawInfo(detail_id = 163) {
				let _this = this,
					requestData = {
						detail_id
					};
				App._post_form('&p=distribution&do=detailsOfWithdrawal', requestData, res => {
					_this.setData(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
	}

	.container-box {
		margin: 0 30upx;
		padding: 30upx 0;
		border-radius: 10upx 10upx 0 0;
		box-shadow: 0 0 12upx 0 rgba(121, 121, 121, 0.1);

		//头部
		.header-withdraw-detail {
			margin: 0 30upx;
			padding: 50upx 0 80upx;
			border-bottom: 1px dotted #EEEEEE;

			.cut-split-bf {
				position: absolute;
				left: -7%;
				bottom: -15upx;
				width: 30upx;
				height: 30upx;
				border-radius: 50%;
				background-color: #F7F7F7;
			}

			.cut-split-af {
				position: absolute;
				right: -7%;
				bottom: -15upx;
				width: 30upx;
				height: 30upx;
				border-radius: 50%;
				background-color: #F7F7F7;
			}
		}

		//过程
		.content-course-box {
			padding: 50upx 0;
			margin: 0 30upx;
			border-bottom: 1px solid #EEEEEE;

			.course-progress {
				.course-progress-box {
					position: absolute;
					right: 20%;
					top: 2%;

					.cut-dot {
						width: 1px;
						height: 354upx;
						background-color: #FFC24B;

						.cut-dot-circle {
							position: absolute;
							left: -10upx;
							width: 20upx;
							height: 20upx;
							background-color: #FFC24B;
							border-radius: 50%
						}

						.cut-dot-circle-1 {
							top: 0;
						}

						.cut-dot-circle-2 {
							top: 52%;
						}

						.cut-dot-3 {
							position: absolute;
							font-size: 44upx;
							left: -22upx;
							color: #FF5E5E;
							bottom: 0;
						}
						.cut-dot-3-success{
							color: rgb(0, 212, 44)
						}
					}
				}
			}

			.content-course-main {
				.course-label-2 {
					margin: 100upx 0;
				}

				.course-label-3 {
					.jinshi-icon {
						font-size: 24upx;
						margin-left: 20upx;
					}
				}
			}
		}

		// 详情
		.content-detals {
			padding: 50upx 30upx;

			.details-3 {
				margin: 0 0 36upx 28upx;
			}
		}

		//底部背景
		.record_btmbg {
			width: 100%;
			height: 30upx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: -16upx;
			background-size: 100% 30upx;
			background-repeat: no-repeat;
		}
	}
</style>