zhapp/pages/wallet/billDetails.vue

<template>
	<view class="page">
		<view class="billView dis f-c a-c ">
			<!-- 账单信息 -->
			<view class="header dis f-c a-c">
				<image class="bankimage" src="/static/image/zgcx.png" mode=""></image>
				<!-- 提现银行 -->
				<text class="bankName mt-1 mb-2">{{info.bankName}}</text>
				<!-- 提现金额 -->
				<text class="sum">{{info.amount}}</text>
				<!-- 提现状态 -->
				<text class="status">{{statusMap(info.status)}}</text>
			</view>
			<view class="item-cell">
				<view class="cell dis j-s">
					<text class="title">创建时间</text>
					<view class="data font-weight">
						{{info.createTime}}
					</view>
				</view>
				<view class="cell dis j-s">
					<text class="title">提现账号</text>
					<view class="data font-weight" v-if="info.bankCardNum">
						{{info.bankName}}（{{info.bankCardNum.slice(-4)}}）{{info.userName}}
					</view>
				</view>
				<view class="cell dis j-s">
					<text class="title">处理进度</text>
					<view class="data">
						<uni-stepBar :stepList="info.stepList"></uni-stepBar>
					</view>
				</view>
				<view class="cell dis j-s">
					<text class="title">审核说明</text>
					<view class="data font-weight">
						{{info.status==0?'后台人员审核中，请耐心等待':info.status==1?'金额已入账，如有疑问，请联系相关工作人员':info.rejectReason}}
					</view>
				</view>
				<view class="cell dis j-s">
					<text class="title">付款凭证</text>
					<view class="data">
						<u-album :singleSize="240" :urls="urls1" keyName="src2"></u-album>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepList: [{
					title: '提交提现申请', // 步骤标题
					show: false, // 状态：true-成功, false-失败, null-未完成
					time: '2025.02.02 12:22:00'
				}, {
					title: '财务人员审核', // 步骤标题
					show: true, // 状态：true-成功, false-失败, null-未完成
					time: '2025.02.02 12:22:00'
				}, {
					title: '财务人员审核', // 步骤标题
					show: false, // 状态：true-成功, false-失败, null-未完成
					time: '',
					content: '' //驳回原因
				}],
				urls1: [{
					src2: "https://uviewui.com/album/1.jpg",
				}, ],
			}
		},
		onShow() {

		},
		onLoad(options) {
			if (options) {
				this.info = JSON.parse(options.info);
				console.log(this.info)
				this.urls1[0].src2 = this.info.paymentVoucher

			}
		},
		methods: {
			statusMap(type) {
				let MaP = [
					'待审核',
					'审核通过',
					'审核驳回',
				]
				return MaP[type]
			}
		}
	}
</script>

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

	.billView {
		padding: 50rpx 40rpx;
		box-sizing: border-box;

		.header {
			.bankimage {
				width: 100rpx;
				height: 100rpx;
			}

			.bankName {
				font-size: 30rpx;
				color: #666;
			}

			.sum {
				font-size: 60rpx;
				color: #333;
				font-weight: bold;
			}

			.status {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.item-cell {
			width: 100%;
			margin-top: 80rpx;

			.cell {
				margin-bottom: 48rpx;
			}

			.title {
				font-size: 30rpx;
				color: #666;
			}

			.data {
				flex: 1;
				margin-left: 30rpx;
				font-size: 30rpx;
				color: #333;
			}
		}
	}
</style>