
<style lang="scss">
	@import '@/static/scss/global.scss';
	.top_wrapper {
		padding: 30rpx;
		margin-bottom: 20rpx;
		.money {
			font-size: 50rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}
		.info_item {
			display: flex;
			margin-top: 20rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e6e6e6;
		}
		.image_box {
			flex-wrap: wrap;
			.image {
				margin: 10rpx;
			}
		}
	}
</style>
<template>
	<view>
		<view class="top_wrapper u-bg-w">
			<u--text v-if="detail.status == 0" size="30rpx" type="info" text="审核中"></u--text>
			<u--text v-if="detail.status == 1" size="30rpx" type="primary" text="审核通过">打款中</u--text>
			<u--text v-if="detail.status == 2" size="30rpx" type="error" text="已驳回">已驳回</u--text>
			<u--text v-if="detail.status == 3" size="30rpx" type="success" text="已驳回">已打款</u--text>
			<view class="money">
				¥ {{detail.money}}
			</view>
			
		</view>
		<view class="top_wrapper u-bg-w">
			<u--text v-if="detail.audit == 0" size="30rpx" type="info" text="充值信息"></u--text>
			<view class="info_item">
				<u--text  size="30rpx" type="info" text="持卡人姓名"></u--text>
				{{ detail.cardholderName }}
			</view>
			<view class="info_item">
				<u--text  size="30rpx" type="info" text="银行卡号"></u--text>
				{{ detail.number }}
			</view>
			<view class="info_item">
				<u--text  size="30rpx" type="info" text="流水号"></u--text>
				{{ detail.tradeNo }}
			</view>
			<view class="info_item" v-if="detail.status == 2">
				<u--text  size="30rpx" type="info" text="驳回原因"></u--text>
				{{ detail.remark }}
			</view>
			<view class="info_item" style="display: block;" v-if="detail.status == 3">
				<u--text  size="30rpx" type="info" text="记录凭证"></u--text>
				<view class="flex1 image_box">
					<!-- detail.paymentVoucher.split(',') -->
					<u--image class="image" v-for="(item, index) in detail.paymentVoucher.split(',')" @click="handlerPreview(item, index)" width="100" height="100" :src="detail.credentials" mode=""></u--image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getDrawRecordDetail } from '@/api/system/user.js'
	export default {
		data() {
			return {
				detail: {}
			};
		},
		onLoad (e) {
			this.init(e.id)
		},
		methods: {
			async init (id) {
				let res = await getDrawRecordDetail(id);
				let { code, data } = res;
				data.number = data.bankCardNumber.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g, "$1 ")
				if (code == 200) this.detail = data;
			},
			handlerPreview (item, index) {
				uni.previewImage({
					urls: item.paymentVoucher.split(','),
					current: index
				})
			}
		}
	}
</script>

